hd-garden 0.3.0

package/app/blog/page.tsx

@@ -0,0 +1,139 @@
+import Link from "next/link";
+import {
+  ArrowLeft,
+  ArrowRight,
+  PushPin,
+} from "@phosphor-icons/react/ssr";
+import { formatDate, postHref, posts, topics } from "../lib/content";
+import { siteConfig } from "../site.config";
+import { ContentEmptyState } from "../components/ContentEmptyState";
+
+export const metadata = {
+  title: siteConfig.pages.blog.title,
+  description: siteConfig.pages.blog.subtitle,
+};
+
+const pageSize = 8;
+
+const archiveHref = (topic?: string, page?: number) => {
+  const params = new URLSearchParams();
+  if (topic) params.set("topic", topic);
+  if (page && page > 1) params.set("page", String(page));
+  const query = params.toString();
+  return query ? `/blog?${query}` : "/blog";
+};
+
+export default async function BlogIndex({
+  searchParams,
+}: {
+  searchParams: Promise<{ topic?: string; page?: string }>;
+}) {
+  const requested = await searchParams;
+  const selectedTopic = topics.includes(requested.topic ?? "")
+    ? requested.topic
+    : undefined;
+  const filteredPosts = selectedTopic
+    ? posts.filter((post) => post.topic === selectedTopic)
+    : posts;
+  const pageCount = Math.max(1, Math.ceil(filteredPosts.length / pageSize));
+  const parsedPage = Number.parseInt(requested.page ?? "1", 10);
+  const currentPage = Math.min(
+    pageCount,
+    Math.max(1, Number.isFinite(parsedPage) ? parsedPage : 1),
+  );
+  const visiblePosts = filteredPosts.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  );
+
+  return (
+    <main className="page-shell index-page">
+      <header className="page-intro">
+        <p className="eyebrow">POSTS / 博文</p>
+        <h1>{siteConfig.pages.blog.title}</h1>
+        <p>{siteConfig.pages.blog.subtitle}</p>
+      </header>
+
+      <div className="topic-strip" aria-label="文章主题">
+        <Link
+          href="/blog"
+          className={!selectedTopic ? "active" : ""}
+          aria-current={!selectedTopic ? "page" : undefined}
+        >
+          全部 · {posts.length}
+        </Link>
+        {topics.map((topic) => (
+          <Link
+            href={archiveHref(topic)}
+            className={selectedTopic === topic ? "active" : ""}
+            aria-current={selectedTopic === topic ? "page" : undefined}
+            key={topic}
+          >
+            {topic} · {posts.filter((post) => post.topic === topic).length}
+          </Link>
+        ))}
+      </div>
+
+      {visiblePosts.length > 0 ? <section className="archive-list" aria-label="全部博文">
+        {visiblePosts.map((post) => (
+          <Link
+            key={post.path}
+            href={postHref(post)}
+            className={`archive-row${post.cover ? " with-cover" : ""}`}
+          >
+            {post.cover && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                className="archive-cover"
+                src={post.cover}
+                alt={post.coverAlt ?? `${post.title} 封面`}
+                loading="lazy"
+              />
+            )}
+            <div className="archive-copy">
+              <div className="archive-meta">
+                <time>{formatDate(post.date)}</time>
+                <span className="archive-topic">
+                  {post.topic}
+                  {post.pinned && (
+                    <span className="pinned-badge">
+                      <PushPin size={12} weight="fill" />
+                      置顶
+                    </span>
+                  )}
+                </span>
+              </div>
+              <h2>{post.title}</h2>
+              <p>{post.description}</p>
+            </div>
+            <ArrowRight size={19} />
+          </Link>
+        ))}
+      </section> : <ContentEmptyState kind="posts" />}
+
+      {pageCount > 1 && (
+        <nav className="archive-pagination" aria-label="博文分页">
+          {currentPage > 1 ? (
+            <Link href={archiveHref(selectedTopic, currentPage - 1)}>
+              <ArrowLeft size={16} />
+              上一页
+            </Link>
+          ) : (
+            <span />
+          )}
+          <span>
+            {currentPage} / {pageCount}
+          </span>
+          {currentPage < pageCount ? (
+            <Link href={archiveHref(selectedTopic, currentPage + 1)}>
+              下一页
+              <ArrowRight size={16} />
+            </Link>
+          ) : (
+            <span />
+          )}
+        </nav>
+      )}
+    </main>
+  );
+}

package/app/chatgpt-auth.ts

@@ -0,0 +1,86 @@
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+export type ChatGPTUser = {
+  displayName: string;
+  email: string;
+  fullName: string | null;
+};
+
+const USER_EMAIL_HEADER = "oai-authenticated-user-email";
+const USER_FULL_NAME_HEADER = "oai-authenticated-user-full-name";
+const USER_FULL_NAME_ENCODING_HEADER =
+  "oai-authenticated-user-full-name-encoding";
+const PERCENT_ENCODED_UTF8 = "percent-encoded-utf-8";
+const SIGN_IN_PATH = "/signin-with-chatgpt";
+const SIGN_OUT_PATH = "/signout-with-chatgpt";
+const CALLBACK_PATH = "/callback";
+
+export async function getChatGPTUser(): Promise<ChatGPTUser | null> {
+  const requestHeaders = await headers();
+  const email = requestHeaders.get(USER_EMAIL_HEADER);
+  if (!email) return null;
+
+  const encodedFullName = requestHeaders.get(USER_FULL_NAME_HEADER);
+  const fullName =
+    encodedFullName &&
+    requestHeaders.get(USER_FULL_NAME_ENCODING_HEADER) === PERCENT_ENCODED_UTF8
+      ? safeDecodeURIComponent(encodedFullName)
+      : null;
+
+  return {
+    displayName: fullName ?? email,
+    email,
+    fullName,
+  };
+}
+
+export async function requireChatGPTUser(
+  returnTo: string,
+): Promise<ChatGPTUser> {
+  const user = await getChatGPTUser();
+  if (user) return user;
+
+  redirect(chatGPTSignInPath(returnTo));
+}
+
+export function chatGPTSignInPath(returnTo: string): string {
+  const safeReturnTo = safeRelativeReturnPath(returnTo);
+  return `${SIGN_IN_PATH}?return_to=${encodeURIComponent(safeReturnTo)}`;
+}
+
+export function chatGPTSignOutPath(returnTo = "/"): string {
+  const safeReturnTo = safeRelativeReturnPath(returnTo);
+  return `${SIGN_OUT_PATH}?return_to=${encodeURIComponent(safeReturnTo)}`;
+}
+
+function safeRelativeReturnPath(value: string): string {
+  if (!value.startsWith("/") || value.startsWith("//")) return "/";
+
+  let url: URL;
+  try {
+    url = new URL(value, "https://app.local");
+  } catch {
+    return "/";
+  }
+  if (url.origin !== "https://app.local") return "/";
+  if (isReservedAuthPath(url.pathname)) return "/";
+
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+function isReservedAuthPath(pathname: string): boolean {
+  return (
+    pathname === SIGN_IN_PATH ||
+    pathname === SIGN_OUT_PATH ||
+    pathname === CALLBACK_PATH
+  );
+}
+
+function safeDecodeURIComponent(value: string): string | null {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return null;
+  }
+}

package/app/columns/[column]/[...path]/page.tsx

@@ -0,0 +1,160 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ArrowLeft, ArrowRight } from "@phosphor-icons/react/ssr";
+import {
+  columns,
+  extractHeadings,
+  findColumnEntry,
+  formatDate,
+  columnHref,
+  columnEntryPath,
+} from "../../../lib/content";
+import { MarkdownArticle } from "../../../components/MarkdownArticle";
+import { TableOfContents } from "../../../components/TableOfContents";
+import { Comments } from "../../../components/Comments";
+import { Webmentions } from "../../../components/Webmentions";
+import {
+  absoluteUrl,
+  getSiteUrl,
+  webmentionApiEndpoint,
+} from "../../../lib/site";
+import { githubUrl, siteConfig } from "../../../site.config";
+
+export function generateStaticParams() {
+  return columns.map((entry) => ({
+    column: entry.column,
+    path: columnEntryPath(entry).split("/"),
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ column: string; path: string[] }>;
+}) {
+  const { column, path } = await params;
+  const entry = findColumnEntry(column, path.join("/"));
+  if (!entry) return {};
+  const baseUrl = await getSiteUrl();
+  const pathname = columnHref(entry);
+  return {
+    title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+    description: entry.description,
+    alternates: { canonical: pathname },
+    openGraph: {
+      type: "article",
+      url: absoluteUrl(pathname, baseUrl),
+      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      description: entry.description,
+      publishedTime: new Date(entry.date).toISOString(),
+      modifiedTime: entry.updated
+        ? new Date(entry.updated).toISOString()
+        : undefined,
+      tags: entry.tags,
+      images: entry.cover ? [{ url: entry.cover, alt: entry.coverAlt }] : undefined,
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      description: entry.description,
+      images: entry.cover ? [entry.cover] : ["/og.png"],
+    },
+  } satisfies Metadata;
+}
+
+export default async function ColumnEntryPage({
+  params,
+}: {
+  params: Promise<{ column: string; path: string[] }>;
+}) {
+  const { column, path } = await params;
+  const entry = findColumnEntry(column, path.join("/"));
+  if (!entry) notFound();
+  const series = columns.filter((item) => item.column === column);
+  const currentIndex = series.findIndex((item) => item.path === entry.path);
+  const next = series[currentIndex + 1];
+  const headings = extractHeadings(entry.content);
+  const baseUrl = await getSiteUrl();
+  const pathname = columnHref(entry);
+  const canonicalUrl = absoluteUrl(pathname, baseUrl);
+
+  return (
+    <main className="column-reading-page">
+      <aside className="series-nav">
+        <Link href="/columns" className="back-link">
+          <ArrowLeft size={15} />
+          所有专栏
+        </Link>
+        <p>主题专栏</p>
+        <h2>{entry.columnTitle}</h2>
+        <ol>
+          {series.map((item) => (
+            <li key={item.path} className={item.path === entry.path ? "active" : ""}>
+              <Link href={columnHref(item)}>{item.title}</Link>
+            </li>
+          ))}
+        </ol>
+        <small>{series.length} 篇 · 持续更新</small>
+      </aside>
+
+      <article className="article-column series-article h-entry">
+        <Link className="u-url sr-only" href={pathname}>
+          {entry.title} 永久链接
+        </Link>
+        <a
+          className="p-author h-card sr-only"
+          href={githubUrl}
+          rel="author"
+        >
+          {siteConfig.author.name}
+        </a>
+        {entry.cover && (
+          <figure className="article-hero article-cover">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              className="u-photo"
+              src={entry.cover}
+              alt={entry.coverAlt ?? `${entry.title} 封面`}
+            />
+          </figure>
+        )}
+        <header className="article-header">
+          <p className="eyebrow">
+            {entry.columnTitle} · 第 {currentIndex + 1} 篇
+          </p>
+          <h1 className="p-name">
+            {entry.title.replace(/^\d+\s*·\s*/u, "")}
+          </h1>
+          <p className="article-deck p-summary">{entry.description}</p>
+          <div className="article-meta">
+            <time className="dt-published" dateTime={entry.date}>
+              {formatDate(entry.date)}
+            </time>
+            <span>{entry.readingTime}</span>
+          </div>
+        </header>
+        <div className="e-content">
+          <MarkdownArticle content={entry.content} />
+        </div>
+        {next && (
+          <Link
+            href={columnHref(next)}
+            className="next-entry"
+          >
+            <span>下一篇</span>
+            <strong>{next.title}</strong>
+            <ArrowRight size={20} />
+          </Link>
+        )}
+        <Webmentions
+          target={canonicalUrl}
+          endpoint={webmentionApiEndpoint()}
+        />
+        <Comments slug={`${column}:${entry.path}`} />
+      </article>
+
+      <TableOfContents headings={headings} />
+    </main>
+  );
+}

package/app/columns/page.tsx

@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { ArrowRight } from "@phosphor-icons/react/ssr";
+import { columnHref, columns } from "../lib/content";
+import { PageIntro } from "../components/PageIntro";
+import { ContentEmptyState } from "../components/ContentEmptyState";
+import { siteConfig } from "../site.config";
+
+export const metadata = {
+  title: siteConfig.pages.columns.title,
+  description: siteConfig.pages.columns.subtitle,
+};
+
+export default function ColumnsPage() {
+  const grouped = Array.from(
+    columns.reduce((result, entry) => {
+      const existing = result.get(entry.column ?? "");
+      if (existing) existing.push(entry);
+      else result.set(entry.column ?? "", [entry]);
+      return result;
+    }, new Map<string, typeof columns>()),
+  ).map(([slug, entries]) => ({
+    slug,
+    entries,
+    first: entries[0],
+  }));
+
+  return (
+    <main className="page-shell index-page">
+      <PageIntro
+        eyebrow="COLUMNS / 专栏"
+        title={siteConfig.pages.columns.title}
+        subtitle={siteConfig.pages.columns.subtitle}
+      />
+
+      {grouped.length > 0 ? <div className="column-feature-list">
+        {grouped.map(({ slug, entries, first }, index) => (
+          <Link
+            href={columnHref(first)}
+            className="column-feature"
+            key={slug}
+          >
+            <div className="column-feature-copy">
+              <span>
+                {first.columnStatus ?? "持续更新"} · {entries.length} 篇 ·{" "}
+                {first.topic ?? "主题写作"}
+              </span>
+              <h2>{first.columnTitle}</h2>
+              <p>
+                {first.columnDescription ??
+                  first.description ??
+                  "沿着一条清晰的阅读路径，把一个主题持续写深。"}
+              </p>
+              <strong>
+                从第一篇开始
+                <ArrowRight size={17} />
+              </strong>
+            </div>
+            <div className="column-feature-index">
+              <span>主题专栏</span>
+              <strong>{String(index + 1).padStart(2, "0")}</strong>
+              <small>{slug.replaceAll("-", " ").toUpperCase()}</small>
+            </div>
+          </Link>
+        ))}
+      </div> : <ContentEmptyState kind="columns" />}
+    </main>
+  );
+}