ViperEkura/SKILLS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: bundle CDN assets locally to eliminate network timeout

Browse Source 
- 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:
ViperEkura
2026-05-30 15:02:24 +08:00
parent 97355cefad
commit b50e4cd5d8
11 changed files with 3307 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -9,6 +9,7 @@
!*.py !*.py
!*.js !*.js
!*.json !*.json
!*.css
# Keep root .gitignore # Keep root .gitignore
!.gitignore !.gitignore
leetcode-daily-card/scripts/assets/github-dark.min.css
Vendored
+10
View File
@@ -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}
leetcode-daily-card/scripts/assets/github.min.css
Vendored
+10
View File
@@ -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}
leetcode-daily-card/scripts/assets/katex.min.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
leetcode-daily-card/scripts/run.js
+8 -4
View File
@@ -13,6 +13,11 @@ const https = require('https');
const { marked } = require('marked'); const { marked } = require('marked');
const katex = require('katex'); 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 === // === CLI Args ===
const args = process.argv.slice(2); const args = process.argv.slice(2);
let outputPath = null; let outputPath = null;
@@ -133,9 +138,8 @@ function buildHtml(data, theme = 'light') {
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css"> <style>${katexCss}</style>
<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.9.0/styles/${isDark ? 'github-dark' : 'github'}.min.css"> <style>${isDark ? githubDarkCss : githubCss}</style>
<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> <style>
:root { :root {
color-scheme: ${theme}; color-scheme: ${theme};
@@ -336,7 +340,7 @@ async function renderToPng(html, outputPath) {
const page = await browser.newPage(); const page = await browser.newPage();
await page.setViewport({ width: maxWidth, height: 800, deviceScaleFactor: 2 }); 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); await sleep(1500);
const bodyHeight = await page.evaluate(() => document.body.scrollHeight); const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
md2img/scripts/assets/github-dark.min.css
Vendored
+10
View File
@@ -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}
md2img/scripts/assets/github.min.css
Vendored
+10
View File
@@ -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}
md2img/scripts/assets/highlight.min.js
Vendored
+1213
View File
File diff suppressed because one or more lines are too long
md2img/scripts/assets/katex.min.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
md2img/scripts/assets/mermaid.min.js
Vendored
+2029
View File
File diff suppressed because one or more lines are too long
md2img/scripts/render.js
+14 -9
View File
@@ -6,8 +6,8 @@
* *
* Rendering strategy: * Rendering strategy:
* - LaTeX (KaTeX): pre-rendered in Node.js → inline HTML * - LaTeX (KaTeX): pre-rendered in Node.js → inline HTML
* - Mermaid: rendered in browser via mermaid.js CDN * - Mermaid: rendered in browser via bundled mermaid.js
* - Code highlighting: highlight.js via CDN * - Code highlighting: bundled highlight.js
* *
* Browser: auto-detects puppeteer-core (local Edge/Chrome) or puppeteer (bundled Chromium) * Browser: auto-detects puppeteer-core (local Edge/Chrome) or puppeteer (bundled Chromium)
* Environment variable CHROME_PATH can override browser executable path * Environment variable CHROME_PATH can override browser executable path
@@ -18,6 +18,13 @@ const path = require('path');
const { marked } = require('marked'); const { marked } = require('marked');
const katex = require('katex'); 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 // CLI args
const args = process.argv.slice(2); const args = process.argv.slice(2);
let inputPath = null; 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"; const emojiFonts = "'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Noto Emoji', 'Android Emoji', 'EmojiOne Color', sans-serif";
return ` 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'}; } :root { color-scheme: ${isDark ? 'dark' : 'light'}; }
${isDark ? ` ${isDark ? `
:root { --bg: #1e1e1e; --text: #d4d4d4; --code-bg: #2d2d2d; --border: #404040; } :root { --bg: #1e1e1e; --text: #d4d4d4; --code-bg: #2d2d2d; --border: #404040; }
@@ -400,10 +405,10 @@ async function main() {
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=${PAGE_WIDTH}"> <meta name="viewport" content="width=${PAGE_WIDTH}">
<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css"> <style>${katexCss}</style>
<link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.9.0/styles/${theme === 'dark' ? 'github-dark' : 'github'}.min.css"> <style>${theme === 'dark' ? githubDarkCss : githubCss}</style>
<script src="https://cdn.staticfile.org/mermaid/10.9.0/mermaid.min.js"></script> <script>${mermaidJs}</script>
<script src="https://cdn.staticfile.org/highlight.js/11.9.0/highlight.min.js"></script> <script>${highlightJs}</script>
<style>${buildCss(theme)}</style> <style>${buildCss(theme)}</style>
</head> </head>
<body> <body>
@@ -437,7 +442,7 @@ document.addEventListener('DOMContentLoaded', function() {
const page = await browser.newPage(); const page = await browser.newPage();
await page.setViewport({ width: PAGE_WIDTH, height: 800, deviceScaleFactor: 2 }); 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 // Wait for mermaid to finish rendering
await page.waitForFunction(() => { await page.waitForFunction(() => {