hd-garden 0.3.1 → 0.3.3

package/app/about/page.tsx

@@ -19,8 +19,8 @@ const focus = about.focus ?? [
 const cta = about.cta ?? { href: "/blog", label: "从博文开始" };
 
 export const metadata = {
-  title: about.title,
-  description: about.subtitle,
+  title: { absolute: siteConfig.name },
+  description: about.subtitle || siteConfig.description,
 };
 
 export default function AboutPage() {

package/app/blog/page.tsx

@@ -1,10 +1,10 @@
 import { Suspense } from "react";
-import { siteConfig } from "../site.config";
+import { siteConfig, siteDocumentTitle } from "../site.config";
 import { BlogArchive } from "../components/BlogArchive";
 
 export const metadata = {
-  title: siteConfig.pages.blog.title,
-  description: siteConfig.pages.blog.subtitle,
+  title: siteDocumentTitle,
+  description: siteConfig.pages.blog.subtitle || siteConfig.description,
 };
 
 export default function BlogIndex() {

package/app/columns/page.tsx

@@ -1,13 +1,14 @@
+/* eslint-disable @next/next/no-img-element -- static GitHub Pages assets must keep their exact paths. */
 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";
+import { siteConfig, siteDocumentTitle } from "../site.config";
 
 export const metadata = {
-  title: siteConfig.pages.columns.title,
-  description: siteConfig.pages.columns.subtitle,
+  title: siteDocumentTitle,
+  description: siteConfig.pages.columns.subtitle || siteConfig.description,
 };
 
 export default function ColumnsPage() {
@@ -33,35 +34,45 @@ export default function ColumnsPage() {
       />
 
       {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>
-        ))}
+        {grouped.map(({ slug, entries, first }, index) => {
+          const cover = first.columnCover
+            ? { src: first.columnCover, alt: first.columnCoverAlt ?? `${first.columnTitle} 专栏封面` }
+            : undefined;
+          return (
+            <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">
+                {cover && (
+                  <img className="column-feature-cover" src={cover.src} alt={cover.alt} />
+                )}
+                <div className="column-feature-index-label">
+                  <span>主题专栏</span>
+                  <strong>{String(index + 1).padStart(2, "0")}</strong>
+                  <small>{slug.replaceAll("-", " ").toUpperCase()}</small>
+                </div>
+              </div>
+            </Link>
+          );
+        })}
       </div> : <ContentEmptyState kind="columns" />}
     </main>
   );

package/app/components/BlogArchive.tsx

@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
 import { ArrowLeft, ArrowRight, PushPin } from "@phosphor-icons/react";
 import { formatDate, postHref, posts, topics } from "../lib/content";
 import { ContentEmptyState } from "./ContentEmptyState";
@@ -19,19 +18,13 @@ export const archiveHref = (topic?: string, page?: number) => {
 
 export function BlogArchive() {
   const searchParams = useSearchParams();
-  const [ready, setReady] = useState(false);
-
-  useEffect(() => {
-    setReady(true);
-  }, []);
-
-  const requestedTopic = ready ? (searchParams.get("topic") ?? "") : "";
+  const requestedTopic = searchParams.get("topic") ?? "";
   const selectedTopic = topics.includes(requestedTopic) ? requestedTopic : 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((ready ? searchParams.get("page") : null) ?? "1", 10);
+  const parsedPage = Number.parseInt(searchParams.get("page") ?? "1", 10);
   const currentPage = Math.min(
     pageCount,
     Math.max(1, Number.isFinite(parsedPage) ? parsedPage : 1),

package/app/components/MarkdownArticle.tsx

@@ -11,6 +11,7 @@ import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeHighlight from "rehype-highlight";
 import { MermaidDiagram } from "./MermaidDiagram";
+import { MarkdownImage } from "./MarkdownImage";
 import { ExternalEmbed } from "./ExternalEmbed";
 import { WidgetChart } from "./WidgetChart";
 
@@ -106,11 +107,7 @@ export function MarkdownArticle({ content }: { content: string }) {
               </a>
             );
           },
-          img: ({ alt, ...props }) => (
-            // Native images keep Typora-authored relative paths intact.
-            // eslint-disable-next-line @next/next/no-img-element
-            <img loading="lazy" alt={alt ?? ""} {...props} />
-          ),
+          img: MarkdownImage,
           code: CodeBlock,
           pre: ({ children, ...props }) => {
             const child = Children.only(children);

package/app/components/MarkdownImage.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState, type ComponentPropsWithoutRef } from "react";
+
+type MarkdownImageProps = ComponentPropsWithoutRef<"img">;
+
+export function MarkdownImage({ alt = "", src, ...props }: MarkdownImageProps) {
+  const [open, setOpen] = useState(false);
+  const description = alt || "查看原图";
+
+  useEffect(() => {
+    if (!open) return undefined;
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", closeOnEscape);
+    document.body.classList.add("image-preview-open");
+
+    return () => {
+      document.removeEventListener("keydown", closeOnEscape);
+      document.body.classList.remove("image-preview-open");
+    };
+  }, [open]);
+
+  if (!src) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="markdown-image-trigger"
+        onClick={() => setOpen(true)}
+        aria-label={`放大查看：${description}`}
+      >
+        {/* Native images preserve Typora-authored relative paths. */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img loading="lazy" alt={alt} src={src} {...props} />
+      </button>
+
+      {open ? (
+        <div
+          className="markdown-image-lightbox"
+          role="dialog"
+          aria-modal="true"
+          aria-label={description}
+          onClick={() => setOpen(false)}
+        >
+          <div className="markdown-image-lightbox-content" onClick={(event) => event.stopPropagation()}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={src} alt={alt} {...props} />
+            <button
+              type="button"
+              className="markdown-image-lightbox-close"
+              onClick={() => setOpen(false)}
+              aria-label="关闭图片预览"
+            >
+              关闭
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/app/garden/page.tsx

@@ -7,7 +7,7 @@ import { TableOfContents } from "../components/TableOfContents";
 import { siteConfig } from "../site.config";
 
 export const metadata = {
-  title: `Garden · ${siteConfig.pages.garden.title}`,
+  title: "Garden",
   description:
     "一个以 Markdown 为内容源、通过 GitHub Pages 发布的个人博客框架，支持博文、随想、专栏、搜索、RSS 与多媒体。",
 };

package/app/globals.css

@@ -250,6 +250,11 @@ button {
   margin-top: 72px;
 }
 
+.home-thought-list {
+  display: grid;
+  gap: 24px;
+}
+
 .section-heading {
   min-height: 40px;
   margin-bottom: 21px;
@@ -1443,7 +1448,7 @@ button {
 }
 
 .archive-row.with-cover {
-  grid-template-columns: 128px minmax(0, 1fr) 20px;
+  grid-template-columns: 160px minmax(0, 1fr) 20px;
 }
 
 .archive-row:hover {
@@ -1469,10 +1474,9 @@ button {
 }
 
 .archive-cover {
-  width: 128px;
-  height: 84px;
+  width: 160px;
+  height: auto;
   display: block;
-  object-fit: cover;
   border: 1px solid var(--line);
 }
 
@@ -1752,23 +1756,54 @@ button {
 }
 
 .column-feature-index {
+  position: relative;
+  overflow: hidden;
+  background: var(--ink);
+  color: var(--paper);
+}
+
+.column-feature-cover {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center;
+  transition: transform 280ms ease;
+}
+
+.column-feature:hover .column-feature-cover,
+.column-feature:focus-visible .column-feature-cover {
+  transform: scale(1.035);
+}
+
+.column-feature-index::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgb(16 18 23 / 20%), rgb(16 18 23 / 8%) 48%, rgb(16 18 23 / 60%));
+  pointer-events: none;
+}
+
+.column-feature-index-label {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   padding: 28px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: var(--ink);
-  color: var(--paper);
 }
 
-.column-feature-index span,
-.column-feature-index small {
+.column-feature-index-label span,
+.column-feature-index-label small {
   color: var(--faint);
   font-size: 9px;
   letter-spacing: 0.08em;
 }
 
-.column-feature-index strong {
+.column-feature-index-label strong {
   align-self: center;
+  color: white;
   font-size: 82px;
   line-height: 1;
 }
@@ -1805,10 +1840,9 @@ button {
 
 .article-hero img {
   width: 100%;
-  aspect-ratio: 16 / 8.5;
+  height: auto;
   display: block;
-  object-fit: cover;
-  border: 1px solid var(--line);
+  border: 0;
 }
 
 .post-reading-page .article-summary-row {
@@ -1854,14 +1888,6 @@ button {
   margin: 28px 0 34px;
 }
 
-.article-cover img {
-  width: 100%;
-  aspect-ratio: 16 / 8.5;
-  display: block;
-  object-fit: cover;
-  border: 1px solid var(--line);
-}
-
 .article-header h1 {
   margin: 0;
   font-size: clamp(32px, 4.2vw, 48px);
@@ -2107,6 +2133,35 @@ button {
   padding-left: 25px;
 }
 
+.markdown-body ul {
+  list-style: disc outside;
+}
+
+.markdown-body ol {
+  list-style: decimal outside;
+}
+
+.markdown-body ul ul {
+  list-style-type: circle;
+}
+
+.markdown-body ul ul ul {
+  list-style-type: square;
+}
+
+.markdown-body ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body ol ol ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ul.contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}
+
 .markdown-body li {
   margin: 7px 0;
 }
@@ -2498,7 +2553,68 @@ button {
   padding-block: 0;
 }
 
-.markdown-body img {
+.markdown-image-trigger {
+  display: block;
+  max-width: 100%;
+  margin: 34px auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: zoom-in;
+}
+
+.markdown-image-trigger img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+}
+
+.markdown-image-lightbox {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 32px;
+  background: color-mix(in srgb, var(--ink) 82%, transparent);
+  cursor: zoom-out;
+}
+
+.markdown-image-lightbox-content {
+  position: relative;
+  max-width: min(1440px, 100%);
+  max-height: 100%;
+}
+
+.markdown-image-lightbox-content img {
+  display: block;
+  max-width: 100%;
+  max-height: calc(100vh - 64px);
+  width: auto;
+  height: auto;
+  margin: 0;
+  object-fit: contain;
+  cursor: default;
+}
+
+.markdown-image-lightbox-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 7px 10px;
+  border: 1px solid color-mix(in srgb, white 60%, transparent);
+  background: color-mix(in srgb, var(--ink) 72%, transparent);
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.image-preview-open {
+  overflow: hidden;
+}
+
+.markdown-body > img {
   max-width: 100%;
   height: auto;
   margin: 34px auto;
@@ -3975,12 +4091,12 @@ button {
   }
 
   .archive-row.with-cover {
-    grid-template-columns: 96px minmax(0, 1fr) 16px;
+    grid-template-columns: 112px minmax(0, 1fr) 16px;
   }
 
   .archive-cover {
-    width: 96px;
-    height: 68px;
+    width: 112px;
+    height: auto;
   }
 
   .archive-meta {
@@ -4023,15 +4139,15 @@ button {
   }
 
   .column-feature-index {
-    min-height: 130px;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
+    aspect-ratio: 4 / 5;
+    min-height: 0;
   }
 
-  .column-feature-index strong {
-    grid-column: 2;
-    grid-row: 1 / 3;
+  .column-feature-index-label {
+    padding: 20px;
+  }
+
+  .column-feature-index-label strong {
     font-size: 58px;
   }
 

package/app/page.tsx

@@ -9,10 +9,10 @@ import { columnHref, columns, formatDate, postHref, posts } from "./lib/content"
 import { ThoughtCard } from "./components/ThoughtCard";
 import { PageIntro } from "./components/PageIntro";
 import { getPublishedThoughts } from "./lib/public-thoughts";
-import { githubUrl, siteConfig } from "./site.config";
+import { githubUrl, siteConfig, siteDocumentTitle } from "./site.config";
 
 export const metadata = {
-  title: `${siteConfig.name} · ${siteConfig.tagline}`,
+  title: siteDocumentTitle,
   description: siteConfig.description,
 };
 

package/app/site.config.ts

@@ -33,3 +33,6 @@ export type SiteConfig = {
 /** 站点身份来自根目录 site.config.yaml，由 garden sync 生成。 */
 export const siteConfig = raw as SiteConfig;
 export { githubUrl };
+
+/** 列表页浏览器标题用站点名；页面大标题仍用 pages.*.title。 */
+export const siteDocumentTitle = { absolute: siteConfig.name };

package/app/thoughts/page.tsx

@@ -2,11 +2,11 @@ import { getPublishedThoughts } from "../lib/public-thoughts";
 import { ThoughtCard } from "../components/ThoughtCard";
 import { ContentEmptyState } from "../components/ContentEmptyState";
 import { PageIntro } from "../components/PageIntro";
-import { siteConfig } from "../site.config";
+import { siteConfig, siteDocumentTitle } from "../site.config";
 
 export const metadata = {
-  title: siteConfig.pages.thoughts.title,
-  description: siteConfig.pages.thoughts.subtitle,
+  title: siteDocumentTitle,
+  description: siteConfig.pages.thoughts.subtitle || siteConfig.description,
 };
 
 export default function ThoughtsPage() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/templates/site/package.json

@@ -14,6 +14,6 @@
     "pages:prepare": "garden pages:prepare"
   },
   "dependencies": {
-    "hd-garden": "^0.3.1"
+    "hd-garden": "^0.3.3",
   }
 }