Fix: Note List Page Styles

样式调整，显示站点名称，获取日记首图，列表页参数获取

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

@@ -1,6 +1,14 @@
-import { LoaderFunctionArgs, json } from "@remix-run/node";
+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.except },
+  ];
+}
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
@@ -20,8 +28,8 @@ export default function Detail() {
   const note = useLoaderData<typeof loader>();
 
   return (
-    <main className="px-2 py-10 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-3xl mx-auto">
-      <section className="my-12">
+      <section className="mb-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>

app/routes/note._index.tsx

@@ -1,16 +1,22 @@
 import { useEffect } from "react";
 import { Link, useLoaderData } from "@remix-run/react";
-import { json, type MetaFunction } from "@remix-run/node";
+import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+import { clsn, siteTitle } from "~/utils";
+import { getFirstImage } from "~/utils/note";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "日记" },
+    { title: siteTitle("日记") },
     { name: "description", content: "奇趣保罗的日常笔记" },
   ];
 };
 
-export async function loader() {
+export async function loader({ request }: LoaderFunctionArgs) {
-  const note = await fetch("https://paul.ren/api/note").then((res) => res.json()) as API.Response<API.Note.INoteData[]>;
+  const url = new URL(request.url);
+  const year = url.searchParams.get("year") || new Date().getFullYear();
+  const page = url.searchParams.get("page") || 1;
+
+  const note = await fetch(`https://paul.ren/api/note/?page=${page}&year=${year}`).then((res) => res.json()) as API.Response<API.Note.INoteData[]>;
 
   return json(note);
 }
@@ -23,27 +29,32 @@ export default function Note() {
   }, []);
 
   return (
-    <main className="px-2 py-10 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-3xl mx-auto">
-      <section className="my-12">
+      <section className="mb-12">
-        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">日记</h1>
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight">日记</h1>
       </section>
       {note.data.map((item) => {
         const year = item.date.substring(0, 4);
+        const cover = getFirstImage(item);
 
         return (
-          <div
+          <Link
             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"
+            className="block group relative overflow-hidden 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"
+            to={`/note/${year}/${item.id}`}
           >
             <h2 className="text-pink-400 text-2xl font-bold mb-4">{item.title}</h2>
-            <p className="mb-4">{item.except}</p>
+            <p className={clsn(cover && "mr-40", "mb-8")}>{item.except}</p>
-            <div className="flex items-end justify-between">
+            <div className="flex items-end justify-between text-sm">
               <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>
+            {cover && (
+              <div
+                className="absolute top-0 right-0 bottom-0 w-40 transition-opacity bg-cover opacity-30 group-hover:opacity-80"
+                style={{ backgroundImage: `url("${cover}")`, clipPath: "polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%)" }}
+              />
+            )}
+          </Link>
         );
       })}
     </main>

app/utils/index.ts

@@ -1,3 +1,10 @@
+// 站点名称
+export const siteTitle = (title?: string) => {
+  const siteName = import.meta.env.APP_SITENAME;
+
+  return title ? `${title} - ${siteName}` : siteName;
+}
+
 // Classnames
 export const clsn = (...clsn: (string | undefined | null | false)[]) => {
   return clsn.filter(item => item).join(" ");

app/utils/note.ts

@@ -0,0 +1,11 @@
+// 获取第一张图片
+export const getFirstImage = (note: API.Note.INoteData) => {
+  if (note.media && note.media.length > 0) {
+    return note.media[0].url;
+  }
+
+  // 遗留版本
+  if (note.photo && note.photo.length > 0) {
+    return note.photo[0].url;
+  }
+}

vite.config.ts

@@ -4,4 +4,5 @@ import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [remix(), tsconfigPaths()],
+  envPrefix: "APP_",
 });