Feat(Gallery): Adds Pagination

相册翻页功能，顺带优化图片加载高度闪烁的问题

app/routes/gallery.$/route.tsx

@@ -1,5 +1,6 @@
-import { NavLink, useLoaderData } from "@remix-run/react";
+import { NavLink, useLoaderData, useNavigate } from "@remix-run/react";
 import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+import Pagination from "~/components/common/pagination";
 import { clsn, siteTitle } from "~/utils";
 
 import styles from "./styles.module.less";
@@ -7,7 +8,7 @@ import styles from "./styles.module.less";
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
     { title: siteTitle(data?.currentCategory?.name || "相册") },
-    { name: "description", content: "奇趣保罗的日常笔记" },
+    { name: "description", content: data?.currentCategory?.description || "奇趣保罗的照片与收藏" },
   ];
 };
 
@@ -34,11 +35,18 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const media = await fetch(`https://paul.ren/api/media/?${searchParams.toString()}`).then((res) => res.json()) as unknown as API.PageResponse<API.Media.IMediaData[]>;
   const currentCategory = cateIndex > -1 ? category.data[cateIndex]: undefined;
 
-  return json({ media, category, currentCategory });
+  return json({ media, category, currentCategory, page });
 }
 
 export default function Gallery() {
-  const { media, category } = useLoaderData<typeof loader>();
+  const navigate = useNavigate();
+  const { media, category, page } = useLoaderData<typeof loader>();
+
+  const onChangePage = (value: number) => {
+    navigate({
+      search: `?page=${value}`,
+    });
+  };
 
   return (
     <main className="px-2 py-24 max-w-screen-2xl mx-auto">
@@ -55,10 +63,10 @@ export default function Gallery() {
           ))}
         </div>
       </section>
-      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))]">
+      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))] mb-12">
         {media.data.map((item) => (
           <div key={item.id} className="bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200">
-            <img className={styles.image} src={item.thumb_url} alt={item.title} />
+            <img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />
             <div className="relative p-4 sm:p-6 -mt-6 sm:-mt-12">
               <span className="block text-sm mb-4 opacity-60">{item.take_time.substring(0, 10)}</span>
               <h1 className="text-pink-400 text-xl sm:text-2xl font-bold text-ellipsis overflow-hidden">{item.title}</h1>
@@ -66,6 +74,9 @@ export default function Gallery() {
           </div>
         ))}
       </section>
+      <section className="text-center">
+        <Pagination current={Number(page)} size={20} total={media.count} onClick={onChangePage} />
+      </section>
     </main>
   );
 }

app/routes/gallery.$/styles.module.less

@@ -1,4 +1,6 @@
 .image {
+  width: 100%;
   aspect-ratio: 1 / 1;
+  background-color: #999;
   clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%);
 }

app/routes/note._index.tsx

@@ -83,7 +83,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 mr-8"
+          className="cursor-pointer px-5 py-3 rounded-xl border-4 border-transparent border-b-cyan-200"
           value={year}
           onChange={onChangeYear}
         >