feat: show contributors

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;

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;