Merge remote-tracking branch 'origin' into v3

Author: Soecka

.env

@@ -1,12 +1,16 @@
 NEXT_PUBLIC_SITE_NAME = idea2app
 NEXT_PUBLIC_SITE_SUMMARY = 全行业信息化转型专家
+NEXT_PUBLIC_LOGO = https://github.com/idea2app.png
+
+NEXT_PUBLIC_CACHE_HOST = https://cache.idea2.app
 
 NEXT_PUBLIC_SENTRY_DSN = https://03e5d951172f411a04c1bab44022e22b@o4506471366852608.ingest.sentry.io/4506484563705856
 SENTRY_ORG = idea2app
 SENTRY_PROJECT = ows
 
-NEXT_PUBLIC_LARK_BASE = bascnFeH8Q37XWX0LLlBB9ojQzf
-NEXT_PUBLIC_CLIENT_TABLE = tblsb0vx4fqjSrGL
-NEXT_PUBLIC_PROJECT_TABLE = tblCxasoUUub3buB
-NEXT_PUBLIC_MEMBER_TABLE = tblJ98JHGEX0o6ij
-NEXT_PUBLIC_MEMBER_VIEW = vewLf4M0P8
+LARK_API_HOST = https://open.larksuite.com/open-apis/
+NEXT_PUBLIC_LARK_BASE = McGRbzEInauTTOsWX1blxbN1grh
+NEXT_PUBLIC_CLIENT_TABLE = tblRNMvpJ1UZwJW2
+NEXT_PUBLIC_PROJECT_TABLE = tblwaxbQ35uX2lUS
+NEXT_PUBLIC_MEMBER_TABLE = tblD7p7XAcrinGqO
+NEXT_PUBLIC_MEMBER_VIEW = vewLspr5VK

README.md

@@ -10,7 +10,7 @@
 ## Technology stack
 
 - Language: [TypeScript v5][2] + [MDX v3][10]
-- Component engine: [Next.js v14][3]
+- Component engine: [Next.js v15][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
 - State management: [MobX v6][11]
@@ -68,16 +68,20 @@ You can check out [the Next.js GitHub repository][27] - your feedback and contri
 
 |           name           |     file     |       description       |
 | :----------------------: | :----------: | :---------------------: |
+|     `CRAWLER_TOKEN`      | `.env.local` | Web hooks authorization |
 |   `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] |
+|      `GITHUB_TOKEN`      | `.env.local` | [Official document][31] |
+|      `LARK_APP_ID`       | `.env.local` | [Official document][32] |
+|    `LARK_APP_SECRET`     | `.env.local` | [Official document][32] |
 
 ### Vercel
 
 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][31] for more details.
+Check out our [Next.js deployment documentation][33] for more details.
 
 ### Docker
 
@@ -116,4 +120,6 @@ pnpm container
 [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
+[31]: https://docs.github.com/en/rest/authentication/authenticating-to-the-rest-api#authenticating-with-a-personal-access-token
+[32]: https://open.larksuite.com/document/server-docs/getting-started/api-access-token/app-access-token-development-guide#95c7f5f5
+[33]: https://nextjs.org/docs/deployment

components/Client/Partner.tsx

@@ -3,6 +3,7 @@ import { FC, ReactNode } from 'react';
 
 import { Client } from '../../models/Client';
 import { fileURLOf } from '../../pages/api/Lark/file/[id]';
+import { LarkImage } from '../LarkImage';
 
 export interface PartnerProps extends Client {
   className?: string;
@@ -16,12 +17,7 @@ export interface PartnerOverviewProps extends Record<'name' | 'logo' | 'address'
 
 export const Partner: FC<PartnerProps> = ({ className = '', name, image, summary, address }) => (
   <div className={`relative flex flex-col items-center justify-center gap-4 ${className}`}>
-    <img
-      className="h-20 object-fill"
-      loading="lazy"
-      src={fileURLOf(String(image))}
-      alt={String(name)}
-    />
+    <LarkImage className="h-20 object-fill" src={fileURLOf(String(image))} alt={String(name)} />
     <h3>
       <a className="stretched-link" target="_blank" href={String(address)} rel="noreferrer">
         {String(name)}

components/LarkImage.tsx

@@ -2,7 +2,6 @@ import { TableCellValue } from 'mobx-lark';
 import { ImageProps } from 'next/image';
 import { FC } from 'react';
 
-import { blobURLOf } from '../models/Base';
 import { DefaultImage, fileURLOf } from '../pages/api/Lark/file/[id]';
 
 export interface LarkImageProps extends Omit<ImageProps, 'src'> {
@@ -13,7 +12,7 @@ export const LarkImage: FC<LarkImageProps> = ({ src = DefaultImage, alt, ...prop
   <img
     loading="lazy"
     {...props}
-    src={blobURLOf(src)}
+    src={fileURLOf(src, true)}
     alt={alt}
     onError={({ currentTarget: image }) => {
       const path = fileURLOf(src),

components/NotFoundCard.tsx

@@ -10,7 +10,7 @@ export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
   i18n.currentLanguage.startsWith('zh') ? (
     <script
       src="//cdn.dnpw.org/404/v1.min.js"
-      // @ts-ignore
+      // @ts-expect-error https://www.dnpw.org/cn/pa-notfound.html
       jumptarget="/"
       jumptime="-1"
       error={title}

components/Section.tsx

@@ -0,0 +1,25 @@
+import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
+import { FC, PropsWithChildren } from 'react';
+
+import { t } from '../models/Translation';
+
+export type SectionProps = PropsWithChildren<Partial<Record<'id' | 'title' | 'link', string>>>;
+
+export const Section: FC<SectionProps> = observer(({ id, title, children, link }) => (
+  <section>
+    <h2 className="my-5 text-center" id={id}>
+      {title}
+    </h2>
+
+    {children}
+
+    {link && (
+      <footer className="mt-5 text-center">
+        <Button variant="outlined" size="small" href={link}>
+          {t('load_more')}
+        </Button>
+      </footer>
+    )}
+  </section>
+));

eslint.config.mjs

@@ -0,0 +1,77 @@
+// @ts-check
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import reactPlugin from 'eslint-plugin-react';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tsEslint from 'typescript-eslint';
+import { fileURLToPath } from 'url';
+
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url)),
+  flatCompat = new FlatCompat();
+
+export default tsEslint.config(
+  // register all of the plugins up-front
+  {
+    plugins: {
+      '@typescript-eslint': tsEslint.plugin,
+      // @ts-expect-error https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
+      react: fixupPluginRules(reactPlugin),
+      'simple-import-sort': simpleImportSortPlugin
+    }
+  },
+  {
+    // config with just ignores is the replacement for `.eslintignore`
+    ignores: ['**/node_modules/**', '**/public/**', '**/.next/**']
+  },
+
+  // extends ...
+  eslint.configs.recommended,
+  ...tsEslint.configs.recommended,
+  ...fixupConfigRules(flatCompat.extends('plugin:@next/next/core-web-vitals')),
+
+  // base config
+  {
+    languageOptions: {
+      globals: { ...globals.es2020, ...globals.browser, ...globals.node },
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir,
+        warnOnUnsupportedTypeScriptVersion: false
+      }
+    },
+    rules: {
+      'no-empty-pattern': 'warn',
+      'simple-import-sort/exports': 'error',
+      'simple-import-sort/imports': 'error',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unsafe-declaration-merging': 'warn',
+      'react/jsx-no-target-blank': 'warn',
+      'react/jsx-sort-props': [
+        'error',
+        {
+          reservedFirst: true,
+          callbacksLast: true,
+          noSortAlphabetically: true
+        }
+      ],
+      '@next/next/no-sync-scripts': 'warn'
+    }
+  },
+  {
+    files: ['**/*.js'],
+    extends: [tsEslint.configs.disableTypeChecked],
+    rules: {
+      // turn off other type-aware rules
+      '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',
+
+      // turn off rules that don't apply to JS code
+      '@typescript-eslint/explicit-function-return-type': 'off'
+    }
+  },
+  eslintConfigPrettier
+);

models/Base.ts

@@ -1,3 +1,5 @@
+import 'core-js/full/array/from-async';
+
 import { HTTPClient } from 'koajax';
 import { TableCellValue } from 'mobx-lark';
 

models/Translation.ts

@@ -7,13 +7,13 @@ export const i18n = new TranslationModel({
   'zh-TW': () => import('../translation/zh-TW'),
   'zh-HK': () => import('../translation/zh-TW'),
   'zh-MO': () => import('../translation/zh-TW'),
-  'en-US': () => import('../translation/en-US'),
+  'en-US': () => import('../translation/en-US')
 });
 
-export const LanguageName: Partial<
-  Record<(typeof i18n)['currentLanguage'], string>
-> = {
+export const { t } = i18n;
+
+export const LanguageName: Partial<Record<(typeof i18n)['currentLanguage'], string>> = {
   'zh-CN': '简体中文',
   'zh-TW': '繁體中文',
-  'en-US': 'English',
+  'en-US': 'English'
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idea2app/ows",
-  "version": "2.0.0-rc",
+  "version": "2.0.0",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "dependencies": {
@@ -12,6 +12,7 @@
     "file-type": "^19.6.0",
     "koajax": "^3.0.2",
     "lodash": "^4.17.21",
+    "mime": "^4.0.4",
     "mobx": "^6.13.4",
     "mobx-github": "^0.3.4",
     "mobx-i18n": "^0.6.0",
@@ -37,6 +38,7 @@
     "@next/eslint-plugin-next": "^14.2.15",
     "@softonus/prettier-plugin-duplicate-remover": "^1.0.1",
     "@types/eslint-config-prettier": "^6.11.3",
+    "@types/eslint__eslintrc": "^2.1.2",
     "@types/eslint__js": "^8.42.3",
     "@types/lodash": "^4.17.10",
     "@types/next-pwa": "^5.6.9",
@@ -79,16 +81,15 @@
     "printWidth": 100
   },
   "lint-staged": {
-    "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write",
-    "*.{js,mjs,ts,tsx}": "eslint --fix"
+    "*.{html,md,less,json,yml,js,mjs,ts,tsx}": "prettier --write"
   },
   "scripts": {
-    "prepare": "husky",
+    "prepare": "husky  &&  touch .env.local",
     "dev": "next dev",
     "build": "next build",
     "export": "next build  &&  next export",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint --fix  &&  git add .",
     "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/api/GitHub/core.ts

@@ -10,10 +10,10 @@ export const proxyGithub = <T>(dataFilter?: (path: string, data: T) => T) =>
     const path = url!.slice(`/api/GitHub/`.length);
 
     const { status, body: data } = await githubClient.request<T>({
-      // @ts-ignore
+      // @ts-expect-error KoAJAX type compatibility
       method,
       path,
-      // @ts-ignore
+      // @ts-expect-error KoAJAX type compatibility
       headers,
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       body: body || undefined

pages/api/Lark/core.ts

@@ -4,6 +4,7 @@ import { LarkApp, LarkData } from 'mobx-lark';
 import { safeAPI } from '../core';
 
 export const lark = new LarkApp({
+  host: process.env.LARK_API_HOST,
   id: process.env.LARK_APP_ID!,
   secret: process.env.LARK_APP_SECRET!
 });
@@ -17,10 +18,10 @@ export const proxyLark = <T extends LarkData>(dataFilter?: (path: string, data:
     const path = url!.slice(`/api/Lark/`.length);
 
     const { status, body: data } = await lark.client.request<T>({
-      // @ts-ignore
+      // @ts-expect-error KoAJAX type compatibility
       method,
       path,
-      // @ts-ignore
+      // @ts-expect-error KoAJAX type compatibility
       headers,
 
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

pages/api/Lark/file/[id].ts

@@ -1,36 +1,49 @@
 import { fileTypeFromBuffer } from 'file-type';
+import MIME from 'mime';
 import { TableCellMedia, TableCellValue } from 'mobx-lark';
+import { parse } from 'path';
 
 import { safeAPI } from '../../core';
 import { lark } from '../core';
 
 export const DefaultImage = '/idea2app.svg';
 
-export const fileURLOf = (field: TableCellValue) =>
-  field instanceof Array
-    ? field[0]
-      ? `/api/Lark/file/${(field[0] as TableCellMedia).file_token}`
-      : String(field)
-    : String(field);
+export function fileURLOf(field: TableCellValue, cache = false) {
+  if (!(field instanceof Array) || !field[0]) return field + '';
 
-export default safeAPI(async (req, res) => {
-  switch (req.method) {
+  const { file_token, type } = field[0] as TableCellMedia;
+
+  let URI = `/api/Lark/file/${file_token}`;
+
+  if (cache) URI += '.' + MIME.getExtension(type);
+
+  return URI;
+}
+
+export const CACHE_HOST = process.env.NEXT_PUBLIC_CACHE_HOST!;
+
+export default safeAPI(async ({ method, url, query, headers }, res) => {
+  const { ext } = parse(url!);
+
+  if (ext)
+    return void res.redirect(
+      new URL(new URL(url!, `http://${headers.host}`).pathname, CACHE_HOST) + ''
+    );
+  switch (method) {
+    case 'HEAD':
     case 'GET': {
-      const { id } = req.query;
+      const { id } = query;
 
       await lark.getAccessToken();
 
       const file = await lark.downloadFile(id as string);
 
-      const buffer = Buffer.alloc(file.byteLength),
-        view = new Uint8Array(file);
-
-      for (let i = 0; i < buffer.length; i++) buffer[i] = view[i];
-
-      const { mime } = (await fileTypeFromBuffer(buffer)) ?? {};
+      const { mime } = (await fileTypeFromBuffer(file)) || {};
 
       res.setHeader('Content-Type', mime as string);
-      res.send(buffer);
+
+      return void (method === 'GET' ? res.send(Buffer.from(file)) : res.end());
     }
   }
+  res.status(405).end();
 });