hd-garden 0.3.13 → 0.4.0

package/app/components/BlogArchive.tsx

@@ -2,124 +2,128 @@
 
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { ArrowLeft, ArrowRight, PushPin } from "@phosphor-icons/react";
-import { formatDate, postHref, posts, topics } from "../lib/content";
+import { useState } from "react";
+import { columns, postHref, posts, topics } from "../lib/content";
 import { ContentEmptyState } from "./ContentEmptyState";
 
-const pageSize = 8;
-
-export const archiveHref = (topic?: string, page?: number) => {
+export const archiveHref = (topic?: string) => {
   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";
 };
 
+function day(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value.slice(0, 10);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+}
+
 export function BlogArchive() {
   const searchParams = useSearchParams();
+  const [compact, setCompact] = useState(false);
   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(searchParams.get("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,
+  const filtered = (selectedTopic ? posts.filter((post) => post.topic === selectedTopic) : posts)
+    .slice()
+    .sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
+  const years = new Map<string, typeof filtered>();
+  for (const post of filtered) {
+    const year = day(post.date).slice(0, 4) || "未知";
+    const list = years.get(year);
+    if (list) list.push(post);
+    else years.set(year, [post]);
+  }
+
+  const series = Array.from(
+    columns.reduce((result, entry) => {
+      const key = entry.column ?? "";
+      const list = result.get(key);
+      if (list) list.push(entry);
+      else result.set(key, [entry]);
+      return result;
+    }, new Map<string, typeof columns>()),
   );
 
   return (
-    <>
-      <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.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} />
+    <div className="sh-listgrid">
+      <div>
+        <ul className="sh-filters" aria-label="按分类筛选">
+          <li>
+            <Link className="sh-chip" href="/blog" aria-current={selectedTopic ? undefined : "true"}>
+              全部<span className="n">{posts.length}</span>
             </Link>
+          </li>
+          {topics.map((topic) => (
+            <li key={topic}>
+              <Link className="sh-chip" href={archiveHref(topic)} aria-current={selectedTopic === topic ? "true" : undefined}>
+                {topic}<span className="n">{posts.filter((post) => post.topic === topic).length}</span>
+              </Link>
+            </li>
           ))}
-        </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>
-      )}
-    </>
+        </ul>
+        <div className="sh-status">
+          <span aria-live="polite">{selectedTopic ? `${selectedTopic} ${filtered.length} 篇` : `全部 ${posts.length} 篇`}</span>
+          {selectedTopic ? <Link href="/blog">清除筛选</Link> : null}
+          <div className="sh-view" role="group" aria-label="列表密度">
+            <button type="button" aria-pressed={!compact} onClick={() => setCompact(false)}>摘要</button>
+            <button type="button" aria-pressed={compact} onClick={() => setCompact(true)}>紧凑</button>
+          </div>
+        </div>
+        <div id="sh-list" className={compact ? "is-compact" : undefined}>
+          {filtered.length ? [...years.entries()].map(([year, entries]) => (
+            <section className="sh-year" id={`y${year}`} key={year} aria-labelledby={`yh${year}`}>
+              <h2 id={`yh${year}`}>{year}<span className="n">{entries.length} 篇</span></h2>
+              <ol className="sh-rows">
+                {entries.map((post) => (
+                  <li className="sh-row" key={post.path}>
+                    <time className="archive-meta" dateTime={day(post.date)}>{day(post.date).slice(5)}</time>
+                    <div className="archive-copy">
+                      {post.cover ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img className="archive-cover" src={post.cover} alt="" />
+                      ) : null}
+                      <h3>
+                        <Link href={postHref(post)}>{post.title}</Link>
+                        {post.pinned ? <span className="pin">置顶</span> : null}
+                      </h3>
+                      {post.description ? <p>{post.description}</p> : null}
+                    </div>
+                    {post.topic ? <Link className="cat" href={archiveHref(post.topic)}>{post.topic}</Link> : null}
+                  </li>
+                ))}
+              </ol>
+            </section>
+          )) : <ContentEmptyState kind="posts" />}
+        </div>
+      </div>
+      <aside className="sh-rail" aria-label="按年份跳转">
+        <h2>按年份</h2>
+        <ol>
+          {[...years.keys()].map((year) => (
+            <li key={year}>
+              <a href={`#y${year}`}><span>{year}</span><span className="n num">{years.get(year)?.length ?? 0}</span></a>
+            </li>
+          ))}
+        </ol>
+        {series.length ? (
+          <>
+            <h2>专栏</h2>
+            <ol>
+              {series.map(([slug, entries]) => (
+                <li key={slug}>
+                  <Link href={`/columns#${slug}`}><span>{entries[0]?.columnTitle ?? slug}</span><span className="n num">{entries.length}</span></Link>
+                </li>
+              ))}
+            </ol>
+          </>
+        ) : null}
+      </aside>
+    </div>
   );
 }

package/app/components/MarkdownArticle.tsx

@@ -1,9 +1,13 @@
 import { markdownPlugins } from "../lib/markdown-plugins";
+import { remarkA2 } from "../lib/remark-a2.mjs";
 import {
   Children,
+  cloneElement,
   isValidElement,
   type HTMLAttributes,
+  type ReactNode,
 } from "react";
+import { articleHeadingBase, articleUsesHeadingNumbers, displayHeadingLevel, splitHeadingNumber } from "../lib/content";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
@@ -12,40 +16,32 @@ 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";
-import { IntentBlock, UiBlock, UiErrorBlock } from "./UiBlock";
+import { CodeCopy } from "./garden/chrome";
+import { CodeDiff } from "./garden/chrome";
+import { GardenBlock } from "./garden/GardenBlock";
 
-const BLOCK_LANGUAGES = ["language-mermaid", "language-embed", "language-widget", "language-ui", "language-ui-error", "language-intent"];
+const BLOCK_LANGUAGES = ["language-mermaid"];
 const isBlockLanguage = (className?: string) =>
   Boolean(className) && BLOCK_LANGUAGES.some((language) => className?.split(/\s+/u).includes(language));
 
+function codeText(node: unknown): string {
+  if (!node || typeof node !== "object") return "";
+  const record = node as { type?: string; value?: string; children?: unknown[] };
+  if (typeof record.value === "string" && record.type === "text") return record.value;
+  return (record.children ?? []).map((child) => codeText(child)).join("");
+}
+
 function CodeBlock({
   className,
   children,
+  node,
   ...props
 }: HTMLAttributes<HTMLElement> & { node?: unknown }) {
   if (className?.includes("language-mermaid")) {
-    return <MermaidDiagram source={String(children).trim()} />;
-  }
-  if (className?.includes("language-embed")) {
-    return <ExternalEmbed source={String(children).trim()} />;
-  }
-  if (className?.includes("language-widget")) {
-    return <WidgetChart source={String(children).trim()} />;
-  }
-  if (className?.split(/\s+/u).includes("language-ui")) {
-    return <UiBlock source={String(children)} />;
-  }
-  if (className?.split(/\s+/u).includes("language-ui-error")) {
-    return <UiErrorBlock source={String(children)} />;
-  }
-  if (className?.split(/\s+/u).includes("language-intent")) {
-    return <IntentBlock source={String(children)} />;
+    return <MermaidDiagram source={codeText(node) || String(children ?? "").trim()} />;
   }
 
   const codeProps = { ...props };
-  delete codeProps.node;
 
   return (
     <code className={className} {...codeProps}>
@@ -54,51 +50,113 @@ function CodeBlock({
   );
 }
 
-const calloutKinds: Record<string, { tone: "info" | "success" | "warning" | "danger" }> = {
-  NOTE: { tone: "info" }, INFO: { tone: "info" },
-  TIP: { tone: "success" }, SUCCESS: { tone: "success" },
-  IMPORTANT: { tone: "warning" }, WARNING: { tone: "warning" },
-  CAUTION: { tone: "danger" }, DANGER: { tone: "danger" }, FAILURE: { tone: "danger" },
-};
-
-const automaticCalloutLabels = new Set([
-  "提示", "说明", "建议", "成功", "重要",
-  "告警", "警告", "警示", "危险", "失败",
-]);
-
-export function normalizeCallouts(markdown: string) {
-  let fence: string | null = null;
-  let pendingLegacyLabel = false;
-  return markdown.split("\n").flatMap((line) => {
-    const marker = line.match(/^\s*(`{3,}|~{3,})/)?.[1];
-    if (marker) { if (!fence) fence = marker[0]; else if (marker[0] === fence) fence = null; return [line]; }
-    if (fence) return [line];
-    const legacyMarker = line.match(/garden-callout-marker--(info|success|warning|danger)/u)?.[1];
-    if (legacyMarker) {
-      pendingLegacyLabel = true;
-      return [line];
+function stripPrefix(children: ReactNode, prefix: string): ReactNode {
+  let rest = prefix;
+  const walk = (node: ReactNode): ReactNode => {
+    if (!rest) return node;
+    if (typeof node === "string" || typeof node === "number") {
+      const value = String(node);
+      if (value.startsWith(rest)) {
+        const kept = value.slice(rest.length);
+        rest = "";
+        return kept;
+      }
+      if (rest.startsWith(value)) {
+        rest = rest.slice(value.length);
+        return "";
+      }
+      return value;
     }
-    if (pendingLegacyLabel && /^>\s*$/u.test(line)) return [line];
-    if (pendingLegacyLabel) {
-      pendingLegacyLabel = false;
-      const label = line.match(/^>\s*\*\*(.+?)\*\*\s*$/u)?.[1].trim();
-      if (label && automaticCalloutLabels.has(label)) return [];
+    if (Array.isArray(node)) return node.map(walk);
+    if (isValidElement<{ children?: ReactNode }>(node)) {
+      return cloneElement(node, undefined, walk(node.props.children));
     }
-    const match = line.match(/^>\s*\[!([a-z]+)\]\s*(.*)$/iu);
-    const callout = match ? calloutKinds[match[1].toUpperCase()] : undefined;
-    if (!callout) return [line];
-    const title = match?.[2].trim();
-    const lines = [`> <span class="garden-callout-marker garden-callout-marker--${callout.tone}" aria-hidden="true"></span>`, ">"];
-    if (title && !automaticCalloutLabels.has(title)) lines.push(`> **${title}**`, ">");
-    return lines;
-  }).join("\n");
+    return node;
+  };
+  return walk(children);
 }
 
+function LinkCard({ href }: { href: string }) {
+  let host = href;
+  try { host = new URL(href).hostname.replace(/^www\./u, ""); } catch { /* keep the raw url */ }
+  return (
+    <ul className="link-cards">
+      <li>
+        <a className="link-card ext" href={href} target="_blank" rel="noopener noreferrer">
+          <span className="lc-body">
+            <span className="lc-site">
+              <span className="lc-sitename">{host}</span>
+              <span className="lc-host">{host}</span>
+              <span className="lc-arrow" aria-hidden="true" />
+            </span>
+            <span className="lc-title">{href}</span>
+          </span>
+        </a>
+      </li>
+    </ul>
+  );
+}
+
+const headingText = (children: ReactNode) => {
+  const parts: string[] = [];
+  const walk = (node: ReactNode) => {
+    if (typeof node === "string" || typeof node === "number") parts.push(String(node));
+    else if (Array.isArray(node)) node.forEach(walk);
+    else if (isValidElement<{ children?: React.ReactNode }>(node)) walk(node.props.children);
+  };
+  walk(children);
+  return parts.join("");
+};
+
 export function MarkdownArticle({ content }: { content: string }) {
+  const numbers = { h2: 0, h3: 0 };
+  const numberedArticle = articleUsesHeadingNumbers(content);
+  const headingBase = articleHeadingBase(content);
+  const section = (depth: 2 | 3, children: ReactNode) => {
+    const raw = headingText(children).trim();
+    const split = splitHeadingNumber(raw);
+    if (split) {
+      if (depth === 2) { numbers.h2 += 1; numbers.h3 = 0; }
+      else numbers.h3 += 1;
+      const prefix = raw.slice(0, raw.length - split.text.length);
+      return { no: split.no, children: stripPrefix(children, prefix) };
+    }
+    if (numberedArticle) return { no: "", children };
+    if (depth === 2) { numbers.h2 += 1; numbers.h3 = 0; return { no: String(numbers.h2), children }; }
+    numbers.h3 += 1;
+    return { no: numbers.h2 ? `${numbers.h2}.${numbers.h3}` : String(numbers.h3), children };
+  };
+  const heading = (source: 2 | 3 | 4, children: ReactNode, props: HTMLAttributes<HTMLHeadingElement> & { node?: unknown }) => {
+    const level = displayHeadingLevel(source, headingBase);
+    const Tag = level === 2 ? "h2" : level === 3 ? "h3" : "h4";
+    const domProps = { ...props };
+    Reflect.deleteProperty(domProps, "node");
+    if (level > 3) return <Tag {...domProps}>{children}</Tag>;
+    const sectioned = section(level as 2 | 3, children);
+    return <Tag {...domProps}>{sectioned.no ? <span className="sec-no">{sectioned.no}</span> : null}{sectioned.children}</Tag>;
+  };
+  const gardenComponents = {
+    "garden-block": (props: { dataPayload?: string; "data-payload"?: string }) => (
+      <GardenBlock dataPayload={props.dataPayload ?? props["data-payload"]} />
+    ),
+    "garden-codediff": (props: {
+      children?: ReactNode;
+      dataDiff?: string;
+      dataNew?: string;
+      "data-diff"?: string;
+      "data-new"?: string;
+    }) => (
+      <CodeDiff
+        code={props.children}
+        diff={decodeURIComponent(props.dataDiff ?? props["data-diff"] ?? "")}
+        next={decodeURIComponent(props.dataNew ?? props["data-new"] ?? "")}
+      />
+    ),
+  };
   return (
-    <div className="markdown-body">
+    <div className="markdown-body prose">
       <ReactMarkdown
-        remarkPlugins={markdownPlugins}
+        remarkPlugins={[...markdownPlugins, remarkA2]}
         rehypePlugins={[
           rehypeRaw,
           rehypeKatex,
@@ -107,14 +165,24 @@ export function MarkdownArticle({ content }: { content: string }) {
           rehypeHighlight,
         ]}
         components={{
+          p: ({ children, ...props }) => {
+            const domProps = { ...props };
+            Reflect.deleteProperty(domProps, "node");
+            const nodes = Children.toArray(children).filter((node) => !(typeof node === "string" && !node.trim()));
+            const only = nodes.length === 1 && isValidElement<{ href?: string; children?: ReactNode }>(nodes[0]) ? nodes[0] : null;
+            const href = only?.props.href;
+            const text = only ? headingText(only.props.children).trim() : "";
+            if (href && text === href && /^https?:\/\//iu.test(href)) return <LinkCard href={href} />;
+            return <p {...domProps}>{children}</p>;
+          },
           a: ({ href, children, ...props }) => {
-            const external = href?.startsWith("http");
+            const external = Boolean(href && /^(https?:)?\/\//iu.test(href));
             return (
               <a
                 href={href}
                 {...props}
                 {...(external
-                  ? { target: "_blank", rel: "noopener noreferrer" }
+                  ? { className: "ext", target: "_blank", rel: "noopener noreferrer" }
                   : {})}
               >
                 {children}
@@ -122,9 +190,18 @@ export function MarkdownArticle({ content }: { content: string }) {
             );
           },
           img: MarkdownImage,
+          table: ({ children, ...props }) => (
+            <div className="table-wrap" role="region" aria-label="表格，可横向滚动" tabIndex={0}>
+              <table {...props}>{children}</table>
+            </div>
+          ),
+          h2: ({ children, ...props }) => heading(2, children, props),
+          h3: ({ children, ...props }) => heading(3, children, props),
+          h4: ({ children, ...props }) => heading(4, children, props),
           code: CodeBlock,
+          ...gardenComponents,
           pre: ({ children, ...props }) => {
-            const child = Children.only(children);
+            const child = Children.toArray(children)[0];
             const className = isValidElement<{ className?: string }>(child)
               ? child.props.className
               : undefined;
@@ -137,14 +214,16 @@ export function MarkdownArticle({ content }: { content: string }) {
             }
 
             return (
-              <pre {...preProps} data-language={language?.toUpperCase()}>
-                {children}
-              </pre>
+              <CodeCopy>
+                <pre className="code" {...preProps} data-language={language?.toUpperCase()}>
+                  {children}
+                </pre>
+              </CodeCopy>
             );
           },
         }}
       >
-        {normalizeCallouts(content)}
+        {content}
       </ReactMarkdown>
     </div>
   );