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
This commit is contained in:
parent
97355cefad
commit
b50e4cd5d8
|
|
@ -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}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue