mirror of
https://github.com/uetchy/namae.git
synced 2025-03-16 20:20:38 +09:00
feat: show contributors
This commit is contained in:
parent
0d632a8eb2
commit
0d13c993ad
@ -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"
|
||||
},
|
||||
|
71
src/components/Contributors.tsx
Normal file
71
src/components/Contributors.tsx
Normal file
@ -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;
|
@ -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;
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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 {
|
||||
|
12
yarn.lock
12
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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user