[migrate] upgrade to Node.js 22, Next.js 15, ESLint 9 & other latest Upstream packages

[optimize] merge GitHub actions of main & other branches
[remove] useless Example pages

Author: TechQuery

.eslintrc.json

@@ -2,7 +2,7 @@ name: CI & CD
 on:
   push:
     branches:
-      - main
+      - '*'
 jobs:
   Build-and-Deploy:
     env:
@@ -25,4 +25,4 @@ jobs:
           vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
           working-directory: ./
-          vercel-args: --prod
+          vercel-args: ${{ github.ref == 'refs/heads/main' && ' --prod' || '' }}

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:22-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/*

.github/workflows/pull-request.yml

@@ -21,6 +21,7 @@ export class DrawerNav extends Component {
         break;
       }
       scrollTop = document.scrollingElement?.scrollTop;
+      // eslint-disable-next-line no-constant-condition
     } while (true);
   };
 

Dockerfile

@@ -47,7 +47,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>
           ))}

components/DrawerNav.tsx

@@ -12,8 +12,8 @@ export const GuestInfo: FC = () => (
     <Row as="ul" className="list-unstyled" xs={2} sm={4}>
       {guestData.map(({ pic, name, position }) => (
         <PersonCard
-          avatar={`/image/speaker/${pic}`}
           key={name}
+          avatar={`/image/speaker/${pic}`}
           {...{ name, position }}
         />
       ))}

components/Git/Card.tsx

@@ -53,14 +53,14 @@ export const OrganizationInfo: FC = () => (
 
       {Object.values(groupBy(sponsors, 'level')).map(sponsors => (
         <Row
+          key={sponsors[0].level}
           as="ul"
           className="list-unstyled justify-content-around p-0"
           xs={2}
           sm={5}
-          key={sponsors[0].level}
         >
           {sponsors.map(({ level, href, imgSrc }) => (
-            <Col as="li" className={styles.sponsor_item} key={imgSrc}>
+            <Col key={imgSrc} as="li" className={styles.sponsor_item}>
               <Badge className="d-inline-block align-middle m-1 w-75" bg="info">
                 {renderLevel(level)}
               </Badge>
@@ -89,7 +89,7 @@ export const OrganizationInfo: FC = () => (
         sm={5}
       >
         {partners.map(({ href, imgSrc }) => (
-          <Col as="li" className={styles.partner} key={href}>
+          <Col key={href} as="li" className={styles.partner}>
             <a href={href} target="_blank" rel="noreferrer">
               <Image className="object-fit-contain" src={imgSrc} />
             </a>

components/conference/Guest.tsx

@@ -0,0 +1,76 @@
+// @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,
+      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,
+);

components/conference/Organization.tsx

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