@zzclub/pipeline 0.10.0 → 0.10.2

package/src/wechat-preview/themes.ts

@@ -5,6 +5,10 @@ export interface WechatExportTheme {
   fontFamily: string;
   bodyColor: string;
   mutedColor: string;
+  /** Major section heading (H2); slightly deeper than body */
+  h2Color: string;
+  /** In-section heading (H3); between body and muted */
+  h3Color: string;
   primaryColor: string;
   dividerColor: string;
   blockquoteBorderColor: string;
@@ -38,16 +42,19 @@ function buildContainerStyle(options: {
   letterSpacing?: string;
 }): string {
   return [
-    "padding: 14px 11px",
+    "max-width: 100%",
+    "margin: 0",
+    "padding: 10px 4px 30px",
     `background: ${options.background}`,
-    "background-size: 20px 20px",
-    "background-position: center center",
+    "box-sizing: border-box",
     `font-family: ${options.fontFamily}`,
     "font-size: 16px",
     `color: ${options.color}`,
-    "word-wrap: break-word",
-    `line-height: ${options.lineHeight ?? "1.92"}`,
-    `letter-spacing: ${options.letterSpacing ?? "0.03em"}`,
+    "overflow-wrap: break-word",
+    "word-break: break-word",
+    `line-height: ${options.lineHeight ?? "1.84"}`,
+    `letter-spacing: ${options.letterSpacing ?? "0.012em"}`,
+    "-webkit-text-size-adjust: 100%",
   ].join("; ");
 }
 
@@ -56,6 +63,8 @@ function buildFooterStyle(color: string): string {
     "margin-top: 32px",
     "text-align: center",
     "font-size: 12px",
+    "line-height: 1.6",
+    "letter-spacing: 0.08em",
     `color: ${color}`,
   ].join("; ");
 }
@@ -74,36 +83,38 @@ const THEMES: Record<string, WechatPreviewTheme> = {
       "--muted-foreground": "215 8% 42%",
       "--border": "220 10% 86%",
       "--brand": "#ca6093",
-      "--brand-soft": "#d4789e",
+      "--brand-soft": "#ca6093",
       "--brand-bg": "rgba(202, 96, 147, 0.08)",
-      "--brand-bg-deep": "rgba(202, 96, 147, 0.14)",
-      "--text": "#202124",
-      "--text-soft": "#5f6368",
-      "--text-mid": "#3c4043",
-      "--divider": "#dadce0",
+      "--brand-bg-deep": "rgba(202, 96, 147, 0.12)",
+      "--text": "#292526",
+      "--text-soft": "#6f696b",
+      "--text-mid": "#4d484a",
+      "--divider": "#e2dcdf",
       "--bg-page": "#ffffff",
-      "--bg-warm": "#f8f9fa",
+      "--bg-warm": "#faf7f8",
     },
     exportTheme: {
       containerStyle: buildContainerStyle({
         background: "#ffffff",
-        color: "#202124",
+        color: "#292526",
         fontFamily:
-          "'SweiCurveLeg', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-        lineHeight: "1.92",
-        letterSpacing: "0.03em",
+          "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif",
+        lineHeight: "1.84",
+        letterSpacing: "0.012em",
       }),
       footerText: "公众号 · 早早集市",
-      footerStyle: buildFooterStyle("#8a8f98"),
+      footerStyle: buildFooterStyle("#716a6d"),
       fontFamily:
-        "'SweiCurveLeg', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-      bodyColor: "#202124",
-      mutedColor: "#5f6368",
-      primaryColor: "#ca6093",
-      dividerColor: "#dadce0",
+        "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif",
+      bodyColor: "#292526",
+      mutedColor: "#6f696b",
+      h2Color: "#1f1b1c",
+      h3Color: "#5c5658",
+      primaryColor: "#a94473",
+      dividerColor: "#e2dcdf",
       blockquoteBorderColor: "#ca6093",
-      bodyLineHeight: "1.92",
-      bodyLetterSpacing: "0.03em",
+      bodyLineHeight: "1.84",
+      bodyLetterSpacing: "0.012em",
     },
   },
   ancientone: {
@@ -117,36 +128,38 @@ const THEMES: Record<string, WechatPreviewTheme> = {
       "--accent-foreground": "337 28% 22%",
       "--muted": "338 25% 97%",
       "--border": "337 20% 88%",
-      "--brand": "#ca6093",
-      "--brand-soft": "#d4789e",
-      "--brand-bg": "rgba(202, 96, 147, 0.08)",
-      "--brand-bg-deep": "rgba(202, 96, 147, 0.14)",
-      "--text": "#2c2c2c",
-      "--text-soft": "#8c8c8c",
-      "--text-mid": "#5c5c5c",
-      "--divider": "#d8d0d3",
+      "--brand": "#b86f86",
+      "--brand-soft": "#b86f86",
+      "--brand-bg": "rgba(184, 111, 134, 0.08)",
+      "--brand-bg-deep": "rgba(184, 111, 134, 0.12)",
+      "--text": "#30292b",
+      "--text-soft": "#756b6e",
+      "--text-mid": "#534a4d",
+      "--divider": "#dfd7da",
       "--bg-page": "#fefefe",
-      "--bg-warm": "#faf8f9",
+      "--bg-warm": "#faf7f8",
     },
     exportTheme: {
       containerStyle: buildContainerStyle({
         background: "#fefefe",
-        color: "#2c2c2c",
+        color: "#30292b",
         fontFamily:
-          "'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, 'SF Pro Text', 'Noto Sans SC', sans-serif",
-        lineHeight: "2.0",
+          "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif",
+        lineHeight: "1.85",
         letterSpacing: "0.015em",
       }),
       footerText: "公众号 · 古一软件",
-      footerStyle: buildFooterStyle("#8c8c8c"),
+      footerStyle: buildFooterStyle("#756b6e"),
       fontFamily:
-        "'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, 'SF Pro Text', 'Noto Sans SC', sans-serif",
-      bodyColor: "#2c2c2c",
-      mutedColor: "#8c8c8c",
-      primaryColor: "#ca6093",
-      dividerColor: "#d8d0d3",
-      blockquoteBorderColor: "#ca6093",
-      bodyLineHeight: "2.0",
+        "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif",
+      bodyColor: "#30292b",
+      mutedColor: "#756b6e",
+      h2Color: "#241f21",
+      h3Color: "#61585b",
+      primaryColor: "#8f4d63",
+      dividerColor: "#dfd7da",
+      blockquoteBorderColor: "#b86f86",
+      bodyLineHeight: "1.85",
       bodyLetterSpacing: "0.015em",
     },
   },

package/src/wechat-preview/wechat-export.integration.test.ts

@@ -0,0 +1,94 @@
+import { afterAll, describe, expect, test } from "bun:test";
+import { mkdtemp, readFile, rm, writeFile } from "fs/promises";
+import { tmpdir } from "os";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import { findChrome } from "../imgx/runtime";
+import { exportMarkdownToWechatHtml } from "./index";
+
+const fixturePath = join(
+  dirname(fileURLToPath(import.meta.url)),
+  "fixtures",
+  "all-nodes.md",
+);
+
+describe("semantic WeChat HTML export", () => {
+  let tempDir: string | null = null;
+
+  afterAll(async () => {
+    if (tempDir) await rm(tempDir, { recursive: true, force: true });
+  });
+
+  test.skipIf(findChrome() === null)("renders all nodes, cascades CSS, and emits a safe exact preview", async () => {
+    tempDir = await mkdtemp(join(tmpdir(), "zzhub-wechat-renderer-"));
+    const cssPath = join(tempDir, "custom.css");
+    const htmlPath = join(tempDir, "article.html");
+    const previewPath = join(tempDir, "preview.html");
+    await writeFile(cssPath, `
+.milkdown .editor { --fixture-paragraph: #123456; }
+.milkdown .editor p { color: var(--fixture-paragraph); }
+.milkdown .editor h2 { color: #224466; display: grid; position: fixed; }
+.milkdown .editor [data-wechat-node="inline-code"] { background-color: #abcdef; }
+`, "utf-8");
+
+    const result = await exportMarkdownToWechatHtml({
+      markdownPath: fixturePath,
+      outPath: htmlPath,
+      previewShellOutPath: previewPath,
+      customCss: cssPath,
+      account: "default",
+      title: "全节点精确预览",
+    });
+    const html = await readFile(htmlPath, "utf-8");
+    const preview = await readFile(previewPath, "utf-8");
+
+    expect(result.html).toBe(html);
+    expect(html.length).toBeLessThan(65_400);
+    expect(html).toContain("一级标题：克制的中文编辑部");
+    expect(html).toContain("<blockquote");
+    expect(html).toContain("<table");
+    expect(html).toContain("<img ");
+    expect(html).toContain("图片说明：克制、清晰、适合移动端阅读");
+    expect(html).toContain("typescript</p><pre");
+    expect(html).toContain("  title: string;");
+    expect(html).toContain("white-space: pre");
+    expect(html).toContain("☑");
+    expect(html).toContain("☐");
+    expect(html).toContain("[1] 外部链接: https://example.com/reading-guide?from=wechat");
+    expect(html).toContain("[2] 资料链接: https://example.org/reference");
+    expect(html).toContain("相关链接");
+    expect(html).toMatch(/color: (?:#123456|rgb\(18, 52, 86\))/);
+    expect(html).toMatch(/color: (?:#224466|rgb\(34, 68, 102\))/);
+    expect(html).toMatch(/background-color: (?:#abcdef|rgb\(171, 205, 239\))/);
+    const inlineStyles = Array.from(
+      html.matchAll(/<[a-z][^>]*\sstyle="([^"]*)"/gi),
+      (match) => match[1] ?? "",
+    );
+    expect(inlineStyles.some((style) => style.includes("var("))).toBe(false);
+
+    expect(html).not.toMatch(/\sclass=/i);
+    expect(html).not.toContain("data-wechat-node");
+    expect(html).not.toContain(".milkdown");
+    expect(html).not.toContain(".cm-");
+    expect(html).not.toMatch(/<(?:script|style|iframe|object|embed|form|button)\b/i);
+    expect(html).not.toMatch(/<[^>]+\son[a-z]+=/i);
+    expect(inlineStyles.some((style) => (
+      /(?:^|;)\s*display:\s*(?:flex|grid)(?:;|$)/i.test(style) ||
+      /(?:^|;)\s*position\s*:/i.test(style)
+    ))).toBe(false);
+    expect(html).not.toMatch(/<(?:h[1-6]|figure|figcaption|div)\b/i);
+    expect(html).toContain("&lt;script&gt;alert('never')&lt;/script&gt;");
+
+    const tagNames = Array.from(html.matchAll(/<\/?([a-z][a-z0-9-]*)\b/gi), (match) => match[1]?.toLowerCase());
+    const allowedTags = new Set([
+      "section", "p", "blockquote", "ul", "ol", "li", "pre", "code",
+      "span", "strong", "em", "b", "i", "u", "s", "del", "a", "img",
+      "br", "hr", "table", "thead", "tbody", "tr", "th", "td",
+    ]);
+    expect(tagNames.every((tagName) => tagName !== undefined && allowedTags.has(tagName))).toBe(true);
+
+    expect(preview).toContain(`<main id="wechat-preview-content">${html}</main>`);
+    expect(preview).not.toContain("editor-export.js");
+    expect(preview).not.toContain("browser-dist");
+  }, 30_000);
+});

package/src/wechat-preview/wechat-renderer.links.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "bun:test";
+import {
+  normalizeReferenceUrl,
+  resolveLinkReference,
+  type WechatLinkReference,
+} from "./wechat-renderer";
+
+describe("normalizeReferenceUrl", () => {
+  test("treats trailing slash and hash as the same target", () => {
+    expect(normalizeReferenceUrl("https://Example.com/path/?q=1#frag")).toBe(
+      normalizeReferenceUrl("https://example.com/path?q=1"),
+    );
+  });
+});
+
+describe("resolveLinkReference", () => {
+  test("dedupes the same URL even when anchor text differs", () => {
+    const references: WechatLinkReference[] = [];
+
+    const first = resolveLinkReference(
+      "https://github.com/hugohe3/ppt-master",
+      "ppt-master",
+      references,
+    );
+    const second = resolveLinkReference(
+      "https://github.com/hugohe3/ppt-master/",
+      "开源仓库",
+      references,
+    );
+    const third = resolveLinkReference(
+      "https://example.com/other",
+      "其它",
+      references,
+    );
+
+    expect(first.index).toBe(1);
+    expect(second.index).toBe(1);
+    expect(second).toBe(first);
+    expect(third.index).toBe(2);
+    expect(references).toHaveLength(2);
+    expect(references[0]?.text).toBe("ppt-master");
+    expect(references[1]?.text).toBe("其它");
+  });
+});

package/src/wechat-preview/wechat-renderer.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test";
+import { getWechatPreviewTheme } from "./themes";
+import {
+  buildWechatThemeCss,
+  createWechatRendererRegistry,
+  type WechatElementRenderer,
+} from "./wechat-renderer";
+
+describe("wechat element renderer registry", () => {
+  test("registers every built-in semantic element family in pipeline order", () => {
+    expect(createWechatRendererRegistry().map((renderer) => renderer.kind)).toEqual([
+      "image",
+      "code-block",
+      "inline-code",
+      "heading",
+      "paragraph",
+      "emphasis",
+      "blockquote",
+      "link",
+      "list",
+      "table",
+      "divider",
+      "hard-break",
+      "article",
+    ]);
+  });
+
+  test("allows a built-in renderer to be replaced without changing the registry", () => {
+    const paragraphOverride: WechatElementRenderer = {
+      kind: "paragraph",
+      selector: "p[data-custom]",
+    };
+    const registry = createWechatRendererRegistry({ paragraph: paragraphOverride });
+
+    expect(registry.find((renderer) => renderer.kind === "paragraph")).toBe(paragraphOverride);
+    expect(registry).toHaveLength(13);
+  });
+
+  test("emits compatibility selectors and account theme tokens", () => {
+    const theme = getWechatPreviewTheme("default");
+    const css = buildWechatThemeCss(theme.editorVars, theme.exportTheme);
+
+    expect(css).toContain(".milkdown .editor");
+    expect(css).toContain("--wx-body-line-height: 1.84");
+    expect(css).toContain("--wx-h2-color: #1f1b1c");
+    expect(css).toContain("--wx-h3-color: #5c5658");
+    expect(css).toContain("--wx-brand-ink: #a94473");
+    expect(css).toContain('[data-wechat-node="footer"]');
+  });
+});