[add] Requirement Evaluation pages

.github/workflows/main.yml

@@ -2,7 +2,7 @@ name: CI & CD
 on:
   push:
     branches:
-      - main
+      - '**'
 jobs:
   Build-and-Deploy:
     env:

components/Layout/Footer.tsx

@@ -1,5 +1,5 @@
 export const Footer = () => (
-  <div className="container mx-auto flex max-w-screen-xl items-center justify-between border-t-2 px-4 py-12 text-center">
+  <div className="container mx-auto flex max-w-(--breakpoint-xl) items-center justify-between border-t-2 px-4 py-12 text-center">
     © 2024 idea2app
     <ul className="flex gap-4">
       <li>

components/Layout/MainNavigator.tsx

@@ -103,7 +103,7 @@ export class MainNavigator extends Component {
         onClose={() => (this.menuExpand = false)}
       >
         <Toolbar disableGutters />
-        <div className="bg-background-paper py-3 elevation-16">
+        <div className="bg-background-paper elevation-16 py-3">
           <nav className="flex flex-col items-center gap-4">{this.renderLinks()}</nav>
         </div>
       </Drawer>
@@ -112,9 +112,9 @@ export class MainNavigator extends Component {
 
   render() {
     return (
-      <AppBar color="transparent" className="fixed backdrop-blur" style={{ zIndex: 1201 }}>
+      <AppBar color="transparent" className="fixed backdrop-blur-sm" style={{ zIndex: 1201 }}>
         <Toolbar>
-          <div className="container mx-auto flex max-w-screen-xl items-center justify-between px-3">
+          <div className="container mx-auto flex max-w-(--breakpoint-xl) items-center justify-between px-3">
             <div className="flex flex-row items-center gap-3">
               {this.renderDrawer()}
 

components/Layout/ScrollListPage.tsx

@@ -1,19 +1,18 @@
 import { DataObject, Filter, ListModel } from 'mobx-restful';
-import { FC, ReactNode } from 'react';
+import { FC, HTMLAttributes } from 'react';
 
 import { i18n } from '../../models/Translation';
 import { PageHead } from '../PageHead';
 import { ScrollList } from '../ScrollList';
 
-export interface ScrollListPageProps<D extends DataObject, F extends Filter<D> = Filter<D>> {
+export interface ScrollListPageProps<D extends DataObject, F extends Filter<D> = Filter<D>>
+  extends HTMLAttributes<HTMLDivElement> {
   store: ListModel<D, F>;
   filter?: F;
   defaultData?: D[];
   title: string;
   header: string;
-  className?: string;
   scrollList?: boolean;
-  children?: ReactNode;
   Layout: FC<{ defaultData: D[]; className?: string }>;
 }
 
@@ -29,7 +28,7 @@ export const ScrollListPage = <D extends DataObject, F extends Filter<D> = Filte
   Layout,
   ...rest
 }: ScrollListPageProps<D, F>) => (
-  <div className={`container mx-auto max-w-screen-xl px-4 pb-6 pt-16 ${className}`}>
+  <div className={`container mx-auto max-w-(--breakpoint-xl) px-4 pt-16 pb-6 ${className}`}>
     <PageHead title={title} />
     <h1 className="my-8 text-4xl">{header}</h1>
 

components/Layout/Section.tsx

@@ -11,7 +11,7 @@ export type SectionProps = PropsWithChildren<
 
 export const Section: FC<SectionProps> = observer(
   ({ id, title, children, link, className = '' }) => (
-    <section className={`mx-auto flex max-w-screen-xl flex-col gap-6 py-8 ${className}`}>
+    <section className={`mx-auto flex max-w-(--breakpoint-xl) flex-col gap-6 py-8 ${className}`}>
       <h2 className="text-center" id={id}>
         {title}
       </h2>

components/Member/Card.tsx

@@ -1,9 +1,9 @@
 import { CardProps, Chip } from '@mui/material';
+import { marked } from 'marked';
 import { observer } from 'mobx-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { FC } from 'react';
-import { Markdown } from 'react-marked-renderer';
 
 import { Member } from '../../models/Member';
 import { GithubIcon } from '../Layout/Svg';
@@ -13,11 +13,11 @@ export type MemberCardProps = Member & Omit<CardProps, 'id'>;
 export const MemberCard: FC<MemberCardProps> = observer(
   ({ className = '', nickname, skill, position, summary, github }) => (
     <li
-      className={`relative rounded-2xl border p-4 elevation-1 hover:elevation-8 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
+      className={`elevation-1 hover:elevation-8 relative rounded-2xl border p-4 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
     >
       {github && (
         <a
-          className="absolute right-4 top-4"
+          className="absolute top-4 right-4"
           href={`https://github.com/${String(github)}`}
           target="_blank"
           rel="noreferrer"
@@ -50,7 +50,7 @@ export const MemberCard: FC<MemberCardProps> = observer(
         ))}
       </ul>
 
-      <Markdown markdown={String(summary)} />
+      <div dangerouslySetInnerHTML={{ __html: marked(summary as string) }} />
     </li>
   ),
 );

eslint.config.mjs

@@ -1,24 +1,30 @@
-// @ts-check
-import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
-import { FlatCompat } from '@eslint/eslintrc';
+import cspellPlugin from '@cspell/eslint-plugin';
 import eslint from '@eslint/js';
+// @ts-expect-error eslint-plugin-next doesn't come with TypeScript definitions
+import nextPlugin from '@next/eslint-plugin-next';
 import eslintConfigPrettier from 'eslint-config-prettier';
-import reactPlugin from 'eslint-plugin-react';
+import react 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();
+/**
+ * @see{@link https://github.com/typescript-eslint/typescript-eslint/blob/main/eslint.config.mjs}
+ * @see{@link https://github.com/vercel/next.js/issues/71763#issuecomment-2476838298}
+ */
+
+const tsconfigRootDir = fileURLToPath(new URL('.', import.meta.url));
 
 export default tsEslint.config(
   // register all of the plugins up-front
   {
     plugins: {
-      '@typescript-eslint': tsEslint.plugin,
-      react: fixupPluginRules(reactPlugin),
       'simple-import-sort': simpleImportSortPlugin,
+      '@typescript-eslint': tsEslint.plugin,
+      react,
+      '@next/next': nextPlugin,
+      '@cspell': cspellPlugin,
     },
   },
   {
@@ -29,7 +35,6 @@ export default tsEslint.config(
   // extends ...
   eslint.configs.recommended,
   ...tsEslint.configs.recommended,
-  ...fixupConfigRules(flatCompat.extends('plugin:@next/next/core-web-vitals')),
 
   // base config
   {
@@ -42,13 +47,33 @@ export default tsEslint.config(
       },
     },
     rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+      'arrow-body-style': ['error', 'as-needed'],
       'no-empty-pattern': 'warn',
+      'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: "TSPropertySignature[key.name='children']",
+          message: 'Please use PropsWithChildren<T> instead of defining children manually',
+        },
+      ],
+      'consistent-return': 'warn',
+      'prefer-destructuring': ['error', { object: true, array: true }],
+      // simple-import-sort
       'simple-import-sort/exports': 'error',
       'simple-import-sort/imports': 'error',
+      // typescript
       '@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',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+      // react
+      'react/no-unescaped-entities': 'off',
+      'react/self-closing-comp': ['error', { component: true, html: true }],
+      'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
       'react/jsx-no-target-blank': 'warn',
       'react/jsx-sort-props': [
         'error',
@@ -58,18 +83,18 @@ export default tsEslint.config(
           noSortAlphabetically: true,
         },
       ],
+      // next
       '@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',
+      // spellchecker
+      '@cspell/spellchecker': [
+        'warn',
+        {
+          cspell: {
+            language: 'en',
+            dictionaries: ['typescript', 'node', 'html', 'css', 'bash', 'npm', 'pnpm'],
+          },
+        },
+      ],
     },
   },
   eslintConfigPrettier,

package.json

@@ -9,63 +9,58 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/lab": "6.0.0-beta.11",
-    "@mui/material": "^6.4.1",
-    "@sentry/nextjs": "^8.51.0",
-    "file-type": "^20.0.0",
+    "@giscus/react": "^3.1.0",
+    "@mui/lab": "6.0.0-beta.30",
+    "@mui/material": "^6.4.7",
+    "@sentry/nextjs": "^9.5.0",
+    "file-type": "^20.4.1",
     "koajax": "^3.1.1",
     "lodash": "^4.17.21",
+    "marked": "^15.0.7",
     "mime": "^4.0.6",
-    "mobx": "^6.13.5",
+    "mobx": "^6.13.6",
     "mobx-github": "^0.3.5",
     "mobx-i18n": "^0.6.0",
     "mobx-lark": "^2.0.0",
     "mobx-react": "^9.2.0",
-    "mobx-restful": "^2.0.0",
-    "next": "^15.1.6",
+    "mobx-restful": "^2.1.0",
+    "next": "^15.2.2",
     "next-pwa": "~5.6.0",
     "next-ssr-middleware": "^0.8.9",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-marked-renderer": "^2.0.1",
-    "web-utility": "^4.4.2",
-    "webpack": "^5.97.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "web-utility": "^4.4.3",
+    "webpack": "^5.98.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.25.9",
-    "@babel/plugin-transform-typescript": "^7.26.7",
+    "@babel/plugin-transform-typescript": "^7.26.8",
     "@babel/preset-react": "^7.26.3",
-    "@cspell/eslint-plugin": "^8.17.2",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.19.0",
-    "@next/eslint-plugin-next": "^15.1.6",
+    "@cspell/eslint-plugin": "^8.17.5",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/js": "^9.22.0",
+    "@next/eslint-plugin-next": "^15.2.2",
+    "@tailwindcss/postcss": "^4.0.13",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/eslint__eslintrc": "^2.1.2",
-    "@types/eslint__js": "^8.42.3",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.16",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.10.10",
-    "@types/react": "^18.3.18",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
-    "@typescript-eslint/types": "^8.21.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.19.0",
-    "eslint-config-next": "^15.1.6",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-material-ui": "^1.0.1",
+    "@types/node": "^22.13.10",
+    "@types/react": "^19.0.10",
+    "eslint": "^9.22.0",
+    "eslint-config-next": "^15.2.2",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^15.14.0",
+    "globals": "^16.0.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.4.3",
-    "postcss": "^8.5.1",
-    "prettier": "^3.4.2",
+    "lint-staged": "^15.5.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^3.4.17",
-    "typescript": "~5.7.3",
-    "typescript-eslint": "^8.21.0"
+    "tailwindcss": "^4.0.13",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.26.1"
   },
   "resolutions": {
     "next": "$next"

pages/api/crawler/task.ts

@@ -7,7 +7,7 @@ export interface CrawlerTask {
   title?: string;
 }
 
-const CRAWLER_TOKEN = process.env.CRAWLER_TOKEN;
+const { CRAWLER_TOKEN } = process.env;
 
 export default safeAPI(async ({ method, headers, body }, response) => {
   if (!CRAWLER_TOKEN || CRAWLER_TOKEN !== headers.authorization?.split(/\s+/)[1])
@@ -20,7 +20,7 @@ export default safeAPI(async ({ method, headers, body }, response) => {
   const { status, body: data } = await githubClient.post('repos/idea2app/OWS-cache/issues', {
     title,
     body: `### URL\n\n${URI}`,
-    labels: ['crawler']
+    labels: ['crawler'],
   });
   response.status(status).send(data);
 });