Init: First Commit

一个初始的版本

app/components/common/article/article.module.less

@@ -0,0 +1,37 @@
+.article {
+  line-height: 1.7;
+
+  > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  pre {
+    tab-size: 4;
+    padding: 1em;
+    color: #fff;
+    overflow: auto;
+    border-radius: .75rem;
+    background-color: #333;
+  }
+
+  :not(pre) > code {
+    font-size: smaller;
+    padding: .15rem .5rem;
+    border-radius: .75rem;
+    background-color: rgb(165 243 252);
+  }
+
+  ul {
+    line-height: 2;
+    list-style: disc;
+    margin-left: 1.25rem;
+
+    ::marker {
+      color: rgb(244 114 182 / var(--tw-bg-opacity));
+    }
+  }
+}

app/components/common/article/index.tsx

@@ -0,0 +1,15 @@
+import { clsn } from "~/utils";
+import styles from "./article.module.less";
+
+interface ArticleProps {
+  className?: string;
+  html: string;
+}
+
+function Article({ className, html }: ArticleProps) {
+  return (
+    <article className={clsn(styles.article, className)} dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}
+
+export default Article;

app/components/common/spinner.tsx

@@ -0,0 +1,9 @@
+import { useNavigation } from "@remix-run/react";
+
+export default function SpinnerBar() {
+  const navigation = useNavigation();
+
+  return navigation.state === "loading" ? (
+    <div className="spinner animate-spinner-bar h-1 z-20 fixed top-0 left-0 right-0 bg-orange-200" />
+  ) : null;
+}

app/components/layout/footer.tsx

@@ -0,0 +1,14 @@
+const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env; 
+
+function Footer() {
+  return (
+    <footer className="pb-12">
+      <div className="grid grid-cols-2 px-2 max-w-3xl mx-auto text-sm opacity-60">
+        <p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
+        {APP_FOOTER_EXTRA && <p className="text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

app/components/layout/header.tsx

@@ -0,0 +1,31 @@
+import { Link, NavLink } from "@remix-run/react";
+
+const navItems = [
+  { name: "首页", to: "/" },
+  { name: "日记", to: "/note" },
+  { name: "相册", to: "/gallery" },
+  { name: "关于我", to: "/about" },
+];
+
+const inheritCls = "inline-block py-2 px-5";
+const activeCls = "inline-block py-2 px-5 bg-orange-200 text-pink-400 rounded-xl";
+
+function Header() {
+  return (
+    <header className="fixed top-0 left-0 right-0 bg-pink-400 text-white z-10">
+      <nav className="py-3 px-2">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.name}
+            to={item.to}
+            className={({ isActive }) => isActive ? activeCls : inheritCls}
+          >
+            {item.name}
+          </NavLink>
+        ))}
+      </nav>
+    </header>
+  );
+}
+
+export default Header;

app/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/root.tsx

@@ -0,0 +1,43 @@
+import { cssBundleHref } from "@remix-run/css-bundle";
+import type { LinksFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+import Header from "./components/layout/header";
+import Spinner from "./components/common/spinner";
+import Footer from "./components/layout/footer";
+
+import "./index.css";
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
+  { 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" },
+];
+
+export default function App() {
+  return (
+    <html lang="zh-cmn-hans">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="font-mi pt-16 bg-orange-50 text-neutral-600">
+        <Spinner />
+        <Header />
+        <Outlet />
+        <Footer />
+        <ScrollRestoration />
+        <LiveReload />
+        <Scripts />
+      </body>
+    </html>
+  );
+}

app/routes/_index.tsx

@@ -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>
+  );
+}

app/routes/gallery.$/route.tsx

@@ -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>
+  );
+}

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

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

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

@@ -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>
+  );
+};

app/routes/note._index.tsx

@@ -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>
+  );
+}

app/types/api.d.ts

@@ -0,0 +1,11 @@
+declare namespace API {
+  interface Response<D> {
+    status: "Success" | "Failed";
+    msg: string;
+    data: D;
+  }
+
+  interface PageResponse<D> extends Response<D> {
+    count: number;
+  }
+}

app/types/api.gallery.d.ts

@@ -0,0 +1,12 @@
+declare namespace API {
+  namespace Gallery {
+    export interface ICateData {
+      id: number
+      name: string
+      slug: string
+      url: string
+      description: string
+      hidden: boolean
+    }
+  }
+}

app/types/api.media.d.ts

@@ -0,0 +1,37 @@
+declare namespace API {
+  namespace Media {
+    // 数据库本来的数据
+    export interface IMediaBaseData {
+      title: string
+      origin_name: string
+      content: string
+      cate: number
+      key: string
+      hidden: boolean
+      hidden_ref: boolean
+      is_sensitive: boolean
+      take_time: string
+      modified: number | string // 文件修改时间
+      photo?: File
+    }
+
+    // 后端加的数据
+    export interface IMediaExtraData extends IMediaBaseData {
+      file_name: string
+      type: string
+      meta: unknown
+      path: string
+
+      likes: number
+      created_at: string
+      updated_at: string
+
+      url: string
+      thumb_url: string
+    }
+
+    export interface IMediaData extends IMediaExtraData {
+      id: number
+    }
+  }
+}

app/types/api.note.d.ts

@@ -0,0 +1,69 @@
+declare namespace API {
+  namespace Note {
+    enum NoteType {
+      Private,
+      Friends,
+      Limited,
+      Public,
+    }
+    
+    interface INoteMusic {
+      id: number;
+      type?: "netease";
+      title: string;
+      artist: string;
+      album: string;
+      cover: string;
+    }
+    
+    interface INoteQuery {
+      page: number;
+      year?: number;
+      month?: number;
+      search?: string;
+    }
+    
+    interface INoteDetailQuery {
+      id: number;
+      year?: number;
+    }
+    
+    // 旧数据兼容
+    interface INotePhotoData {
+      year: number | string;
+      name: string;
+      type: string;
+      url: string;
+    }
+    
+    interface INoteData {
+      id: number;
+      title: string;
+      content: string;
+      except: string;
+      content_html: string;
+    
+      date: string;
+      mood: number;
+      weather: number;
+      status: number;
+      type: NoteType;
+      time_spent: number;
+      music?: INoteMusic;
+      starred: boolean;
+      unlocked?: boolean;
+    
+      media: any[];
+      photo?: INotePhotoData[];
+    
+      year?: string;
+    
+      time: number;
+    
+      likes: number;
+    
+      created_at: string;
+      updated_at: string;
+    }
+  }
+}

app/utils/index.ts

@@ -0,0 +1,11 @@
+// 站点名称
+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;
+  }
+}