Skip to content

Commit a4bc00d

Browse files
TechQueryTechQuery
committed
[add] GitHub Volunteer page based on Section Title & Person Card components
1 parent 82d3019 commit a4bc00d

9 files changed

Lines changed: 157 additions & 9 deletions

File tree

‎components/Layout/SectionTitle.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { FC, HTMLAttributes, PropsWithChildren } from 'react';
2+
import { Badge } from 'react-bootstrap';
3+
4+
export type SectionTitleProps = PropsWithChildren<
5+
HTMLAttributes<HTMLHeadingElement> & { count?: number }
6+
>;
7+
8+
export const SectionTitle: FC<SectionTitleProps> = ({ className = '', count, children }) => (
9+
<h2 className={`d-flex align-items-center gap-2 ${className}`}>
10+
{children}
11+
<Badge className="fs-6" pill bg="danger">
12+
{count}
13+
</Badge>
14+
</h2>
15+
);

‎components/Navigator/MainNavigator.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
1919
href: '/article/open-collaborator-award',
2020
name: t('open_collaborator_award'),
2121
},
22+
{ href: '/volunteer', name: t('volunteer') },
2223
{ href: '/project', name: t('open_source_projects') },
2324
{ href: '/issue', name: 'GitHub issues' },
2425
{

‎components/PersonCard.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { FC } from 'react';
2+
import { Badge, Card, Col } from 'react-bootstrap';
3+
4+
export interface PersonCardProps {
5+
avatar: string;
6+
name: string;
7+
link?: string;
8+
position?: string;
9+
count?: number;
10+
}
11+
12+
export const PersonCard: FC<PersonCardProps> = ({ avatar, name, link, position, count }) => (
13+
<Col as="li" className="my-3 d-flex justify-content-center">
14+
<Card className="border-0 align-items-center position-relative">
15+
{count != null && (
16+
<Badge className="fs-6 position-absolute top-0 end-0" pill bg="danger">
17+
{count}
18+
</Badge>
19+
)}
20+
<Card.Img
21+
className="rounded-circle"
22+
style={{ width: '8rem' }}
23+
variant="top"
24+
src={avatar}
25+
alt={name}
26+
/>
27+
<Card.Body>
28+
<Card.Title as="a" className="fs-6 text-decoration-none stretched-link" href={link || '#'}>
29+
{name}
30+
</Card.Title>
31+
<Card.Subtitle className="fw-light mt-2">{position}</Card.Subtitle>
32+
</Card.Body>
33+
</Card>
34+
</Col>
35+
);

‎models/Translation.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {
2-
loadLanguageMapFrom,
3-
parseCookie,
4-
TranslationMap,
5-
TranslationModel,
6-
} from 'mobx-i18n';
1+
import { loadLanguageMapFrom, parseCookie, TranslationMap, TranslationModel } from 'mobx-i18n';
72
import { DataObject } from 'mobx-restful';
83
import { NextPageContext } from 'next';
94
import { createContext } from 'react';
@@ -32,6 +27,7 @@ export const createI18nStore = <N extends LanguageCode, K extends string>(
3227
});
3328

3429
if (language) store.currentLanguage = language;
30+
if (data) store.currentMap = data as TranslationMap<keyof (typeof i18nData)['zh-CN']>;
3531

3632
return store;
3733
};
@@ -53,9 +49,7 @@ export const parseSSRContext = <T extends DataObject = DataObject>(
5349
const cookie = parseCookie(req?.headers.cookie || '') as T;
5450

5551
for (const key of queryKeys)
56-
cookie[key] =
57-
(query[key as string]?.toString().split(',')[0] as T[keyof T]) ||
58-
cookie[key];
52+
cookie[key] = (query[key as string]?.toString().split(',')[0] as T[keyof T]) || cookie[key];
5953

6054
return cookie;
6155
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"singleQuote": true,
8989
"trailingComma": "all",
9090
"arrowParens": "avoid",
91+
"printWidth": 100,
9192
"plugins": [
9293
"prettier-plugin-css-order",
9394
"@softonus/prettier-plugin-duplicate-remover"

‎pages/volunteer.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Contributor } from 'mobx-github';
2+
import { observer } from 'mobx-react';
3+
import { cache, compose, errorLogger } from 'next-ssr-middleware';
4+
import { FC, useContext } from 'react';
5+
import { Container, Row } from 'react-bootstrap';
6+
7+
import { PageHead } from '../components/Layout/PageHead';
8+
import { SectionTitle } from '../components/Layout/SectionTitle';
9+
import { PersonCard } from '../components/PersonCard';
10+
import { repositoryStore } from '../models/Repository';
11+
import { I18nContext } from '../models/Translation';
12+
13+
export const getServerSideProps = compose(cache(), errorLogger, async () => {
14+
const contributors: Contributor[] = await repositoryStore.getAllContributors();
15+
16+
return { props: { contributors } };
17+
});
18+
19+
const Organizer: FC<{ contributors: Contributor[] }> = observer(({ contributors }) => {
20+
const { t } = useContext(I18nContext);
21+
22+
return (
23+
<Container>
24+
<PageHead title={t('volunteer')} />
25+
<h1 className="py-5 text-center text-md-start ps-md-4">{t('volunteer')}</h1>
26+
27+
<section className="d-flex justify-content-around align-items-center gap-3 flex-wrap mb-5">
28+
<a
29+
className="d-block"
30+
href="https://next.ossinsight.io/widgets/official/compose-org-participants-roles-ratio?owner_id=73477979&period=past_28_days"
31+
target="_blank"
32+
rel="noreferrer"
33+
>
34+
<picture>
35+
<source
36+
media="(prefers-color-scheme: dark)"
37+
srcSet="https://next.ossinsight.io/widgets/official/compose-org-participants-roles-ratio/thumbnail.png?owner_id=73477979&period=past_28_days&image_size=5x5&color_scheme=dark"
38+
width="465"
39+
/>
40+
<img
41+
alt="Participants roles of Open Source Bazaar"
42+
src="https://next.ossinsight.io/widgets/official/compose-org-participants-roles-ratio/thumbnail.png?owner_id=73477979&period=past_28_days&image_size=5x5&color_scheme=light"
43+
width="465"
44+
/>
45+
</picture>
46+
</a>
47+
<a
48+
className="d-block"
49+
href="https://next.ossinsight.io/widgets/official/compose-org-engagement-scatter?owner_id=73477979&period=past_28_days"
50+
target="_blank"
51+
rel="noreferrer"
52+
>
53+
<picture>
54+
<source
55+
media="(prefers-color-scheme: dark)"
56+
srcSet="https://next.ossinsight.io/widgets/official/compose-org-engagement-scatter/thumbnail.png?owner_id=73477979&period=past_28_days&image_size=5x5&color_scheme=dark"
57+
width="465"
58+
/>
59+
<img
60+
alt="Most engaged people of Open Source Bazaar"
61+
src="https://next.ossinsight.io/widgets/official/compose-org-engagement-scatter/thumbnail.png?owner_id=73477979&period=past_28_days&image_size=5x5&color_scheme=light"
62+
width="465"
63+
/>
64+
</picture>
65+
</a>
66+
</section>
67+
68+
<SectionTitle count={contributors.length}>{t('online_volunteer')}</SectionTitle>
69+
<Row
70+
as="ul"
71+
className="list-unstyled justify-content-center text-center"
72+
xs={2}
73+
sm={5}
74+
md={6}
75+
>
76+
{contributors.map(({ login, html_url, contributions }) => (
77+
<PersonCard
78+
key={login}
79+
name={login!}
80+
avatar={`https://github.com/${login}.png`}
81+
link={html_url}
82+
count={contributions}
83+
/>
84+
))}
85+
</Row>
86+
</Container>
87+
);
88+
});
89+
90+
export default Organizer;

‎translation/en-US.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,8 @@ export default {
1717
// Scroll List
1818
load_more: 'Load more...',
1919
no_more: 'No more',
20+
21+
// Volunteer page
22+
volunteer: 'Volunteer',
23+
online_volunteer: 'Online Volunteer',
2024
};

‎translation/zh-CN.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,8 @@ export default {
1717
// Scroll List
1818
load_more: '加载更多……',
1919
no_more: '没有更多',
20+
21+
// Volunteer page
22+
volunteer: '志愿者',
23+
online_volunteer: '线上志愿者',
2024
};

‎translation/zh-TW.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,8 @@ export default {
1717
// Scroll List
1818
load_more: '加載更多……',
1919
no_more: '沒有更多',
20+
21+
// Volunteer page
22+
volunteer: '志工',
23+
online_volunteer: '線上志工',
2024
};

0 commit comments

Comments
 (0)