diff --git a/package.json b/package.json index 362818b..bf1f323 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-spinners": "^0.9.0", "react-toastify": "^6.0.8", "styled-components": "^5.1.1", + "swr": "^0.2.3", "validator": "^13.1.0", "whois-json": "^2.0.4" }, diff --git a/src/components/Contributors.tsx b/src/components/Contributors.tsx new file mode 100644 index 0000000..5970db6 --- /dev/null +++ b/src/components/Contributors.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import styled from 'styled-components'; +import useSWR from 'swr'; + +export interface Contributors { + projectName: string; + projectOwner: string; + repoType: string; + repoHost: string; + files: string[]; + imageSize: number; + commit: boolean; + commitConvention: string; + contributors: Contributor[]; + contributorsPerLine: number; + skipCi: boolean; +} + +export interface Contributor { + login: string; + name: string; + avatar_url: string; + profile: string; + contributions: string[]; +} + +const fetcher = (url: string) => fetch(url).then((r) => r.json()); + +const Contributors: React.FC = () => { + const { data } = useSWR<Contributors>( + 'https://raw.githubusercontent.com/uetchy/namae/master/.all-contributorsrc', + fetcher, + ); + + if (!data) return <Container>Loading</Container>; + + return ( + <Container> + {data.contributors.map((contributor) => ( + <Item key={contributor.login}> + <a + href={contributor.profile} + target="_blank" + rel="noopener noreferrer" + > + <Avatar src={contributor.avatar_url} alt={contributor.name} /> + </a> + </Item> + ))} + </Container> + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: row; +`; + +const Item = styled.div` + margin-left: 10px; + :first-child { + margin-left: 0; + } +`; + +const avatarSize = 32; +const Avatar = styled.img.attrs({ width: avatarSize, height: avatarSize })` + border-radius: ${avatarSize}px; +`; + +export default Contributors; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 4d92c35..219e742 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -5,7 +5,8 @@ import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa'; import { GoHeart } from 'react-icons/go'; import styled from 'styled-components'; import { Section } from '../theme'; -import { mobile } from '../util/css'; +import { mobile, tablet } from '../util/css'; +import Contributors from '../components/Contributors'; const Footer: React.FC = () => { const { t } = useTranslation(); @@ -64,6 +65,10 @@ const Footer: React.FC = () => { </OutboundLink> </li> </ul> + <Box> + <Subtitle>Contributors</Subtitle> + <Contributors /> + </Box> </Pane> <Pane> @@ -153,7 +158,7 @@ const Container = styled(Section)` } } - ${mobile} { + ${tablet} { flex-direction: column; } `; @@ -161,15 +166,23 @@ const Container = styled(Section)` const Pane = styled.div` font-size: 1rem; - ${mobile} { + ${tablet} { margin-bottom: 50px; } `; +const Box = styled.div` + margin: 15px 0; +`; + const Title = styled.h3` margin-bottom: 15px; `; +const Subtitle = styled.h4` + margin-bottom: 12px; +`; + const LangBox = styled.div` line-height: 1em; font-size: 2rem; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 8f6bd14..0e9e3b7 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'; import { Content, Header } from '../theme'; import Form from '../components/Form'; import Welcome from '../components/Welcome'; - export default function Home() { const { t } = useTranslation(); diff --git a/src/util/css.ts b/src/util/css.ts index fc5e8f7..469e3b7 100644 --- a/src/util/css.ts +++ b/src/util/css.ts @@ -1,6 +1,7 @@ -import {keyframes} from 'styled-components'; +import { keyframes } from 'styled-components'; export const mobile = '@media screen and (max-width: 800px)'; +export const tablet = '@media screen and (max-width: 1200px)'; export const slideUp = keyframes` from { diff --git a/yarn.lock b/yarn.lock index c030589..d53c2df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5049,6 +5049,11 @@ extsprintf@^1.2.0: resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= +fast-deep-equal@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" + integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk= + fast-deep-equal@^3.1.1: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" @@ -11511,6 +11516,13 @@ swap-case@^1.1.0: lower-case "^1.1.1" upper-case "^1.1.1" +swr@^0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/swr/-/swr-0.2.3.tgz#e0fb260d27f12fafa2388312083368f45127480d" + integrity sha512-JhuuD5ojqgjAQpZAhoPBd8Di0Mr1+ykByVKuRJdtKaxkUX/y8kMACWKkLgLQc8pcDOKEAnbIreNjU7HfqI9nHQ== + dependencies: + fast-deep-equal "2.0.1" + symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"