feat: bundle CDN assets locally to eliminate network timeout

- Download KaTeX/highlight.js/mermaid assets to scripts/assets/ - Replace CDN links with inline <style>/<script> in render.js and run.js - Remove Google Fonts @import, rely on system CJK font stack - Change networkidle0 to networkidle2 with 30s timeout - Add !*.css to .gitignore whitelist
2026-05-30 15:02:24 +08:00
parent 97355cefad
commit b50e4cd5d8
11 changed files with 3307 additions and 13 deletions
@@ -9,6 +9,7 @@
 !*.py
 !*.js
 !*.json
+!*.css

 # Keep root .gitignore
 !.gitignore
@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
@@ -13,6 +13,11 @@ const https = require('https');
 const { marked } = require('marked');
 const katex = require('katex');

+const assetsDir = path.join(__dirname, 'assets');
+const katexCss = fs.readFileSync(path.join(assetsDir, 'katex.min.css'), 'utf-8');
+const githubCss = fs.readFileSync(path.join(assetsDir, 'github.min.css'), 'utf-8');
+const githubDarkCss = fs.readFileSync(path.join(assetsDir, 'github-dark.min.css'), 'utf-8');
+
 // === CLI Args ===
 const args = process.argv.slice(2);
 let outputPath = null;
@@ -133,9 +138,8 @@ function buildHtml(data, theme = 'light') {
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">
-<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css">
-<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.9.0/styles/${isDark ? 'github-dark' : 'github'}.min.css">
-<link href="https://fonts.googleapis.cn/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>${katexCss}</style>
+<style>${isDark ? githubDarkCss : githubCss}</style>
 <style>
 :root {
  color-scheme: ${theme};
@@ -336,7 +340,7 @@ async function renderToPng(html, outputPath) {
        const page = await browser.newPage();
        await page.setViewport({ width: maxWidth, height: 800, deviceScaleFactor: 2 });

-        await page.setContent(html, { waitUntil: 'networkidle0' });
+        await page.setContent(html, { waitUntil: 'networkidle2', timeout: 30000 });
        await sleep(1500);

        const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
@@ -6,8 +6,8 @@
 *
 * Rendering strategy:
 *   - LaTeX (KaTeX): pre-rendered in Node.js → inline HTML
- *   - Mermaid: rendered in browser via mermaid.js CDN
- *   - Code highlighting: highlight.js via CDN
+ *   - Mermaid: rendered in browser via bundled mermaid.js
+ *   - Code highlighting: bundled highlight.js
 *
 * Browser: auto-detects puppeteer-core (local Edge/Chrome) or puppeteer (bundled Chromium)
 * Environment variable CHROME_PATH can override browser executable path
@@ -18,6 +18,13 @@ const path = require('path');
 const { marked } = require('marked');
 const katex = require('katex');

+const assetsDir = path.join(__dirname, 'assets');
+const katexCss = fs.readFileSync(path.join(assetsDir, 'katex.min.css'), 'utf-8');
+const githubCss = fs.readFileSync(path.join(assetsDir, 'github.min.css'), 'utf-8');
+const githubDarkCss = fs.readFileSync(path.join(assetsDir, 'github-dark.min.css'), 'utf-8');
+const mermaidJs = fs.readFileSync(path.join(assetsDir, 'mermaid.min.js'), 'utf-8');
+const highlightJs = fs.readFileSync(path.join(assetsDir, 'highlight.min.js'), 'utf-8');
+
 // CLI args
 const args = process.argv.slice(2);
 let inputPath = null;
@@ -248,8 +255,6 @@ function buildCss(theme) {
  const emojiFonts = "'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Noto Emoji', 'Android Emoji', 'EmojiOne Color', sans-serif";
  
  return `
-@import url('https://fonts.googleapis.cn/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
-
 :root { color-scheme: ${isDark ? 'dark' : 'light'}; }
 ${isDark ? `
 :root { --bg: #1e1e1e; --text: #d4d4d4; --code-bg: #2d2d2d; --border: #404040; }
@@ -400,10 +405,10 @@ async function main() {
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=${PAGE_WIDTH}">
-<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css">
-<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.9.0/styles/${theme === 'dark' ? 'github-dark' : 'github'}.min.css">
-<script src="https://cdn.staticfile.org/mermaid/10.9.0/mermaid.min.js"></script>
-<script src="https://cdn.staticfile.org/highlight.js/11.9.0/highlight.min.js"></script>
+<style>${katexCss}</style>
+<style>${theme === 'dark' ? githubDarkCss : githubCss}</style>
+<script>${mermaidJs}</script>
+<script>${highlightJs}</script>
 <style>${buildCss(theme)}</style>
 </head>
 <body>
@@ -437,7 +442,7 @@ document.addEventListener('DOMContentLoaded', function() {
    const page = await browser.newPage();
    await page.setViewport({ width: PAGE_WIDTH, height: 800, deviceScaleFactor: 2 });

-    await page.setContent(html, { waitUntil: 'networkidle0' });
+    await page.setContent(html, { waitUntil: 'networkidle2', timeout: 30000 });

    // Wait for mermaid to finish rendering
    await page.waitForFunction(() => {