diff --git a/.npmrc b/.npmrc
index 8638f02..4df0ec1 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,3 @@
+public-hoist-pattern[] = *import-in-the-middle*
+public-hoist-pattern[] = *require-in-the-middle*
auto-install-peers = false
diff --git a/README.md b/README.md
index 5a3cb60..69872ff 100644
--- a/README.md
+++ b/README.md
@@ -14,8 +14,9 @@
- Component suite: [Bootstrap v5][4]
- PWA framework: [Workbox v6][5]
- State management: [MobX v6][11]
-- CI / CD: GitHub [Actions][12] + [Vercel][13]
-- Monitor service: [Sentry][14]
+- API router: [Koa 2][12]
+- CI / CD: GitHub [Actions][13] + [Vercel][14]
+- Monitor service: [Sentry][15]
## Major examples
@@ -31,20 +32,20 @@
1. Install GitHub apps in your organization or account:
- 1. [Probot settings][15]: set up Issue labels & Pull Request rules
- 2. [PR badge][16]: set up Online [VS Code][17] editor entries in Pull Request description
+ 1. [Probot settings][16]: set up Issue labels & Pull Request rules
+ 2. [PR badge][17]: set up Online [VS Code][18] editor entries in Pull Request description
-2. Click the **[Use this template][18] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
+2. Click the **[Use this template][19] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
3. Click the **[Open in GitHub codespaces][8] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
-4. Set [Vercel variables][19] as [Repository secrets][20], then every commit will get an independent **Preview URL**
+4. Set [Vercel variables][20] as [Repository secrets][21], then every commit will get an independent **Preview URL**
-5. Recommend to add a [Notification step in GitHub actions][21] for your Team IM app
+5. Recommend to add a [Notification step in GitHub actions][22] for your Team IM app
-6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][22] instead of IM messages or Mobile Phone calls
+6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][23] instead of IM messages or Mobile Phone calls
-7. Collect all these issues into [Project kanbans][23], then create **Pull requests** & add `closes #issue_number` into its description for automation
+7. Collect all these issues into [Project kanbans][24], then create **Pull requests** & add `closes #issue_number` into its description for automation
## Getting Started
@@ -59,7 +60,7 @@ Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-[API routes][24] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
+[API routes][25] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as API routes instead of React pages.
@@ -67,10 +68,10 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
To learn more about Next.js, take a look at the following resources:
-- [Next.js Documentation][25] - learn about Next.js features and API.
-- [Learn Next.js][26] - an interactive Next.js tutorial.
+- [Next.js Documentation][26] - learn about Next.js features and API.
+- [Learn Next.js][27] - an interactive Next.js tutorial.
-You can check out [the Next.js GitHub repository][27] - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository][28] - your feedback and contributions are welcome!
## Deployment
@@ -78,16 +79,16 @@ You can check out [the Next.js GitHub repository][27] - your feedback and contri
| name | file | description |
| :----------------------: | :----------: | :---------------------: |
-| `SENTRY_AUTH_TOKEN` | `.env.local` | [Official document][28] |
-| `SENTRY_ORG` | `.env` | [Official document][29] |
-| `SENTRY_PROJECT` | `.env` | [Official document][29] |
-| `NEXT_PUBLIC_SENTRY_DSN` | `.env` | [Official document][30] |
+| `SENTRY_AUTH_TOKEN` | `.env.local` | [Official document][29] |
+| `SENTRY_ORG` | `.env` | [Official document][30] |
+| `SENTRY_PROJECT` | `.env` | [Official document][30] |
+| `NEXT_PUBLIC_SENTRY_DSN` | `.env` | [Official document][31] |
### Vercel
-The easiest way to deploy your Next.js app is to use the [Vercel Platform][13] from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform][14] from the creators of Next.js.
-Check out our [Next.js deployment documentation][31] for more details.
+Check out our [Next.js deployment documentation][32] for more details.
### Docker
@@ -107,23 +108,24 @@ pnpm container
[9]: https://gitpod.io/?autostart=true#https://github.com/idea2app/Next-Bootstrap-ts
[10]: https://mdxjs.com/
[11]: https://mobx.js.org/
-[12]: https://github.com/features/actions
-[13]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
-[14]: https://sentry.io/
-[15]: https://github.com/apps/settings
-[16]: https://pullrequestbadge.com/
-[17]: https://code.visualstudio.com/
-[18]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
-[19]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
-[20]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
-[21]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
-[22]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose
-[23]: https://github.com/idea2app/Next-Bootstrap-ts/projects
-[24]: https://nextjs.org/docs/api-routes/introduction
-[25]: https://nextjs.org/docs
-[26]: https://nextjs.org/learn
-[27]: https://github.com/vercel/next.js/
-[28]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-configuration-files-for-source-map-upload
-[29]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-environment-variables
-[30]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
-[31]: https://nextjs.org/docs/deployment
+[12]: https://koajs.com/
+[13]: https://github.com/features/actions
+[14]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
+[15]: https://sentry.io/
+[16]: https://github.com/apps/settings
+[17]: https://pullrequestbadge.com/
+[18]: https://code.visualstudio.com/
+[19]: https://github.com/new?template_name=Next-Bootstrap-ts&template_owner=idea2app
+[20]: https://github.com/idea2app/Next-Bootstrap-ts/blob/80967ed49045af9dbcf4d3695a2c39d53a6f71f1/.github/workflows/pull-request.yml#L9-L11
+[21]: https://github.com/idea2app/Next-Bootstrap-ts/settings/secrets/actions
+[22]: https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io/blob/8df9944449002758f7ec809deeb260ce08182259/.github/workflows/main.yml#L34-L63
+[23]: https://github.com/idea2app/Next-Bootstrap-ts/issues/new/choose
+[24]: https://github.com/idea2app/Next-Bootstrap-ts/projects
+[25]: https://nextjs.org/docs/api-routes/introduction
+[26]: https://nextjs.org/docs
+[27]: https://nextjs.org/learn
+[28]: https://github.com/vercel/next.js/
+[29]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-configuration-files-for-source-map-upload
+[30]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-environment-variables
+[31]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
+[32]: https://nextjs.org/docs/deployment
diff --git a/components/Git/Card.tsx b/components/Git/Card.tsx
index 9425c38..53470db 100644
--- a/components/Git/Card.tsx
+++ b/components/Git/Card.tsx
@@ -1,10 +1,10 @@
import { text2color } from 'idea-react';
import { GitRepository } from 'mobx-github';
import { observer } from 'mobx-react';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
import { Badge, Button, Card, CardProps, Col, Row } from 'react-bootstrap';
-import { t } from '../../models/Translation';
+import { I18nContext } from '../../models/Translation';
import { GitLogo } from './Logo';
export interface GitCardProps
@@ -24,45 +24,49 @@ export const GitCard: FC = observer(
description,
homepage,
...props
- }) => (
-
-
-
-
- {full_name}
-
-
+ }) => {
+ const { t } = useContext(I18nContext);
-
-
- {languages.map(language => (
-