hd-garden 0.3.13 → 0.4.0

package/app/lib/remark-a2.mjs

@@ -0,0 +1,208 @@
+import { toString } from "mdast-util-to-string";
+
+const ALERT_TITLE = {
+  note: "提醒",
+  tip: "建议",
+  important: "重要",
+  warning: "警告",
+  caution: "注意",
+};
+
+const LEGACY_KIND = {
+  info: "note",
+  success: "tip",
+  warning: "warning",
+  danger: "caution",
+  note: "note",
+};
+
+const ALERT_ICON = {
+  note: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.2v4"/><path d="M8 4.8v.1" stroke-width="2"/></svg>',
+  tip: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 12.5h4M6.5 14.5h3M8 1.75a4.5 4.5 0 0 0-2.6 8.2c.4.3.6.7.6 1.2v.35h4v-.35c0-.5.2-.9.6-1.2A4.5 4.5 0 0 0 8 1.75Z"/></svg>',
+  important: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.25 3.25a1 1 0 0 1 1-1h9.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7l-3 2.5v-2.5h-.75a1 1 0 0 1-1-1Z"/><path d="M8 4.75v3"/><path d="M8 9.4v.1" stroke-width="2"/></svg>',
+  warning: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2 1.75 13.25h12.5Z"/><path d="M8 6.5v3.25"/><path d="M8 11.6v.1" stroke-width="2"/></svg>',
+  caution: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5.3 1.75h5.4l3.55 3.55v5.4l-3.55 3.55H5.3l-3.55-3.55V5.3Z"/><path d="M8 4.75v3.75"/><path d="M8 10.9v.1" stroke-width="2"/></svg>',
+};
+
+function meaningfulChildren(node) {
+  return (node.children ?? []).filter((child) => !(child.type === "text" && !String(child.value).trim()));
+}
+
+function visibleText(node) {
+  const parts = [];
+  const visit = (current) => {
+    if (!current || current.type === "html") return;
+    if (current.type === "text") {
+      parts.push(current.value);
+      return;
+    }
+    for (const child of current.children ?? []) visit(child);
+  };
+  visit(node);
+  return parts.join("").trim();
+}
+
+function isBlankParagraph(node) {
+  return node?.type === "paragraph" && toString(node).trim() === "" && meaningfulChildren(node).length === 0;
+}
+
+function alertTitle(kind, label) {
+  return {
+    type: "paragraph",
+    data: { hName: "p", hProperties: { className: ["markdown-alert-title"] } },
+    children: [
+      { type: "html", value: ALERT_ICON[kind] },
+      { type: "text", value: label || ALERT_TITLE[kind] },
+    ],
+  };
+}
+
+const ALERT_KIND = {
+  NOTE: "note",
+  INFO: "note",
+  TIP: "tip",
+  SUCCESS: "tip",
+  IMPORTANT: "important",
+  WARNING: "warning",
+  CAUTION: "caution",
+  DANGER: "caution",
+  FAILURE: "caution",
+};
+
+function paragraphFirstLine(node) {
+  let line = "";
+  for (const child of node.children ?? []) {
+    if (child.type === "break") break;
+    if (child.type === "text") {
+      const newline = child.value.indexOf("\n");
+      line += newline >= 0 ? child.value.slice(0, newline) : child.value;
+      if (newline >= 0) break;
+      continue;
+    }
+    line += toString(child);
+  }
+  return line;
+}
+
+function withoutMarkerLine(node) {
+  const children = [];
+  let skipping = true;
+  for (const child of node.children ?? []) {
+    if (!skipping) {
+      children.push(child);
+      continue;
+    }
+    if (child.type === "break") {
+      skipping = false;
+      continue;
+    }
+    if (child.type === "text") {
+      const newline = child.value.indexOf("\n");
+      if (newline >= 0) {
+        skipping = false;
+        const rest = child.value.slice(newline + 1);
+        if (rest) children.push({ type: "text", value: rest });
+      }
+    }
+  }
+  if (!children.some((child) => child.type !== "text" || child.value.trim())) return null;
+  return { type: "paragraph", children };
+}
+
+function gfmAlert(node) {
+  if (node?.type !== "paragraph") return null;
+  const match = /^\[!(NOTE|INFO|TIP|SUCCESS|IMPORTANT|WARNING|CAUTION|DANGER|FAILURE)\][ \t]*(.*)$/iu.exec(paragraphFirstLine(node).trim());
+  if (!match) return null;
+  return {
+    kind: ALERT_KIND[match[1].toUpperCase()],
+    label: match[2].trim(),
+    body: withoutMarkerLine(node),
+  };
+}
+
+function legacyAlert(node) {
+  if (node?.type !== "paragraph" || visibleText(node)) return null;
+  const html = (node.children ?? []).filter((child) => child.type === "html").map((child) => child.value).join("");
+  const match = /garden-callout-marker--(info|success|warning|danger|note)/u.exec(html);
+  if (!match) return null;
+  return LEGACY_KIND[match[1]] || "note";
+}
+
+function strongOnlyText(node) {
+  if (node?.type !== "paragraph") return "";
+  const children = meaningfulChildren(node);
+  if (children.length !== 1 || children[0].type !== "strong") return "";
+  return toString(children[0]).trim();
+}
+
+function rewriteAlert(node) {
+  const children = node.children ?? [];
+  const gfm = gfmAlert(children[0]);
+  const legacy = gfm ? null : legacyAlert(children[0]);
+  if (!gfm && !legacy) return;
+  const kind = gfm ? gfm.kind : legacy;
+  let label = gfm ? gfm.label : "";
+  let rest = gfm?.body ? [gfm.body, ...children.slice(1)] : children.slice(1);
+  if (!label) {
+    const custom = strongOnlyText(rest.find((child) => !isBlankParagraph(child)));
+    if (custom) {
+      label = custom;
+      const index = rest.findIndex((child) => !isBlankParagraph(child));
+      rest = rest.filter((_, childIndex) => childIndex !== index);
+    }
+  }
+  while (rest.length && isBlankParagraph(rest[0])) rest.shift();
+  node.children = [alertTitle(kind, label), ...rest];
+  node.data ??= {};
+  node.data.hProperties ??= {};
+  const existing = node.data.hProperties.className;
+  const classes = Array.isArray(existing) ? existing : existing ? [existing] : [];
+  node.data.hProperties.className = [...classes, "markdown-alert", `markdown-alert-${kind}`];
+}
+
+function figureCaption(image) {
+  const title = String(image.title ?? "").trim();
+  const alt = String(image.alt ?? "").trim();
+  if (title) return title;
+  if (alt && !/^image|^截图|^img/iu.test(alt)) return alt;
+  return "";
+}
+
+function asFigure(node) {
+  if (node?.type !== "paragraph" || node.data?.hName) return null;
+  const children = meaningfulChildren(node);
+  if (children.length !== 1 || children[0].type !== "image") return null;
+  const image = children[0];
+  const caption = figureCaption(image);
+  const card = {
+    type: "paragraph",
+    data: { hName: "div", hProperties: { className: ["fig-card"] } },
+    children: [image],
+  };
+  const figureChildren = caption
+    ? [card, {
+      type: "paragraph",
+      data: { hName: "figcaption" },
+      children: [{ type: "text", value: caption }],
+    }]
+    : [card];
+  return {
+    type: "paragraph",
+    data: { hName: "figure", hProperties: { className: ["fig"] } },
+    children: figureChildren,
+  };
+}
+
+function walk(node) {
+  if (!node || typeof node !== "object" || !Array.isArray(node.children)) return;
+  if (node.type === "blockquote") rewriteAlert(node);
+  node.children = node.children.map((child) => asFigure(child) ?? child);
+  for (const child of node.children) walk(child);
+}
+
+/** Demo alert cards and captioned figures. Article rendering only. */
+export function remarkA2() {
+  return (tree) => {
+    walk(tree);
+  };
+}

package/app/lib/remark-garden.mjs

@@ -0,0 +1,88 @@
+import { diffToNewCode, protectMathIdentifiers } from "../../ui/garden/enhance.mjs";
+import { classifyFence } from "../../ui/garden/parse.mjs";
+
+function gardenElement(payload) {
+  return {
+    type: "gardenBlock",
+    data: {
+      hName: "garden-block",
+      hProperties: { dataPayload: encodeURIComponent(JSON.stringify(payload)) },
+    },
+  };
+}
+
+function codeDiffElement(code, diff) {
+  return {
+    type: "gardenCodeDiff",
+    data: {
+      hName: "garden-codediff",
+      hProperties: {
+        dataNew: encodeURIComponent(diffToNewCode(diff.value)),
+        dataDiff: encodeURIComponent(diff.value),
+      },
+    },
+    children: [code],
+  };
+}
+
+function fenceNodeToRecord(node) {
+  return { lang: String(node.lang || "").toLowerCase(), meta: String(node.meta || ""), info: `${node.lang || ""} ${node.meta || ""}`.trim() };
+}
+
+function rewriteChildren(node) {
+  if (!Array.isArray(node.children)) return;
+  const next = [];
+  for (let index = 0; index < node.children.length; index += 1) {
+    const child = node.children[index];
+    const following = node.children[index + 1];
+    if (child?.type === "code" && following?.type === "code" && String(following.lang || "").toLowerCase() === "diff") {
+      const current = fenceNodeToRecord(child);
+      const kind = classifyFence({ lang: current.lang, meta: current.meta, info: current.info });
+      if (kind.kind === "code") {
+        next.push(codeDiffElement(child, following));
+        index += 1;
+        continue;
+      }
+    }
+    if (child?.type === "code") {
+      const record = fenceNodeToRecord(child);
+      const kind = classifyFence({ ...record, body: child.value, line: 1, endLine: 1 });
+      if (kind.kind === "legacy") {
+        next.push(gardenElement({ legacy: true, from: kind.lang || record.lang, suggestion: kind.suggestion }));
+        continue;
+      }
+      if (kind.kind === "garden" && kind.block) {
+        next.push(gardenElement(kind.block));
+        continue;
+      }
+    }
+    next.push(child);
+  }
+  node.children = next;
+}
+
+function walk(node) {
+  if (!node || typeof node !== "object") return;
+  if (node.type === "math" || node.type === "inlineMath") {
+    node.value = protectMathIdentifiers(node.value);
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) walk(child);
+    rewriteChildren(node);
+  }
+}
+
+export function remarkGarden() {
+  return (tree) => {
+    walk(tree);
+  };
+}
+
+export function readGardenPayload(value) {
+  if (!value) return null;
+  try {
+    return JSON.parse(decodeURIComponent(String(value)));
+  } catch {
+    return null;
+  }
+}

package/app/page.tsx

@@ -1,119 +1,148 @@
 import Link from "next/link";
-import {
-  ArrowRight,
-  ArrowUpRight,
-  GithubLogo,
-  PushPin,
-} from "@phosphor-icons/react/ssr";
-import { columnHref, columns, formatDate, postHref, posts } from "./lib/content";
+import { columns, postHref, posts } from "./lib/content";
 import { ThoughtCard } from "./components/ThoughtCard";
-import { PageIntro } from "./components/PageIntro";
 import { getPublishedThoughts } from "./lib/public-thoughts";
-import { githubUrl, siteConfig, siteDocumentTitle } from "./site.config";
+import { githubUrl, siteConfig } from "./site.config";
 
 export const metadata = {
-  title: siteDocumentTitle,
+  title: { absolute: siteConfig.name },
   description: siteConfig.description,
 };
 
+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 default function Home() {
+  const recent = [...posts].sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
+  const feature = recent[0];
   const pinned = posts.filter((post) => post.pinned);
   const thoughts = getPublishedThoughts();
+  const series = 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>()),
+  );
 
   return (
-    <main className="page-shell home-page">
-      <PageIntro
-        eyebrow="HELLO, WORLD · 你好，世界"
-        title={siteConfig.pages.home.title}
-        subtitle={siteConfig.pages.home.subtitle}
-      >
-        <a
-          className="inline-cta"
-          href={githubUrl}
-          target="_blank"
-          rel="me noopener noreferrer"
-        >
-          <GithubLogo size={21} weight="fill" />
-          在 GitHub 找到我
-          <ArrowUpRight size={16} />
-        </a>
-      </PageIntro>
+    <main className="sh-main" id="content">
+      <section className="sh-intro">
+        <h1>{siteConfig.pages.home.title}</h1>
+        <p>{siteConfig.pages.home.subtitle || siteConfig.description}</p>
+        <div className="links">
+          <Link href="/about">关于我</Link>
+          <a href={githubUrl} rel="me">GitHub</a>
+          <a href="/rss.xml">RSS 订阅</a>
+        </div>
+      </section>
 
-      {pinned.length > 0 && <section className="home-section">
-        <div className="section-heading accent-heading">
+      {posts.length > 0 && feature ? (
+        <article className="sh-feature" aria-labelledby="ft">
+          {feature.cover ? (
+            <div className="cover" style={{ background: "var(--cover)" }}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={feature.cover} alt="" />
+            </div>
+          ) : null}
           <div>
-            <h2>置顶博文</h2>
+            <p className="kicker">
+              <span>最新文章</span>
+              <time className="num" dateTime={day(feature.date)}>{day(feature.date)}</time>
+              {feature.topic ? <span>{feature.topic}</span> : null}
+            </p>
+            <h2 id="ft"><Link href={postHref(feature)}>{feature.title}</Link></h2>
+            {feature.description ? <p>{feature.description}</p> : null}
+            {feature.tags?.length ? (
+              <p className="tags">{feature.tags.map((tag) => <span key={tag}>#{tag}</span>)}</p>
+            ) : null}
           </div>
-          <PushPin size={20} weight="light" aria-hidden="true" />
-        </div>
-        <div className="post-list">
-          {pinned.map((post) => (
-            <Link href={postHref(post)} key={post.path} className="post-row">
-              <time>{formatDate(post.date)}</time>
-              <span>
-                <strong>{post.title}</strong>
-                <small>{post.topic}</small>
-              </span>
-              <ArrowRight size={18} />
-            </Link>
-          ))}
-        </div>
-      </section>}
+        </article>
+      ) : null}
 
-      {posts.length > 0 && <section className="home-section">
-        <div className="section-heading accent-heading">
-          <div>
-            <h2>最近博文</h2>
+      <div className="sh-home-grid">
+        <section className="sh-section" aria-labelledby="h-recent">
+          <div className="sh-sec-head">
+            <h2 id="h-recent">最近更新</h2>
+            <Link className="sh-more" href="/blog">全部 {posts.length} 篇</Link>
           </div>
-          <Link href="/blog">全部文章 →</Link>
-        </div>
-        <div className="post-list">
-          {posts.slice(0, 5).map((post) => (
-            <Link href={postHref(post)} key={post.path} className="post-row">
-              <time>{formatDate(post.date)}</time>
-              <span>
-                <strong>{post.title}</strong>
-                <small>{post.topic}</small>
-              </span>
-              <ArrowRight size={18} />
-            </Link>
-          ))}
-        </div>
-      </section>}
+          <ol className="sh-rows">
+            {recent.slice(0, 7).map((post) => (
+              <li className="sh-row" key={post.path}>
+                <time className="num" dateTime={day(post.date)}>{day(post.date)}</time>
+                <h3><Link href={postHref(post)}>{post.title}</Link></h3>
+                {post.description ? <p>{post.description}</p> : null}
+                {post.topic ? <Link className="cat" href={`/blog?topic=${encodeURIComponent(post.topic)}`}>{post.topic}</Link> : null}
+              </li>
+            ))}
+          </ol>
+        </section>
+        {pinned.length > 0 ? (
+          <section className="sh-section" aria-labelledby="h-pin">
+            <div className="sh-sec-head section-heading accent-heading"><h2 id="h-pin">置顶</h2></div>
+            <ul className="sh-side-list">
+              {pinned.map((post) => (
+                <li key={post.path}>
+                  <Link href={postHref(post)}>{post.title}</Link>
+                  <span><time className="num" dateTime={day(post.date)}>{day(post.date)}</time>{post.topic ? `　${post.topic}` : ""}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ) : null}
+      </div>
 
-      {thoughts.length > 0 && <section className="home-section">
-        <div className="section-heading accent-heading">
-          <div>
-            <h2>最近随想</h2>
+      {columns[0] && series.length ? (
+        <section className="sh-section" aria-labelledby="h-cols">
+          <div className="sh-sec-head">
+            <h2 id="h-cols">专栏</h2>
+            <Link className="sh-more" href="/columns">全部专栏</Link>
           </div>
-          <Link href="/thoughts">进入随想 →</Link>
-        </div>
-        <div className="home-thought-list">
-          {thoughts.slice(0, 5).map((thought) => (
-            <ThoughtCard key={thought.slug} thought={thought} />
-          ))}
-        </div>
-      </section>}
+          <div className="sh-cols">
+            {series.map(([slug, entries]) => {
+              const first = entries[0];
+              return (
+                <article className="sh-col" key={slug}>
+                  <div className="cover" style={{ background: "var(--well)" }}>
+                    {first.columnCover ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={first.columnCover} alt={first.columnCoverAlt ?? ""} />
+                    ) : null}
+                  </div>
+                  <div className="body">
+                    <h3><Link href={`/columns#${slug}`}>{first.columnTitle}</Link></h3>
+                    <p className="count">{entries.length} 篇，{first.columnStatus ?? "持续更新"}</p>
+                    <p>{first.columnDescription ?? first.description}</p>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
 
-      {columns[0] && <section className="home-section column-preview">
-        <div className="section-heading accent-heading">
-          <div>
-            <h2>主题专栏</h2>
+      {thoughts.length > 0 ? (
+        <section className="sh-section" aria-labelledby="h-thoughts">
+          <div className="sh-sec-head">
+            <h2 id="h-thoughts">最近随想</h2>
+            <Link className="sh-more" href="/thoughts">全部随想</Link>
           </div>
-          <Link href="/columns">全部专栏 →</Link>
-        </div>
-        <Link
-          href={columnHref(columns[0])}
-          className="column-card"
-        >
-          <div>
-            <span>连载中 · {columns.length} 篇</span>
-            <h3>{columns[0].columnTitle}</h3>
-            <p>记录一个人从想法、最小闭环到稳定发布的完整构建过程。</p>
+          <div className="home-thought-list">
+            {thoughts.slice(0, 5).map((thought) => (
+              <ThoughtCard key={thought.slug} thought={thought} />
+            ))}
           </div>
-          <span className="column-number">#01</span>
-        </Link>
-      </section>}
+        </section>
+      ) : null}
     </main>
   );
 }