@zzclub/pipeline 0.2.0 → 0.4.0

package/src/wechat-preview/index.ts

@@ -0,0 +1,294 @@
+import { existsSync } from "fs";
+import { cp, mkdir, readFile, rm, writeFile } from "fs/promises";
+import { dirname, isAbsolute, join, relative, resolve } from "path";
+import { pathToFileURL } from "url";
+import {
+  dumpHtmlDom,
+  ensureParentDir,
+  escapeHtml,
+  findChrome,
+  readUtf8,
+  renderTemplate,
+} from "../imgx/runtime";
+import {
+  PACKAGE_ROOT,
+  TEMPLATE_PATH,
+  DIST_DIR,
+  MANIFEST_PATH,
+  VITE_CONFIG_PATH,
+} from "../runtime-paths";
+import { extractFrontmatter } from "./frontmatter-handler";
+import { getWechatPreviewStyleName, getWechatPreviewTheme } from "./themes";
+import { stripLeadingH1 } from "../text";
+
+interface ViteManifestEntry {
+  file: string;
+  css?: string[];
+}
+
+interface BundleAssets {
+  scriptPath: string;
+  cssPath: string | null;
+}
+
+export interface ExportMarkdownToWechatHtmlInput {
+  markdownPath: string;
+  outPath: string;
+  account: string;
+  title?: string;
+  previewShellOutPath?: string;
+  customCss?: string | null;
+}
+
+export interface ExportMarkdownToWechatHtmlResult {
+  html: string;
+  htmlPath: string;
+  account: string;
+  previewStyle: string;
+  previewShellPath?: string;
+}
+
+function ensureBundle(): BundleAssets {
+  if (!existsSync(MANIFEST_PATH)) {
+    const result = Bun.spawnSync({
+      cmd: ["bun", "x", "vite", "build", "--config", VITE_CONFIG_PATH],
+      cwd: PACKAGE_ROOT,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+    if (result.exitCode !== 0) {
+      const stderr = new TextDecoder().decode(result.stderr);
+      throw new Error(`Failed to build wechat preview bundle:\n${stderr}`);
+    }
+  }
+
+  const manifestRaw = readUtf8(MANIFEST_PATH);
+  const manifest = JSON.parse(manifestRaw) as Record<string, ViteManifestEntry>;
+  const entry =
+    manifest["src/wechat-preview/browser/editor-export.ts"] ??
+    Object.values(manifest)[0];
+
+  if (!entry?.file) {
+    throw new Error("Wechat preview manifest missing editor-export entry");
+  }
+
+  return {
+    scriptPath: join(DIST_DIR, entry.file),
+    cssPath: entry.css?.[0]
+      ? join(DIST_DIR, entry.css[0])
+      : manifest["style.css"]?.file
+        ? join(DIST_DIR, manifest["style.css"].file)
+        : null,
+  };
+}
+
+export function escapeInlineJson(value: string): string {
+  return value
+    .replace(/</g, "\\u003C")
+    .replace(/>/g, "\\u003E")
+    .replace(/&/g, "\\u0026");
+}
+
+export function isExternalUrl(value: string): boolean {
+  return /^(https?:|data:|blob:|file:|\/\/)/i.test(value);
+}
+
+export function resolveMarkdownAsset(rawPath: string, baseDir: string): string {
+  const trimmed = rawPath.trim();
+  if (!trimmed || isExternalUrl(trimmed) || isAbsolute(trimmed)) {
+    return trimmed;
+  }
+  return resolve(baseDir, trimmed);
+}
+
+export function rewriteRelativeImagePaths(markdown: string, baseDir: string): string {
+  return markdown
+    .replace(/!\[([^\]]*)\]\((<)?([^)]+?)(>)?\)/g, (_match, alt, open, src) => {
+      const resolved = resolveMarkdownAsset(String(src ?? ""), baseDir);
+      if (!resolved || resolved === src) {
+        return `![${alt}](${open ? "<" : ""}${src}${open ? ">" : ""})`;
+      }
+      return `![${alt}](<${resolved}>)`;
+    })
+    .replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'][^>]*>)/gi, (_match, prefix, src, suffix) => {
+      const resolved = resolveMarkdownAsset(String(src ?? ""), baseDir);
+      return `${prefix}${resolved}${suffix}`;
+    });
+}
+
+function rewriteRelativeImagePathsForPreview(markdown: string, baseDir: string, previewDir: string): string {
+  return markdown
+    .replace(/!\[([^\]]*)\]\((<)?([^)]+?)(>)?\)/g, (_match, alt, open, src) => {
+      const raw = String(src ?? "").trim();
+      if (!raw || isExternalUrl(raw)) {
+        return `![${alt}](${open ? "<" : ""}${src}${open ? ">" : ""})`;
+      }
+      const resolved = resolveMarkdownAsset(raw, baseDir);
+      if (!resolved) {
+        return `![${alt}](${open ? "<" : ""}${src}${open ? ">" : ""})`;
+      }
+      const previewRelative = relative(previewDir, resolved).replaceAll("\\", "/");
+      const normalized = previewRelative.startsWith(".") ? previewRelative : `./${previewRelative}`;
+      return `![${alt}](${open ? "<" : ""}${normalized}${open ? ">" : ""})`;
+    })
+    .replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'][^>]*>)/gi, (_match, prefix, src, suffix) => {
+      const raw = String(src ?? "").trim();
+      if (!raw || isExternalUrl(raw)) {
+        return `${prefix}${src}${suffix}`;
+      }
+      const resolved = resolveMarkdownAsset(raw, baseDir);
+      const previewRelative = relative(previewDir, resolved).replaceAll("\\", "/");
+      const normalized = previewRelative.startsWith(".") ? previewRelative : `./${previewRelative}`;
+      return `${prefix}${normalized}${suffix}`;
+    });
+}
+
+async function ensurePreviewBundleDir(targetDir: string): Promise<void> {
+  await mkdir(dirname(targetDir), { recursive: true });
+  await rm(targetDir, { recursive: true, force: true });
+  await cp(DIST_DIR, targetDir, { recursive: true, force: true });
+}
+
+async function writePreviewShell(options: {
+  previewShellOutPath: string;
+  pageTitle: string;
+  sourceMarkdown: string;
+  sourceMarkdownDir: string;
+  theme: ReturnType<typeof getWechatPreviewTheme>;
+  bundle: BundleAssets;
+}): Promise<string> {
+  const previewDir = dirname(options.previewShellOutPath);
+  await mkdir(previewDir, { recursive: true });
+  const previewBundleDir = join(previewDir, "browser-dist");
+  await ensurePreviewBundleDir(previewBundleDir);
+
+  const previewMarkdown = rewriteRelativeImagePathsForPreview(
+    options.sourceMarkdown,
+    options.sourceMarkdownDir,
+    previewDir,
+  );
+  const shell = readUtf8(TEMPLATE_PATH);
+  const payloadJson = escapeInlineJson(
+    JSON.stringify({
+      markdown: previewMarkdown,
+      editorVars: options.theme.editorVars,
+      exportTheme: options.theme.exportTheme,
+    }),
+  );
+  const relativeScriptPath = relative(previewDir, join(previewBundleDir, "editor-export.js")).replaceAll("\\", "/");
+  const relativeCssPath = options.bundle.cssPath
+    ? relative(previewDir, join(previewBundleDir, relative(DIST_DIR, options.bundle.cssPath))).replaceAll("\\", "/")
+    : null;
+
+  const shellHtml = renderTemplate(shell, {
+    "{{PAGE_TITLE}}": escapeHtml(options.pageTitle),
+    "{{CSS_LINK}}": relativeCssPath ? `<link rel="stylesheet" href="${relativeCssPath.startsWith(".") ? relativeCssPath : `./${relativeCssPath}`}">` : "",
+    "{{PAYLOAD_JSON}}": payloadJson,
+    "{{SCRIPT_URL}}": relativeScriptPath.startsWith(".") ? relativeScriptPath : `./${relativeScriptPath}`,
+  });
+
+  await writeFile(options.previewShellOutPath, shellHtml, "utf-8");
+  return options.previewShellOutPath;
+}
+
+export function extractRenderResult(
+  dom: string,
+): { status: "success"; html: string } | { status: "error"; error: string } | { status: string } {
+  const match = dom.match(
+    /<script id="zzhub-wechat-export-result" type="application\/json">([\s\S]*?)<\/script>/,
+  );
+
+  if (!match?.[1]) {
+    throw new Error("Wechat preview result script not found");
+  }
+
+  return JSON.parse(match[1]) as
+    | { status: "success"; html: string }
+    | { status: "error"; error: string }
+    | { status: string };
+}
+
+export async function exportMarkdownToWechatHtml(
+  input: ExportMarkdownToWechatHtmlInput,
+): Promise<ExportMarkdownToWechatHtmlResult> {
+  const chromePath = findChrome();
+  if (chromePath === null) {
+    throw new Error(
+      "Chrome/Chromium not found. Required for WeChat HTML export.\n" +
+      "Install one of:\n" +
+      "  macOS:   brew install --cask chromium\n" +
+      "  Ubuntu:  sudo apt install chromium-browser\n" +
+      "  Or install Google Chrome from https://www.google.com/chrome/\n" +
+      "  Or set CHROME_PATH environment variable to the binary path.",
+    );
+  }
+
+  const bundle = ensureBundle();
+  const sourceMarkdown = await readFile(input.markdownPath, "utf-8");
+  const stripped = extractFrontmatter(sourceMarkdown).content;
+  const bodyMarkdown = stripLeadingH1(stripped);
+  const markdown = rewriteRelativeImagePaths(bodyMarkdown, dirname(input.markdownPath));
+  const theme = getWechatPreviewTheme(input.account);
+  const shell = readUtf8(TEMPLATE_PATH);
+  const payloadJson = escapeInlineJson(
+    JSON.stringify({
+      markdown,
+      editorVars: theme.editorVars,
+      exportTheme: theme.exportTheme,
+    }),
+  );
+
+  let customCssTag = "";
+  if (input.customCss) {
+    const cssContent = await readFile(input.customCss, "utf-8");
+    customCssTag = `<style>${cssContent}</style>`;
+  }
+
+  const shellHtml = renderTemplate(shell, {
+    "{{PAGE_TITLE}}": escapeHtml(input.title ?? "Wechat Preview Export"),
+    "{{CSS_LINK}}": [
+      bundle.cssPath
+        ? `<link rel="stylesheet" href="${pathToFileURL(bundle.cssPath).href}">`
+        : "",
+      customCssTag,
+    ].filter(Boolean).join("\n    "),
+    "{{PAYLOAD_JSON}}": payloadJson,
+    "{{SCRIPT_URL}}": pathToFileURL(bundle.scriptPath).href,
+  });
+
+  const dom = dumpHtmlDom({
+    chromePath,
+    html: shellHtml,
+    virtualTimeBudgetMs: 15000,
+  });
+  const result = extractRenderResult(dom);
+  if (result.status === "error" && "error" in result) {
+    throw new Error(`Wechat preview export failed: ${result.error}`);
+  }
+  if (result.status !== "success" || !("html" in result)) {
+    throw new Error(`Wechat preview export did not finish before timeout (status=${result.status})`);
+  }
+
+  ensureParentDir(input.outPath);
+  await writeFile(input.outPath, result.html, "utf-8");
+
+  let previewShellPath: string | undefined;
+  if (input.previewShellOutPath) {
+    previewShellPath = await writePreviewShell({
+      previewShellOutPath: input.previewShellOutPath,
+      pageTitle: input.title ?? "Wechat Preview Export",
+      sourceMarkdown: bodyMarkdown,
+      sourceMarkdownDir: dirname(input.markdownPath),
+      theme,
+      bundle,
+    });
+  }
+
+  return {
+    html: result.html,
+    htmlPath: input.outPath,
+    account: input.account,
+    previewStyle: getWechatPreviewStyleName(input.account),
+    previewShellPath,
+  };
+}

package/src/wechat-preview/themes.ts

@@ -0,0 +1,141 @@
+export interface WechatExportTheme {
+  containerStyle: string;
+  footerText: string;
+  footerStyle: string;
+  fontFamily: string;
+  bodyColor: string;
+  mutedColor: string;
+  primaryColor: string;
+  dividerColor: string;
+  blockquoteBorderColor: string;
+  bodyLineHeight: string;
+  bodyLetterSpacing: string;
+}
+
+export interface WechatPreviewTheme {
+  name: string;
+  account: string;
+  editorVars: Record<string, string>;
+  exportTheme: WechatExportTheme;
+}
+
+const BASE_EDITOR_VARS: Record<string, string> = {
+  "--background": "0 0% 100%",
+  "--foreground": "240 10% 3.9%",
+  "--card": "0 0% 100%",
+  "--card-foreground": "240 10% 3.9%",
+  "--muted": "240 4.8% 95.9%",
+  "--muted-foreground": "240 3.8% 46.1%",
+  "--primary-foreground": "0 0% 100%",
+  "--border": "240 5.9% 90%",
+};
+
+function buildContainerStyle(options: {
+  background: string;
+  color: string;
+  fontFamily: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+}): string {
+  return [
+    "padding: 14px 11px",
+    `background: ${options.background}`,
+    "background-size: 20px 20px",
+    "background-position: center center",
+    `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"}`,
+  ].join("; ");
+}
+
+function buildFooterStyle(color: string): string {
+  return [
+    "margin-top: 32px",
+    "text-align: center",
+    "font-size: 12px",
+    `color: ${color}`,
+  ].join("; ");
+}
+
+const THEMES: Record<string, WechatPreviewTheme> = {
+  default: {
+    name: "sage-journal",
+    account: "default",
+    editorVars: {
+      ...BASE_EDITOR_VARS,
+      "--primary": "220 9% 10%",
+      "--ring": "220 9% 10%",
+      "--accent": "210 14% 96%",
+      "--accent-foreground": "220 9% 10%",
+      "--muted": "210 14% 96%",
+      "--muted-foreground": "215 8% 42%",
+      "--border": "220 10% 86%",
+    },
+    exportTheme: {
+      containerStyle: buildContainerStyle({
+        background: "#ffffff",
+        color: "#202124",
+        fontFamily:
+          "'SweiCurveLeg', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        lineHeight: "1.92",
+        letterSpacing: "0.03em",
+      }),
+      footerText: "公众号 · 早早集市",
+      footerStyle: buildFooterStyle("#8a8f98"),
+      fontFamily:
+        "'SweiCurveLeg', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+      bodyColor: "#202124",
+      mutedColor: "#5f6368",
+      primaryColor: "#111111",
+      dividerColor: "#dadce0",
+      blockquoteBorderColor: "#3c4043",
+      bodyLineHeight: "1.92",
+      bodyLetterSpacing: "0.03em",
+    },
+  },
+  ancientone: {
+    name: "rose-ledger",
+    account: "ancientone",
+    editorVars: {
+      ...BASE_EDITOR_VARS,
+      "--primary": "330 50% 58%",
+      "--ring": "330 50% 58%",
+      "--accent": "330 35% 96%",
+      "--accent-foreground": "334 28% 22%",
+      "--muted": "336 38% 97%",
+      "--border": "334 26% 88%",
+    },
+    exportTheme: {
+      containerStyle: buildContainerStyle({
+        background: "#fffafb",
+        color: "#4a3a44",
+        fontFamily:
+          "'SweiCurveLeg', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        lineHeight: "1.94",
+        letterSpacing: "0.035em",
+      }),
+      footerText: "公众号 · 古一软件",
+      footerStyle: buildFooterStyle("#b08a9d"),
+      fontFamily:
+        "'SweiCurveLeg', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+      bodyColor: "#4a3a44",
+      mutedColor: "#7a6271",
+      primaryColor: "#b35d85",
+      dividerColor: "#ead5df",
+      blockquoteBorderColor: "#d6a8bc",
+      bodyLineHeight: "1.94",
+      bodyLetterSpacing: "0.035em",
+    },
+  },
+};
+
+export function getWechatPreviewTheme(account: string): WechatPreviewTheme {
+  return THEMES[account] ?? THEMES.default;
+}
+
+export function getWechatPreviewStyleName(account: string): string {
+  return getWechatPreviewTheme(account).name;
+}