@lyhue1991/wxgzh 0.1.2 → 0.1.4

package/README.md

@@ -1,6 +1,21 @@
-# wxgzh
+# wxgzh，这个SKILL打通了AI写公众号文章的最后一公里
+
+这是一个面向微信公众号的 SKILL，基于 NodeJS CLI.
+
+把 Markdown 文章处理成适合公众号发布的 HTML，上传图片，生成封面，并提交到公众号草稿箱。
+
+<mark>安装此SKILL</mark>
+
+```
+npx skills add lyhue1991/wxgzh
+```
+
+效果演示
+
+![](wxgzh_shot1.png)
+
+![](wxgzh_shot2.png)
 
-一个面向微信公众号的 Node.js CLI 工具：把 Markdown 文章处理成适合公众号发布的 HTML，修复图片，并提交到公众号草稿箱。
 
 ## 一、功能概述
 
@@ -12,7 +27,7 @@
 - 支持主题样式、自定义 CSS、自动摘要、封面图生成。
 - 也支持分步执行，便于你单独检查 HTML、封面或发布结果。
 
-**操作方法**
+**手动操作方法**
 
 * step1: 一键安装（要求：Node.js >= 18）
 

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;
@@ -371,6 +397,9 @@ function escapeHtmlAttribute(value) {
 function isTextNodeEmpty(node) {
     return node.type === 'text' && !node.data.trim();
 }
+function isTagNode(node, tagName) {
+    return node.type === 'tag' && node.tagName.toLowerCase() === tagName;
+}
 function isStandaloneImageParagraph($paragraph) {
     const nodes = $paragraph.contents().toArray().filter((node) => !isTextNodeEmpty(node));
     return nodes.every((node) => node.type === 'tag' && ['img', 'br'].includes(node.tagName.toLowerCase()));
@@ -410,10 +439,33 @@ async function loadCustomCss() {
 function normalizeListItems($) {
     $('li').each((_, element) => {
         const $item = $(element);
-        const childElements = $item
-            .contents()
-            .toArray()
-            .filter((node) => !isTextNodeEmpty(node));
+        const initialChildren = $item.contents().toArray();
+        const hasParagraphChild = initialChildren.some((node) => isTagNode(node, 'p'));
+        if (hasParagraphChild) {
+            const fragments = [];
+            let previousWasParagraph = false;
+            for (const node of initialChildren) {
+                if (isTextNodeEmpty(node)) {
+                    continue;
+                }
+                if (isTagNode(node, 'p')) {
+                    const paragraphHtml = renderSoftBreakFriendlyHtml(node.children ?? []);
+                    if (!paragraphHtml.trim()) {
+                        continue;
+                    }
+                    if (previousWasParagraph) {
+                        fragments.push('<br>');
+                    }
+                    fragments.push(paragraphHtml);
+                    previousWasParagraph = true;
+                    continue;
+                }
+                fragments.push(renderSoftBreakFriendlyNode(node, true));
+                previousWasParagraph = false;
+            }
+            $item.html(fragments.join(''));
+        }
+        const childElements = $item.contents().toArray().filter((node) => !isTextNodeEmpty(node));
         if (childElements.length === 0) {
             return;
         }
@@ -425,7 +477,7 @@ function normalizeListItems($) {
             return ['p', 'ul', 'ol', 'section', 'blockquote', 'pre', 'table'].includes(tagName);
         });
         const firstChild = childElements[0];
-        if (!hasBlockChild && firstChild?.type === 'tag' && firstChild.tagName.toLowerCase() === 'span' && childElements.length === 1) {
+        if (!hasBlockChild && isTagNode(firstChild, 'span') && childElements.length === 1) {
             return;
         }
         if (hasBlockChild) {
@@ -561,29 +613,192 @@ function createDocumentHtml(content, metadata) {
     ].join('\n');
 }
 function setInlineStyleProperty(existingStyle, property, value) {
+    const entries = parseInlineStyle(existingStyle);
+    entries.set(property, value);
+    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) {
-        for (const declaration of existingStyle.split(';')) {
-            const trimmed = declaration.trim();
-            if (!trimmed) {
+    if (!existingStyle) {
+        return entries;
+    }
+    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);
+    }
+    return entries;
+}
+function stringifyInlineStyle(entries) {
+    if (entries.size === 0) {
+        return undefined;
+    }
+    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) => {
+        const $list = $(element);
+        const depth = $list.parents('ol').length;
+        const cleanedStyle = removeInlineStyleProperties($list.attr('style'), ['list-style', 'list-style-type', 'list-style-position']);
+        const listType = depth === 0 ? '1' : depth === 1 ? 'a' : 'i';
+        if (cleanedStyle) {
+            $list.attr('style', cleanedStyle);
+        }
+        else {
+            $list.removeAttr('style');
+        }
+        $list.attr('type', listType);
+    });
+    $('ul').each((_, element) => {
+        const $list = $(element);
+        const cleanedStyle = removeInlineStyleProperties($list.attr('style'), ['list-style', 'list-style-type', 'list-style-position']);
+        if (cleanedStyle) {
+            $list.attr('style', cleanedStyle);
+            return;
+        }
+        $list.removeAttr('style');
+    });
+    $('ol > li, ul > li').each((_, element) => {
+        const $item = $(element);
+        const cleanedStyle = removeInlineStyleProperties($item.attr('style'), ['list-style', 'list-style-type', 'list-style-position']);
+        if (cleanedStyle) {
+            $item.attr('style', cleanedStyle);
+            return;
+        }
+        $item.removeAttr('style');
+    });
+}
+function removeWechatUnsafeListWhitespace($) {
+    $('ol, ul').each((_, element) => {
+        $(element)
+            .contents()
+            .toArray()
+            .filter((node) => isTextNodeEmpty(node))
+            .forEach((node) => {
+            $(node).remove();
+        });
+    });
+}
+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;
             }
-            const separatorIndex = trimmed.indexOf(':');
-            if (separatorIndex === -1) {
+            $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;
             }
-            const name = trimmed.slice(0, separatorIndex).trim();
-            const declarationValue = trimmed.slice(separatorIndex + 1).trim();
-            if (!name || !declarationValue) {
+            $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;
             }
-            entries.set(name, declarationValue);
+            $code.attr('style', setInlineStyleProperty($code.attr('style'), property, value));
         }
-    }
-    entries.set(property, value);
-    return Array.from(entries.entries())
-        .map(([name, declarationValue]) => `${name}: ${declarationValue}`)
-        .join('; ');
+    });
 }
 function cleanInlinedHtml(html) {
     const $ = cheerio.load(html);
@@ -591,6 +806,9 @@ function cleanInlinedHtml(html) {
         const $element = $(element);
         $element.html(renderWechatFriendlyCodeHtml($element.contents().toArray()));
     });
+    normalizeInlinedListStyles($);
+    removeWechatUnsafeListWhitespace($);
+    normalizeWechatCodeBlocks($);
     const $article = $('body > #write > article').first();
     const $firstChild = $article.children().first();
     if ($firstChild.length > 0) {
@@ -645,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyhue1991/wxgzh",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Markdown to WeChat Official Account draft CLI",
   "license": "MIT",
   "main": "dist/cli/index.js",