@zzclub/pipeline 0.4.0 → 0.9.0

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

@@ -1,241 +1,330 @@
-@font-face {
-  font-family: "SweiCurveLeg";
-  src: url("../assets/fonts/SweiCurveLegCJKsc-Regular.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
+/*
+ * WeChat Article Typography — 温暖人文
+ * Brand: #ca6093 (玫瑰暖调)
+ *
+ * Design tokens (:root custom properties) anchor the numeric scale.
+ * All values derive from:
+ *   --font-base  = 16px   (body)
+ *   --leading    = 2.0    (body line-height ratio)
+ *   --brand      = #ca6093
+ *   --text       = #2c2c2c (warm black)
+ *
+ * When converting to WeChat inline styles, resolve each var() to its
+ * computed value. The token layer makes future rebranding a one-line edit.
+ */
 
 :root {
-  color-scheme: light;
-}
+  /* ── Core tokens ── */
+  --font-base:    16px;
+  --font-sans:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+                  -apple-system, "SF Pro Text", "Noto Sans SC", sans-serif;
+  --font-mono:    "JetBrains Mono", "Fira Code", "SF Mono", "Consolas",
+                  "Monaco", "Courier New", monospace;
+  --font-serif:   "Noto Serif SC", "Source Han Serif SC", "Songti SC",
+                  "STSong", "Georgia", serif;
 
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-  background: hsl(var(--background));
-}
+  --leading:      2.0;
 
-body {
-  color: hsl(var(--foreground));
-  font-family: "SweiCurveLeg", ui-sans-serif, system-ui, sans-serif;
-}
+  --brand:        #ca6093;
+  --brand-soft:   #d4789e;          /* hover / secondary accent */
+  --brand-bg:     rgba(202, 96, 147, 0.08);
+  --brand-bg-deep: rgba(202, 96, 147, 0.14);
 
-.preview-root {
-  min-height: 100vh;
-  padding: 40px 0;
-  background: hsl(var(--background));
-}
+  --text:         #2c2c2c;          /* warm black, never pure #000 */
+  --text-soft:    #8c8c8c;          /* captions, meta */
+  --text-mid:     #5c5c5c;          /* blockquote, secondary text */
 
-.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));
+  --border:       #e8e4e5;          /* warm gray */
+  --divider:      #d8d0d3;          /* slightly warmer than border */
+  --bg-page:      #fefefe;
+  --bg-warm:      #faf8f9;          /* subtle warm tint for blockquote */
+
+  --radius-sm:    3px;
+  --radius-md:    6px;
 }
 
+/* ══════════════════════════════════════════════════════════════════════
+   Container
+   ══════════════════════════════════════════════════════════════════════ */
+
 .milkdown .editor {
-  min-height: 100%;
-  max-width: 900px;
+  max-width: 680px;
   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;
+  padding: 48px 24px 80px;
+  font-family: var(--font-sans);
+  font-size: var(--font-base);
+  line-height: var(--leading);
+  color: var(--text);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.milkdown .editor,
-.milkdown .editor * {
-  box-sizing: border-box;
+/* ══════════════════════════════════════════════════════════════════════
+   Paragraph
+   ══════════════════════════════════════════════════════════════════════ */
+
+.milkdown .editor p {
+  margin: 0 0 1.4em 0;
+  line-height: var(--leading);
+  text-align: justify;
+  hyphens: auto;
+  word-break: break-all;
+  overflow-wrap: break-word;
 }
 
-.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 p:first-child {
+  margin-top: 0;
 }
 
-.milkdown .editor h2 {
-  font-size: 18px;
+.milkdown .editor p:last-child {
+  margin-bottom: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Headings
+   ══════════════════════════════════════════════════════════════════════ */
+
+.milkdown .editor h1 {
+  font-size: 1.625rem;          /* 26px */
   font-weight: 700;
-  color: hsl(var(--primary));
   line-height: 1.3;
-  margin-top: 1.75rem;
-  margin-bottom: 0.75rem;
+  margin: 3em 0 1em 0;
+  color: var(--text);
   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;
-}
+/* ── h2: brand color, clean style ── */
 
-.milkdown h4 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.5;
-  margin-top: 1.25rem;
-  margin-bottom: 0.5rem;
+.milkdown .editor h2 {
+  font-size: 1.25rem;           /* 20px */
+  font-weight: 700;
+  line-height: 1.35;
+  margin: 2.4em 0 0.9em 0;
+  color: var(--brand);
+  letter-spacing: 0.02em;
 }
 
-.milkdown h5,
-.milkdown h6 {
-  font-size: 1rem;
+/* ── h3: warm black, semi-bold, underlined by a thin rule ── */
+
+.milkdown .editor h3 {
+  font-size: 1.125rem;          /* 18px */
   font-weight: 600;
-  line-height: 1.5;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  line-height: 1.45;
+  margin: 2em 0 0.65em 0;
+  padding-bottom: 0.5em;
+  color: var(--text);
+  letter-spacing: 0.015em;
+  border-bottom: 1px solid var(--border);
 }
 
-.milkdown .editor p {
-  line-height: 1.9;
-  margin: 1.25rem 0;
-  color: hsl(var(--foreground));
-}
+/* ══════════════════════════════════════════════════════════════════════
+   Bold — brand-colored emphasis
+   ══════════════════════════════════════════════════════════════════════ */
 
-.milkdown .editor p:first-child {
-  margin-top: 0;
+.milkdown .editor strong,
+.milkdown .editor b {
+  font-weight: 700;
+  color: var(--text);
 }
 
-.milkdown .editor p:last-child {
-  margin-bottom: 0;
-}
+/* ══════════════════════════════════════════════════════════════════════
+   Links
+   ══════════════════════════════════════════════════════════════════════ */
 
-.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 a {
+  color: var(--brand);
+  text-decoration: none;
+  border-bottom: 1px solid var(--brand-soft);
+  transition: border-color 0.15s;
 }
 
-.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 a:hover {
+  border-bottom-color: var(--brand);
 }
 
-.milkdown .editor blockquote p {
-  font-size: 15px;
-  line-height: 1.85;
-  color: hsl(var(--muted-foreground));
-  margin: 0.45rem 0;
-}
+/* ══════════════════════════════════════════════════════════════════════
+   Inline code
+   ══════════════════════════════════════════════════════════════════════ */
 
-.milkdown .editor ul,
-.milkdown .editor ol {
-  margin: 1rem 0;
-  padding-left: 1.4rem;
+.milkdown .editor code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  color: var(--brand);
+  background: var(--brand-bg);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  word-break: break-all;
+}
+
+.milkdown .editor pre {
+  background: #f5f2f3;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1.2em 1.3em;
+  margin: 1.5em 0;
+  overflow-x: auto;
+  line-height: 1.65;
 }
 
-.milkdown .editor li {
-  margin: 0.45rem 0;
-  line-height: 1.85;
+.milkdown .editor pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  color: var(--text);
 }
 
-.milkdown .editor li > p {
-  margin: 0.2rem 0;
+/* ══════════════════════════════════════════════════════════════════════
+   Image caption
+   ══════════════════════════════════════════════════════════════════════ */
+
+.milkdown .editor figure {
+  margin: 1.6em auto;
+  text-align: center;
 }
 
-.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 .editor figure img {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
+  border-radius: var(--radius-sm);
 }
 
-.milkdown pre {
-  background: hsl(var(--muted));
-  border-radius: 8px;
-  padding: 1rem;
-  margin: 1.5rem 0;
-  overflow-x: auto;
+.milkdown .editor figure figcaption,
+.milkdown .editor .img-caption {
+  display: block;
+  margin-top: 10px;
+  font-size: 0.875rem;          /* 14px */
   line-height: 1.6;
+  color: var(--text-soft);
+  text-align: center;
 }
 
-.milkdown pre code {
-  background: none;
-  padding: 0;
-  font-size: 0.9em;
+/* For standalone images (not wrapped in figure) */
+.milkdown .editor p:has(img) + p.img-caption,
+.milkdown .editor img + .img-caption {
+  display: block;
+  margin-top: 8px;
+  font-size: 0.875rem;
+  color: var(--text-soft);
+  text-align: center;
 }
 
-.milkdown .editor a {
-  color: hsl(var(--primary));
-  text-decoration: underline;
-  text-decoration-style: wavy;
-  text-underline-offset: 3px;
+/* Standalone image between paragraphs */
+.milkdown .editor p img {
+  display: block;
+  max-width: 100%;
+  margin: 0 auto;
 }
 
-.milkdown hr {
+/* ══════════════════════════════════════════════════════════════════════
+   Divider
+   ══════════════════════════════════════════════════════════════════════ */
+
+.milkdown .editor hr {
   display: block;
   height: 0;
   border: none;
-  border-top: 1px solid hsl(var(--border));
-  margin: 1.8rem 0;
+  margin: 2.2em 0;
+  text-align: center;
+  /* thin warm line */
+  border-top: 1px solid var(--divider);
   padding: 0;
   background: transparent;
-  opacity: 0.72;
 }
 
+/*
+ * Decorative centered-dot divider variant.
+ * Override by adding class="hr-dots" on the <hr>.
+ */
+.milkdown .editor hr.hr-dots {
+  border-top: none;
+  line-height: 1;
+  letter-spacing: 0.6em;
+  color: var(--text-soft);
+  font-size: 0.75rem;
+}
+
+.milkdown .editor hr.hr-dots::after {
+  content: "·  ·  ·";
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Blockquote
+   ══════════════════════════════════════════════════════════════════════ */
+
+.milkdown .editor blockquote {
+  margin: 1.5em 0;
+  padding: 0.8em 1em 0.8em 1.15em;
+  border-left: 3px solid var(--brand-soft);
+  background: var(--bg-warm);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.milkdown .editor blockquote p {
+  font-size: 0.9375rem;         /* 15px */
+  line-height: 1.85;
+  color: var(--text-mid);
+  margin: 0.45em 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Lists
+   ══════════════════════════════════════════════════════════════════════ */
+
+.milkdown .editor ul,
+.milkdown .editor ol {
+  margin: 1.1em 0;
+  padding-left: 1.5em;
+}
+
+.milkdown .editor li {
+  margin: 0.5em 0;
+  line-height: 1.85;
+}
+
+.milkdown .editor li > p {
+  margin: 0.2em 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Tables
+   ══════════════════════════════════════════════════════════════════════ */
+
 .milkdown .editor table {
   width: 100%;
-  margin: 1.4rem 0;
+  margin: 1.4em 0;
   border-collapse: collapse;
-  font-size: 15px;
+  font-size: 0.9375rem;
   line-height: 1.75;
 }
 
 .milkdown .editor th,
 .milkdown .editor td {
-  padding: 10px 12px;
-  border: 1px solid hsl(var(--border));
+  padding: 10px 14px;
+  border: 1px solid 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);
+  color: var(--text);
+  background: var(--brand-bg);
   font-weight: 700;
 }
 
-.milkdown .editor img {
-  display: block;
-  max-width: 100%;
-  margin: 14px auto;
-}
+/* ══════════════════════════════════════════════════════════════════════
+   Responsive
+   ══════════════════════════════════════════════════════════════════════ */
 
 @media (max-width: 768px) {
-  .preview-root {
-    padding: 20px 0;
-  }
-
   .milkdown .editor {
-    padding: 0 20px 8vh;
+    max-width: 100%;
+    padding: 28px 20px 64px;
     font-size: 15px;
   }
+
+  .milkdown .editor h1 { font-size: 1.4rem; }
+  .milkdown .editor h2 { font-size: 1.15rem; }
+  .milkdown .editor h3 { font-size: 1.05rem; }
 }

package/src/wechat-preview/index.ts

@@ -38,6 +38,10 @@ export interface ExportMarkdownToWechatHtmlInput {
   title?: string;
   previewShellOutPath?: string;
   customCss?: string | null;
+  themeOverrides?: {
+    editorVars?: Record<string, string>;
+    exportTheme?: Record<string, string>;
+  };
 }
 
 export interface ExportMarkdownToWechatHtmlResult {
@@ -103,12 +107,17 @@ export function resolveMarkdownAsset(rawPath: string, baseDir: string): string {
 
 export function rewriteRelativeImagePaths(markdown: string, baseDir: string): string {
   return markdown
-    .replace(/!\[([^\]]*)\]\((<)?([^)]+?)(>)?\)/g, (_match, alt, open, src) => {
-      const resolved = resolveMarkdownAsset(String(src ?? ""), baseDir);
+    .replace(/!\[([^\]]*)\]\((?:<([^>]+)>|([^)]+?))(?:\s+(["'])([^"']*)\4)?\)/g, (_match, alt, angleUrl, plainUrl, _quote, title) => {
+      const src = angleUrl ?? plainUrl ?? "";
+      const hasAngleBrackets = angleUrl !== undefined;
+      const resolved = resolveMarkdownAsset(src, baseDir);
+      const needsBrackets = resolved ? resolved.includes(" ") : src.includes(" ");
+      const titleStr = title ? ` "${title}"` : "";
       if (!resolved || resolved === src) {
-        return `![${alt}](${open ? "<" : ""}${src}${open ? ">" : ""})`;
+        const wrap = !!(hasAngleBrackets || needsBrackets);
+        return `![${alt}](${wrap ? "<" : ""}${src}${wrap ? ">" : ""}${titleStr})`;
       }
-      return `![${alt}](<${resolved}>)`;
+      return `![${alt}](${needsBrackets ? "<" : ""}${resolved}${needsBrackets ? ">" : ""}${titleStr})`;
     })
     .replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'][^>]*>)/gi, (_match, prefix, src, suffix) => {
       const resolved = resolveMarkdownAsset(String(src ?? ""), baseDir);
@@ -118,18 +127,26 @@ export function rewriteRelativeImagePaths(markdown: string, baseDir: string): st
 
 function rewriteRelativeImagePathsForPreview(markdown: string, baseDir: string, previewDir: string): string {
   return markdown
-    .replace(/!\[([^\]]*)\]\((<)?([^)]+?)(>)?\)/g, (_match, alt, open, src) => {
-      const raw = String(src ?? "").trim();
+    .replace(/!\[([^\]]*)\]\((?:<([^>]+)>|([^)]+?))(?:\s+(["'])([^"']*)\4)?\)/g, (_match, alt, angleUrl, plainUrl, _quote, title) => {
+      const src = angleUrl ?? plainUrl ?? "";
+      const hasAngleBrackets = angleUrl !== undefined;
+      const raw = src.trim();
       if (!raw || isExternalUrl(raw)) {
-        return `![${alt}](${open ? "<" : ""}${src}${open ? ">" : ""})`;
+        const wrap = !!(hasAngleBrackets || raw.includes(" "));
+        const titleStr = title ? ` "${title}"` : "";
+        return `![${alt}](${wrap ? "<" : ""}${src}${wrap ? ">" : ""}${titleStr})`;
       }
       const resolved = resolveMarkdownAsset(raw, baseDir);
       if (!resolved) {
-        return `![${alt}](${open ? "<" : ""}${src}${open ? ">" : ""})`;
+        const wrap = !!(hasAngleBrackets || raw.includes(" "));
+        const titleStr = title ? ` "${title}"` : "";
+        return `![${alt}](${wrap ? "<" : ""}${src}${wrap ? ">" : ""}${titleStr})`;
       }
       const previewRelative = relative(previewDir, resolved).replaceAll("\\", "/");
       const normalized = previewRelative.startsWith(".") ? previewRelative : `./${previewRelative}`;
-      return `![${alt}](${open ? "<" : ""}${normalized}${open ? ">" : ""})`;
+      const wrap = !!(hasAngleBrackets || normalized.includes(" "));
+      const titleStr = title ? ` "${title}"` : "";
+      return `![${alt}](${wrap ? "<" : ""}${normalized}${wrap ? ">" : ""}${titleStr})`;
     })
     .replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'][^>]*>)/gi, (_match, prefix, src, suffix) => {
       const raw = String(src ?? "").trim();
@@ -226,9 +243,9 @@ export async function exportMarkdownToWechatHtml(
   const bundle = ensureBundle();
   const sourceMarkdown = await readFile(input.markdownPath, "utf-8");
   const stripped = extractFrontmatter(sourceMarkdown).content;
-  const bodyMarkdown = stripLeadingH1(stripped);
+  const bodyMarkdown = stripLeadingH1(stripped).trimStart();
   const markdown = rewriteRelativeImagePaths(bodyMarkdown, dirname(input.markdownPath));
-  const theme = getWechatPreviewTheme(input.account);
+  const theme = getWechatPreviewTheme(input.account, input.themeOverrides);
   const shell = readUtf8(TEMPLATE_PATH);
   const payloadJson = escapeInlineJson(
     JSON.stringify({