Feat: Add Note List & Detail Page

日记列表与详情页面，包括载入条和文章组件

app/routes/note.$year.$id.tsx

@@ -0,0 +1,33 @@
+import { LoaderFunctionArgs, json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import Article from "~/components/common/article";
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
+    throw json("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>;
+
+  if (note.status === "Failed") {
+    throw json("Not Found", { status: 404 });
+  }
+
+  return json(note);
+}
+
+export default function Detail() {
+  const note = useLoaderData<typeof loader>();
+
+  return (
+    <main className="px-2 py-10 max-w-3xl mx-auto">
+      <section className="my-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{note.data.title}</h1>
+        <p className="text-center opacity-60">{note.data.date}</p>
+      </section>
+      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
+        <Article html={note.data.content_html} />
+      </section>
+    </main>
+  );
+};

app/routes/note._index.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { Link, useLoaderData } from "@remix-run/react";
+import { json, type MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "日记" },
+    { name: "description", content: "奇趣保罗的日常笔记" },
+  ];
+};
+
+export async function loader() {
+  const note = await fetch("https://paul.ren/api/note").then((res) => res.json()) as API.Response<API.Note.INoteData[]>;
+
+  return json(note);
+}
+
+export default function Note() {
+  const note = useLoaderData<typeof loader>();
+
+  useEffect(() => {
+    console.log(note);
+  }, []);
+
+  return (
+    <main className="px-2 py-10 max-w-3xl mx-auto">
+      <section className="my-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">日记</h1>
+      </section>
+      {note.data.map((item) => {
+        const year = item.date.substring(0, 4);
+
+        return (
+          <div
+            key={item.id}
+            className="p-5 bg-white rounded-xl mb-8 last:mb-0 border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200"
+          >
+            <h2 className="text-pink-400 text-2xl font-bold mb-4">{item.title}</h2>
+            <p className="mb-4">{item.except}</p>
+            <div className="flex items-end justify-between">
+              <p className="opacity-60">{item.date}</p>
+              <Link className="py-2 px-4 bg-cyan-400 hover:bg-pink-400 transition-colors text-white rounded-xl" to={`/note/${year}/${item.id}`}>
+                继续阅读
+              </Link>
+            </div>
+          </div>
+        );
+      })}
+    </main>
+  );
+}