hd-garden 0.3.12 → 0.4.0

package/app/components/GardenContentGuide.tsx

@@ -10,11 +10,6 @@ function SourcePanel({ path, source, language }: SourcePanelProps) {
   return (
     <div className="garden-source-panel">
       <div className="garden-source-bar">
-        <span aria-hidden="true">
-          <i />
-          <i />
-          <i />
-        </span>
         <code>{path}</code>
       </div>
       <pre>
@@ -69,12 +64,10 @@ const columnSource = `columns:
 
 type Guide = {
   id: string;
-  number: string;
   label: string;
   title: string;
   introduction: string;
   steps: ReactNode[];
-  features: string[];
   result: string;
   path: string;
   source: string;
@@ -84,88 +77,45 @@ type Guide = {
 const guides: Guide[] = [
   {
     id: "write-post",
-    number: "01",
     label: "博文",
     title: "写一篇文章",
-    introduction:
-      "博文保存在 content/posts/ 中，可以按照主题建立任意层级的子目录。文件路径同时决定文章地址，正文仍然是普通 Markdown。",
+    introduction: "文件放在 content/posts/。路径就是网址，正文是普通 Markdown。可以按主题分子目录。",
     steps: [
-      <>
-        在 <code>content/posts/</code> 中创建一个 <code>.md</code> 文件。
-      </>,
-      <>在 Front Matter 中填写标题、日期、摘要、主题、标签和封面。</>,
-      <>使用 Markdown 编写正文，图片和其他附件可以使用相对路径。</>,
+      <>在 <code>content/posts/</code> 里新建一个 <code>.md</code> 文件。</>,
+      <>开头写下标题、日期、摘要、主题和标签。封面可有可无。</>,
+      <>接着写正文。图片用相对路径，和文件放在一起。</>,
     ],
-    features: [
-      "GFM 表格、任务列表与脚注",
-      "TypeScript、Go、Rust 等代码高亮",
-      "数学公式与 Mermaid 图表",
-      "图片、音视频与平台嵌入",
-      "草稿、定时发布与置顶",
-      "文章目录、上一篇与下一篇",
-    ],
-    result:
-      "构建时会生成文章页面，并把标题、摘要和正文加入博文列表、主题归档、全文搜索与 RSS。",
+    result: "推送后，这篇文章会出现在列表、主题、搜索和 RSS 里。",
     path: "content/posts/writing/first-post.md",
     source: postSource,
     language: "markdown",
   },
   {
     id: "write-thought",
-    number: "02",
     label: "随想",
-    title: "发布一条随想",
-    introduction:
-      "随想适合记录几句话、一个链接或一组多媒体。它同样保存在 Git 仓库中，只需要更少的字段，也可以通过可选管理后台发布。",
+    title: "写一条随想",
+    introduction: "几句话、一张图或一个链接。字段更少。也可以在后台写，写完同样进仓库。",
     steps: [
-      <>
-        直接创建 <code>content/thoughts/&lt;文件名&gt;.md</code>，或者在管理后台填写内容。
-      </>,
-      <>文件名就是地址。front matter 填写标题和日期；需要暂存时加入草稿状态。</>,
-      <>
-        在 <code>media</code> 中按顺序添加图片、音频、视频或外部链接。
-      </>,
-    ],
-    features: [
-      "纯文字短内容",
-      "多张图片与混合图集",
-      "音频和视频",
-      "带标题的外部链接",
-      "草稿与公开状态",
-      "独立永久链接",
+      <>新建 <code>content/thoughts/文件名.md</code>，或在后台填写。</>,
+      <>文件名就是地址。标题和日期写在开头。先存着就标成草稿。</>,
+      <>图片、音频、视频和链接按顺序放进 <code>media</code>。</>,
     ],
-    result:
-      "发布后的内容会出现在随想时间线和首页最近随想中，每条随想都有可以单独分享的永久链接。",
+    result: "它会出现在随想页和首页，并且有自己的链接。",
     path: "content/thoughts/walk-after-rain.md",
     source: thoughtSource,
     language: "markdown",
   },
   {
     id: "make-column",
-    number: "03",
     label: "专栏",
-    title: "创建一个专栏",
-    introduction:
-      "专栏不复制文章，而是在 content/columns.yaml 中引用已经存在的博文。posts 的排列顺序就是专栏的阅读顺序。",
+    title: "把文章收成专栏",
+    introduction: "专栏不复制文章。它只是 content/columns.yaml 里的一份阅读顺序。",
     steps: [
-      <>
-        在 <code>content/columns.yaml</code> 中添加专栏名称、介绍、状态和封面。
-      </>,
-      <>
-        在 <code>posts</code> 中填写博文相对 <code>content/posts/</code> 的路径。
-      </>,
-      <>按照希望读者阅读的顺序排列路径；同一篇文章可以加入多个专栏。</>,
-    ],
-    features: [
-      "专栏标题、说明和状态",
-      "独立专栏封面",
-      "文章顺序可控",
-      "复用同一份 Markdown",
-      "一篇文章加入多个专栏",
-      "系列文章导航",
+      <>在 <code>content/columns.yaml</code> 里写名称、介绍和封面。</>,
+      <>在 <code>posts</code> 里填文章相对 <code>content/posts/</code> 的路径。</>,
+      <>按你希望读者阅读的顺序排列。同一篇可以进多个专栏。</>,
     ],
-    result:
-      "构建后会生成独立专栏页面。读者可以按照配置顺序浏览文章，文章页也会显示它所属的系列与前后篇目。",
+    result: "读者按这个顺序读。文章页也会显示它属于哪一组，以及上一篇、下一篇。",
     path: "content/columns.yaml",
     source: columnSource,
     language: "yaml",
@@ -174,56 +124,22 @@ const guides: Guide[] = [
 
 export function GardenContentGuide() {
   return (
-    <section className="garden-guide" aria-labelledby="garden-guide-title">
-      <header className="garden-guide-heading">
-        <div>
-          <p className="eyebrow">CONTENT / 内容</p>
-          <h2 id="garden-guide-title">博文、随想和专栏</h2>
-        </div>
-        <p>
-          先选择内容类型，再编辑对应文件。三种内容都保存在源码仓库中，直接编辑文件即可完成全部公开内容的维护和发布。
-        </p>
-      </header>
-
-      <nav className="garden-guide-index" aria-label="内容类型">
-        {guides.map((guide) => (
-          <a href={`#${guide.id}`} key={guide.id}>
-            <span>{guide.number}</span>
-            <strong>{guide.title}</strong>
-            <small>{guide.label}</small>
-          </a>
-        ))}
-      </nav>
-
+    <div className="garden-guide">
       <div className="garden-guide-sections">
         {guides.map((guide) => (
           <article className="garden-content-guide" id={guide.id} key={guide.id}>
             <div className="garden-content-copy">
-              <p className="eyebrow">
-                {guide.number} / {guide.label}
-              </p>
+              <p className="garden-content-label">{guide.label}</p>
               <h2>{guide.title}</h2>
               <p className="garden-content-introduction">{guide.introduction}</p>
 
               <ol className="garden-content-steps">
                 {guide.steps.map((step, index) => (
-                  <li key={index}>
-                    <strong>{index + 1}</strong>
-                    <span>{step}</span>
-                  </li>
+                  <li key={index}>{step}</li>
                 ))}
               </ol>
 
-              <ul className="garden-content-features" aria-label={`${guide.title}支持的能力`}>
-                {guide.features.map((feature) => (
-                  <li key={feature}>{feature}</li>
-                ))}
-              </ul>
-
-              <aside className="garden-content-result">
-                <strong>发布后</strong>
-                <p>{guide.result}</p>
-              </aside>
+              <p className="garden-content-result">{guide.result}</p>
             </div>
 
             <SourcePanel
@@ -234,6 +150,6 @@ export function GardenContentGuide() {
           </article>
         ))}
       </div>
-    </section>
+    </div>
   );
 }

package/app/components/GardenMediaGuide.tsx

@@ -1,30 +1,19 @@
-import {
-  Globe,
-  VideoCamera,
-  WechatLogo,
-  XLogo,
-} from "@phosphor-icons/react/ssr";
-
 const embedTypes = [
   {
     title: "YouTube / Bilibili",
-    description: "识别普通分享链接，自动转换成响应式播放器，并保留原站入口。",
-    Icon: VideoCamera,
+    description: "贴上分享链接，页面里就能播放，也能回到原站。",
   },
   {
     title: "X / Twitter",
-    description: "以带平台标识的摘要卡片展示，避免依赖容易失效的第三方脚本。",
-    Icon: XLogo,
+    description: "显示成一张带出处的卡片，不依赖对方的脚本。",
   },
   {
     title: "微信公众号",
-    description: "保留标题、摘要和原文链接；微信禁止稳定 iframe 时仍有完整降级体验。",
-    Icon: WechatLogo,
+    description: "留下标题、摘要和原文链接。微信不允许嵌进页面时，卡片仍然能点开。",
   },
   {
     title: "其他网站",
-    description: "手动提供标题、摘要与封面，生成不依赖远端抓取的网页预览卡片。",
-    Icon: Globe,
+    description: "自己写标题、摘要和封面。不在构建时去抓那个网址。",
   },
 ];
 
@@ -39,43 +28,33 @@ export function GardenMediaGuide() {
   return (
     <section className="garden-media" id="media" aria-labelledby="garden-media-title">
       <header>
-        <p className="eyebrow">EMBEDS / 高级嵌入</p>
-        <h2 id="garden-media-title">文章不只能放文字。</h2>
+        <h2 id="garden-media-title">视频和链接</h2>
         <p>
-          本地图片、音频和视频继续使用标准 Markdown / HTML；外部平台统一使用
-          <code> embed </code>代码块。可播放的平台直接播放，受平台限制的内容自动退化为摘要卡片。
+          自己的图片、音频和视频用 Markdown。别人的页面用
+          <code> embed </code>
+          围栏。能播的直接播，不能播的显示成一张卡片。
         </p>
       </header>
 
-      <div className="garden-media-layout">
-        <ul className="garden-media-providers">
-          {embedTypes.map(({ title, description, Icon }, index) => (
-            <li key={title}>
-              <span>{String(index + 1).padStart(2, "0")}</span>
-              <Icon size={22} aria-hidden="true" />
-              <div>
-                <strong>{title}</strong>
-                <p>{description}</p>
-              </div>
-            </li>
-          ))}
-        </ul>
-
-        <div className="garden-media-source">
-          <div>
-            <span>content/posts/example.md</span>
-            <small>Markdown</small>
-          </div>
-          <pre><code>{embedSource}</code></pre>
+      <div className="garden-media-source">
+        <div>
+          <span>content/posts/example.md</span>
         </div>
+        <pre><code>{embedSource}</code></pre>
       </div>
 
-      <aside className="garden-media-boundary">
-        <strong>为什么不自动抓网页摘要？</strong>
-        <p>
-          构建阶段主动抓取任意 URL 会带来 SSRF、超时和内容漂移风险。Garden 选择把摘要写进 Markdown：发布结果可预测，原站失效时文章也仍然可读。写稿时可用 <code>make embed URL=...</code> 拉一次 Open Graph，检查后再贴进围栏。
-        </p>
-      </aside>
+      <ul className="garden-media-providers">
+        {embedTypes.map(({ title, description }) => (
+          <li key={title}>
+            <strong>{title}</strong>
+            <p>{description}</p>
+          </li>
+        ))}
+      </ul>
+
+      <p className="garden-media-boundary">
+        摘要写在文章里。构建时不去抓任意网址。原站打不开，文章还在。需要时用 <code>make embed URL=...</code> 拉一次，看过再贴进去。
+      </p>
     </section>
   );
 }

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>
   );