mirror of
https://github.com/uetchy/namae.git
synced 2025-03-17 04:30:31 +09:00
feat: show contributors
This commit is contained in:
parent
0d632a8eb2
commit
0d13c993ad
@ -35,6 +35,7 @@
|
|||||||
"react-spinners": "^0.9.0",
|
"react-spinners": "^0.9.0",
|
||||||
"react-toastify": "^6.0.8",
|
"react-toastify": "^6.0.8",
|
||||||
"styled-components": "^5.1.1",
|
"styled-components": "^5.1.1",
|
||||||
|
"swr": "^0.2.3",
|
||||||
"validator": "^13.1.0",
|
"validator": "^13.1.0",
|
||||||
"whois-json": "^2.0.4"
|
"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 { GoHeart } from 'react-icons/go';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Section } from '../theme';
|
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 Footer: React.FC = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -64,6 +65,10 @@ const Footer: React.FC = () => {
|
|||||||
</OutboundLink>
|
</OutboundLink>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<Box>
|
||||||
|
<Subtitle>Contributors</Subtitle>
|
||||||
|
<Contributors />
|
||||||
|
</Box>
|
||||||
</Pane>
|
</Pane>
|
||||||
|
|
||||||
<Pane>
|
<Pane>
|
||||||
@ -153,7 +158,7 @@ const Container = styled(Section)`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
${mobile} {
|
${tablet} {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
@ -161,15 +166,23 @@ const Container = styled(Section)`
|
|||||||
const Pane = styled.div`
|
const Pane = styled.div`
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
||||||
${mobile} {
|
${tablet} {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Box = styled.div`
|
||||||
|
margin: 15px 0;
|
||||||
|
`;
|
||||||
|
|
||||||
const Title = styled.h3`
|
const Title = styled.h3`
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const Subtitle = styled.h4`
|
||||||
|
margin-bottom: 12px;
|
||||||
|
`;
|
||||||
|
|
||||||
const LangBox = styled.div`
|
const LangBox = styled.div`
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { Content, Header } from '../theme';
|
import { Content, Header } from '../theme';
|
||||||
import Form from '../components/Form';
|
import Form from '../components/Form';
|
||||||
import Welcome from '../components/Welcome';
|
import Welcome from '../components/Welcome';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const { t } = useTranslation();
|
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 mobile = '@media screen and (max-width: 800px)';
|
||||||
|
export const tablet = '@media screen and (max-width: 1200px)';
|
||||||
|
|
||||||
export const slideUp = keyframes`
|
export const slideUp = keyframes`
|
||||||
from {
|
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"
|
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
|
||||||
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
|
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:
|
fast-deep-equal@^3.1.1:
|
||||||
version "3.1.3"
|
version "3.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
|
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"
|
lower-case "^1.1.1"
|
||||||
upper-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:
|
symbol-observable@^1.2.0:
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
|
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user