[add] GitHub repository settings & PR badges

[optimize] simplify Repository model & types based on MobX-GitHub
[optimize] upgrade to PNPM 9 & other latest Upstream packages
[optimize] update Read Me document

.github/pr-badge.yml

@@ -0,0 +1,17 @@
+- icon: visualstudio
+  label: 'GitHub.dev'
+  message: 'PR-$prNumber'
+  color: 'blue'
+  url: 'https://github.dev/$owner/$repo/pull/$prNumber'
+
+- icon: github
+  label: 'GitHub codespaces'
+  message: 'PR-$prNumber'
+  color: 'black'
+  url: 'https://codespaces.new/$owner/$repo/pull/$prNumber'
+
+- icon: git
+  label: 'GitPod.io'
+  message: 'PR-$prNumber'
+  color: 'orange'
+  url: 'https://gitpod.io/?autostart=true#https://github.com/$owner/$repo/pull/$prNumber'

.github/settings.yml

@@ -0,0 +1,85 @@
+# These settings are synced to GitHub by https://probot.github.io/apps/settings/
+
+repository:
+  allow_merge_commit: false
+
+  delete_branch_on_merge: true
+
+  enable_vulnerability_alerts: true
+
+labels:
+  - name: bug
+    color: '#d73a4a'
+    description: Something isn't working
+
+  - name: documentation
+    color: '#0075ca'
+    description: Improvements or additions to documentation
+
+  - name: duplicate
+    color: '#cfd3d7'
+    description: This issue or pull request already exists
+
+  - name: enhancement
+    color: '#a2eeef'
+    description: Some improvements
+
+  - name: feature
+    color: '#16b33f'
+    description: New feature or request
+
+  - name: good first issue
+    color: '#7057ff'
+    description: Good for newcomers
+
+  - name: help wanted
+    color: '#008672'
+    description: Extra attention is needed
+
+  - name: invalid
+    color: '#e4e669'
+    description: This doesn't seem right
+
+  - name: question
+    color: '#d876e3'
+    description: Further information is requested
+
+  - name: wontfix
+    color: '#ffffff'
+    description: This will not be worked on
+
+branches:
+  - name: main
+    # https://docs.github.com/en/rest/reference/repos#update-branch-protection
+    protection:
+      # Required. Require at least one approving review on a pull request, before merging. Set to null to disable.
+      required_pull_request_reviews:
+        # The number of approvals required. (1-6)
+        required_approving_review_count: 1
+        # Dismiss approved reviews automatically when a new commit is pushed.
+        dismiss_stale_reviews: true
+        # Blocks merge until code owners have reviewed.
+        require_code_owner_reviews: true
+        # Specify which users and teams can dismiss pull request reviews.
+        # Pass an empty dismissal_restrictions object to disable.
+        # User and team dismissal_restrictions are only available for organization-owned repositories.
+        # Omit this parameter for personal repositories.
+        dismissal_restrictions:
+          # users: []
+          # teams: []
+      # Required. Require status checks to pass before merging. Set to null to disable
+      required_status_checks:
+        # Required. Require branches to be up to date before merging.
+        strict: true
+        # Required. The list of status checks to require in order to merge into this branch
+        contexts: []
+      # Required. Enforce all configured restrictions for administrators.
+      # Set to true to enforce required status checks for repository administrators.
+      # Set to null to disable.
+      enforce_admins: true
+      # Prevent merge commits from being pushed to matching branches
+      required_linear_history: true
+      # Required. Restrict who can push to this branch.
+      # Team and user restrictions are only available for organization-owned repositories.
+      # Set to null to disable.
+      restrictions: null

README.md

@@ -2,16 +2,39 @@
 
 [React][1] project scaffold based on [TypeScript][2], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].
 
-[![CI & CD](https://github.com/idea2app/idea2app.github.io/actions/workflows/main.yml/badge.svg)][8]
+[![CI & CD](https://github.com/idea2app/idea2app.github.io/actions/workflows/main.yml/badge.svg)][7]
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][8]
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][9]
 
 ## Technology stack
 
-- Language: [TypeScript v5][2]
+- Language: [TypeScript v5][2] + [MDX v3][10]
 - Component engine: [Next.js v14][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
-- State management: [MobX v6][9]
-- CI / CD: GitHub [Actions][11] + [Vercel][12]
+- State management: [MobX v6][11]
+- CI / CD: GitHub [Actions][12] + [Vercel][13]
+- Monitor service: [Sentry][14]
+
+## Best practice
+
+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
+
+2.  Click the **[<kbd>Use this template</kbd>][18] 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 **[<kbd>Open in GitHub codespaces</kbd>][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**
+
+5.  Recommend to add a [Notification step in GitHub actions][21] 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
+
+7.  Collect all these issues into [Project kanbans][23], then create **Pull requests** & add `closes #issue_number` into its description for automation
 
 ## Getting Started
 
@@ -26,26 +49,35 @@ 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][13] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.
+[API routes][24] 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][13] instead of React pages.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as API routes instead of React pages.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation][14] - learn about Next.js features and API.
-- [Learn Next.js][15] - an interactive Next.js tutorial.
+- [Next.js Documentation][25] - learn about Next.js features and API.
+- [Learn Next.js][26] - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository][16] - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository][27] - your feedback and contributions are welcome!
 
 ## Deployment
 
+### Environment variables
+
+|           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] |
+
 ### Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform][12] from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the [Vercel Platform][13] from the creators of Next.js.
 
-Check out our [Next.js deployment documentation][17] for more details.
+Check out our [Next.js deployment documentation][31] for more details.
 
 ### Docker
 
@@ -60,12 +92,28 @@ pnpm container
 [4]: https://getbootstrap.com/
 [5]: https://developers.google.com/web/tools/workbox
 [6]: https://github.com/vercel/next.js/tree/canary/packages/create-next-app
-[8]: https://github.com/idea2app/idea2app.github.io/actions/workflows/main.yml
-[9]: https://mobx.js.org/
-[11]: https://github.com/features/actions
-[12]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
-[13]: https://nextjs.org/docs/api-routes/introduction
-[14]: https://nextjs.org/docs
-[15]: https://nextjs.org/learn
-[16]: https://github.com/vercel/next.js/
-[17]: https://nextjs.org/docs/deployment
+[7]: https://github.com/idea2app/idea2app.github.io/actions/workflows/main.yml
+[8]: https://codespaces.new/idea2app/idea2app.github.io
+[9]: https://gitpod.io/?autostart=true#https://github.com/idea2app/idea2app.github.io
+[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=idea2app.github.io&template_owner=idea2app
+[19]: https://github.com/idea2app/idea2app.github.io/blob/34a68d5c3a21665c5971edff5aa7c208647d1566/.github/workflows/main.yml#L9-L11
+[20]: https://github.com/idea2app/idea2app.github.io/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/idea2app.github.io/issues/new/choose
+[23]: https://github.com/idea2app/idea2app.github.io/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

babel.config.js

@@ -1,15 +1,5 @@
 module.exports = {
   presets: [
-    // https://babeljs.io/docs/babel-preset-typescript
-    [
-      '@babel/preset-typescript',
-      {
-        allowDeclareFields: true,
-        allowNamespaces: true,
-        allExtensions: true,
-        isTSX: true,
-      },
-    ],
     // https://babeljs.io/docs/babel-preset-react
     [
       '@babel/preset-react',
@@ -19,6 +9,18 @@ module.exports = {
       },
     ],
   ],
-  // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
-  plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],
+  plugins: [
+    // https://github.com/babel/babel/issues/16262#issuecomment-1962832499
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allowDeclareFields: true,
+        allowNamespaces: true,
+        allExtensions: true,
+        isTSX: true,
+      },
+    ],
+    // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
+  ],
 };

components/Git/Card.tsx

@@ -1,9 +1,9 @@
 import { text2color } from 'idea-react';
+import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { FC } from 'react';
 import { Badge, Button, Card, Col, Row } from 'react-bootstrap';
 
-import { GitRepository } from '../../models/Repository';
 import { i18n } from '../../models/Translation';
 import { GitLogo } from './Logo';
 

components/Git/index.tsx

@@ -1,7 +1,7 @@
+import { GitRepository } from 'mobx-github';
 import { FC } from 'react';
 import { Col, Row } from 'react-bootstrap';
 
-import { GitRepository } from '../../models/Repository';
 import { GitCard } from './Card';
 
 export const GitListLayout: FC<{ defaultData: GitRepository[] }> = ({

models/Base.ts

@@ -3,10 +3,9 @@ import { HTTPClient } from 'koajax';
 export const isServer = () => typeof window === 'undefined';
 
 export const VercelHost = process.env.VERCEL_URL,
-  GithubToken = process.env.GITHUB_TOKEN,
   LarkBaseId = process.env.NEXT_PUBLIC_LARK_BASE!;
 
-const API_Host = isServer()
+export const API_Host = isServer()
   ? VercelHost
     ? `https://${VercelHost}`
     : 'http://localhost:3000'
@@ -16,15 +15,3 @@ export const larkClient = new HTTPClient({
   baseURI: `${API_Host}/api/Lark/`,
   responseType: 'json',
 });
-
-export const githubClient = new HTTPClient({
-  baseURI: isServer() ? 'https://api.github.com/' : `${API_Host}/api/GitHub/`,
-  responseType: 'json',
-}).use(({ request }, next) => {
-  if (GithubToken)
-    request.headers = {
-      ...request.headers,
-      Authorization: `Bearer ${GithubToken}`,
-    };
-  return next();
-});