@zzclub/pipeline 0.2.0 → 0.4.0

package/src/wechat-preview/browser/editor-export.css

@@ -0,0 +1,241 @@
+@font-face {
+  font-family: "SweiCurveLeg";
+  src: url("../assets/fonts/SweiCurveLegCJKsc-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  color-scheme: light;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background: hsl(var(--background));
+}
+
+body {
+  color: hsl(var(--foreground));
+  font-family: "SweiCurveLeg", ui-sans-serif, system-ui, sans-serif;
+}
+
+.preview-root {
+  min-height: 100vh;
+  padding: 40px 0;
+  background: hsl(var(--background));
+}
+
+.milkdown-container {
+  min-height: 100%;
+  width: 100%;
+  --crepe-color-background: hsl(var(--background));
+  --crepe-color-surface: hsl(var(--card));
+  --crepe-color-surface-low: hsl(var(--muted));
+  --crepe-color-on-background: hsl(var(--foreground));
+  --crepe-color-on-surface: hsl(var(--card-foreground));
+  --crepe-color-outline: hsl(var(--border));
+  --crepe-color-primary: hsl(var(--primary));
+  --crepe-color-on-primary: hsl(var(--primary-foreground));
+}
+
+.milkdown .editor {
+  min-height: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 32px 10vh;
+  font-family: "SweiCurveLeg", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 16px;
+  line-height: 1.75;
+  letter-spacing: 0.01em;
+  background: transparent;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+.milkdown .editor,
+.milkdown .editor * {
+  box-sizing: border-box;
+}
+
+.milkdown h1 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+.milkdown .editor h2 {
+  font-size: 18px;
+  font-weight: 700;
+  color: hsl(var(--primary));
+  line-height: 1.3;
+  margin-top: 1.75rem;
+  margin-bottom: 0.75rem;
+  letter-spacing: -0.01em;
+}
+
+.milkdown .editor h3 {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.milkdown h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.5;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.milkdown h5,
+.milkdown h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.milkdown .editor p {
+  line-height: 1.9;
+  margin: 1.25rem 0;
+  color: hsl(var(--foreground));
+}
+
+.milkdown .editor p:first-child {
+  margin-top: 0;
+}
+
+.milkdown .editor p:last-child {
+  margin-bottom: 0;
+}
+
+.milkdown .editor strong,
+.milkdown .editor b,
+.milkdown .editor em,
+.milkdown .editor i,
+.milkdown .editor a,
+.milkdown .editor del,
+.milkdown .editor span {
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+.milkdown .editor blockquote {
+  margin: 1.35rem 0;
+  padding-left: 1rem;
+  border-left: 4px solid hsl(var(--border));
+  background: color-mix(in srgb, hsl(var(--primary)) 5%, white);
+}
+
+.milkdown .editor blockquote p {
+  font-size: 15px;
+  line-height: 1.85;
+  color: hsl(var(--muted-foreground));
+  margin: 0.45rem 0;
+}
+
+.milkdown .editor ul,
+.milkdown .editor ol {
+  margin: 1rem 0;
+  padding-left: 1.4rem;
+}
+
+.milkdown .editor li {
+  margin: 0.45rem 0;
+  line-height: 1.85;
+}
+
+.milkdown .editor li > p {
+  margin: 0.2rem 0;
+}
+
+.milkdown .editor code {
+  font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;
+  font-size: 0.875em;
+  background: hsl(var(--primary) / 0.12);
+  color: var(--crepe-color-primary);
+  padding: 1px 2px;
+  border-radius: 4px;
+}
+
+.milkdown pre {
+  background: hsl(var(--muted));
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  line-height: 1.6;
+}
+
+.milkdown pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.9em;
+}
+
+.milkdown .editor a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-underline-offset: 3px;
+}
+
+.milkdown hr {
+  display: block;
+  height: 0;
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.8rem 0;
+  padding: 0;
+  background: transparent;
+  opacity: 0.72;
+}
+
+.milkdown .editor table {
+  width: 100%;
+  margin: 1.4rem 0;
+  border-collapse: collapse;
+  font-size: 15px;
+  line-height: 1.75;
+}
+
+.milkdown .editor th,
+.milkdown .editor td {
+  padding: 10px 12px;
+  border: 1px solid hsl(var(--border));
+  text-align: left;
+  vertical-align: top;
+}
+
+.milkdown .editor th {
+  color: hsl(var(--primary));
+  background: color-mix(in srgb, hsl(var(--primary)) 6%, white);
+  font-weight: 700;
+}
+
+.milkdown .editor img {
+  display: block;
+  max-width: 100%;
+  margin: 14px auto;
+}
+
+@media (max-width: 768px) {
+  .preview-root {
+    padding: 20px 0;
+  }
+
+  .milkdown .editor {
+    padding: 0 20px 8vh;
+    font-size: 15px;
+  }
+}

package/src/wechat-preview/browser/editor-export.ts

@@ -0,0 +1,103 @@
+import { Crepe } from "@milkdown/crepe";
+import { listener } from "@milkdown/plugin-listener";
+import "@milkdown/crepe/theme/common/style.css";
+import "@milkdown/crepe/theme/frame.css";
+import "../browser/editor-export.css";
+import { getWeChatMinimalHTML, type WechatExportTheme } from "../wechat-formatter";
+
+interface BrowserPayload {
+  markdown: string;
+  editorVars: Record<string, string>;
+  exportTheme: WechatExportTheme;
+}
+
+declare global {
+  interface Window {
+    __ZZHUB_WECHAT_PAYLOAD__?: BrowserPayload;
+  }
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function setResult(result: { status: "success"; html: string } | { status: "error"; error: string }): void {
+  const el = document.getElementById("zzhub-wechat-export-result");
+  if (!el) {
+    return;
+  }
+  el.textContent = JSON.stringify(result);
+}
+
+function doubleRaf(timeoutMs = 1500): Promise<void> {
+  return new Promise((resolve) => {
+    let done = false;
+    const timer = setTimeout(() => {
+      if (done) {
+        return;
+      }
+      done = true;
+      resolve();
+    }, timeoutMs);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (done) {
+          return;
+        }
+        done = true;
+        clearTimeout(timer);
+        resolve();
+      });
+    });
+  });
+}
+
+function applyEditorVars(vars: Record<string, string>): void {
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(vars)) {
+    root.style.setProperty(key, value);
+  }
+}
+
+async function main(): Promise<void> {
+  const payload = window.__ZZHUB_WECHAT_PAYLOAD__;
+  if (!payload) {
+    throw new Error("Missing __ZZHUB_WECHAT_PAYLOAD__");
+  }
+
+  applyEditorVars(payload.editorVars);
+
+  const host = document.getElementById("editor-host");
+  if (!host) {
+    throw new Error("Missing editor host");
+  }
+
+  const crepe = new Crepe({
+    root: host,
+    defaultValue: payload.markdown,
+    features: {},
+  });
+
+  crepe.setReadonly(true);
+  await crepe.editor.use(listener).create();
+  crepe.setReadonly(true);
+
+  await sleep(80);
+  await doubleRaf();
+  await sleep(160);
+  await doubleRaf();
+
+  const editorDom = host.querySelector(".milkdown .editor") as HTMLElement | null;
+  if (!editorDom) {
+    throw new Error("Milkdown editor DOM not found");
+  }
+
+  const html = getWeChatMinimalHTML(editorDom, payload.exportTheme);
+  setResult({ status: "success", html });
+}
+
+void main().catch((error: unknown) => {
+  const detail = error instanceof Error ? error.message : String(error);
+  setResult({ status: "error", error: detail });
+});

package/src/wechat-preview/frontmatter-handler.ts

@@ -0,0 +1,73 @@
+export interface FrontmatterData {
+  frontmatter: string;
+  content: string;
+}
+
+export interface FrontmatterFields {
+  title?: string;
+  date?: string;
+  lastmod?: string;
+  tags?: string[];
+  [key: string]: unknown;
+}
+
+export function extractFrontmatter(markdown: string): FrontmatterData {
+  const frontmatterRegex = /^(?:\uFEFF)?(?:---|[*]{3})\r?\n([\s\S]*?)\r?\n(?:---|[*]{3})\r?\n/;
+  const match = markdown.match(frontmatterRegex);
+
+  if (match) {
+    return {
+      frontmatter: match[1] as string,
+      content: markdown.slice(match[0].length),
+    };
+  }
+
+  return {
+    frontmatter: "",
+    content: markdown,
+  };
+}
+
+export function parseYAML(yamlString: string): FrontmatterFields {
+  const result: FrontmatterFields = {};
+
+  if (!yamlString.trim()) {
+    return result;
+  }
+
+  const lines = yamlString.split("\n");
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) {
+      continue;
+    }
+
+    const match = trimmed.match(/^([^:]+):\s*(.*)$/);
+    if (!match) {
+      continue;
+    }
+
+    const key = (match[1] ?? "").trim();
+    let value = (match[2] ?? "").trim();
+
+    if (
+      (value.startsWith("\"") && value.endsWith("\"")) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+
+    if (value.startsWith("[") && value.endsWith("]")) {
+      result[key] = value
+        .slice(1, -1)
+        .split(",")
+        .map((item) => item.trim().replace(/^["']|["']$/g, ""))
+        .filter(Boolean);
+      continue;
+    }
+
+    result[key] = value;
+  }
+
+  return result;
+}

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

@@ -0,0 +1,154 @@
+import { describe, expect, test } from "bun:test";
+import { join } from "path";
+import {
+  escapeInlineJson,
+  isExternalUrl,
+  resolveMarkdownAsset,
+  rewriteRelativeImagePaths,
+  extractRenderResult,
+} from "./index";
+
+describe("escapeInlineJson", () => {
+  test("escapes < and > for safe JSON embedding", () => {
+    expect(escapeInlineJson("<script>")).toBe("\\u003Cscript\\u003E");
+  });
+
+  test("escapes & for safe JSON embedding", () => {
+    expect(escapeInlineJson("a&b")).toBe("a\\u0026b");
+  });
+
+  test("handles empty string", () => {
+    expect(escapeInlineJson("")).toBe("");
+  });
+
+  test("escapes multiple special characters", () => {
+    expect(escapeInlineJson("<div>a&b</div>")).toBe("\\u003Cdiv\\u003Ea\\u0026b\\u003C/div\\u003E");
+  });
+});
+
+describe("isExternalUrl", () => {
+  test("recognizes http URLs", () => {
+    expect(isExternalUrl("http://example.com/img.png")).toBe(true);
+  });
+
+  test("recognizes https URLs", () => {
+    expect(isExternalUrl("https://example.com/img.png")).toBe(true);
+  });
+
+  test("recognizes data URIs", () => {
+    expect(isExternalUrl("data:image/png;base64,abc")).toBe(true);
+  });
+
+  test("recognizes blob URIs", () => {
+    expect(isExternalUrl("blob:http://example.com/123")).toBe(true);
+  });
+
+  test("recognizes file URIs", () => {
+    expect(isExternalUrl("file:///tmp/img.png")).toBe(true);
+  });
+
+  test("recognizes protocol-relative URLs", () => {
+    expect(isExternalUrl("//cdn.example.com/img.png")).toBe(true);
+  });
+
+  test("rejects relative paths", () => {
+    expect(isExternalUrl("./img.png")).toBe(false);
+    expect(isExternalUrl("../img.png")).toBe(false);
+    expect(isExternalUrl("img.png")).toBe(false);
+  });
+
+  test("rejects absolute filesystem paths", () => {
+    expect(isExternalUrl("/tmp/img.png")).toBe(false);
+  });
+});
+
+describe("resolveMarkdownAsset", () => {
+  test("passes through external URLs", () => {
+    expect(resolveMarkdownAsset("https://example.com/img.png", "/base")).toBe("https://example.com/img.png");
+  });
+
+  test("passes through absolute paths", () => {
+    expect(resolveMarkdownAsset("/tmp/img.png", "/base")).toBe("/tmp/img.png");
+  });
+
+  test("resolves relative paths against baseDir", () => {
+    const result = resolveMarkdownAsset("./img.png", "/workspace/posts");
+    expect(result).toBe(join("/workspace/posts", "img.png"));
+  });
+
+  test("resolves bare filename against baseDir", () => {
+    const result = resolveMarkdownAsset("cover.jpg", "/workspace/assets");
+    expect(result).toBe(join("/workspace/assets", "cover.jpg"));
+  });
+
+  test("handles empty path", () => {
+    expect(resolveMarkdownAsset("", "/base")).toBe("");
+  });
+
+  test("trims whitespace", () => {
+    expect(resolveMarkdownAsset("  https://example.com/img.png  ", "/base")).toBe("https://example.com/img.png");
+  });
+});
+
+describe("rewriteRelativeImagePaths", () => {
+  test("rewrites relative markdown image paths to absolute", () => {
+    const input = "![alt](./img.png)";
+    const result = rewriteRelativeImagePaths(input, "/workspace");
+    expect(result).toContain(join("/workspace", "img.png"));
+  });
+
+  test("leaves external URLs unchanged", () => {
+    const input = "![alt](https://example.com/img.png)";
+    expect(rewriteRelativeImagePaths(input, "/workspace")).toBe(input);
+  });
+
+  test("rewrites <img> src attributes", () => {
+    const input = '<img src="./cover.jpg" alt="test">';
+    const result = rewriteRelativeImagePaths(input, "/workspace");
+    expect(result).toContain(join("/workspace", "cover.jpg"));
+  });
+
+  test("handles angle-bracket image paths", () => {
+    const input = "![alt](<./path with spaces/img.png>)";
+    const result = rewriteRelativeImagePaths(input, "/workspace");
+    expect(result).toContain(join("/workspace", "path with spaces/img.png"));
+  });
+
+  test("handles multiple images in one document", () => {
+    const input = "![a](./1.png)\n![b](./2.png)";
+    const result = rewriteRelativeImagePaths(input, "/base");
+    expect(result).toContain(join("/base", "1.png"));
+    expect(result).toContain(join("/base", "2.png"));
+  });
+});
+
+describe("extractRenderResult", () => {
+  test("extracts success result from script tag", () => {
+    const dom = '<html><script id="zzhub-wechat-export-result" type="application/json">{"status":"success","html":"<p>test</p>"}</script></html>';
+    const result = extractRenderResult(dom);
+    expect(result.status).toBe("success");
+    if ("html" in result) {
+      expect(result.html).toBe("<p>test</p>");
+    }
+  });
+
+  test("extracts error result", () => {
+    const dom = '<script id="zzhub-wechat-export-result" type="application/json">{"status":"error","error":"something went wrong"}</script>';
+    const result = extractRenderResult(dom);
+    expect(result.status).toBe("error");
+    if ("error" in result) {
+      expect(result.error).toBe("something went wrong");
+    }
+  });
+
+  test("throws when result script is missing", () => {
+    expect(() => extractRenderResult("<html><div>no script</div></html>")).toThrow(
+      "Wechat preview result script not found",
+    );
+  });
+
+  test("throws when script content is empty", () => {
+    const dom = '<script id="zzhub-wechat-export-result" type="application/json"></script>';
+    expect(() => extractRenderResult(dom)).toThrow();
+  });
+});