@liustack/mdpress 0.2.0 → 0.2.1

package/README.md

@@ -1,20 +1,24 @@
 # mdpress
 
-A CLI toolkit for AI agents to convert Markdown into WeChat MP-ready HTML with inline styles, base64 images, and tag sanitization.
+A CLI toolkit for AI agents to convert Markdown into editor-ready HTML:
+
+- **WeChat MP mode**: inline styles, base64 images, syntax highlighting, tag sanitization
+- **X Articles mode**: semantic HTML subset, image placeholders, link-preserving plain content
 
 中文说明请见：[README.zh-CN.md](README.zh-CN.md)
 
 ## Features
 
 - WeChat MP editor compatible HTML output
+- X/Twitter Articles editor compatible HTML output
 - All styles inlined (no external CSS or `<style>` tags)
 - Local images compressed via sharp and embedded as base64 (≤ 2MB)
-- Syntax highlighting with Xcode Light theme (inline colors)
+- Syntax highlighting with default theme (inline colors)
 - Mermaid diagram rendering to PNG (via Playwright, optional)
 - External links converted to footnotes with References section
 - Tag sanitization (whitelist-based, `div` → `section`, dangerous tags removed)
 - GFM support (tables, strikethrough, task lists with ☑/☐)
-- Apple-inspired minimalist default style
+- Minimalist default style
 
 ## Installation
 
@@ -45,6 +49,9 @@ npx skills add https://github.com/liustack/mdpress --skill mdpress
 ```bash
 # Convert Markdown to WeChat-ready HTML
 mdpress -i article.md -o output.html
+
+# Convert Markdown to X/Twitter Articles editor-ready HTML
+mdpress -i article.md -o output.html --target x
 ```
 
 Output is JSON:
@@ -62,11 +69,11 @@ Output is JSON:
 mdpress runs your Markdown through a unified (remark + rehype) pipeline that applies 6 transformations in order:
 
 1. **Sanitize tags** — whitelist-based tag filtering, `div` → `section`, checkbox → Unicode ☑/☐, remove `id` and event handlers
-2. **Mermaid diagrams** — mermaid code blocks rendered to PNG via Playwright with Apple-style theme (optional, requires `mermaid` + `playwright`)
+2. **Mermaid diagrams** — mermaid code blocks rendered to PNG via Playwright with minimalist theme (optional, requires `mermaid` + `playwright`)
 3. **Base64 images** — local images compressed with sharp (PNG/GIF/SVG/JPEG) and embedded as data URIs (≤ 2MB limit)
 4. **Code highlighting** — syntax highlighting via highlight.js with whitespace protection (`\n` → `<br>`, spaces → NBSP)
 5. **Footnote links** — external links replaced with text + `<sup>[N]</sup>`, References section appended; `mp.weixin.qq.com` links preserved
-6. **Inline styles** — Apple-inspired minimalist styles injected per tag, hljs classes converted to inline colors (Xcode Light theme), all `className` removed
+6. **Inline styles** — minimalist default styles injected per tag, hljs classes converted to inline colors, all `className` removed
 
 The result is a self-contained HTML file that can be directly pasted into the WeChat Official Account editor.
 
@@ -74,6 +81,19 @@ The result is a self-contained HTML file that can be directly pasted into the We
 
 - `-i, --input <path>` — Input Markdown file path (required)
 - `-o, --output <path>` — Output HTML file path (required)
+- `-t, --target <target>` — Render target: `wechat` (default) or `x` (`twitter` alias)
+- `-c, --copy` — Copy rendered HTML to system clipboard as rich text
+
+## X/Twitter Articles Mode
+
+Use `--target x` (or `--target twitter`) to generate a minimal semantic HTML subset for X Articles editor paste.
+
+- Keeps: `h2`, `p`, `strong/b`, `em/i`, `s/del`, `a`, `blockquote`, `ul/ol/li`, `br`
+- Drops unsupported structure/style tags
+- Converts every Markdown image into placeholder text (`[Image: ...]`)
+- Keeps only `https://` links as real `<a href="...">` anchors
+- Converts protocol-relative links (`//...`) to `https://...`
+- Downgrades non-HTTPS links (`http:`, `mailto:`, `tel:`, `file:`, relative paths, anchors) to plain text
 
 ## AI Agent Skill
 

package/README.zh-CN.md

@@ -1,18 +1,22 @@
 # mdpress
 
-面向 AI Agent 的 Markdown 转换 CLI，可将 Markdown 文件输出为微信公众号编辑器兼容的 HTML，包含内联样式、base64 图片和标签清洗。
+面向 AI Agent 的 Markdown 转换 CLI，可将 Markdown 输出为编辑器可粘贴的 HTML：
+
+- **微信公众号模式**：内联样式、base64 图片、语法高亮、标签清洗
+- **X/Twitter Articles 模式**：语义化子集 HTML、图片占位文本、仅保留 HTTPS 链接
 
 ## 特性
 
 - 输出微信公众号编辑器兼容的 HTML
+- 输出 X/Twitter Articles 编辑器兼容的 HTML
 - 所有样式内联（无外部 CSS 或 `<style>` 标签）
 - 本地图片经 sharp 压缩后嵌入为 base64（单张 ≤ 2MB）
-- Xcode Light 主题语法高亮（内联色值）
+- 默认极简主题语法高亮（内联色值）
 - Mermaid 流程图渲染为 PNG（通过 Playwright，可选）
 - 外部链接自动转为脚注，文末附 References
 - 基于白名单的标签清洗（`div` → `section`，危险标签移除）
 - 支持 GFM（表格、删除线、任务列表 ☑/☐）
-- Apple 极简风格默认样式
+- 默认极简风格样式
 
 ## 安装
 
@@ -43,6 +47,9 @@ npx skills add https://github.com/liustack/mdpress --skill mdpress
 ```bash
 # 将 Markdown 转换为公众号可用的 HTML
 mdpress -i article.md -o output.html
+
+# 将 Markdown 转换为 X/Twitter Articles 可粘贴的 HTML
+mdpress -i article.md -o output.html --target x
 ```
 
 输出为 JSON 格式：
@@ -60,11 +67,11 @@ mdpress -i article.md -o output.html
 mdpress 使用 unified（remark + rehype）管线，依次执行 6 个转换：
 
 1. **标签清洗** — 基于白名单过滤标签，`div` → `section`，checkbox → Unicode ☑/☐，移除 `id` 和事件处理器
-2. **Mermaid 渲染** — mermaid 代码块通过 Playwright 渲染为 PNG（Apple 风格主题，可选，需安装 `mermaid` + `playwright`）
+2. **Mermaid 渲染** — mermaid 代码块通过 Playwright 渲染为 PNG（极简风格主题，可选，需安装 `mermaid` + `playwright`）
 3. **图片 base64** — 本地图片经 sharp 压缩（PNG/GIF/SVG/JPEG），嵌入为 data URI（≤ 2MB）
 4. **代码高亮** — 基于 highlight.js 的语法高亮，配合空白保护（`\n` → `<br>`，空格 → NBSP）
 5. **链接脚注** — 外部链接替换为文本 + `<sup>[N]</sup>`，文末追加 References 区域；保留 `mp.weixin.qq.com` 链接
-6. **样式内联** — Apple 极简风格按标签注入默认样式，hljs 类名转为内联色值（Xcode Light 主题），移除所有 `className`
+6. **样式内联** — 默认极简风格按标签注入样式，hljs 类名转为内联色值，移除所有 `className`
 
 输出的 HTML 可直接粘贴到微信公众号编辑器中使用。
 
@@ -72,6 +79,19 @@ mdpress 使用 unified（remark + rehype）管线，依次执行 6 个转换：
 
 - `-i, --input <path>` — 输入 Markdown 文件路径（必填）
 - `-o, --output <path>` — 输出 HTML 文件路径（必填）
+- `-t, --target <target>` — 渲染目标：`wechat`（默认）或 `x`（支持别名 `twitter`）
+- `-c, --copy` — 将渲染后的 HTML 复制到系统剪贴板（富文本）
+
+## X/Twitter Articles 模式
+
+使用 `--target x`（或 `--target twitter`）生成适配 X Articles 编辑器的极简语义化 HTML。
+
+- 保留：`h2`、`p`、`strong/b`、`em/i`、`s/del`、`a`、`blockquote`、`ul/ol/li`、`br`
+- 移除不支持的结构标签与样式属性
+- 所有 Markdown 图片转换为占位文本（`[Image: ...]`）
+- 仅 `https://` 链接保留为真实 `<a href="...">`
+- 协议相对链接（`//...`）会转换为 `https://...`
+- 其他链接（`http`、`mailto`、`tel`、`file`、相对路径、锚点）降级为纯文本
 
 ## AI Agent Skill
 

package/dist/main.js

@@ -11,9 +11,8 @@ import rehypeStringify from "rehype-stringify";
 import { visit, SKIP } from "unist-util-visit";
 import sharp from "sharp";
 import rehypeHighlight from "rehype-highlight";
-const ALLOWED_TAGS = /* @__PURE__ */ new Set([
+const ALLOWED_TAGS$1 = /* @__PURE__ */ new Set([
   // Block
-  "h1",
   "h2",
   "h3",
   "h4",
@@ -75,7 +74,7 @@ const ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "desc",
   "foreignObject"
 ]);
-const REMOVE_WITH_CHILDREN = /* @__PURE__ */ new Set([
+const REMOVE_WITH_CHILDREN$1 = /* @__PURE__ */ new Set([
   "script",
   "style",
   "link",
@@ -98,7 +97,6 @@ const REMOVE_WITH_CHILDREN = /* @__PURE__ */ new Set([
 ]);
 const BLOCK_TAGS = /* @__PURE__ */ new Set([
   "p",
-  "h1",
   "h2",
   "h3",
   "h4",
@@ -188,7 +186,7 @@ const rehypeSanitizeTags = () => {
   return (tree) => {
     visit(tree, "element", (node, index, parent) => {
       if (index === void 0 || !parent) return;
-      if (REMOVE_WITH_CHILDREN.has(node.tagName)) {
+      if (REMOVE_WITH_CHILDREN$1.has(node.tagName)) {
         parent.children.splice(index, 1);
         return [SKIP, index];
       }
@@ -206,10 +204,13 @@ const rehypeSanitizeTags = () => {
         parent.children.splice(index, 1);
         return [SKIP, index];
       }
+      if (node.tagName === "h1") {
+        node.tagName = "h2";
+      }
       if (node.tagName === "div") {
         node.tagName = "section";
       }
-      if (!ALLOWED_TAGS.has(node.tagName)) {
+      if (!ALLOWED_TAGS$1.has(node.tagName)) {
         const children = node.children || [];
         parent.children.splice(index, 1, ...children);
         return [SKIP, index];
@@ -503,35 +504,27 @@ const rehypeFootnoteLinks = () => {
       return [SKIP, index + replacement.length];
     });
     if (footnotes.length > 0) {
+      const footnoteChildren = [];
+      for (let i = 0; i < footnotes.length; i++) {
+        if (i > 0) {
+          footnoteChildren.push({ type: "element", tagName: "br", properties: {}, children: [] });
+        }
+        const fn = footnotes[i];
+        footnoteChildren.push({ type: "text", value: `[${fn.index}] ${fn.text}: ${fn.url}` });
+      }
       const referencesSection = {
         type: "element",
         tagName: "section",
-        properties: {},
+        properties: { style: "color: #86868b; font-size: 13px; line-height: 1.75; margin-top: 2em; word-break: break-all;" },
         children: [
-          { type: "element", tagName: "hr", properties: {}, children: [] },
           {
             type: "element",
-            tagName: "p",
-            properties: {},
-            children: [
-              {
-                type: "element",
-                tagName: "strong",
-                properties: {},
-                children: [{ type: "text", value: "References" }]
-              }
-            ]
+            tagName: "strong",
+            properties: { style: "color: #86868b;" },
+            children: [{ type: "text", value: "References:" }]
           },
-          ...footnotes.map(
-            (fn) => ({
-              type: "element",
-              tagName: "p",
-              properties: {},
-              children: [
-                { type: "text", value: `[${fn.index}] ${fn.text}: ${fn.url}` }
-              ]
-            })
-          )
+          { type: "element", tagName: "br", properties: {}, children: [] },
+          ...footnoteChildren
         ]
       };
       tree.children.push(referencesSection);
@@ -554,13 +547,12 @@ const FONT_MONO = 'Menlo,Consolas,Monaco,"Courier New",monospace';
 const F = `font-family: ${FONT_BODY};`;
 const FM = `font-family: ${FONT_MONO};`;
 const defaultStyles = {
-  // Headings — Apple style: 600 weight, tight letter-spacing
-  h1: `${F} font-size: 24px; font-weight: 600; margin: 0 0 16px; line-height: 1.2; letter-spacing: -0.02em; color: #1d1d1f;`,
+  // Headings — 600 weight (h1 is downgraded to h2 by sanitize plugin)
   h2: `${F} font-size: 20px; font-weight: 600; margin: 32px 0 12px; line-height: 1.25; color: #1d1d1f;`,
   h3: `${F} font-size: 17px; font-weight: 600; margin: 24px 0 8px; line-height: 1.3; color: #1d1d1f;`,
-  h4: `${F} font-size: 15px; font-weight: 600; margin: 20px 0 6px; line-height: 1.4; color: #6e6e73;`,
-  h5: `${F} font-size: 14px; font-weight: 600; margin: 16px 0 4px; line-height: 1.4; color: #6e6e73;`,
-  h6: `${F} font-size: 13px; font-weight: 600; margin: 16px 0 4px; line-height: 1.4; color: #86868b;`,
+  h4: `${F} font-size: 16px; font-weight: 600; margin: 20px 0 6px; line-height: 1.4; color: #1d1d1f;`,
+  h5: `${F} font-size: 16px; font-weight: 600; margin: 16px 0 4px; line-height: 1.4; color: #1d1d1f;`,
+  h6: `${F} font-size: 16px; font-weight: 600; margin: 16px 0 4px; line-height: 1.4; color: #1d1d1f;`,
   // Paragraphs — 16px body, 1.75 line-height (comfortable for Chinese)
   p: `${F} font-size: 16px; line-height: 1.75; margin: 0 0 1.25em; color: #1d1d1f;`,
   // Blockquote — restrained: left border + italic only, no background
@@ -598,7 +590,7 @@ const defaultStyles = {
   figure: "margin: 1.5em 0; text-align: center;",
   // Mark
   mark: "background: #fff3b0; padding: 0.1em 0.3em; border-radius: 2px;",
-  // hljs — Xcode Light theme (matching light code block background)
+  // hljs — default syntax highlighting theme (matching light code block background)
   "hljs-keyword": "color: #9b2393; font-weight: 600;",
   "hljs-string": "color: #c41a16;",
   "hljs-number": "color: #1c00cf;",
@@ -874,7 +866,7 @@ const rehypeMermaid = (options = {}) => {
     }
   };
 };
-async function render(options) {
+async function render$1(options) {
   const { input, output } = options;
   const inputPath = path.resolve(input);
   if (!fs.existsSync(inputPath)) {
@@ -904,15 +896,149 @@ async function render(options) {
     ...copied ? { copied } : {}
   };
 }
+const ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h2",
+  "p",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "s",
+  "del",
+  "a",
+  "blockquote",
+  "ul",
+  "ol",
+  "li",
+  "br"
+]);
+const REMOVE_WITH_CHILDREN = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "iframe",
+  "frame",
+  "frameset",
+  "object",
+  "embed",
+  "canvas",
+  "audio",
+  "video",
+  "source",
+  "track",
+  "form",
+  "input",
+  "textarea",
+  "select",
+  "button",
+  "noscript",
+  "template",
+  "link"
+]);
+function isHeadingTag(tagName) {
+  return /^h[1-6]$/.test(tagName);
+}
+function buildImagePlaceholder(alt, src) {
+  if (alt) return `[Image: ${alt}]`;
+  if (src) return `[Image: ${src}]`;
+  return "[Image]";
+}
+function normalizeHttpsHref(href) {
+  const trimmed = href.trim();
+  if (!trimmed) return null;
+  const candidate = trimmed.startsWith("//") ? `https:${trimmed}` : trimmed;
+  try {
+    const parsed = new URL(candidate);
+    if (parsed.protocol !== "https:" || !parsed.hostname) return null;
+    return candidate;
+  } catch {
+    return null;
+  }
+}
+const rehypeSanitizeTagsX = () => {
+  return (tree) => {
+    visit(tree, "element", (node, index, parent) => {
+      if (index === void 0 || !parent) return;
+      if (REMOVE_WITH_CHILDREN.has(node.tagName)) {
+        parent.children.splice(index, 1);
+        return [SKIP, index];
+      }
+      if (node.tagName === "img") {
+        const alt = typeof node.properties?.alt === "string" ? node.properties.alt.trim() : "";
+        const src = typeof node.properties?.src === "string" ? node.properties.src.trim() : "";
+        const text = {
+          type: "text",
+          value: buildImagePlaceholder(alt, src)
+        };
+        parent.children.splice(index, 1, text);
+        return [SKIP, index];
+      }
+      if (isHeadingTag(node.tagName)) {
+        node.tagName = "h2";
+      }
+      if (!ALLOWED_TAGS.has(node.tagName)) {
+        parent.children.splice(index, 1, ...node.children);
+        return [SKIP, index];
+      }
+      if (node.tagName === "a") {
+        const href = typeof node.properties?.href === "string" ? node.properties.href : "";
+        const normalizedHref = normalizeHttpsHref(href);
+        if (!normalizedHref) {
+          parent.children.splice(index, 1, ...node.children);
+          return [SKIP, index];
+        }
+        node.properties = { href: normalizedHref };
+        return [SKIP, index + 1];
+      }
+      node.properties = {};
+    });
+  };
+};
+async function render(options) {
+  const { input, output } = options;
+  const inputPath = path.resolve(input);
+  if (!fs.existsSync(inputPath)) {
+    throw new Error(`Input file not found: ${inputPath}`);
+  }
+  const ext = path.extname(inputPath).toLowerCase();
+  if (ext !== ".md" && ext !== ".markdown") {
+    throw new Error(`Unsupported input format: ${ext}. Only .md and .markdown files are supported.`);
+  }
+  const markdown = fs.readFileSync(inputPath, "utf-8");
+  const file = await unified().use(remarkParse).use(remarkGfm).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw).use(rehypeSanitizeTagsX).use(rehypeStringify, { allowDangerousHtml: true }).process(markdown);
+  const html = String(file);
+  const outputPath = path.resolve(output);
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, html, "utf-8");
+  let copied = false;
+  if (options.copy) {
+    const { copyToClipboard } = await import("./clipboard-pLkenrrh.js");
+    await copyToClipboard(html);
+    copied = true;
+  }
+  return {
+    input: inputPath,
+    output: outputPath,
+    size: Buffer.byteLength(html, "utf-8"),
+    ...copied ? { copied } : {}
+  };
+}
 const program = new Command();
-program.name("mdpress").description("Convert Markdown into WeChat MP-ready HTML").version("0.2.0").requiredOption("-i, --input <path>", "Input Markdown file path").requiredOption("-o, --output <path>", "Output HTML file path").option("-c, --copy", "Copy rendered HTML to clipboard via Playwright").action(async (options) => {
+function normalizeTarget(input) {
+  const normalized = input.trim().toLowerCase();
+  if (normalized === "wechat") return "wechat";
+  if (normalized === "x" || normalized === "twitter") return "x";
+  throw new Error(`Unsupported target: ${input}. Supported targets: wechat, x, twitter`);
+}
+program.name("mdpress").description("Convert Markdown into editor-ready HTML (WeChat MP or X Articles)").version("0.2.1").requiredOption("-i, --input <path>", "Input Markdown file path").requiredOption("-o, --output <path>", "Output HTML file path").option("-t, --target <target>", "Render target: wechat | x | twitter", "wechat").option("-c, --copy", "Copy rendered HTML to system clipboard").action(async (options) => {
   try {
-    const result = await render({
+    const target = normalizeTarget(options.target);
+    const renderer = target === "wechat" ? render$1 : render;
+    const result = await renderer({
       input: options.input,
       output: options.output,
       copy: options.copy
     });
-    console.log(JSON.stringify(result, null, 2));
+    console.log(JSON.stringify({ target, ...result }, null, 2));
   } catch (error) {
     console.error("Error:", error instanceof Error ? error.message : error);
     process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liustack/mdpress",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "CLI for AI agents to convert Markdown into WeChat MP-ready HTML with inline styles, base64 images, and tag sanitization",
   "type": "module",
   "bin": {
@@ -43,9 +43,7 @@
     "remark-rehype": "^11.1.1",
     "sharp": "^0.34.5",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0"
-  },
-  "optionalDependencies": {
+    "unist-util-visit": "^5.0.0",
     "mermaid": "^11.4.1",
     "playwright": "^1.52.0"
   },