Init: First Commit

一个初始的版本
2023-11-23 00:05:07 +08:00
commit 9391a37b21
30 changed files with 8021 additions and 0 deletions
@@ -0,0 +1,41 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+      <ul>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/blog"
+            rel="noreferrer"
+          >
+            15m Quickstart Blog Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/jokes"
+            rel="noreferrer"
+          >
+            Deep Dive Jokes App Tutorial
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+            Remix Docs
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
@@ -0,0 +1,71 @@
+import { NavLink, useLoaderData } from "@remix-run/react";
+import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+import { clsn, siteTitle } from "~/utils";
+
+import styles from "./styles.module.less";
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [
+    { title: siteTitle(data?.currentCategory?.name || "相册") },
+    { name: "description", content: "奇趣保罗的日常笔记" },
+  ];
+};
+
+export async function loader({ request, params }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const page = url.searchParams.get("page") || "1";
+
+  const searchParams = new URLSearchParams();
+  searchParams.append("page", page);
+
+  const category = await fetch(`https://paul.ren/api/gallery`).then((res) => res.json()) as unknown as API.PageResponse<API.Gallery.ICateData[]>;
+  let cateIndex = -1;
+
+  if (params["*"]) {
+    cateIndex = category.data.findIndex((item) => item.slug === params["*"]);
+
+    if (cateIndex === -1) {
+      throw json("Not Found", { status: 404 });
+    }
+
+    searchParams.append("cate", String(category.data[cateIndex].id));
+  }
+
+  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 });
+}
+
+export default function Gallery() {
+  const { media, category } = useLoaderData<typeof loader>();
+
+  return (
+    <main className="px-2 py-24 max-w-screen-2xl mx-auto">
+      <section className="mb-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-12">相册</h1>
+        <div className="flex overflow-auto whitespace-nowrap">
+          <NavLink to="/gallery" end className={({ isActive }) => clsn("inline-block px-3 py-1 ml-auto mr-3", isActive && "text-pink-400 font-bold")}>
+            所有
+          </NavLink>
+          {category.data.map((item) => (
+            <NavLink key={item.slug} to={`/gallery/${item.slug}`} className={({ isActive }) => clsn("inline-block px-3 py-1 mr-3 last:mr-auto", isActive && "text-pink-400 font-bold")}>
+              {item.name}
+            </NavLink>
+          ))}
+        </div>
+      </section>
+      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))]">
+        {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} />
+            <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>
+            </div>
+          </div>
+        ))}
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,4 @@
+.image {
+  aspect-ratio: 1 / 1;
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 75%);
+}
@@ -0,0 +1,41 @@
+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))) {
+    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-24 max-w-3xl mx-auto">
+      <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>
+      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
+        <Article html={note.data.content_html} />
+      </section>
+    </main>
+  );
+};
@@ -0,0 +1,59 @@
+import { Link, useLoaderData } from "@remix-run/react";
+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: siteTitle("日记") },
+    { name: "description", content: "奇趣保罗的日常笔记" },
+  ];
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  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.PageResponse<API.Note.INoteData[]>;
+
+  return json({ note, page });
+}
+
+export default function Note() {
+  const { note } = 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">日记</h1>
+      </section>
+      <section className="mb-12">
+        {note.data.map((item) => {
+          const year = item.date.substring(0, 4);
+          const cover = getFirstImage(item);
+
+          return (
+            <Link
+              key={item.id}
+              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-cyan-200"
+              to={`/note/${year}/${item.id}`}
+            >
+              <h2 className="text-pink-400 text-2xl font-bold mb-4">{item.title}</h2>
+              <p className={clsn(cover && "mr-40", "mb-8")}>{item.except}</p>
+              <div className="flex items-end justify-between text-sm">
+                <p className="opacity-60">{item.date}</p>
+              </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>
+          );
+        })}
+      </section>
+    </main>
+  );
+}