Chore: 更新框架到 React Router 7

修复迁移到 Tailwind 4 之后的样式差异
修复 404 页面的异常并调整样式
优化分页器组件的无障碍化，Span 标签替换成 Button

.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

.eslintrc.cjs

@@ -1,87 +0,0 @@
-/**
- * This is intended to be a basic starting point for linting in your app.
- * It relies on recommended configs out of the box for simplicity, but you can
- * and should modify this configuration to best suit your team's needs.
- */
-
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  root: true,
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-  },
-
-  // Base config
-  extends: ["eslint:recommended"],
-
-  overrides: [
-    // React
-    {
-      files: ["**/*.{js,jsx,ts,tsx}"],
-      plugins: ["react", "jsx-a11y"],
-      extends: [
-        "plugin:react/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:react-hooks/recommended",
-        "plugin:jsx-a11y/recommended",
-      ],
-      rules: {
-        "jsx-a11y/media-has-caption": "off",
-        "jsx-a11y/click-events-have-key-events": "off",
-      },
-      settings: {
-        react: {
-          version: "detect",
-        },
-        formComponents: ["Form"],
-        linkComponents: [
-          { name: "Link", linkAttribute: "to" },
-          { name: "NavLink", linkAttribute: "to" },
-        ],
-        "import/resolver": {
-          typescript: {},
-        },
-      },
-    },
-
-    // Typescript
-    {
-      files: ["**/*.{ts,tsx}"],
-      plugins: ["@typescript-eslint", "import"],
-      parser: "@typescript-eslint/parser",
-      settings: {
-        "import/internal-regex": "^~/",
-        "import/resolver": {
-          node: {
-            extensions: [".ts", ".tsx"],
-          },
-          typescript: {
-            alwaysTryTypes: true,
-          },
-        },
-      },
-      extends: [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-      ],
-    },
-
-    // Node
-    {
-      files: [".eslintrc.js"],
-      env: {
-        node: true,
-      },
-    },
-  ],
-};

.gitignore

@@ -1,5 +1,7 @@
-node_modules
+.DS_Store
-
-/.cache
-/build
 .env
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

README.md

@@ -26,4 +26,4 @@
 
 ## 感谢
 
-本项目采用 Remix + React + TypeScript + Less + Tailwind 作为主要的技术栈，感谢所有开源库作者提供的解决方案！
+本项目采用 React 19 + TypeScript + React Router 7 + Tailwind 4 作为主要的技术栈，感谢所有开源库作者提供的解决方案！

app/app.css

@@ -0,0 +1,66 @@
+@import "tailwindcss";
+
+@theme {
+  --font-mi: MiSans, ui-sans-serif, system-ui, sans-serif;
+
+  --animate-spinner-bar: spinner-bar 6s linear infinite;
+  --animate-fade-in: fade-in 0.3s both;
+  --animate-fade-out: fade-out 0.3s both;
+  --animate-fade-in-left: fade-in-left 0.3s backwards;
+  --animate-fade-off-right: fade-off-right 0.3s forwards;
+
+  @keyframes spinner-bar {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fade-in-left {
+    0% {
+      opacity: 0;
+      transform: translateX(1.5rem);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-off-right {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(1.5rem);
+    }
+  }
+}
+
+@media screen and (max-width: 639px) {
+  :root {
+    font-size: 14px;
+  }
+}

app/components/biz/gallery/image-box/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useImperativeHandle, forwardRef, Ref } from 'react';
+import React, { useState, useRef, useImperativeHandle, forwardRef, type Ref } from "react";
 import { createPortal } from 'react-dom';
 import { clsn } from '~/utils';
 

app/components/common/article/article.module.css

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .article {
   line-height: 1.7;
 
@@ -36,7 +38,8 @@
       height: 4px;
       display: block;
       border-radius: 4px;
-      background-color: rgb(244 114 182 / var(--tw-text-opacity));
+
+      @apply bg-pink-400;
     }
   }
 
@@ -50,7 +53,7 @@
   }
 
   a {
-    color:rgb(244 114 182 / var(--tw-bg-opacity));
+    @apply text-pink-400;
   }
 
   img {
@@ -77,7 +80,7 @@
     font-size: smaller;
     padding: .15rem .5rem;
     border-radius: .75rem;
-    background-color: rgb(165 243 252);
+    @apply bg-cyan-200;
   }
 
   ul {
@@ -86,7 +89,7 @@
     margin-left: 1.25rem;
 
     ::marker {
-      color: rgb(244 114 182 / var(--tw-bg-opacity));
+      @apply text-pink-400;
     }
   }
 }

app/components/common/article/index.tsx

@@ -1,5 +1,5 @@
 import { clsn } from "~/utils";
-import styles from "./article.module.less";
+import styles from "./article.module.css";
 
 interface ArticleProps {
   className?: string;

app/components/layout/header.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 
 const navItems = [
   { name: "首页", to: "/" },

app/components/layout/spinner.tsx

@@ -1,4 +1,4 @@
-import { useNavigation } from "@remix-run/react";
+import { useNavigation } from "react-router";
 
 export default function SpinnerBar() {
   const navigation = useNavigation();

app/components/ui/icons.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 type IconProps = SVGProps<SVGSVGElement>;
 

app/components/ui/pagination.tsx

@@ -55,16 +55,16 @@ function Pagination({ current = 3, total, size, onClick }: PaginationProps) {
         }
 
         return (
-          <span
+          <button
             key={index}
             className={clsn(
-              "inline-block w-10 h-10 leading-[2] md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
+              "inline-block w-10 h-10 leading-loose md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
               current === item ? "bg-cyan-200 border-b-cyan-300 text-white font-bold" : "bg-white border-b-cyan-200"
             )}
             onClick={() => onClick(item)}
           >
             {item}
-          </span>
+          </button>
         );
       })}
     </div>

app/index.css

@@ -1,9 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@media screen and (max-width: 639px) {
-  :root {
-    font-size: 14px;
-  }
-}

app/root.tsx

@@ -1,82 +1,90 @@
-import type { LinksFunction } from "@remix-run/node";
 import {
+  isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  isRouteErrorResponse,
+  useNavigate,
   useRouteError,
-} from "@remix-run/react";
+} from "react-router";
-import Header from "./components/layout/header";
+
-import Spinner from "./components/common/spinner";
+import type { Route } from "./+types/root";
-import Footer from "./components/layout/footer";
 import { siteTitle } from "~/utils";
 
-import "./index.css";
+import "./app.css";
 
-export function ErrorBoundary() {
+export const links: Route.LinksFunction = () => [
-  const error = useRouteError();
-  const isRouteError = isRouteErrorResponse(error);
-
-  const [statusCode, message] = (() => {
-    if (isRouteError) {
-      return [error.status, error.statusText];
-    }
-
-    if (error instanceof Error) {
-      return [500, error.message];
-    }
-
-    return [500, "未知异常"];
-  })();
-
-  return (
-    <html lang="zh-cmn-hans">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>{siteTitle(statusCode)}</title>
-        <Meta />
-        <Links />
-      </head>
-      <body className="font-mi pt-16 bg-orange-50 text-neutral-600">
-        <Header />
-        <main className="px-2 py-24 max-w-3xl mx-auto">
-          <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">
-            {statusCode}
-          </h1>
-          <p className="text-center opacity-60">{message}</p>
-        </main>
-        <Footer />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-export const links: LinksFunction = () => [
   { rel: "icon", href: "/icon.png" },
-  { rel: "stylesheet", href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap" },
+  {
+    rel: "stylesheet",
+    href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap",
+  },
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
+  const error = useRouteError();
+
   return (
     <html lang="zh-cmn-hans">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {isRouteErrorResponse(error) && error.status === 404 && <title>{siteTitle(error.status)}</title>}
         <Meta />
         <Links />
       </head>
       <body className="font-mi pt-16 bg-orange-50 text-neutral-600">
-        <Spinner />
+        {children}
-        <Header />
-        <Outlet />
-        <Footer />
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const navigate = useNavigate();
+
+  let message = "啊哦";
+  let details = "发生了未知的异常";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      message = "404";
+      details = "页面不存在";
+    } else {
+      details = error.statusText || details;
+    }
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="px-2 py-24 max-w-3xl mx-auto">
+      <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-2">
+        {message}
+      </h1>
+      <p className="text-center opacity-60 mb-8">{details}</p>
+      <p className="text-center">
+        <button
+          className="inline-block py-3 px-5 bg-pink-400 text-white rounded-xl cursor-pointer"
+          onClick={() => navigate("/")}
+        >
+          返回首页
+        </button>
+      </p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

app/routes.ts

@@ -0,0 +1,16 @@
+import {
+  type RouteConfig,
+  index,
+  layout,
+  route,
+} from "@react-router/dev/routes";
+
+export default [
+  layout("routes/app-layout.tsx", [
+    index("routes/index.tsx"),
+    route("note", "routes/note.tsx"),
+    route("note/:year/:id", "routes/note-detail.tsx"),
+    route("gallery/*", "routes/gallery.tsx"),
+    route("*", "routes/page.tsx"),
+  ]),
+] satisfies RouteConfig;

app/routes/$.tsx

@@ -1,39 +0,0 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import Article from "~/components/common/article";
-import { siteTitle } from "~/utils";
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return [
-    { title: data ? siteTitle(data.data.title) : "404" },
-    { name: "description", content: data?.data.desc },
-  ];
-}
-
-export async function loader({ params }: LoaderFunctionArgs) {
-  const slug = params["*"];
-
-  const page = await fetch(`https://paul.ren/api/page/get?slug=${slug}&html`).then((res) => res.json()) as API.Response<API.Page.IPageData>;
-
-  if (page.status === "Failed") {
-    throw json("Not Found", { status: 404, statusText: page.msg });
-  }
-
-  return page;
-}
-
-export default function DynamicPage() {
-  const page = useLoaderData<typeof loader>();
-
-  return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
-      <section className="mb-12">
-        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
-        <p className="text-center opacity-60">{page.data.desc}</p>
-      </section>
-      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
-        <Article html={page.data.content} />
-      </section>
-    </main>
-  );
-}

app/routes/_index/styles.module.less

@@ -1,7 +0,0 @@
-.avatar {
-  width: 160px;
-  position: relative;
-  --path: path('M0 88V0h160v88h-8c0 39.738-32.262 72-72 72S8 127.738 8 88H0z');
-  --webkit-clip-path: var(--path);
-  clip-path: var(--path);
-}

app/routes/app-layout.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from "react-router";
+
+import Footer from "~/components/layout/footer";
+import Header from "~/components/layout/header";
+import Spinner from "~/components/layout/spinner";
+
+export default function AppLayout() {
+  return (
+    <>
+      <Spinner />
+      <Header />
+      <Outlet />
+      <Footer />
+    </>
+  );
+}

app/routes/gallery.tsx

@@ -1,20 +1,26 @@
-import { NavLink, useLoaderData, useNavigate } from "@remix-run/react";
+import { NavLink, useNavigate } from "react-router";
-import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+
-import Pagination from "~/components/common/pagination";
-import { clsn, siteTitle } from "~/utils";
-import { StarFill } from "~/components/common/icons";
 import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
+import { StarFill } from "~/components/ui/icons";
+import Pagination from "~/components/ui/pagination";
+import { clsn, siteTitle } from "~/utils";
 
-import styles from "./styles.module.less";
+import type { Route } from "./+types/gallery";
+import styles from "./gallery.module.css";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export function meta({ loaderData }: Route.MetaArgs) {
   return [
-    { title: siteTitle(data?.currentCategory?.name || "相册") },
+    { title: siteTitle(loaderData?.currentCategory?.name || "相册") },
-    { name: "description", content: data?.currentCategory?.description || "奇趣保罗的照片与收藏" },
+    {
+      name: "description",
+      content:
+        loaderData?.currentCategory?.description ||
+        "奇趣保罗的照片与收藏",
+    },
   ];
-};
+}
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
   const url = new URL(request.url);
   const page = url.searchParams.get("page") || "1";
 
@@ -28,7 +34,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     cateIndex = category.data.findIndex((item) => item.slug === params["*"]);
 
     if (cateIndex === -1) {
-      throw json("Not Found", { status: 404 });
+      throw new Response("Not Found", { status: 404 });
     }
 
     searchParams.append("cate", String(category.data[cateIndex].id));
@@ -40,9 +46,9 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   return { media, category, currentCategory, page };
 }
 
-export default function Gallery() {
+export default function Gallery({ loaderData }: Route.ComponentProps) {
   const navigate = useNavigate();
-  const { media, category, page } = useLoaderData<typeof loader>();
+  const { media, category, page } = loaderData;
 
   // const lightBoxInst = useRef();
   const { ref: lightBoxInst, open } = useLightBox();

app/routes/index.module.css

@@ -0,0 +1,7 @@
+.avatar {
+  width: 160px;
+  position: relative;
+  --path: path("M0 88V0h160v88h-8c0 39.738-32.262 72-72 72S8 127.738 8 88H0z");
+  -webkit-clip-path: var(--path);
+  clip-path: var(--path);
+}

app/routes/index.tsx

@@ -1,18 +1,27 @@
-import { Link, useLoaderData } from "@remix-run/react";
+import { Link } from "react-router";
-import { type MetaFunction } from "@remix-run/node";
-import { siteTitle } from "~/utils";
-import { ArrowDown, BiliBili, CloudMusic, GitHub, QQ, Steam, TwitterX } from "~/components/common/icons";
 
-import styles from "./styles.module.less";
+import {
+  ArrowDown,
+  BiliBili,
+  CloudMusic,
+  GitHub,
+  QQ,
+  Steam,
+  TwitterX,
+} from "~/components/ui/icons";
+import { siteTitle } from "~/utils";
+
+import type { Route } from "./+types/index";
+import styles from "./index.module.css";
 
 const year = new Date().getFullYear();
 
-export const meta: MetaFunction = () => {
+export function meta({}: Route.MetaArgs) {
   return [
     { title: siteTitle() },
     { name: "description", content: "一只正在学习前后端技术的萌新" },
   ];
-};
+}
 
 export async function loader() {
   const data = (await fetch("https://paul.ren/api/sync").then((res) =>
@@ -22,12 +31,12 @@ export async function loader() {
   return { data };
 }
 
-export default function Index() {
+export default function Index({ loaderData }: Route.ComponentProps) {
-  const { data } = useLoaderData<typeof loader>();
+  const { data } = loaderData;
 
   return (
     <main className="px-2 py-24 max-w-3xl mx-auto">
-      <section className="-mt-40 relative flex flex-col h-screen min-h-[40rem] max-w-3xl mx-auto">
+      <section className="-mt-40 relative flex flex-col h-screen min-h-160 max-w-3xl mx-auto">
         <div className="my-auto px-4 py-10 bg-white rounded-xl text-center">
           <div className="mx-auto w-40 mb-10 relative select-none">
             <div className="top-4 left-2 w-36 h-36 rounded-full absolute bg-pink-100"></div>

app/routes/note-detail.tsx

@@ -1,39 +1,42 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
+
 import Article from "~/components/common/article";
-import { CupFill, ShareFill, ThumbUpFill } from "~/components/common/icons";
+import { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
 import { siteTitle } from "~/utils";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+import type { Route } from "./+types/note-detail";
+
+export function meta({ loaderData }: Route.MetaArgs) {
   return [
-    { title: data ? siteTitle(data.data.title) : "404" },
+    { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
-    { name: "description", content: data?.data.except },
+    { name: "description", content: loaderData?.data.except },
   ];
 }
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
   if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
-    throw json("Not Found", { status: 404, statusText: "链接格式错误" });
+    throw new Response("Not Found", { status: 404 });
   }
 
-  const note = await fetch(`https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`).then((res) => res.json()) as API.Response<API.Note.INoteData>;
+  const note = (await fetch(
+    `https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`
+  ).then((res) => res.json())) as API.Response<API.Note.INoteData>;
 
   if (note.status === "Failed") {
-    throw json("Not Found", { status: 404, statusText: note.msg });
+    throw new Response("Not Found", { status: 404 });
   }
 
   return note;
 }
 
-export default function Detail() {
+export default function NoteDetail({ loaderData }: Route.ComponentProps) {
-  const note = useLoaderData<typeof loader>();
+  const note = loaderData;
 
   const [likes, setLikes] = useState(note.data.likes);
 
   const onLike = () => {
     setLikes((prevLike) => prevLike + 1);
-  }
+  };
 
   const onShare = () => {
     const shareData = {
@@ -44,16 +47,18 @@ export default function Detail() {
 
     if ("share" in navigator) {
       navigator.share(shareData);
-    }
+    } else {
-    else {
       alert("当前操作系统尚未实现此 API");
     }
-  }
+  };
 
   return (
     <main className="px-2 py-24 max-w-3xl mx-auto">
       <section className="mb-12">
-        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4" style={{ viewTransitionName: `note-title-${note.data.id}` }}>
+        <h1
+          className="text-center text-5xl/tight md:text-7xl/tight mb-4"
+          style={{ viewTransitionName: `note-title-${note.data.id}` }}
+        >
           {note.data.title}
         </h1>
         <p className="text-center opacity-60">{note.data.date}</p>

app/routes/note.tsx

@@ -1,19 +1,21 @@
-import { ChangeEvent } from "react";
+import { type ChangeEvent } from "react";
-import { Link, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
+import { Link, useNavigate, useSearchParams } from "react-router";
-import { LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+
-import Pagination from "~/components/common/pagination";
+import { StarFill, ThumbUpFill } from "~/components/ui/icons";
+import Pagination from "~/components/ui/pagination";
 import { clsn, siteTitle } from "~/utils";
 import { getFirstImage, years } from "~/utils/note";
-import { StarFill, ThumbUpFill } from "~/components/common/icons";
 
-export const meta: MetaFunction = () => {
+import type { Route } from "./+types/note";
+
+export function meta({}: Route.MetaArgs) {
   return [
     { title: siteTitle("日记") },
     { name: "description", content: "奇趣保罗的日常笔记" },
   ];
-};
+}
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
   const url = new URL(request.url);
   const year = url.searchParams.get("year") || new Date().getFullYear();
   const page = url.searchParams.get("page") || 1;
@@ -23,10 +25,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
   return { note, page, year };
 }
 
-export default function Note() {
+export default function Note({ loaderData }: Route.ComponentProps) {
   const navigate = useNavigate();
   const [params, setParams] = useSearchParams();
-  const { note, page, year } = useLoaderData<typeof loader>();
+  const { note, page, year } = loaderData;
 
   const onChangeYear = (ev: ChangeEvent<HTMLSelectElement>) => {
     navigate({
@@ -90,7 +92,7 @@ export default function Note() {
       </section>
       <section className="flex gap-4 flex-col-reverse justify-between md:flex-row items-center">
         <select
-          className="cursor-pointer px-5 py-3 rounded-xl border-4 border-transparent border-b-cyan-200"
+          className="cursor-pointer px-5 py-3 rounded-xl bg-white border-4 border-transparent border-b-cyan-200"
           value={year}
           onChange={onChangeYear}
         >

app/routes/page.tsx

@@ -0,0 +1,41 @@
+import Article from "~/components/common/article";
+import { siteTitle } from "~/utils";
+
+import type { Route } from "./+types/page";
+
+export function meta({ loaderData }: Route.MetaArgs) {
+  return [
+    { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
+    { name: "description", content: loaderData?.data.desc },
+  ];
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const slug = params["*"];
+
+  const page = (await fetch(
+    `https://paul.ren/api/page/get?slug=${slug}&html`,
+  ).then((res) => res.json())) as API.Response<API.Page.IPageData>;
+
+  if (page.status === "Failed") {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  return page;
+}
+
+export default function DynamicPage({ loaderData }: Route.ComponentProps) {
+  const page = loaderData;
+
+  return (
+    <main className="px-2 py-24 max-w-3xl mx-auto">
+      <section className="mb-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
+        <p className="text-center opacity-60">{page.data.desc}</p>
+      </section>
+      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
+        <Article html={page.data.content} />
+      </section>
+    </main>
+  );
+}

env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="@remix-run/node" />
-/// <reference types="vite/client" />

package.json

@@ -5,43 +5,29 @@
     "url": "https://paul.ren"
   },
   "private": true,
-  "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix vite:build",
+    "build": "react-router build",
-    "dev": "remix vite:dev",
+    "dev": "react-router dev",
-    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "react-router-serve ./build/server/index.js",
-    "start": "remix-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
-    "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/node": "^2.13.1",
+    "@react-router/node": "7.15.1",
-    "@remix-run/react": "^2.13.1",
+    "@react-router/serve": "7.15.1",
-    "@remix-run/serve": "^2.13.1",
+    "isbot": "^5.1.36",
-    "isbot": "^4.1.0",
+    "react": "^19.2.6",
-    "react": "^18.3.1",
+    "react-dom": "^19.2.6",
-    "react-dom": "^18.3.1"
+    "react-router": "7.15.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.13.1",
+    "@react-router/dev": "7.15.1",
-    "@types/react": "^18.3.3",
+    "@tailwindcss/vite": "^4.2.2",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^22",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@types/react": "^19.2.14",
-    "autoprefixer": "^10.4.16",
+    "@types/react-dom": "^19.2.3",
-    "eslint": "^8.38.0",
+    "tailwindcss": "^4.2.2",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "typescript": "^5.9.3",
-    "eslint-plugin-import": "^2.28.1",
+    "vite": "^8.0.3"
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "less": "^4.2.0",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.0",
-    "vite-tsconfig-paths": "^4.2.1"
-  },
-  "engines": {
-    "node": ">=20.0.0"
   }
 }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config;

tailwind.config.js

@@ -1,41 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./app/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      fontFamily: {
-        mi: "MiSans",
-      },
-      animation: {
-        "spinner-bar": "spinnerBar 6s linear infinite",
-        "fade-in": "fadeIn .3s both",
-        "fade-out": "fadeOut .3s both",
-        "fade-in-left": "fadeInLeft .3s backwards",
-        "fade-off-right": "fadeOffRight .3s forwards",
-      },
-      keyframes: {
-        spinnerBar: {
-          "0%": { width: "0%" },
-          "100%": { width: "100%" },
-        },
-        fadeIn: {
-          "0%": { opacity: 0 },
-          "100%": { opacity: 1 },
-        },
-        fadeOut: {
-          "0%": { opacity: 1 },
-          "100%": { opacity: 0 },
-        },
-        fadeInLeft: {
-          "0%": { opacity: 0, transform: "translateX(1.5rem)" },
-          "100%": { opacity: 1, transform: "translateX(0)" },
-        },
-        fadeOffRight: {
-          "0%": { opacity: 1, transform: "translateX(0)" },
-          "100%": { opacity: 0, transform: "translateX(1.5rem)" },
-        },
-      },
-    },
-  },
-  plugins: [],
-};

tsconfig.json

@@ -1,24 +1,26 @@
 {
-  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "isolatedModules": true,
+    "types": ["node", "vite/client"],
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "target": "ES2022",
-    "strict": true,
+    "module": "ES2022",
-    "allowJs": true,
+    "moduleResolution": "bundler",
-    "skipLibCheck": true,
+    "jsx": "react-jsx",
-    "forceConsistentCasingInFileNames": true,
+    "rootDirs": [".", "./.react-router/types"],
-    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
-
+    "esModuleInterop": true,
-    // Vite takes care of building everything, not tsc.
+    "verbatimModuleSyntax": true,
-    "noEmit": true
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
   }
 }

vite.config.ts

@@ -1,8 +1,11 @@
-import { vitePlugin as remix } from "@remix-run/dev";
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [remix(), tsconfigPaths()],
+  plugins: [tailwindcss(), reactRouter()],
+  resolve: {
+    tsconfigPaths: true,
+  },
   envPrefix: "APP_",
 });