[add] GitHub Volunteer page based on Section Title & Person Card components

components/Layout/SectionTitle.tsx

@@ -0,0 +1,15 @@
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+import { Badge } from 'react-bootstrap';
+
+export type SectionTitleProps = PropsWithChildren<
+  HTMLAttributes<HTMLHeadingElement> & { count?: number }
+>;
+
+export const SectionTitle: FC<SectionTitleProps> = ({ className = '', count, children }) => (
+  <h2 className={`d-flex align-items-center gap-2 ${className}`}>
+    {children}
+    <Badge className="fs-6" pill bg="danger">
+      {count}
+    </Badge>
+  </h2>
+);

components/Navigator/MainNavigator.tsx

@@ -19,6 +19,7 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
     href: '/article/open-collaborator-award',
     name: t('open_collaborator_award'),
   },
+  { href: '/volunteer', name: t('volunteer') },
   { href: '/project', name: t('open_source_projects') },
   { href: '/issue', name: 'GitHub issues' },
   {

components/PersonCard.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { Badge, Card, Col } from 'react-bootstrap';
+
+export interface PersonCardProps {
+  avatar: string;
+  name: string;
+  link?: string;
+  position?: string;
+  count?: number;
+}
+
+export const PersonCard: FC<PersonCardProps> = ({ avatar, name, link, position, count }) => (
+  <Col as="li" className="my-3 d-flex justify-content-center">
+    <Card className="border-0 align-items-center position-relative">
+      {count != null && (
+        <Badge className="fs-6 position-absolute top-0 end-0" pill bg="danger">
+          {count}
+        </Badge>
+      )}
+      <Card.Img
+        className="rounded-circle"
+        style={{ width: '8rem' }}
+        variant="top"
+        src={avatar}
+        alt={name}
+      />
+      <Card.Body>
+        <Card.Title as="a" className="fs-6 text-decoration-none stretched-link" href={link || '#'}>
+          {name}
+        </Card.Title>
+        <Card.Subtitle className="fw-light mt-2">{position}</Card.Subtitle>
+      </Card.Body>
+    </Card>
+  </Col>
+);

models/Translation.ts

@@ -1,9 +1,4 @@
-import {
-  loadLanguageMapFrom,
-  parseCookie,
-  TranslationMap,
-  TranslationModel,
-} from 'mobx-i18n';
+import { loadLanguageMapFrom, parseCookie, TranslationMap, TranslationModel } from 'mobx-i18n';
 import { DataObject } from 'mobx-restful';
 import { NextPageContext } from 'next';
 import { createContext } from 'react';
@@ -32,6 +27,7 @@ export const createI18nStore = <N extends LanguageCode, K extends string>(
   });
 
   if (language) store.currentLanguage = language;
+  if (data) store.currentMap = data as TranslationMap<keyof (typeof i18nData)['zh-CN']>;
 
   return store;
 };
@@ -53,9 +49,7 @@ export const parseSSRContext = <T extends DataObject = DataObject>(
   const cookie = parseCookie(req?.headers.cookie || '') as T;
 
   for (const key of queryKeys)
-    cookie[key] =
-      (query[key as string]?.toString().split(',')[0] as T[keyof T]) ||
-      cookie[key];
+    cookie[key] = (query[key as string]?.toString().split(',')[0] as T[keyof T]) || cookie[key];
 
   return cookie;
 };

package.json

@@ -88,6 +88,7 @@
     "singleQuote": true,
     "trailingComma": "all",
     "arrowParens": "avoid",
+    "printWidth": 100,
     "plugins": [
       "prettier-plugin-css-order",
       "@softonus/prettier-plugin-duplicate-remover"

pages/volunteer.tsx

@@ -0,0 +1,90 @@
+import { Contributor } from 'mobx-github';
+import { observer } from 'mobx-react';
+import { cache, compose, errorLogger } from 'next-ssr-middleware';
+import { FC, useContext } from 'react';
+import { Container, Row } from 'react-bootstrap';
+
+import { PageHead } from '../components/Layout/PageHead';
+import { SectionTitle } from '../components/Layout/SectionTitle';
+import { PersonCard } from '../components/PersonCard';
+import { repositoryStore } from '../models/Repository';
+import { I18nContext } from '../models/Translation';
+
+export const getServerSideProps = compose(cache(), errorLogger, async () => {
+  const contributors: Contributor[] = await repositoryStore.getAllContributors();
+
+  return { props: { contributors } };
+});
+
+const Organizer: FC<{ contributors: Contributor[] }> = observer(({ contributors }) => {
+  const { t } = useContext(I18nContext);
+
+  return (
+    <Container>
+      <PageHead title={t('volunteer')} />
+      <h1 className="py-5 text-center text-md-start ps-md-4">{t('volunteer')}</h1>
+
+      <section className="d-flex justify-content-around align-items-center gap-3 flex-wrap mb-5">
+        <a
+          className="d-block"
+          href="https://next.ossinsight.io/widgets/official/compose-org-participants-roles-ratio?owner_id=73477979&period=past_28_days"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <picture>
+            <source
+              media="(prefers-color-scheme: dark)"
+              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"
+              width="465"
+            />
+            <img
+              alt="Participants roles of Open Source Bazaar"
+              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"
+              width="465"
+            />
+          </picture>
+        </a>
+        <a
+          className="d-block"
+          href="https://next.ossinsight.io/widgets/official/compose-org-engagement-scatter?owner_id=73477979&period=past_28_days"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <picture>
+            <source
+              media="(prefers-color-scheme: dark)"
+              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"
+              width="465"
+            />
+            <img
+              alt="Most engaged people of Open Source Bazaar"
+              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"
+              width="465"
+            />
+          </picture>
+        </a>
+      </section>
+
+      <SectionTitle count={contributors.length}>{t('online_volunteer')}</SectionTitle>
+      <Row
+        as="ul"
+        className="list-unstyled justify-content-center text-center"
+        xs={2}
+        sm={5}
+        md={6}
+      >
+        {contributors.map(({ login, html_url, contributions }) => (
+          <PersonCard
+            key={login}
+            name={login!}
+            avatar={`https://github.com/${login}.png`}
+            link={html_url}
+            count={contributions}
+          />
+        ))}
+      </Row>
+    </Container>
+  );
+});
+
+export default Organizer;

translation/en-US.ts

@@ -17,4 +17,8 @@ export default {
   // Scroll List
   load_more: 'Load more...',
   no_more: 'No more',
+
+  // Volunteer page
+  volunteer: 'Volunteer',
+  online_volunteer: 'Online Volunteer',
 };

translation/zh-CN.ts

@@ -17,4 +17,8 @@ export default {
   // Scroll List
   load_more: '加载更多……',
   no_more: '没有更多',
+
+  // Volunteer page
+  volunteer: '志愿者',
+  online_volunteer: '线上志愿者',
 };

translation/zh-TW.ts

@@ -17,4 +17,8 @@ export default {
   // Scroll List
   load_more: '加載更多……',
   no_more: '沒有更多',
+
+  // Volunteer page
+  volunteer: '志工',
+  online_volunteer: '線上志工',
 };