hd-garden 0.5.16 → 0.5.18

package/README.md

@@ -14,6 +14,8 @@ npm install
 
 推荐把 GitHub 仓库命名为 `<你的 GitHub 用户名>.github.io`，并在 **Settings → Pages** 把 Source 设为 **GitHub Actions**。然后修改 `site.config.yaml`，再写第一篇 Markdown。公开包名是 `hd-garden`；装进站点之后也可以用 `garden`。不要运行 `npx garden init`，npm 上的 `garden` 是别人的样式库。
 
+在国内想用 npm 镜像（例如 npmmirror），把 `registry` 写在自己的 `~/.npmrc` 或不提交的项目 `.npmrc` 里，不要让镜像地址进 `package-lock.json`：GitHub Actions 连不上镜像时 `npm ci` 会一直卡住。镜像会把新装包的 `resolved` 写成镜像地址，提交前运行 `node node_modules/hd-garden/scripts/check-lockfile-registry.mjs` 检查（Garden 仓库的 CI 也会检查）；报错时把这些地址的域名换回 `https://registry.npmjs.org/`，路径和 integrity 都不用改。
+
 也可以继续用 **Use this template**；该仓库同时是可运行的演示站。
 
 完成后运行：

package/app/admin/preview/[...path]/page.tsx

@@ -7,6 +7,7 @@ import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } fro
 import { MarkdownArticle } from "../../../components/MarkdownArticle";
 import { repositoryContentPath } from "../../../lib/repository-path.mjs";
 import { readMarkdown, readText } from "../../../lib/ui-content";
+import { formatInlineLink, replaceInlineLinks } from "../../../../ui/garden/markdown-destination.mjs";
 
 export const dynamic = process.env.STATIC_EXPORT === "1" ? "force-static" : "force-dynamic";
 export const dynamicParams = false;
@@ -22,8 +23,8 @@ const isRelative = (value: string) => !/^(?:[a-z][a-z0-9+.-]*:|\/|#)/iu.test(val
 /** Same-name-directory files go through the authenticated, sandboxed proxy. */
 function proxyAssets(content: string, post: string) {
   const proxy = (relative: string) => `/api/admin/preview/asset?post=${encodeURIComponent(post)}&path=${encodeURIComponent(relative)}`;
-  let output = content.replace(/(!\[[^\]]*\]\()<?([^)\s>]+)>?/gu, (match, prefix: string, src: string) =>
-    isRelative(src) ? `${prefix}${proxy(src)}` : match,
+  let output = replaceInlineLinks(content, (link) =>
+    link.image && isRelative(link.url) ? formatInlineLink(link, proxy(link.url)) : undefined,
   );
   for (const fence of [...scanFences(output)].reverse()) {
     if (fence.lang !== "widget") continue;

package/app/components/MarkdownArticle.tsx

@@ -33,7 +33,7 @@ import { LinkCardRefresh } from "./LinkCardRefresh";
 import { linkHost } from "../../scripts/link-meta-core.mjs";
 import { cardDate } from "../../ui/garden/card-refresh.mjs";
 import { siteHref } from "../lib/site-href";
-import { codeLanguageLabel } from "../../ui/garden/code-language.mjs";
+import { codeLanguageLabel, fenceLanguage } from "../../ui/garden/code-language.mjs";
 
 // Full URLs back to this site are internal links, written as root-relative paths.
 const sameSite = sameSiteMatcher(siteLinks?.address ?? "", siteLinks?.basePath ?? "");
@@ -333,7 +333,7 @@ export function MarkdownArticle({ content }: { content: string }) {
             const className = isValidElement<{ className?: string }>(child)
               ? child.props.className
               : undefined;
-            const language = className?.match(/language-([\w-]+)/)?.[1];
+            const language = fenceLanguage(className);
             const preProps = { ...props };
             delete preProps.node;
 

package/app/globals.css

@@ -2188,7 +2188,7 @@ button {
   position: absolute;
   top: 8px;
   right: 12px;
-  color: #8b929c;
+  color: var(--muted);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.12em;

package/app/layout.tsx

@@ -31,12 +31,11 @@ export async function generateMetadata(): Promise<Metadata> {
       icon: [{ url: brand.favicon, type: brand.favicon.endsWith(".svg") ? "image/svg+xml" : undefined }],
       ...(brand.appleTouchIcon ? { apple: [{ url: brand.appleTouchIcon, sizes: "180x180" }] } : {}),
     },
+    // index and follow are the default, so no robots meta is written here: the
+    // 404 page keeps exactly one, the noindex vinext adds, and noindex pages set
+    // their own. Only Google's preview limits are stated.
     robots: {
-      index: true,
-      follow: true,
       googleBot: {
-        index: true,
-        follow: true,
         "max-image-preview": "large",
         "max-snippet": -1,
         "max-video-preview": -1,

package/app/styles/a2.css

@@ -685,6 +685,18 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   height: auto;
 }
 
+/* Dark mode: article images sit on the light paper colour, so a transparent
+   image (black lines on nothing, like most SVG diagrams) stays legible and an
+   opaque one looks the same. The backing is the image's own background, so it
+   takes the image's own corner radius; no padding, no filters. Favicons, link
+   card thumbnails, covers, avatars and the logo are not article images. */
+html[data-theme="dark"] .markdown-image-trigger img,
+html[data-theme="dark"] .markdown-image-lightbox-content img,
+html[data-theme="dark"] .markdown-body > img,
+html[data-theme="dark"] .markdown-body > p > img:not([class]) {
+  background: #faf9f5;
+}
+
 .markdown-body .fig {
   margin: 36px 0;
 }
@@ -1267,9 +1279,10 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   visibility: hidden;
 }
 
-/* Narrow screens: only the copy button; the code block layout stays as it is. */
+/* Narrow screens: no language label, in the article (only the copy button
+   stays) and in the file preview drawer alike; nothing else changes. */
 @media (max-width: 639.98px) {
-  .markdown-body .ux-cb > pre[data-language]::before {
+  .markdown-body pre[data-language]::before {
     display: none;
   }
 }

package/package.json

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

package/scripts/build-content.mjs

@@ -10,6 +10,7 @@ import { countDemoWords } from "../ui/garden/word-count.mjs";
 import { referenceDomain } from "../ui/garden/references.mjs";
 import { linkAssetsForRender } from "./link-assets.mjs";
 import { cardUrls } from "../ui/garden/markdown-links.mjs";
+import { formatInlineLink, replaceInlineLinks } from "../ui/garden/markdown-destination.mjs";
 import { configuredSiteAddress, sameSiteMatcher } from "../ui/garden/same-site.mjs";
 import { resolveBrand } from "./brand.mjs";
 import { imageSources, readImageCache, sizeFromBytes } from "./image-sizes.mjs";
@@ -173,10 +174,10 @@ function copyLocalAsset(value, markdownPath, sourcePath, options = {}) {
 }
 
 function rewriteMarkdownAssets(content, markdownPath, sourcePath) {
-  const markdownImages = content.replace(
-    /(!\[[^\]]*\]\()<?([^)\s>]+)>?((?:\s+["'][^"']*["'])?\))/gu,
-    (_, prefix, src, suffix) =>
-      `${prefix}${copyLocalAsset(src, markdownPath, sourcePath)}${suffix}`,
+  // `![alt](<a b (1).png>)` keeps its angle brackets: without them the space
+  // and the parentheses would no longer be one destination.
+  const markdownImages = replaceInlineLinks(content, (link) =>
+    link.image ? formatInlineLink(link, copyLocalAsset(link.url, markdownPath, sourcePath)) : undefined,
   );
 
   return markdownImages.replace(

package/scripts/check-lockfile-registry.mjs

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+// Fails when package-lock.json downloads anything from somewhere other than the
+// public npm registry. A mirror (for example a China mirror) belongs in your own
+// ~/.npmrc or a project .npmrc that you keep out of git, never in the lockfile:
+// CI runners elsewhere may not reach it, and `npm ci` then hangs without output.
+// Usage: node scripts/check-lockfile-registry.mjs [path/to/package-lock.json]
+import fs from "node:fs";
+import { pathToFileURL } from "node:url";
+
+export const ALLOWED_REGISTRY = "https://registry.npmjs.org/";
+
+/** Entries of a lockfile whose `resolved` URL is not on registry.npmjs.org. */
+export function foreignResolved(lock) {
+  const out = [];
+  for (const [name, entry] of Object.entries(lock?.packages ?? {})) {
+    const resolved = entry?.resolved;
+    // Workspace links and the root package have no download URL.
+    if (typeof resolved !== "string" || entry.link) continue;
+    if (!resolved.startsWith(ALLOWED_REGISTRY)) out.push({ name: name || "(root)", resolved });
+  }
+  return out;
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1] ?? "").href) {
+  const file = process.argv[2] ?? "package-lock.json";
+  const offenders = foreignResolved(JSON.parse(fs.readFileSync(file, "utf8")));
+  if (offenders.length) {
+    console.error(`${file}: ${offenders.length} 个包的 resolved 不在 ${ALLOWED_REGISTRY}：`);
+    for (const { name, resolved } of offenders.slice(0, 20)) console.error(`  ${name}  ${resolved}`);
+    if (offenders.length > 20) console.error(`  …… 另外 ${offenders.length - 20} 个`);
+    console.error("镜像请写在自己的 .npmrc 里，不要进锁文件。把这些地址改回 registry.npmjs.org 后再提交。");
+    process.exit(1);
+  }
+  console.log(`${file}: 全部 resolved 都在 ${ALLOWED_REGISTRY}`);
+}

package/scripts/check-post.mjs

@@ -7,6 +7,7 @@ import { gardenSiteRoot } from "./garden-paths.mjs";
 import { checkUiBlock } from "../ui/core/validate.mjs";
 import { checkGardenMarkdown } from "../ui/garden/check.mjs";
 import { checkFileSources } from "../ui/garden/file-paths.mjs";
+import { inlineLinkParts, inlineLinkPattern } from "../ui/garden/markdown-destination.mjs";
 
 const siteRoot = gardenSiteRoot();
 const calloutTypes = new Set([
@@ -247,8 +248,9 @@ const scanBody = (errors, content, markdownPath, sourcePath, { warnings = [], dr
       error(errors, "callout-type", lineNumber, `${sourcePath}: 不支持的警告框类型 ${callout[1]}`);
     }
 
-    for (const image of line.matchAll(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/gu)) {
-      assertLocalFile(errors, image[2], path.dirname(markdownPath), sourcePath, lineNumber, "图片");
+    for (const match of line.matchAll(inlineLinkPattern())) {
+      const image = inlineLinkParts(match);
+      if (image.image) assertLocalFile(errors, image.url, path.dirname(markdownPath), sourcePath, lineNumber, "图片");
     }
   });
 

package/scripts/file-preview.mjs

@@ -23,7 +23,7 @@ import remarkRehype from "remark-rehype";
 import { unified } from "unified";
 import { visit } from "unist-util-visit";
 import { markdownSyntaxPlugins } from "../ui/garden/markdown-syntax.mjs";
-import { codeLanguageLabel } from "../ui/garden/code-language.mjs";
+import { codeLanguageLabel, fenceLanguage } from "../ui/garden/code-language.mjs";
 
 const DROPPED_ELEMENTS = new Set(["script", "noscript", "iframe", "frame", "frameset", "object", "embed", "applet", "base", "link", "meta", "form", "template"]);
 const URL_PROPERTIES = new Set(["href", "src", "action", "formAction", "poster", "cite", "background", "xLinkHref"]);
@@ -82,7 +82,7 @@ export function rehypePreviewShape() {
       }
       if (node.tagName === "pre") {
         const code = node.children.find((child) => child.type === "element" && child.tagName === "code");
-        const language = [].concat(code?.properties?.className ?? []).map(String).find((name) => name.startsWith("language-"))?.slice(9);
+        const language = fenceLanguage([].concat(code?.properties?.className ?? []));
         node.properties.className = [...[].concat(node.properties.className ?? []), "code"];
         if (codeLanguageLabel(language)) node.properties.dataLanguage = codeLanguageLabel(language);
       }

package/ui/garden/code-language.mjs

@@ -3,7 +3,8 @@
  * drawer and the standalone preview page all go through here, so ```py and
  * ```python read the same everywhere. Common aliases map to one language; JS and
  * TS use their abbreviations, every other language its full name in capitals
- * (PYTHON, GO, RUST, BASH), and an unknown fence language is shown in capitals.
+ * (PYTHON, GO, RUST), every shell (sh, zsh, bash, shell) reads SHELL, and an
+ * unknown fence language is shown in capitals.
  */
 const ALIASES = {
   py: "python",
@@ -15,8 +16,9 @@ const ALIASES = {
   ts: "typescript",
   mts: "typescript",
   tsx: "tsx",
-  sh: "bash",
-  zsh: "bash",
+  sh: "shell",
+  zsh: "shell",
+  bash: "shell",
   shell: "shell",
   console: "shell",
   golang: "go",
@@ -27,6 +29,7 @@ const ALIASES = {
   md: "markdown",
   htm: "html",
   "c++": "cpp",
+  "c#": "csharp",
   cc: "cpp",
   hpp: "cpp",
   cs: "csharp",
@@ -39,6 +42,17 @@ const ALIASES = {
 /** JavaScript and TypeScript go by their common abbreviations; everything else by its full name. */
 const NAMES = { javascript: "JS", typescript: "TS", cpp: "C++", csharp: "C#" };
 
+/**
+ * The fence language from a code element's class (`language-c#` → `c#`). Takes
+ * a class string or a class list. The name is everything after `language-` up
+ * to the next space, so symbols stay: c#, c++, f#, objective-c, shell-session.
+ */
+export function fenceLanguage(className) {
+  const names = Array.isArray(className) ? className.map(String) : String(className ?? "").split(/\s+/u);
+  const token = names.find((name) => name.startsWith("language-") && name.length > 9);
+  return token ? token.slice(9) : "";
+}
+
 /** Display label for a fence language, or "" when there is none. */
 export function codeLanguageLabel(language) {
   const raw = String(language ?? "").trim().toLowerCase();

package/ui/garden/markdown-destination.mjs

@@ -0,0 +1,77 @@
+/**
+ * Inline links and images, `[label](destination "title")` and
+ * `![alt](destination "title")`, read the way CommonMark reads them. A
+ * destination is either
+ * - `<…>`: anything but a line break or an unescaped `<` / `>`, so it may hold
+ *   spaces and unbalanced parentheses: `![a](<./my shot (1).png>)`; or
+ * - a bare run without spaces, where parentheses must balance:
+ *   `[w](https://en.wikipedia.org/wiki/Trie_(data_structure))`.
+ * The build, the checker, the draft preview, link cards and the search index
+ * all use this one reading, so a destination that works in the article also
+ * works everywhere else, and a rewritten destination keeps its brackets.
+ */
+
+const ESCAPED = String.raw`\\.`;
+const ANGLE = String.raw`<((?:[^<>\n\\]|${ESCAPED})*)>`;
+const PLAIN = String.raw`(?:[^\s()<\\]|${ESCAPED})`;
+const INNER = String.raw`(?:[^\s()\\]|${ESCAPED})`;
+// Balanced parentheses, nested up to three deep.
+const PARENS = [1, 2, 3].reduce((inner) => String.raw`\((?:${INNER}|${inner})*\)`, String.raw`\((?:${INNER})*\)`);
+const BARE = String.raw`((?:${PLAIN}|${PARENS})(?:${INNER}|${PARENS})*)`;
+const LABEL = String.raw`(?:[^\[\]\\]|${ESCAPED}|\[(?:[^\[\]\\]|${ESCAPED})*\])*`;
+
+/**
+ * Source of the inline link pattern. Groups: 1 `!` for an image, 2 label,
+ * 3 destination written in `<…>`, 4 bare destination, 5 title (with the space
+ * before it).
+ */
+export const INLINE_LINK_SOURCE = String.raw`(!?)\[(${LABEL})\]\(\s*(?:${ANGLE}|${BARE})((?:\s+(?:"(?:[^"\\]|${ESCAPED})*"|'(?:[^'\\]|${ESCAPED})*'|\((?:[^()\\]|${ESCAPED})*\)))?)\s*\)`;
+
+/**
+ * A fresh global pattern for inline links and images (`flags` adds e.g. `i`).
+ * @param {string} [flags]
+ */
+export const inlineLinkPattern = (flags = "") => new RegExp(INLINE_LINK_SOURCE, `gu${flags.replace(/[gu]/gu, "")}`);
+
+/**
+ * @typedef {{ whole: string, image: boolean, label: string, url: string, angle: boolean, title: string }} InlineLink
+ */
+
+/**
+ * The parts of one match of inlineLinkPattern().
+ * @param {ArrayLike<string | undefined>} match
+ * @returns {InlineLink}
+ */
+export function inlineLinkParts(match) {
+  const angle = match[3] !== undefined;
+  return { whole: String(match[0]), image: match[1] === "!", label: String(match[2] ?? ""), url: String((angle ? match[3] : match[4]) ?? ""), angle, title: match[5] ?? "" };
+}
+
+/**
+ * A destination written back the way it was written: in `<…>` if it was.
+ * @param {string} url
+ * @param {boolean} angle
+ */
+export const formatDestination = (url, angle) => (angle ? `<${url}>` : url);
+
+/**
+ * `[label](destination title)` or `![…](…)` from parts, with a new url.
+ * @param {Pick<InlineLink, "image" | "label" | "angle" | "title">} link
+ * @param {string} url
+ */
+export const formatInlineLink = ({ image, label, angle, title }, url) =>
+  `${image ? "!" : ""}[${label}](${formatDestination(url, angle)}${title})`;
+
+/**
+ * Replace every inline link and image. `replace(parts)` returns the new text,
+ * or undefined to leave that link as written.
+ * @param {string} text
+ * @param {(link: InlineLink) => string | undefined} replace
+ * @returns {string}
+ */
+export function replaceInlineLinks(text, replace) {
+  return String(text ?? "").replace(inlineLinkPattern(), (...match) => {
+    const next = replace(inlineLinkParts(/** @type {string[]} */ (match)));
+    return next === undefined ? match[0] : next;
+  });
+}

package/ui/garden/markdown-links.mjs

@@ -2,6 +2,7 @@
  * External links written in a post body. Code (fenced blocks, indented blocks
  * and inline spans) is skipped, so a URL in a snippet is never a link.
  */
+import { INLINE_LINK_SOURCE } from "./markdown-destination.mjs";
 
 const FENCE = /^ {0,3}(`{3,}|~{3,})/u;
 
@@ -47,7 +48,12 @@ function mapInline(text, visit) {
   return result + visit(text.slice(index));
 }
 
-const LINK = /(!?)\[(?:[^\[\]]|\[[^\]]*\])*\]\(\s*<?(https?:\/\/[^\s)>]+)>?(?:\s+(?:"[^"]*"|'[^']*'))?\s*\)(\{card\})?/giu;
+// Inline links read as CommonMark reads them (ui/garden/markdown-destination.mjs):
+// `[t](<https://e.com/a (1)>)` and `[t](https://e.com/Trie_(x))` are whole addresses.
+// Groups: 1 `!`, 3 or 4 the address, 6 `{card}`.
+const LINK = new RegExp(`${INLINE_LINK_SOURCE}(\\{card\\})?`, "giu");
+const linkUrl = (match) => match[3] ?? match[4];
+const isWebUrl = (url) => /^https?:\/\//iu.test(url);
 const AUTOLINK = /<(https?:\/\/[^\s>]+)>/giu;
 const BARE = /(^|[\s(（：:，,。])(https?:\/\/[^\s<>()（）\]，。、]+[^\s<>()（）\].,;:!?，。、；：！？'"])/giu;
 
@@ -56,7 +62,7 @@ export function markdownLinks(markdown) {
   const links = [];
   mapOutsideCode(markdown, (text) => {
     for (const match of text.matchAll(LINK)) {
-      if (match[1] !== "!") links.push({ url: match[2], card: Boolean(match[3]) });
+      if (match[1] !== "!" && isWebUrl(linkUrl(match))) links.push({ url: linkUrl(match), card: Boolean(match[6]) });
     }
     const rest = text.replace(LINK, " ");
     for (const match of rest.matchAll(AUTOLINK)) links.push({ url: match[1], card: false });
@@ -75,7 +81,7 @@ export const CARD_MARKER = "{card}";
  */
 export function stripCardMarkers(markdown) {
   if (!String(markdown ?? "").includes(CARD_MARKER)) return markdown;
-  return mapOutsideCode(markdown, (text) => text.replace(LINK, (whole, bang, url, card) => (card ? whole.slice(0, -CARD_MARKER.length) : whole)));
+  return mapOutsideCode(markdown, (text) => text.replace(LINK, (...match) => (match[6] && isWebUrl(linkUrl(match)) ? match[0].slice(0, -CARD_MARKER.length) : match[0])));
 }
 
 /** URLs the author asked to show as cards, in order, without repeats. */

package/ui/garden/search-index.mjs

@@ -8,13 +8,17 @@
  */
 import crypto from "node:crypto";
 import { contentToSearchText } from "../core/transform.mjs";
+import { inlineLinkPattern } from "./markdown-destination.mjs";
+
+const INLINE_LINK = inlineLinkPattern();
 
 /** Plain text of a post body, as search and word counts see it. */
 export function searchableText(markdown) {
   return contentToSearchText(markdown)
     .replace(/```[^\n]*\n([\s\S]*?)```/g, " $1 ")
-    .replace(/!\[([^\]]*)\]\([^)]+\)/g, " $1 ")
-    .replace(/\[([^\]]+)\]\([^)]+\)/g, " $1 ")
+    // Links and images leave their text; the address goes whole, even with
+    // parentheses or in <…> (ui/garden/markdown-destination.mjs).
+    .replace(INLINE_LINK, (...match) => ` ${match[2]} `)
     .replace(/<[^>]+>/g, " ")
     .replace(/[#>*_~`|[\]{}()]/g, " ")
     .replace(/\s+/g, " ")