@lyhue1991/wxgzh 0.1.3 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
-# wxgzh
+# wxgzh，这个SKILL打通了AI写公众号文章的最后一公里
 
-一个面向微信公众号的 SKILL，基于 NodeJS CLI.
+这是一个面向微信公众号的 SKILL，基于 NodeJS CLI.
 
 把 Markdown 文章处理成适合公众号发布的 HTML，上传图片，生成封面，并提交到公众号草稿箱。
 
@@ -10,6 +10,12 @@
 npx skills add lyhue1991/wxgzh
 ```
 
+效果演示
+
+![](wxgzh_shot1.png)
+
+![](wxgzh_shot2.png)
+
 
 ## 一、功能概述
 
@@ -409,6 +415,7 @@ enableComment: true
 
 ```bash
 wxgzh --help  
+wxgzh --version
 wxgzh article.md
 wxgzh config --list
 wxgzh config --list-themes
@@ -418,4 +425,3 @@ wxgzh cover --title "我的文章" --to .wxgzh/cover.jpg
 wxgzh publish --article .wxgzh/article.html --cover .wxgzh/cover.jpg
 ```
 
-

package/dist/cli/index.js

@@ -36,6 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const node_fs_1 = require("node:fs");
 const promises_1 = require("node:fs/promises");
 const node_path_1 = __importDefault(require("node:path"));
 const commander_1 = require("commander");
@@ -65,6 +66,14 @@ const EXAMPLES_TEXT = [
     '  $ wxgzh cover --title "我的文章" --to .wxgzh/cover.jpg',
     '  $ wxgzh publish --article .wxgzh/article.html --cover .wxgzh/cover.jpg'
 ].join('\n');
+function getCliVersion() {
+    const packageJsonPath = node_path_1.default.resolve(__dirname, '../../package.json');
+    const packageJson = JSON.parse((0, node_fs_1.readFileSync)(packageJsonPath, 'utf8'));
+    if (typeof packageJson.version !== 'string' || packageJson.version.trim() === '') {
+        throw new Error('读取版本号失败: package.json 中缺少有效的 version 字段');
+    }
+    return packageJson.version;
+}
 function resolveCoverValue(value) {
     return typeof value === 'string' ? value : undefined;
 }
@@ -123,6 +132,7 @@ async function main() {
         .description('把 Markdown 文章处理成微信公众号草稿，支持主题、图片修复、封面生成与一键发布')
         .usage('[article.md] [options]')
         .helpOption('-h, --help', '查看帮助')
+        .version(getCliVersion(), '-V, --version', '查看版本')
         .showHelpAfterError('(使用 --help 查看完整帮助)')
         .argument('[article]', 'Markdown 文件路径；传入后会自动执行 md2html -> fix -> cover -> publish')
         .option('--theme <theme>', `指定主题名，可用值：${(0, themes_1.listAvailableThemes)().join(', ')}`)

package/dist/core/converter.js

@@ -260,6 +260,32 @@ section.tbl-wrapper a {
   text-decoration: none !important;
 }
 `;
+const WECHAT_CODE_BLOCK_INLINE_CSS = `
+pre {
+  overflow-x: auto !important;
+  overflow-y: hidden !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+pre code.hljs,
+pre code[class*="language-"] {
+  display: block !important;
+  width: max-content !important;
+  min-width: 100% !important;
+  box-sizing: border-box !important;
+  white-space: nowrap !important;
+  word-break: normal !important;
+  overflow-wrap: normal !important;
+  overflow: visible !important;
+}
+
+pre code.hljs *,
+pre code[class*="language-"] * {
+  white-space: inherit !important;
+  word-break: inherit !important;
+  overflow-wrap: inherit !important;
+}
+`;
 const WECHAT_MATH_INLINE_CSS = `
 span.math-inline {
   display: inline-block !important;
@@ -587,51 +613,59 @@ function createDocumentHtml(content, metadata) {
     ].join('\n');
 }
 function setInlineStyleProperty(existingStyle, property, value) {
-    const entries = new Map();
-    if (existingStyle) {
-        for (const declaration of existingStyle.split(';')) {
-            const trimmed = declaration.trim();
-            if (!trimmed) {
-                continue;
-            }
-            const separatorIndex = trimmed.indexOf(':');
-            if (separatorIndex === -1) {
-                continue;
-            }
-            const name = trimmed.slice(0, separatorIndex).trim();
-            const declarationValue = trimmed.slice(separatorIndex + 1).trim();
-            if (!name || !declarationValue) {
-                continue;
-            }
-            entries.set(name, declarationValue);
-        }
-    }
+    const entries = parseInlineStyle(existingStyle);
     entries.set(property, value);
-    return Array.from(entries.entries())
-        .map(([name, declarationValue]) => `${name}: ${declarationValue}`)
-        .join('; ');
+    return stringifyInlineStyle(entries) ?? '';
 }
 function removeInlineStyleProperties(existingStyle, properties) {
+    const entries = parseInlineStyle(existingStyle);
+    const propertiesToRemove = new Set(properties.map((property) => property.trim().toLowerCase()).filter(Boolean));
+    for (const name of Array.from(entries.keys())) {
+        if (propertiesToRemove.has(name.toLowerCase())) {
+            entries.delete(name);
+        }
+    }
+    return stringifyInlineStyle(entries);
+}
+function parseInlineStyle(existingStyle) {
+    const entries = new Map();
     if (!existingStyle) {
-        return undefined;
+        return entries;
     }
-    const propertiesToRemove = new Set(properties.map((property) => property.trim().toLowerCase()).filter(Boolean));
-    const declarations = existingStyle
-        .split(';')
-        .map((declaration) => declaration.trim())
-        .filter(Boolean)
-        .filter((declaration) => {
-        const separatorIndex = declaration.indexOf(':');
+    for (const declaration of existingStyle.split(';')) {
+        const trimmed = declaration.trim();
+        if (!trimmed) {
+            continue;
+        }
+        const separatorIndex = trimmed.indexOf(':');
         if (separatorIndex === -1) {
-            return true;
+            continue;
         }
-        const name = declaration.slice(0, separatorIndex).trim().toLowerCase();
-        return !propertiesToRemove.has(name);
-    });
-    if (declarations.length === 0) {
+        const name = trimmed.slice(0, separatorIndex).trim();
+        const declarationValue = trimmed.slice(separatorIndex + 1).trim();
+        if (!name || !declarationValue) {
+            continue;
+        }
+        entries.set(name, declarationValue);
+    }
+    return entries;
+}
+function stringifyInlineStyle(entries) {
+    if (entries.size === 0) {
         return undefined;
     }
-    return declarations.join('; ');
+    return Array.from(entries.entries())
+        .map(([name, declarationValue]) => `${name}: ${declarationValue}`)
+        .join('; ');
+}
+function getInlineStyleProperty(existingStyle, property) {
+    const entries = parseInlineStyle(existingStyle);
+    for (const [name, declarationValue] of entries.entries()) {
+        if (name.trim().toLowerCase() === property.trim().toLowerCase()) {
+            return declarationValue;
+        }
+    }
+    return undefined;
 }
 function normalizeInlinedListStyles($) {
     $('ol').each((_, element) => {
@@ -677,6 +711,95 @@ function removeWechatUnsafeListWhitespace($) {
         });
     });
 }
+function normalizeWechatCodeBlocks($) {
+    const backgroundStyleProperties = [
+        'background',
+        'background-color',
+        'background-image',
+        'background-repeat',
+        'background-position',
+        'background-size'
+    ];
+    const codeStyleProperties = [
+        ...backgroundStyleProperties,
+        'border',
+        'border-top',
+        'border-right',
+        'border-bottom',
+        'border-left',
+        'border-color',
+        'border-style',
+        'border-width',
+        'border-radius',
+        'box-shadow',
+        'padding',
+        'padding-top',
+        'padding-right',
+        'padding-bottom',
+        'padding-left'
+    ];
+    const wrapperStyleProperties = ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'];
+    $('pre').each((_, element) => {
+        const $pre = $(element);
+        const $code = $pre.children('code').first();
+        if ($code.length === 0) {
+            return;
+        }
+        if (!$pre.parent().is('section.code-block-wrapper')) {
+            $pre.wrap('<section class="code-block-wrapper"></section>');
+        }
+        const $wrapper = $pre.parent();
+        const codeStyle = $code.attr('style');
+        const preStyle = $pre.attr('style');
+        for (const property of wrapperStyleProperties) {
+            const value = getInlineStyleProperty(codeStyle, property) ?? getInlineStyleProperty(preStyle, property);
+            if (!value) {
+                continue;
+            }
+            $wrapper.attr('style', setInlineStyleProperty($wrapper.attr('style'), property, value));
+        }
+        $wrapper.attr('style', setInlineStyleProperty($wrapper.attr('style'), 'display', 'block !important'));
+        $wrapper.attr('style', setInlineStyleProperty($wrapper.attr('style'), 'overflow-x', 'auto !important'));
+        $wrapper.attr('style', setInlineStyleProperty($wrapper.attr('style'), 'overflow-y', 'hidden !important'));
+        $wrapper.attr('style', setInlineStyleProperty($wrapper.attr('style'), '-webkit-overflow-scrolling', 'touch'));
+        for (const property of codeStyleProperties) {
+            const value = getInlineStyleProperty(codeStyle, property);
+            if (!value) {
+                continue;
+            }
+            $pre.attr('style', setInlineStyleProperty($pre.attr('style'), property, value));
+        }
+        $pre.attr('style', removeInlineStyleProperties($pre.attr('style'), wrapperStyleProperties));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'display', 'inline-block !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'width', 'max-content !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'min-width', '100% !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'max-width', 'none !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'box-sizing', 'border-box !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'white-space', 'normal !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'word-break', 'normal !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'overflow', 'visible !important'));
+        $pre.attr('style', setInlineStyleProperty($pre.attr('style'), 'vertical-align', 'top !important'));
+        $code.attr('style', removeInlineStyleProperties($code.attr('style'), [...codeStyleProperties, ...wrapperStyleProperties]));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'display', 'inline-block !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'width', 'max-content !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'min-width', '100% !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'max-width', 'none !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'white-space', 'nowrap !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'word-break', 'normal !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'overflow-wrap', 'normal !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'border', '0 !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'border-radius', '0 !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'padding', '0 !important'));
+        $code.attr('style', setInlineStyleProperty($code.attr('style'), 'margin', '0 !important'));
+        for (const property of backgroundStyleProperties) {
+            const value = getInlineStyleProperty(codeStyle, property) ?? getInlineStyleProperty(preStyle, property);
+            if (!value) {
+                continue;
+            }
+            $code.attr('style', setInlineStyleProperty($code.attr('style'), property, value));
+        }
+    });
+}
 function cleanInlinedHtml(html) {
     const $ = cheerio.load(html);
     $('pre > code').each((_, element) => {
@@ -685,6 +808,7 @@ function cleanInlinedHtml(html) {
     });
     normalizeInlinedListStyles($);
     removeWechatUnsafeListWhitespace($);
+    normalizeWechatCodeBlocks($);
     const $article = $('body > #write > article').first();
     const $firstChild = $article.children().first();
     if ($firstChild.length > 0) {
@@ -739,7 +863,7 @@ async function renderMarkdownToHtml(body, metadata) {
     const articleHtml = $('article').html() ?? '';
     const baseHtml = createDocumentHtml(articleHtml, metadata);
     const inlinedHtml = (0, css_inline_1.inline)(baseHtml, {
-        extraCss: `${themeCss}\n${HIGHLIGHT_INLINE_CSS}\n${WECHAT_BLOCKQUOTE_INLINE_CSS}\n${WECHAT_TABLE_INLINE_CSS}\n${WECHAT_MATH_INLINE_CSS}\n${WECHAT_LAYOUT_INLINE_CSS}\n${customCss}`,
+        extraCss: `${themeCss}\n${HIGHLIGHT_INLINE_CSS}\n${WECHAT_BLOCKQUOTE_INLINE_CSS}\n${WECHAT_TABLE_INLINE_CSS}\n${WECHAT_CODE_BLOCK_INLINE_CSS}\n${WECHAT_MATH_INLINE_CSS}\n${WECHAT_LAYOUT_INLINE_CSS}\n${customCss}`,
         keepAtRules: true,
         applyWidthAttributes: false,
         applyHeightAttributes: false

package/dist/core/cover.js

@@ -7,12 +7,17 @@ exports.listCoverPresets = listCoverPresets;
 exports.createCover = createCover;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
+const opentype_js_1 = require("opentype.js");
 const sharp_1 = __importDefault(require("sharp"));
 const BUILTIN_BACKGROUND_DIR = node_path_1.default.resolve(__dirname, '../../assets/backgrounds');
+const COVER_TITLE_FONT_PATH = node_path_1.default.resolve(__dirname, '../../assets/fonts/仓耳小丸子.ttf');
 const FALLBACK_GRADIENT = {
     start: '#e8f3ef',
     end: '#c9ded6'
 };
+const DEFAULT_TITLE_LINE_LENGTH = 15;
+const COVER_TEXT_COLOR = '#000000b8';
+let cachedCoverFont;
 function escapeXml(value) {
     return value
         .replace(/&/g, '&')
@@ -21,8 +26,16 @@ function escapeXml(value) {
         .replace(/"/g, '"')
         .replace(/'/g, ''');
 }
-function escapeAttribute(value) {
-    return escapeXml(value);
+function getCoverFont() {
+    if (!(0, node_fs_1.existsSync)(COVER_TITLE_FONT_PATH)) {
+        return undefined;
+    }
+    if (!cachedCoverFont) {
+        const fontBuffer = (0, node_fs_1.readFileSync)(COVER_TITLE_FONT_PATH);
+        const arrayBuffer = fontBuffer.buffer.slice(fontBuffer.byteOffset, fontBuffer.byteOffset + fontBuffer.byteLength);
+        cachedCoverFont = (0, opentype_js_1.parse)(arrayBuffer);
+    }
+    return cachedCoverFont;
 }
 function readFiles(dirPath, pattern) {
     try {
@@ -79,29 +92,66 @@ function buildGradientBackground(width, height) {
     </svg>`;
     return Buffer.from(svg);
 }
+function getFontLineMetrics(font, fontSize) {
+    const unitsPerEm = font.unitsPerEm || 1000;
+    const ascender = Math.round(font.ascender / unitsPerEm * fontSize);
+    const descender = Math.abs(Math.round(font.descender / unitsPerEm * fontSize));
+    return {
+        ascender,
+        lineHeight: Math.max(Math.round((ascender + descender) * 1.08), fontSize)
+    };
+}
+function buildFontPath(font, text, fontSize) {
+    const pathObject = font.getPath(text, 0, 0, fontSize);
+    const box = pathObject.getBoundingBox();
+    return {
+        pathData: pathObject.toPathData(3),
+        width: Math.max(box.x2 - box.x1, 0),
+        x1: box.x1,
+        x2: box.x2
+    };
+}
+function buildPathElement(pathData, x, y) {
+    return `<path d="${pathData}" transform="translate(${x.toFixed(3)} ${y.toFixed(3)})" fill="${COVER_TEXT_COLOR}" />`;
+}
+function buildTitlePath(font, line, index, canvasWidth, titleTop, lineHeight, ascender, fontSize) {
+    const glyphPath = buildFontPath(font, line, fontSize);
+    const baselineY = titleTop + index * lineHeight + ascender;
+    const startX = (canvasWidth - glyphPath.width) / 2 - glyphPath.x1;
+    return {
+        right: startX + glyphPath.x2,
+        path: buildPathElement(glyphPath.pathData, startX, baselineY)
+    };
+}
+function buildAuthorPath(font, text, fontSize, right, baselineY) {
+    const glyphPath = buildFontPath(font, text, fontSize);
+    const startX = right - glyphPath.x2;
+    return buildPathElement(glyphPath.pathData, startX, baselineY);
+}
 function buildTextSvg(params) {
-    const lines = buildTitleLines(params.title, 10);
+    const font = getCoverFont();
+    if (!font) {
+        return undefined;
+    }
+    const lines = buildTitleLines(params.title, DEFAULT_TITLE_LINE_LENGTH);
     const sizes = estimateFontSize(params.width, lines);
-    const lineHeight = Math.round(sizes.title * 1.15);
+    const titleMetrics = getFontLineMetrics(font, sizes.title);
+    const authorMetrics = getFontLineMetrics(font, sizes.author);
+    const lineHeight = titleMetrics.lineHeight;
     const titleBlockHeight = lineHeight * lines.length;
     const titleTop = Math.round((params.height - titleBlockHeight) / 2);
-    const fontFamily = '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
-    const titleWidth = sizes.longestChars * sizes.title;
-    const titleRight = Math.round(params.width / 2 + titleWidth / 2);
-    const authorY = titleTop + titleBlockHeight + sizes.author + Math.round(sizes.author * 0.4);
-    const titleText = lines
-        .map((line, index) => {
-        const y = titleTop + sizes.title + index * lineHeight;
-        return `<text x="50%" y="${y}" text-anchor="middle" font-size="${sizes.title}" font-family="${escapeAttribute(fontFamily)}" fill="rgba(0,0,0,0.72)">${escapeXml(line)}</text>`;
-    })
-        .join('');
-    const authorText = params.author.trim()
-        ? `<text x="${titleRight}" y="${authorY}" text-anchor="end" font-size="${sizes.author}" font-family="${escapeAttribute(fontFamily)}" fill="rgba(0,0,0,0.72)">${escapeXml(params.author.trim())}</text>`
+    const titlePaths = lines.map((line, index) => buildTitlePath(font, line, index, params.width, titleTop, lineHeight, titleMetrics.ascender, sizes.title));
+    const titleRight = titlePaths.length > 0
+        ? Math.max(...titlePaths.map((item) => item.right))
+        : params.width / 2;
+    const authorText = params.author.trim();
+    const authorPath = authorText
+        ? buildAuthorPath(font, authorText, sizes.author, titleRight, titleTop + titleBlockHeight + Math.round(sizes.author * 0.4) + authorMetrics.ascender)
         : '';
     const svg = `
     <svg width="${params.width}" height="${params.height}" viewBox="0 0 ${params.width} ${params.height}" xmlns="http://www.w3.org/2000/svg">
-      ${titleText}
-      ${authorText}
+      ${titlePaths.map((item) => item.path).join('')}
+      ${authorPath}
     </svg>`;
     return Buffer.from(svg);
 }
@@ -137,8 +187,13 @@ async function createCover(options) {
     const background = backgroundPath
         ? (0, sharp_1.default)(backgroundPath).resize(width, height, { fit: 'cover' })
         : (0, sharp_1.default)(buildGradientBackground(width, height));
-    await background
-        .composite([
+    const textSvg = buildTextSvg({
+        title: options.title,
+        author,
+        width,
+        height
+    });
+    const overlays = [
         {
             input: {
                 create: {
@@ -148,16 +203,13 @@ async function createCover(options) {
                     background: { r: 255, g: 255, b: 255, alpha: 0.58 }
                 }
             }
-        },
-        {
-            input: buildTextSvg({
-                title: options.title,
-                author,
-                width,
-                height
-            })
         }
-    ])
+    ];
+    if (textSvg) {
+        overlays.push({ input: textSvg });
+    }
+    await background
+        .composite(overlays)
         .jpeg({ quality: 92 })
         .toFile(outputPath);
     return outputPath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyhue1991/wxgzh",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Markdown to WeChat Official Account draft CLI",
   "license": "MIT",
   "main": "dist/cli/index.js",
@@ -37,6 +37,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-mathjax3": "^5.2.0",
     "mathjax": "^4.1.1",
+    "opentype.js": "^1.3.4",
     "sharp": "^0.33.5"
   },
   "devDependencies": {

package/spec.md

@@ -482,6 +482,7 @@ POST https://api.weixin.qq.com/cgi-bin/draft/add
 npm run typecheck
 npm run build
 node dist/cli/index.js --help
+node dist/cli/index.js --version
 node dist/cli/index.js config --help
 node dist/cli/index.js md2html --help
 node dist/cli/index.js fix --help