From 0d13c993ad4f778381493001addb8b3368414894 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi 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( + 'https://raw.githubusercontent.com/uetchy/namae/master/.all-contributorsrc', + fetcher, + ); + + if (!data) return Loading; + + return ( + + {data.contributors.map((contributor) => ( + + + + + + ))} + + ); +}; + +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 = () => { + + Contributors + + @@ -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"