[add] 404 NGO page

[optimize] update Next.js configuration, Docker file & GitHub actions
[optimize] upgrade to Node.js 20, KoAJAX 3, MobX RESTful 1 & other latest Upstream packages

.github/workflows/deploy-production.yml

@@ -24,14 +24,16 @@ jobs:
 
       - name: Inject Environment variables
         run: |
+          echo "BOX_NAME=${BOX_NAME@L}" >> "${GITHUB_ENV}"
+          echo "BOX_URL=${BOX_URL@L}" >> "${GITHUB_ENV}"
           cat > .env.local <<EOF
           ${{ secrets.ENV_FILE }}
           EOF
-      - uses: docker/setup-qemu-action@v2
-      - uses: docker/setup-buildx-action@v2
+      - uses: docker/setup-qemu-action@v3
+      - uses: docker/setup-buildx-action@v3
 
       - name: Build Image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
         with:
           context: .
           platforms: linux/amd64
@@ -44,13 +46,14 @@ jobs:
           mv ${{ env.ARTIFACT_PATH }} ./docker-compose.yml ./start.sh ./build
 
       - name: Transport Image
-        uses: garygrossgarten/github-action-scp@release
+        uses: appleboy/scp-action@v0.1.7
         with:
-          local: ./build
-          remote: /tmp
+          source: ./build/*.*
+          target: /tmp
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USER }}
           password: ${{ secrets.SSH_KEY }}
+          strip_components: 1
 
       - name: Run Image
         uses: garygrossgarten/github-action-ssh@release

.github/workflows/main.yml

@@ -50,6 +50,11 @@ jobs:
                     - tag: a
                       text: ${{ github.ref }}
                       href: ${{ github.server_url }}/${{ github.repository }}/tree/${{ github.ref_name }}
+                  - - tag: text
+                      text: 提交作者：
+                    - tag: a
+                      text: ${{ github.actor }}
+                      href: ${{ github.server_url }}/${{ github.actor }}
                   - - tag: text
                       text: 预览链接：
                     - tag: a

.github/workflows/pull-request.yml

@@ -13,6 +13,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
+        with:
+          submodules: recursive
+          lfs: true
+      - run: git submodule update --remote
 
       - name: Deploy to Vercel
         id: vercel-deployment
@@ -45,6 +49,11 @@ jobs:
                     - tag: a
                       text: ${{ github.ref }}
                       href: ${{ github.server_url }}/${{ github.repository }}/tree/${{ github.ref_name }}
+                  - - tag: text
+                      text: 提交作者：
+                    - tag: a
+                      text: ${{ github.actor }}
+                      href: ${{ github.server_url }}/${{ github.actor }}
                   - - tag: text
                       text: 预览链接：
                     - tag: a

Dockerfile

@@ -1,6 +1,4 @@
-# Reference: https://pnpm.io/docker#example-1-build-a-bundle-in-a-docker-container
-
-FROM node:18-slim AS base
+FROM node:20-slim AS base
 RUN apt-get update && \
     apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
     rm -rf /var/lib/apt/lists/*
@@ -14,16 +12,15 @@ RUN corepack enable
 COPY . /app
 WORKDIR /app
 
-FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i -P --frozen-lockfile --ignore-scripts
-
 FROM base AS build
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --frozen-lockfile
-RUN pnpm build
+RUN CI=true  pnpm build
 
 FROM base
-COPY --from=prod-deps /app/node_modules ./node_modules
 COPY --from=build /app/public ./public
-COPY --from=build /app/.next ./.next
+COPY --from=build /app/.next/static ./.next/static
+COPY --from=build /app/.next/standalone ./
 EXPOSE 3000
-CMD ["npm", "start"]
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

components/NotFoundCard.tsx

@@ -0,0 +1,20 @@
+import { ErrorProps } from 'next/error';
+import { FC } from 'react';
+
+import { i18n } from '../models/Translation';
+
+export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
+  i18n.currentLanguage.startsWith('zh') ? (
+    <script
+      src="//cdn.dnpw.org/404/v1.min.js"
+      // @ts-ignore
+      jumptarget="/"
+      jumptime="-1"
+      error={title}
+    />
+  ) : (
+    <iframe
+      className="w-100 vh-100 border-0"
+      src="https://notfound-static.fwebservices.be/en/404?key=66abb751ed312"
+    />
+  );

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -1,9 +1,11 @@
 import { withSentryConfig } from '@sentry/nextjs';
 import setPWA from 'next-pwa';
+// @ts-ignore
 import withLess from 'next-with-less';
 import webpack from 'webpack';
 
-const { NODE_ENV, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } = process.env;
+const { NODE_ENV, CI, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT } =
+  process.env;
 const isDev = NODE_ENV === 'development';
 
 const withPWA = setPWA({
@@ -13,11 +15,9 @@ const withPWA = setPWA({
   disable: isDev,
 });
 
-/**
- * @type {import('next').NextConfig}
- */
-const nextConfig = withPWA(
-  withLess({
+const nextConfig = withLess(
+  withPWA({
+    output: CI ? 'standalone' : undefined,
     webpack: config => {
       config.plugins.push(
         new webpack.NormalModuleReplacementPlugin(/^node:/, resource => {
@@ -31,18 +31,10 @@ const nextConfig = withPWA(
 
 export default isDev || !SENTRY_AUTH_TOKEN
   ? nextConfig
-  : withSentryConfig(
-      {
-        ...nextConfig,
-        sentry: {
-          transpileClientSDK: true,
-          autoInstrumentServerFunctions: false,
-        },
-      },
-      {
-        org: SENTRY_ORG,
-        project: SENTRY_PROJECT,
-        authToken: SENTRY_AUTH_TOKEN,
-        silent: true,
-      },
-    );
+  : withSentryConfig(nextConfig, {
+      autoInstrumentServerFunctions: false,
+      org: SENTRY_ORG,
+      project: SENTRY_PROJECT,
+      authToken: SENTRY_AUTH_TOKEN,
+      silent: true,
+    });

package.json

@@ -4,54 +4,58 @@
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "dependencies": {
-    "@sentry/nextjs": "^8.9.2",
+    "@sentry/nextjs": "^8.28.0",
     "classnames": "^2.5.1",
-    "file-type": "^19.0.0",
+    "file-type": "^19.4.1",
     "idea-react": "^2.0.0-rc.2",
-    "koajax": "^1.1.2",
+    "koajax": "^3.0.1",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
-    "mobx": "^6.12.4",
-    "mobx-github": "^0.3.2",
+    "mobx": "^6.13.1",
+    "mobx-github": "^0.3.4",
     "mobx-i18n": "^0.5.0",
-    "mobx-lark": "^2.0.0-rc.1",
+    "mobx-lark": "^2.0.0-rc.2",
     "mobx-react": "^9.1.1",
-    "mobx-restful": "^0.7.0-rc.0",
-    "mobx-restful-table": "^2.0.0-rc.1",
-    "next": "^14.2.4",
+    "mobx-restful": "^1.0.1",
+    "mobx-restful-table": "^2.0.0",
+    "next": "^14.2.8",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.8.1",
+    "next-ssr-middleware": "^0.8.7",
     "next-with-less": "^3.0.1",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.2",
+    "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
     "react-marked-renderer": "^2.0.1",
     "web-utility": "^4.4.0",
-    "webpack": "^5.92.0"
+    "webpack": "^5.94.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.7",
-    "@babel/plugin-transform-typescript": "^7.24.7",
+    "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@types/node": "^18.19.36",
-    "@types/react": "^18.3.3",
+    "@types/next-pwa": "^5.6.9",
+    "@types/node": "^20.16.5",
+    "@types/react": "^18.3.5",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint-config-next": "^14.2.8",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2",
-    "typescript": "~5.4.5"
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "typescript": "~5.5.4"
+  },
+  "resolutions": {
+    "native-file-system-adapter": "npm:@tech_query/native-file-system-adapter@^3.0.1"
   },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all",
     "arrowParens": "avoid"
   },
   "lint-staged": {
-    "*.{html,md,less,json,yml,js,ts,tsx}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
+    "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
+    "*.{js,mjs,ts,tsx}": "eslint --fix"
   },
   "scripts": {
     "prepare": "husky",
@@ -60,7 +64,7 @@
     "export": "next build  &&  next export",
     "start": "next start",
     "lint": "next lint",
-    "test": "lint-staged  &&  npm run lint",
+    "test": "lint-staged  &&  npm run lint  &&  tsc --noEmit",
     "pack-image": "docker build -t idea2app/web-server .",
     "container": "docker rm -f web-server  &&  docker run --name web-server -p 3000:3000 -d idea2app/web-server"
   }

pages/_app.tsx

@@ -21,9 +21,10 @@ configure({ enforceActions: 'never' });
 enableStaticRendering(isServer());
 
 globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
-  var { message, statusText } = reason as HTTPError;
+  var { message, response } = reason as HTTPError;
+  const { statusText, body } = response || {};
 
-  message = statusText || message;
+  message = body?.message || statusText || message;
 
   if (message) alert(message);
 });

pages/_error.tsx

@@ -1,19 +1,33 @@
 import * as Sentry from '@sentry/nextjs';
+import { parseCookie, parseLanguageHeader } from 'mobx-i18n';
 import type { NextPage } from 'next';
 import type { ErrorProps } from 'next/error';
 import Error from 'next/error';
 
-const CustomErrorComponent: NextPage<ErrorProps> = ({ statusCode }) => (
-  <Error statusCode={statusCode} />
+import { NotFoundCard } from '../components/NotFoundCard';
+import { i18n } from '../models/Translation';
+
+const CustomErrorComponent: NextPage<ErrorProps> = props => (
+  <>
+    <Error {...props} />
+
+    <NotFoundCard {...props} />
+  </>
 );
+const enableSentry =
+  process.env.NODE_ENV === 'development' || !process.env.SENTRY_AUTH_TOKEN;
 
 CustomErrorComponent.getInitialProps = async contextData => {
-  await Sentry.captureUnderscoreErrorException(contextData);
+  const { 'accept-language': acceptLanguage, cookie = '' } =
+    contextData.req!.headers;
+  const { language } = parseCookie(cookie),
+    languages = parseLanguageHeader(acceptLanguage || '');
+
+  await i18n.loadLanguages([language, ...languages].filter(Boolean));
+
+  if (enableSentry) await Sentry.captureUnderscoreErrorException(contextData);
 
   return Error.getInitialProps(contextData);
 };
 
-export default process.env.NODE_ENV === 'development' ||
-!process.env.SENTRY_AUTH_TOKEN
-  ? Error
-  : CustomErrorComponent;
+export default CustomErrorComponent;

pages/api/core.ts

@@ -19,7 +19,8 @@ export function safeAPI(handler: NextAPI): NextAPI {
         res.status(400);
         return res.send({ message: (error as Error).message });
       }
-      let { message, status, body } = error;
+      const { message, response } = error;
+      let { status, body } = response;
 
       res.status(status);
       res.statusMessage = message;

pages/index.tsx

@@ -1,3 +1,4 @@
+import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { InferGetServerSidePropsType } from 'next';
 import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
@@ -34,7 +35,9 @@ export const getServerSideProps = compose(
     return {
       props: {
         projects: JSON.parse(JSON.stringify(projects)) as Project[],
-        repositories,
+        repositories: JSON.parse(
+          JSON.stringify(repositories),
+        ) as GitRepository[],
         partners,
         members: members.filter(
           ({ github, position, summary }) => github && position && summary,