From 0d13c993ad4f778381493001addb8b3368414894 Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Thu, 30 Jul 2020 15:39:14 +0900
Subject: [PATCH] feat: show contributors

---
 package.json                    |  1 +
 src/components/Contributors.tsx | 71 +++++++++++++++++++++++++++++++++
 src/components/Footer.tsx       | 19 +++++++--
 src/pages/Home.tsx              |  1 -
 src/util/css.ts                 |  3 +-
 yarn.lock                       | 12 ++++++
 6 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Contributors.tsx

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"