[refactor] replace Authing Guard with LeanCloud SMS based Back-end API

[add] Captcha & SMS Code components
[migrate] replace GitHub repository types & model with MobX-GitHub
[migrate] upgrade to ES Decorator stage-3, Node.js 20, PNPM 9, Next.js 15, ESLint 9, Husky 9 & ohter latest Upstream packages/actions
[optimize] i18n imports & Model folder structure
[optimize] RAM & Disk size of Docker image

.dockerignore

@@ -1,6 +1,6 @@
 README.md
 node_modules/
-.eslintrc.json
+eslint.config.mjs
 .next/
 .vercel/
 start.sh

.github/workflows/deploy-production.yml

@@ -9,8 +9,8 @@ on:
       - v*
 env:
   ARTIFACT_PATH: /tmp/artifact.tar
-  BOX_NAME: pwa
-  BOX_URL: ideamall/pwa
+  BOX_NAME: ${{ github.event.repository.name }}
+  BOX_URL: ${{ github.repository }}
 
 jobs:
   deploy_docker_image:
@@ -24,6 +24,8 @@ jobs:
 
       - name: Inject Environment variables
         run: |
+          echo "BOX_NAME=${BOX_NAME@L}" >> "${GITHUB_ENV}"
+          echo "BOX_URL=${BOX_URL@L}" >> "${GITHUB_ENV}"
           cat >> .npmrc <<EOF
           //npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}
           @ideamall:registry=https://npm.pkg.github.com
@@ -32,11 +34,11 @@ jobs:
           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
@@ -49,13 +51,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/${{ env.BOX_NAME }}
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USER }}
           password: ${{ secrets.SSH_KEY }}
+          strip_components: 1
 
       - name: Run Image
         uses: garygrossgarten/github-action-ssh@release
@@ -64,6 +67,9 @@ jobs:
           username: ${{ secrets.USER }}
           password: ${{ secrets.SSH_KEY }}
           command: |
-            mv /tmp/docker-compose.yml /tmp/start.sh ~/
-            chmod +x ~/start.sh
-            echo '${{ secrets.SSH_KEY }}' | sudo -S ~/start.sh ${{ env.ARTIFACT_PATH }}
+            mkdir -p ~/${{ env.BOX_NAME }} 
+            cd /tmp/${{ env.BOX_NAME }}
+            mv docker-compose.yml start.sh ~/${{ env.BOX_NAME }}
+            cd ~/${{ env.BOX_NAME }}
+            chmod +x start.sh
+            echo '${{ secrets.SSH_KEY }}' | sudo -S ./start.sh /tmp/${{ env.BOX_NAME }}/${{ env.ARTIFACT_PATH }}

.github/workflows/main.yml

@@ -13,33 +13,8 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - uses: actions/setup-node@v3
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        with:
-          node-version: 18
-          cache: pnpm
-
-      - name: Install Dependencies
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm i --frozen-lockfile
-
-      - name: Export Static pages
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm export
-
-      - name: Deploy to GitHub pages
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        with:
-          publish_dir: ./out
-          personal_token: ${{ secrets.GITHUB_TOKEN }}
-          force_orphan: true
+      - uses: actions/checkout@v4
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
       - name: Deploy to Vercel
         uses: amondnet/vercel-action@v25

.husky/pre-commit

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm test

.husky/pre-push

@@ -1,5 +1 @@
-#!/bin/sh
-
-. "$(dirname "$0")/_/husky.sh"
-
 npm run build

Dockerfile

@@ -1,23 +1,28 @@
 # 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 curl -y --no-install-recommends
+    apt-get install ca-certificates curl libjemalloc-dev -y --no-install-recommends  && \
+    rm -rf /var/lib/apt/lists/*
+# set environment variable to preload JEMalloc
+ENV LD_PRELOAD="/usr/lib/x86_64-linux-gnu/libjemalloc.so.2"
+# set GC time, set arenas number, set background_thread run GC
+ENV MALLOC_CONF=dirty_decay_ms:1000,narenas:2,background_thread:true
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
 COPY . /app
 WORKDIR /app
 
-FROM base AS prod-deps
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --prod --frozen-lockfile
-
 FROM base AS build
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --frozen-lockfile
-RUN pnpm build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store  pnpm i --frozen-lockfile
+RUN CI=true  pnpm build
 
 FROM base
-COPY --from=prod-deps /app/node_modules /app/node_modules
-COPY --from=build /app/dist /app/dist
+COPY --from=build /app/public ./public
+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"]

README.md

@@ -10,7 +10,7 @@
 ## Technology stack
 
 - Language: [TypeScript v5][2]
-- Component engine: [Nextjs v14][3]
+- Component engine: [Nextjs v15][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
 - State management: [MobX v6][10]

babel.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    // https://babeljs.io/docs/babel-preset-react
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.BABEL_ENV === 'development',
+      },
+    ],
+  ],
+  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/Address/Card.tsx

@@ -1,9 +1,9 @@
 import { Address } from '@ideamall/data-service';
-import { FC, PropsWithChildren } from 'react';
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
 import { Card, CardProps } from 'react-bootstrap';
 
-export interface AddressProps
-  extends Pick<
+export type AddressProps = Omit<HTMLAttributes<HTMLElement>, 'id'> &
+  Pick<
     Address,
     | 'country'
     | 'province'
@@ -14,9 +14,7 @@ export interface AddressProps
     | 'building'
     | 'floor'
     | 'room'
-  > {
-  className?: string;
-}
+  >;
 
 export const AddressText: FC<AddressProps> = ({
   className = 'm-0',
@@ -29,8 +27,9 @@ export const AddressText: FC<AddressProps> = ({
   building,
   floor,
   room,
+  ...props
 }) => (
-  <address className={className}>
+  <address className={className} {...props}>
     {country}
     {province}
     {city}
@@ -49,6 +48,7 @@ export type AddressCardProps = PropsWithChildren<
 
 export const AddressCard: FC<AddressCardProps> = ({
   as,
+  id,
   children,
   signature,
   mobilePhone,

components/Address/index.tsx

@@ -1,35 +1,28 @@
 import { Address } from '@ideamall/data-service';
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import {
   Field,
   RestForm,
   ScrollList,
   ScrollListProps,
 } from 'mobx-restful-table';
-import { PureComponent } from 'react';
+import { Component } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 
-import { i18n } from '../../models/Translation';
+import { i18n, t } from '../../models/Translation';
 import { AddressCard } from './Card';
 
-const { t } = i18n;
-
 export interface AddressListProps
   extends Omit<ScrollListProps<Address>, 'translator' | 'renderList'> {
   name: string;
   defaultValue?: number;
 }
 
 @observer
-export class AddressList extends PureComponent<AddressListProps> {
-  constructor(props: AddressListProps) {
-    super(props);
-    makeObservable(this);
-  }
-
+export class AddressList extends Component<AddressListProps> {
   @observable
-  creating = false;
+  accessor creating = false;
 
   get fields(): Field<Address>[] {
     return [
@@ -82,7 +75,7 @@ export class AddressList extends PureComponent<AddressListProps> {
           renderList={allItems => (
             <ul className="list-unstyled my-3">
               {allItems.map(item => (
-                <AddressCard as="li" key={item.id} {...item}>
+                <AddressCard key={item.id} as="li" {...item}>
                   <Form.Check
                     type="radio"
                     name={name}

components/Git/Card.tsx

@@ -1,14 +1,15 @@
 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 { Badge, Button, Card, CardProps, Col, Row } from 'react-bootstrap';
 
-import { GitRepository } from '../../models/Repository';
-import { i18n } from '../../models/Translation';
+import { t } from '../../models/Translation';
 import { GitLogo } from './Logo';
 
 export interface GitCardProps
-  extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
+  extends Omit<CardProps, 'id'>,
+    Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
     Partial<Pick<GitRepository, 'topics' | 'description' | 'homepage'>> {
   className?: string;
 }
@@ -22,8 +23,9 @@ export const GitCard: FC<GitCardProps> = observer(
     topics = [],
     description,
     homepage,
+    ...props
   }) => (
-    <Card className={className}>
+    <Card className={className} {...props}>
       <Card.Body className="d-flex flex-column gap-3">
         <Card.Title as="h3" className="h5">
           <a target="_blank" href={html_url} rel="noreferrer">
@@ -47,7 +49,7 @@ export const GitCard: FC<GitCardProps> = observer(
         </nav>
         <Row as="ul" className="list-unstyled g-4" xs={4}>
           {languages.map(language => (
-            <Col as="li" key={language}>
+            <Col key={language} as="li">
               <GitLogo name={language} />
             </Col>
           ))}
@@ -57,7 +59,7 @@ export const GitCard: FC<GitCardProps> = observer(
       <Card.Footer className="d-flex justify-content-between align-items-center">
         {homepage && (
           <Button variant="success" target="_blank" href={homepage}>
-            {i18n.t('home_page')}
+            {t('home_page')}
           </Button>
         )}
       </Card.Footer>

components/Git/Logo.tsx

@@ -1,21 +1,16 @@
-import { makeObservable, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { PureComponent } from 'react';
-import { Image } from 'react-bootstrap';
+import { Component } from 'react';
+import { Image, ImageProps } from 'react-bootstrap';
 
-export interface GitLogoProps {
+export interface GitLogoProps extends ImageProps {
   name: string;
 }
 
 @observer
-export class GitLogo extends PureComponent<GitLogoProps> {
-  constructor(props: GitLogoProps) {
-    super(props);
-    makeObservable(this);
-  }
-
+export class GitLogo extends Component<GitLogoProps> {
   @observable
-  path = '';
+  accessor path = '';
 
   async componentDidMount() {
     const { name } = this.props;
@@ -46,8 +41,8 @@ export class GitLogo extends PureComponent<GitLogoProps> {
 
   render() {
     const { path } = this;
-    const { name } = this.props;
+    const { name, ...props } = this.props;
 
-    return path && <Image fluid src={path} alt={name} />;
+    return path && <Image fluid {...props} src={path} alt={name} />;
   }
 }