hd-garden 0.5.17 → 0.5.18

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/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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.17",
+  "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-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/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, " ")