From 4132a13a96d3ed95a52c839b004cc2014199b99e Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sat, 29 Oct 2022 00:24:39 +0800 Subject: [PATCH] chore: format script code. --- .husky/pre-commit | 4 + .lintstagedrc | 3 + .prettierignore | 5 + .prettierrc | 9 + package.json | 10 +- scripts/build.mjs | 2 +- scripts/create.mjs | 43 ++-- scripts/index.mjs | 21 +- scripts/nodes/header.mjs | 51 ++-- scripts/nodes/htmlTagAddAttri.mjs | 2 +- scripts/nodes/logo.mjs | 59 +++-- scripts/style.css | 365 +++++++++++++++++++--------- scripts/utils/anchorPoint.mjs | 15 +- scripts/utils/childs.mjs | 1 - scripts/utils/darkMode.mjs | 26 +- scripts/utils/getSVGNode.mjs | 14 +- scripts/utils/getTocsTree.mjs | 53 ++-- scripts/utils/homeCardIcons.mjs | 12 +- scripts/utils/panelAddNumber.mjs | 7 +- scripts/utils/rehypePreviewHTML.mjs | 9 +- scripts/utils/rehypeTitle.mjs | 6 +- scripts/utils/rehypeUrls.mjs | 9 +- scripts/utils/tooltips.mjs | 24 +- scripts/watch.mjs | 19 +- 24 files changed, 471 insertions(+), 298 deletions(-) create mode 100755 .husky/pre-commit create mode 100644 .lintstagedrc create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..cf0c46b --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npx --no-install lint-staged diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 0000000..6dee474 --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,3 @@ +{ + "**/*.{mjs,css,json,prettierrc,lintstagedrc}": ["prettier --write"] +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..797b5ef --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +package.json +coverage +dist +build +docs diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b5216ad --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 120, + "overrides": [ + { "files": ".prettierrc", "options": { "parser": "json" } }, + { "files": ".lintstagedrc", "options": { "parser": "json" } } + ] +} diff --git a/package.json b/package.json index eeb6684..c55a61f 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,10 @@ "homepage": "https://jaywcjlove.github.io/reference", "private": false, "scripts": { + "prepare": "husky install", "build": "node scripts/build.mjs", - "start": "node scripts/watch.mjs" + "start": "node scripts/watch.mjs", + "prettier": "prettier --write '**/*.{mjs,css,json,prettierrc,lintstagedrc}'" }, "repository": { "type": "git", @@ -22,10 +24,16 @@ "@wcj/markdown-to-html": "^2.1.1", "chokidar": "^3.5.3", "fs-extra": "^10.1.0", + "husky": "^8.0.1", + "lint-staged": "^13.0.3", + "prettier": "^2.7.1", "recursive-readdir-files": "^2.3.0", "rehype-autolink-headings": "^6.1.1", "rehype-document": "^6.1.0", "rehype-slug": "^5.0.1", "remark-gemoji": "^7.0.1" + }, + "engines": { + "node": ">=16.0.0" } } diff --git a/scripts/build.mjs b/scripts/build.mjs index 9da8d29..f3f5729 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -1,3 +1,3 @@ import { run } from './index.mjs'; -run() +run(); diff --git a/scripts/create.mjs b/scripts/create.mjs index 256ade6..d965c14 100644 --- a/scripts/create.mjs +++ b/scripts/create.mjs @@ -2,8 +2,6 @@ import markdown from '@wcj/markdown-to-html'; import rehypeDocument from 'rehype-document'; import remarkGemoji from 'remark-gemoji'; import rehypeRaw from 'rehype-raw'; -import rehypeAttrs from 'rehype-attr'; -import rehypeKatex from 'rehype-katex'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; import rehypeSlug from 'rehype-slug'; import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs'; @@ -23,8 +21,11 @@ export function create(str = '', options = {}) { let title = str.match(/[^===]+(?=[===])/g) || []; let description = str.match(/\n==={1,}\n+([\s\S]*?)\n/g) || []; title = title[0] || ''; - description = (description[0] || '').replace(/^\n[=\n]+/, '').replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1').replace(/\n/, ''); - const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & `: '' + description = (description[0] || '') + .replace(/^\n[=\n]+/, '') + .replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1') + .replace(/\n/, ''); + const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & ` : ''; const mdOptions = { showLineNumbers: false, hastNode: false, @@ -32,28 +33,29 @@ export function create(str = '', options = {}) { rehypePlugins: [ rehypeSlug, rehypeAutolinkHeadings, - [rehypeDocument, { + [ + rehypeDocument, + { title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`, - css: [ ...options.css ], - link: [ - {rel: 'icon', href: favicon, type: 'image/svg+xml'} - ], + css: [...options.css], + link: [{ rel: 'icon', href: favicon, type: 'image/svg+xml' }], meta: [ { description: `${description}为开发人员分享快速参考备忘单。` }, - { keywords: `Quick,Reference,cheatsheet,${!options.isHome && options.filename || ''}` } - ] - }] + { keywords: `Quick,Reference,cheatsheet,${(!options.isHome && options.filename) || ''}` }, + ], + }, + ], ], filterPlugins: (type, plugins = []) => { if (type === 'rehype') { - const dt = plugins.filter(plug => { + const dt = plugins.filter((plug) => { return /(rehypeRaw)/.test(plug.name) ? false : true; }); // 放在 rehypeDocument 前面 - dt.unshift(rehypeRaw) + dt.unshift(rehypeRaw); return dt; } - return plugins + return plugins; }, rewrite: (node, index, parent) => { rehypePreviewHTML(node, parent); @@ -64,10 +66,10 @@ export function create(str = '', options = {}) { rehypeUrls(node); if (node.children) { if (node.type === 'element' && node.tagName === 'body') { - const tocsData = getTocsTree([ ...node.children ]); + const tocsData = getTocsTree([...node.children]); if (!options.isHome) { const tocsMenus = getTocsTitleNode([...tocsData]); - node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus)) + node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus)); } else { node.children = tocsData; } @@ -76,9 +78,8 @@ export function create(str = '', options = {}) { node.children.push(anchorPoint()); } } - } - } - + }, + }; return markdown(str, mdOptions); -} \ No newline at end of file +} diff --git a/scripts/index.mjs b/scripts/index.mjs index 2fdd5bc..a314433 100644 --- a/scripts/index.mjs +++ b/scripts/index.mjs @@ -11,15 +11,20 @@ export const CSS_OUTPUT_PATH = path.resolve(OUTOUT, 'style/style.css'); export async function createHTML(files = [], num = 0) { const dataFile = files[num]; if (!dataFile) { - console.log(' \n done!\n') + console.log(' \n done!\n'); return; } ++num; - const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path.relative(process.cwd(), dataFile.path).replace(path.sep, '/')}`; - + const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path + .relative(process.cwd(), dataFile.path) + .replace(path.sep, '/')}`; + const mdstr = await fs.readFile(dataFile.path); const htmlPath = path.relative(DOCS, dataFile.path); - const outputHTMLPath = path.resolve(OUTOUT, 'docs', htmlPath).replace(/README.md$/i, 'index.html').replace(/.md$/, '.html'); + const outputHTMLPath = path + .resolve(OUTOUT, 'docs', htmlPath) + .replace(/README.md$/i, 'index.html') + .replace(/.md$/, '.html'); await fs.ensureDir(path.dirname(outputHTMLPath)); @@ -28,18 +33,18 @@ export async function createHTML(files = [], num = 0) { isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)), githubURL, homePath: path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'index.html')), - css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)] + css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)], }); await fs.writeFile(outputHTMLPath, html); - console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`) - createHTML(files, num) + console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`); + createHTML(files, num); } export async function run() { await fs.ensureDir(OUTOUT); await fs.emptyDir(OUTOUT); await fs.ensureDir(path.dirname(CSS_OUTPUT_PATH)); - await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH) + await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH); const files = await recursiveReaddirFiles(process.cwd(), { ignored: /\/(node_modules|\.git)/, exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/, diff --git a/scripts/nodes/header.mjs b/scripts/nodes/header.mjs index 68f4e35..2689f6f 100644 --- a/scripts/nodes/header.mjs +++ b/scripts/nodes/header.mjs @@ -3,25 +3,25 @@ import { github, editor } from './logo.mjs'; import { getSVGNode } from '../utils/getSVGNode.mjs'; import { darkMode } from '../utils/darkMode.mjs'; -const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg') +const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg'); export function header({ homePath, githubURL = '' }) { - const svgNode = getSVGNode(ICONS_PATH) + const svgNode = getSVGNode(ICONS_PATH); const data = [ { menu: true, href: githubURL, target: '__blank', label: '编辑', - children: [editor] + children: [editor], }, ...darkMode(), { menu: true, href: 'https://github.com/jaywcjlove/reference', target: '__blank', - children: [github] - } - ] + children: [github], + }, + ]; return { type: 'element', tagName: 'nav', @@ -51,10 +51,8 @@ export function header({ homePath, githubURL = '' }) { properties: { class: ['title'], }, - children: [ - { type: 'text', value: 'Quick Reference' } - ] - } + children: [{ type: 'text', value: 'Quick Reference' }], + }, ], }, { @@ -75,29 +73,28 @@ export function header({ homePath, githubURL = '' }) { type: 'element', tagName: 'span', properties: {}, - children: label ? [ - { type: 'text', value: label } - ] : [] - } - ] - } + children: label ? [{ type: 'text', value: label }] : [], + }, + ], + }; if (label) { - childs.children = [...children, { - type: 'element', - tagName: 'span', - properties: {}, - children: [ - { type: 'text', value: label } - ] - }]; + childs.children = [ + ...children, + { + type: 'element', + tagName: 'span', + properties: {}, + children: [{ type: 'text', value: label }], + }, + ]; } else { childs.children = children; } - return childs + return childs; }), }, ], - } + }, ], }; -} \ No newline at end of file +} diff --git a/scripts/nodes/htmlTagAddAttri.mjs b/scripts/nodes/htmlTagAddAttri.mjs index 691bb2d..e87332f 100644 --- a/scripts/nodes/htmlTagAddAttri.mjs +++ b/scripts/nodes/htmlTagAddAttri.mjs @@ -5,4 +5,4 @@ export function htmlTagAddAttri(node, { isHome }) { if (node && node.tagName === 'body' && isHome) { node.properties.class = ['home']; } -} \ No newline at end of file +} diff --git a/scripts/nodes/logo.mjs b/scripts/nodes/logo.mjs index 40c3b13..b962fc5 100644 --- a/scripts/nodes/logo.mjs +++ b/scripts/nodes/logo.mjs @@ -3,38 +3,38 @@ export const logo = [ type: 'element', tagName: 'svg', properties: { - viewBox: "0 0 24 24", - fill: "none", - xmlns: "http://www.w3.org/2000/svg", - height: "1em", - width: "1em" + viewBox: '0 0 24 24', + fill: 'none', + xmlns: 'http://www.w3.org/2000/svg', + height: '1em', + width: '1em', }, children: [ { type: 'element', tagName: 'path', properties: { - opacity: ".5", - d: "m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z", - fill: "white" + opacity: '.5', + d: 'm21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z', + fill: 'white', }, }, { type: 'element', tagName: 'path', properties: { - d: "M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" , - fill: "#cbd5e1" + d: 'M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z', + fill: '#cbd5e1', }, }, { type: 'element', tagName: 'path', properties: { - d: "M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z", - fill: "#292D32" + d: 'M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z', + fill: '#292D32', }, - } + }, ], }, { @@ -43,48 +43,45 @@ export const logo = [ properties: { class: ['title'], }, - children: [ - { type: 'text', value: 'Quick Reference' } - ] - } + children: [{ type: 'text', value: 'Quick Reference' }], + }, ]; export const github = { type: 'element', tagName: 'svg', properties: { - viewBox: "0 0 16 16", - fill: "currentColor", - height: "1em", - width: "1em" + viewBox: '0 0 16 16', + fill: 'currentColor', + height: '1em', + width: '1em', }, children: [ { type: 'element', tagName: 'path', properties: { - d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z", + d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z', }, }, ], -} - +}; export const editor = { type: 'element', tagName: 'svg', properties: { - viewBox: "0 0 36 36", - fill: "currentColor", - height: "1em", - width: "1em" + viewBox: '0 0 36 36', + fill: 'currentColor', + height: '1em', + width: '1em', }, children: [ { type: 'element', tagName: 'path', properties: { - d: "m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z", + d: 'm33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z', }, }, { @@ -92,8 +89,8 @@ export const editor = { tagName: 'path', properties: { fill: 'none', - d: "M0 0h36v36H0z", + d: 'M0 0h36v36H0z', }, }, ], -} +}; diff --git a/scripts/style.css b/scripts/style.css index 58b5102..8ae82d5 100644 --- a/scripts/style.css +++ b/scripts/style.css @@ -6,7 +6,8 @@ body { tab-size: 4; margin: 0; line-height: inherit; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji'; } [data-color-mode*='dark'] body .dark { @@ -22,7 +23,8 @@ body { display: none; } -[data-color-mode*='light'], [data-color-mode*='light'] body { +[data-color-mode*='light'], +[data-color-mode*='light'] body { --color-prettylights-syntax-comment: #b1bac3; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #8250df; @@ -42,7 +44,7 @@ body { --color-prettylights-syntax-markup-italic: #24292f; --color-prettylights-syntax-markup-bold: #24292f; --color-prettylights-syntax-markup-deleted-text: #82071e; - --color-prettylights-syntax-markup-deleted-bg: #FFEBE9; + --color-prettylights-syntax-markup-deleted-bg: #ffebe9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; @@ -61,7 +63,7 @@ body { --color-bg-subtle: #f8f9fa; --color-border-default: #d0d7de; --color-border-muted: #ececec94; - --color-neutral-muted: rgba(175,184,193,0.2); + --color-neutral-muted: rgba(175, 184, 193, 0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; @@ -69,7 +71,8 @@ body { --box-shadow: 109 109 109; } -[data-color-mode*='dark'], [data-color-mode*='dark'] body { +[data-color-mode*='dark'], +[data-color-mode*='dark'] body { --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; @@ -111,7 +114,7 @@ body { --color-neutral-muted: rgb(51 65 85/0.3); --color-accent-fg: #58a6ff; --color-accent-emphasis: #1f6feb; - --color-attention-subtle: rgba(187,128,9,0.15); + --color-attention-subtle: rgba(187, 128, 9, 0.15); --color-danger-fg: #f85149; --box-shadow: 0 0 0; } @@ -121,18 +124,39 @@ body { background-color: var(--color-canvas-default); } -*, ::before, ::after { +*, +::before, +::after { box-sizing: border-box; } -blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { margin: 0; } -h1,h2,h3,h4,h5,h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-size: inherit; - font-weight: inherit + font-weight: inherit; } -ol, ul, menu { +ol, +ul, +menu { list-style: none; margin: 0; padding: 0; @@ -145,12 +169,16 @@ pur { color: var(--color-prettylights-syntax-entity); } -.wrap-body > p > code, .wrap-body > ul li > code, .wrap-body tbody td code { +.wrap-body > p > code, +.wrap-body > ul li > code, +.wrap-body tbody td code { --text-opacity: 1; - color: rgb(5 150 105/var(--text-opacity)); + color: rgb(5 150 105 / var(--text-opacity)); } -.wrap-body em, .wrap-body sup, .wrap-body sub { +.wrap-body em, +.wrap-body sup, +.wrap-body sub { color: var(--color-fg-subtle); } @@ -158,13 +186,16 @@ table { width: 100%; text-indent: 0; border-color: inherit; - border-collapse: collapse + border-collapse: collapse; } table td:first-child { white-space: nowrap; } -table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>del>code, ul.shortcuts li > code, kbd { +table.shortcuts td:not(:last-child) > code, +table.shortcuts td:not(:last-child) > del > code, +ul.shortcuts li > code, +kbd { background-color: var(--color-neutral-muted); color: var(--color-fg-subtle); box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000; @@ -173,21 +204,23 @@ table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>de border: 1px solid var(--color-border-muted); border-color: var(--color-border-default); line-height: 1.5; - font-family: Arial,Helvetica,sans-serif; + font-family: Arial, Helvetica, sans-serif; font-size: 12px; display: inline-block; border-radius: 3px; } -table tr+tr { +table tr + tr { border-top: solid 1px #ececec94; border-color: var(--color-border-muted); } -table td, table th { +table td, +table th { padding: 9px 14px; text-align: left; } -table tr th:last-child, table tr td:last-child { +table tr th:last-child, +table tr td:last-child { text-align: right; } @@ -199,13 +232,15 @@ table thead th { table thead { display: none; - border-bottom: solid 1px rgba(85,102,119,0.3); + border-bottom: solid 1px rgba(85, 102, 119, 0.3); } -table td:first-child>code { +table td:first-child > code { --text-opacity: 1; - color: rgb(5 150 105/var(--text-opacity)); + color: rgb(5 150 105 / var(--text-opacity)); } -table td > del, table td:first-child > del > code, .wrap-body p > del > code { +table td > del, +table td:first-child > del > code, +.wrap-body p > del > code { color: var(--color-danger-fg); } @@ -213,16 +248,19 @@ table.show-header thead { display: table-header-group; } -table.style-list td + td, table.style-list-arrow td + td { +table.style-list td + td, +table.style-list-arrow td + td { padding-top: 0 !important; } -table.style-list td, table.style-list-arrow td { +table.style-list td, +table.style-list-arrow td { display: block; text-align: left !important; } -table.style-list-arrow td:first-child::before, ul.style-arrow li:before { +table.style-list-arrow td:first-child::before, +ul.style-arrow li:before { content: ''; display: inline-block; width: 0px; @@ -233,8 +271,9 @@ table.style-list-arrow td:first-child::before, ul.style-arrow li:before { border-bottom: 5px solid transparent; } -tt, code { - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; +tt, +code { + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; font-size: 1em; } pre:only-child { @@ -244,7 +283,7 @@ pre:only-child { pre { margin-top: 0; margin-bottom: 0; - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; word-wrap: normal; line-height: 1.5; overflow: hidden; @@ -254,8 +293,9 @@ pre { .max-container a { color: rgb(2 132 199/1); } -.max-container a, .max-container a:visited { - background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e); +.max-container a, +.max-container a:visited { + background-image: linear-gradient(transparent, transparent 6px, #34495e 6px, #34495e); background-position: bottom; background-size: 100% 6px; background-repeat: repeat-x; @@ -265,7 +305,8 @@ pre { text-decoration-color: transparent; } -.max-container a:hover, .max-container a:visited:hover{ +.max-container a:hover, +.max-container a:visited:hover { text-decoration-color: #10b981; } @@ -276,7 +317,8 @@ pre { padding: 0.75rem; } -body.home .h1wrap-body, body.home .h1wrap .wrap-body { +body.home .h1wrap-body, +body.home .h1wrap .wrap-body { max-width: 940px; margin-left: auto; margin-right: auto; @@ -294,7 +336,7 @@ body.home .h2wrap > h2::after { width: 110%; margin-top: 0.5rem; --bg-opacity: 1; - background-color: rgb(30 41 59/var(--bg-opacity)); + background-color: rgb(30 41 59 / var(--bg-opacity)); } body.home .h1wrap .wrap-body p + p { margin-top: 1.6rem; @@ -311,8 +353,9 @@ body:not(.home) .h2wrap > .wrap-body > ul { body.home .h1wrap p { text-align: left; } -body.home .max-container a.home-button:hover, body.home .max-container a.home-button:visited:hover { - transition: all .3s; +body.home .max-container a.home-button:hover, +body.home .max-container a.home-button:visited:hover { + transition: all 0.3s; text-decoration-color: #fff; color: #fff; } @@ -320,16 +363,16 @@ body.home .max-container a.home-button:hover, body.home .max-container a.home-bu .home-card { display: grid; gap: 2rem; - grid-template-columns: repeat(2,minmax(0,1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-color-mode*='light'] body .home-card a { --text-opacity: 0.75; - color: rgb(15 19 24/var(--text-opacity)); + color: rgb(15 19 24 / var(--text-opacity)); } [data-color-mode*='light'] body .home-card a:hover { --text-opacity: 0.85; - color: rgb(241 245 249/var(--text-opacity)) !important; + color: rgb(241 245 249 / var(--text-opacity)) !important; } .home-card a { display: flex; @@ -339,13 +382,13 @@ body.home .max-container a.home-button:hover, body.home .max-container a.home-bu border-radius: 0.5rem; padding: 0rem 1rem; height: 4rem; - box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05); + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); color: var(--color-fg-default); --text-opacity: 0.75; - color: rgb(241 245 249/var(--text-opacity)); + color: rgb(241 245 249 / var(--text-opacity)); --bg-opacity: 0.5; - background-color: rgb(62 69 72/var(--bg-opacity)); - transition: all .3s; + background-color: rgb(62 69 72 / var(--bg-opacity)); + transition: all 0.3s; text-decoration: none; } .home-card a:hover { @@ -374,23 +417,26 @@ a.home-button { margin-left: 1rem; margin-right: 1rem; --bg-opacity: 1; - background-color: rgb(10 147 102/var(--bg-opacity)); + background-color: rgb(10 147 102 / var(--bg-opacity)); --text-opacity: 1; - color: rgb(203 213 225/var(--text-opacity)); + color: rgb(203 213 225 / var(--text-opacity)); } a.home-button:hover { --bg-opacity: 0.5; } a.text-grey { --bg-opacity: 1; - background-color: rgb(56 76 109/var(--bg-opacity)); + background-color: rgb(56 76 109 / var(--bg-opacity)); } .header-nav .max-container { padding: 1.8rem 1.8rem 0; } -.header-nav .max-container, .header-nav .logo, .header-nav .menu, .header-nav .menu a { +.header-nav .max-container, +.header-nav .logo, +.header-nav .menu, +.header-nav .menu a { display: flex; justify-content: space-between; align-items: center; @@ -411,17 +457,19 @@ a.text-grey { font-size: 40px; } -.header-nav .menu a:hover, .header-nav .menu button:hover { +.header-nav .menu a:hover, +.header-nav .menu button:hover { background-color: var(--color-neutral-muted); } -.header-nav .menu a, .header-nav .menu button { +.header-nav .menu a, +.header-nav .menu button { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 9999px; - transition: all .3s; + transition: all 0.3s; border: 0; } @@ -443,7 +491,8 @@ a.text-grey { font-size: 18px; } -.header-nav a, .header-nav a:visited { +.header-nav a, +.header-nav a:visited { color: var(--color-fg-default); line-height: 1.2; gap: 0.3rem; @@ -491,7 +540,7 @@ a.text-grey { max-height: 100vh; overflow: auto; background-color: var(--color-canvas-subtle); - box-shadow: 0 8px 24px rgba(var(--box-shadow)/0.2); + box-shadow: 0 8px 24px rgba(var(--box-shadow) / 0.2); } .menu-tocs > .menu-btn { border: 1px solid var(--color-border-default); @@ -505,7 +554,7 @@ a.text-grey { } .menu-tocs > .menu-modal { width: 260px; - position:absolute; + position: absolute; display: none; margin-left: -1rem; } @@ -532,7 +581,9 @@ a.text-grey { .menu-tocs > .menu-modal a.leve3 { padding-left: 1.2rem; } -.menu-tocs > .menu-modal a.leve4, .menu-tocs > .menu-modal a.leve5, .menu-tocs > .menu-modal a.leve6 { +.menu-tocs > .menu-modal a.leve4, +.menu-tocs > .menu-modal a.leve5, +.menu-tocs > .menu-modal a.leve6 { padding-left: 2.1rem; } @@ -544,7 +595,8 @@ a.text-grey { font-size: 30px; line-height: 1.2; font-weight: 200; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; margin-top: 0; } @@ -555,7 +607,8 @@ a.text-grey { color: rgb(148 163 184/1); } -body:not(.home) .h2wrap > h2 a::after, body:not(.home) .h3wrap > h3 a::after { +body:not(.home) .h2wrap > h2 a::after, +body:not(.home) .h3wrap > h3 a::after { content: '#'; padding-right: 0.5rem; color: rgb(16 185 129/1); @@ -595,7 +648,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { letter-spacing: 0.05em; } -.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p { +.wrap-header.h3wrap > .wrap-body p, +.wrap-header.h4wrap > .wrap-body p { margin: 0px; width: 100%; padding-left: 1rem; @@ -610,7 +664,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { background-color: var(--color-bg-subtle); color: rgb(30 41 59/0); content: '-'; - line-height: 1.50rem; + line-height: 1.5rem; top: 0; position: absolute; left: 0px; @@ -648,7 +702,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { .h4wrap > .wrap-body ul, .h4wrap > .wrap-body ol, .h4wrap > .wrap-body dl, - .h3wrap > .wrap-body ul, .h3wrap > .wrap-body ol, .h3wrap > .wrap-body dl { @@ -656,7 +709,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { margin-bottom: 0.5rem; display: grid; list-style-position: outside; - grid-template-columns: repeat(1,minmax(0,1fr)); + grid-template-columns: repeat(1, minmax(0, 1fr)); } .h4wrap > .wrap-body ul + hr { @@ -678,7 +731,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { border-bottom: solid 1px var(--color-border-muted); } -.h2wrap-body ul:not(.style-none)>li::before { +.h2wrap-body ul:not(.style-none) > li::before { content: ''; position: absolute; display: inline-block; @@ -714,13 +767,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { width: 1.5rem; text-align: center; font-size: 0.875rem; - line-height: 1.30rem; + line-height: 1.3rem; border: 2px solid #228e6c; top: -1px; left: -14px; } .h2wrap-body ul.style-timeline li:last-child { - border-image: linear-gradient(to bottom,#46c69e96,rgba(0,0,0,0)) 1 100%; + border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%; } .h2wrap-body ul.style-timeline li { border-bottom: 0 !important; @@ -763,7 +816,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { border-bottom: 0; } -.h3wrap hr, .h3wrap-body hr { +.h3wrap hr, +.h3wrap-body hr { border-width: 0; border-style: solid; border-color: #e5e7eb; @@ -772,7 +826,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { .h2wrap-body { font-size: 0.925rem; - grid-template-columns: repeat(3,minmax(0,1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); flex-direction: column; } @@ -784,7 +838,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { border-radius: 0.5rem; padding-top: 1.5rem; margin-bottom: 1rem; - box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3); + box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3); } .h2wrap-body > .wrap .wrap-body > *:last-child { @@ -801,33 +855,87 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { overflow-x: auto; } -.cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) !important; } -.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } -.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } -.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } -.cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; } -.cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } -.cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) !important; } -.cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) !important; } -.cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) !important; } -.col-span-2 { grid-column: span 2/span 2; } -.col-span-3 { grid-column: span 3/span 3; } -.col-span-4 { grid-column: span 4/span 4; } -.col-span-5 { grid-column: span 5/span 5; } -.col-span-6 { grid-column: span 6/span 6; } -.col-span-7 { grid-column: span 7/span 7; } -.col-span-8 { grid-column: span 8/span 8; } -.col-span-9 { grid-column: span 9/span 9; } -.col-span-10 { grid-column: span 10/span 10; } -.row-span-2 { grid-row: span 2/span 2; } -.row-span-3 { grid-row: span 3/span 3; } -.row-span-4 { grid-row: span 4/span 4; } -.row-span-5 { grid-row: span 5/span 5; } -.row-span-6 { grid-row: span 6/span 6; } -.row-span-7 { grid-row: span 7/span 7; } -.row-span-8 { grid-row: span 8/span 8; } -.row-span-9 { grid-row: span 9/span 9; } -.row-span-10 { grid-row: span 10/span 10; } +.cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; +} +.cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} +.cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; +} +.cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; +} +.cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; +} +.cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; +} +.cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)) !important; +} +.cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)) !important; +} +.cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)) !important; +} +.col-span-2 { + grid-column: span 2 / span 2; +} +.col-span-3 { + grid-column: span 3 / span 3; +} +.col-span-4 { + grid-column: span 4 / span 4; +} +.col-span-5 { + grid-column: span 5 / span 5; +} +.col-span-6 { + grid-column: span 6 / span 6; +} +.col-span-7 { + grid-column: span 7 / span 7; +} +.col-span-8 { + grid-column: span 8 / span 8; +} +.col-span-9 { + grid-column: span 9 / span 9; +} +.col-span-10 { + grid-column: span 10 / span 10; +} +.row-span-2 { + grid-row: span 2 / span 2; +} +.row-span-3 { + grid-row: span 3 / span 3; +} +.row-span-4 { + grid-row: span 4 / span 4; +} +.row-span-5 { + grid-row: span 5 / span 5; +} +.row-span-6 { + grid-row: span 6 / span 6; +} +.row-span-7 { + grid-row: span 7 / span 7; +} +.row-span-8 { + grid-row: span 8 / span 8; +} +.row-span-9 { + grid-row: span 9 / span 9; +} +.row-span-10 { + grid-row: span 10 / span 10; +} .wrap-text { white-space: pre-wrap !important; @@ -850,7 +958,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { opacity: 0; border-radius: 0.5rem; z-index: 1; - transition: opacity .6s; + transition: opacity 0.6s; line-height: 1.5; width: 220px; @@ -859,7 +967,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { margin-left: -110px; } .tooltip .tooltiptext::after { - content: ""; + content: ''; position: absolute; top: 100%; left: 50%; @@ -875,17 +983,34 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { } /* 代码高亮 Start */ -.token.comment, .token.prolog, .token.doctype, .token.cdata { +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { color: var(--color-prettylights-syntax-comment); } -.token.namespace { opacity: 0.7; } -.token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted { +.token.namespace { + opacity: 0.7; +} +.token.tag, +.token.selector, +.token.constant, +.token.symbol, +.token.deleted { color: var(--color-prettylights-syntax-entity-tag); } .token.maybe-class-name { color: var(--color-prettylights-syntax-entity); } -.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin { +.token.property-access, +.token.operator, +.token.boolean, +.token.number, +.token.selector .token.class, +.token.attr-name, +.token.string, +.token.char, +.token.builtin { color: var(--color-prettylights-syntax-constant); } .token.deleted { @@ -910,13 +1035,23 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { .token.variable { color: var(--color-prettylights-syntax-constant); } -.token.entity, .token.url, .language-css .token.string, .style .token.string { +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { color: var(--color-prettylights-syntax-string); } -.token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name { +.token.color, +.token.atrule, +.token.attr-value, +.token.function, +.token.class-name { color: var(--color-prettylights-syntax-string); } -.token.rule, .token.regex, .token.important, .token.keyword { +.token.rule, +.token.regex, +.token.important, +.token.keyword { color: var(--color-prettylights-syntax-keyword); } .token.module { @@ -941,9 +1076,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { color: var(--color-prettylights-syntax-variable); } -.token.important, .token.bold { font-weight: bold; } -.token.italic { font-style: italic; } -.token.entity { cursor: help; } +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} +.token.entity { + cursor: help; +} .highlight-line { background-color: var(--color-neutral-muted); @@ -983,7 +1125,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { .header-nav .max-container { padding-top: 0.85rem; } - .header-nav .menu a, .header-nav .menu button { + .header-nav .menu a, + .header-nav .menu button { padding: 0.2rem 0.3rem; } .wrap-header.h1wrap > h1 { @@ -1026,11 +1169,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { table.auto-wrap thead { display: none; } - table.auto-wrap td, table.auto-wrap th { + table.auto-wrap td, + table.auto-wrap th { display: block; text-align: left !important; } - table td + td, table th + th { + table td + td, + table th + th { padding-top: 0 !important; } table td:first-child { @@ -1043,6 +1188,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after { @media (min-width: 768px) { .home-card { - grid-template-columns: repeat(4,minmax(0,1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); } } diff --git a/scripts/utils/anchorPoint.mjs b/scripts/utils/anchorPoint.mjs index 5d67447..1c988ee 100644 --- a/scripts/utils/anchorPoint.mjs +++ b/scripts/utils/anchorPoint.mjs @@ -1,4 +1,3 @@ - const scripts = ` if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) { window.onhashchange = function () { @@ -43,9 +42,11 @@ export function anchorPoint() { return { type: 'element', tagName: 'script', - children: [{ - type: 'text', - value: scripts, - }] - } -} \ No newline at end of file + children: [ + { + type: 'text', + value: scripts, + }, + ], + }; +} diff --git a/scripts/utils/childs.mjs b/scripts/utils/childs.mjs index f79f833..614a2f0 100644 --- a/scripts/utils/childs.mjs +++ b/scripts/utils/childs.mjs @@ -1,4 +1,3 @@ - export function getChilds(data = [], level, result = []) { for (let i = 1; i <= data.length; i++) { const titleNum = Number(data[i]?.tagName?.replace(/^h/, '')); diff --git a/scripts/utils/darkMode.mjs b/scripts/utils/darkMode.mjs index 7407809..c55371f 100644 --- a/scripts/utils/darkMode.mjs +++ b/scripts/utils/darkMode.mjs @@ -21,27 +21,27 @@ const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets'); export function darkMode() { const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`); const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`); - const sunNode = getSVGNode(iconSunPath) - const moonNode = getSVGNode(iconMoonPath) + const sunNode = getSVGNode(iconSunPath); + const moonNode = getSVGNode(iconMoonPath); return [ { type: 'element', tagName: 'button', properties: { id: 'darkMode', - type: 'button' + type: 'button', }, - children: [ - ...sunNode, - ...moonNode - ] - }, { + children: [...sunNode, ...moonNode], + }, + { type: 'element', tagName: 'script', - children: [{ - type: 'text', - value: scripts, - }] - } + children: [ + { + type: 'text', + value: scripts, + }, + ], + }, ]; } diff --git a/scripts/utils/getSVGNode.mjs b/scripts/utils/getSVGNode.mjs index 9d6d424..fbd0975 100644 --- a/scripts/utils/getSVGNode.mjs +++ b/scripts/utils/getSVGNode.mjs @@ -1,24 +1,24 @@ import fs from 'fs-extra'; import path from 'path'; import rehypeParse from 'rehype-parse'; -import {unified} from 'unified'; +import { unified } from 'unified'; import { VFile } from 'vfile'; -export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets') +export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets'); export function getSVGNode(iconPath, space = 'svg') { const svgStr = fs.readFileSync(iconPath); - const processor = unified().use(rehypeParse,{ fragment: true, space }) + const processor = unified().use(rehypeParse, { fragment: true, space }); const file = new VFile(); file.value = svgStr.toString(); const hastNode = processor.runSync(processor.parse(file), file); - return hastNode.children || [] + return hastNode.children || []; } export function getVNode(str = '', space = 'html') { - const processor = unified().use(rehypeParse,{ fragment: true, space }) + const processor = unified().use(rehypeParse, { fragment: true, space }); const file = new VFile(); file.value = str.toString(); const hastNode = processor.runSync(processor.parse(file), file); - return hastNode.children || [] -} \ No newline at end of file + return hastNode.children || []; +} diff --git a/scripts/utils/getTocsTree.mjs b/scripts/utils/getTocsTree.mjs index fd44690..dc45fba 100644 --- a/scripts/utils/getTocsTree.mjs +++ b/scripts/utils/getTocsTree.mjs @@ -1,4 +1,5 @@ import path from 'path'; +import { getCodeString } from 'rehype-rewrite'; import { panelAddNumber } from './panelAddNumber.mjs'; import { getChilds, getHeader } from './childs.mjs'; import { ICONS_PATH, getSVGNode } from './getSVGNode.mjs'; @@ -8,14 +9,15 @@ export const titleNum = (tagName = '') => Number(tagName.replace(/^h/, '')); export function getTocsTitleNode(arr = [], result = []) { arr.forEach(({ tagName, type, properties, children }) => { if (/^h[23456]/.test(tagName)) { - const num = titleNum(tagName) - const props = { 'aria-hidden': "true", class: `leve${num} tocs-link`, href: '#' + (properties.id || '') } - result.push({ tagName: 'a', type, properties: props, children: (children || []).filter(m => m.type === 'text') }) + const num = titleNum(tagName); + const props = { 'aria-hidden': 'true', class: `leve${num} tocs-link`, href: '#' + (properties.id || '') }; + const title = getCodeString(children || []); + result.push({ tagName: 'a', type, properties: props, children: [{ type: 'text', value: title || ' ' }] }); } else if (children?.length > 0) { - result = result.concat(getTocsTitleNode(children)) + result = result.concat(getTocsTitleNode(children)); } }); - return result + return result; } export function addTocsInWarp(tocsData = [], menuData, isDone = false) { @@ -24,14 +26,14 @@ export function addTocsInWarp(tocsData = [], menuData, isDone = false) { isDone = true; } if (!isDone && item.children) { - item.children = addTocsInWarp([...item.children], menuData, isDone) + item.children = addTocsInWarp([...item.children], menuData, isDone); } - return item + return item; }); if (isDone) { childs.splice(1, 0, menuData); } - return childs + return childs; } export const getTocsTitleNodeWarpper = (children = []) => { @@ -50,10 +52,7 @@ export const getTocsTitleNodeWarpper = (children = []) => { properties: { class: 'menu-btn', }, - children: [ - // { type: 'text', value: 'menu' } - ...svgNode - ] + children: [...svgNode], }, { type: 'element', @@ -61,16 +60,16 @@ export const getTocsTitleNodeWarpper = (children = []) => { properties: { class: 'menu-modal', }, - children: children - } - ] - } -} + children: children, + }, + ], + }; +}; /** Markdown 文档转成树形结构 */ export function getTocsTree(arr = [], result = []) { const data = panelAddNumber(arr); - + let n = 0; let level = -1; @@ -87,7 +86,7 @@ export function getTocsTree(arr = [], result = []) { if (level === 1) wrapCls.push('max-container'); const wrapStyle = toc.properties['wrap-style']; - delete toc.properties['wrap-style'] + delete toc.properties['wrap-style']; const wrapClass = toc.properties['wrap-class']; if (wrapClass) wrapCls.push(wrapClass); delete toc.properties['wrap-class']; @@ -106,26 +105,24 @@ export function getTocsTree(arr = [], result = []) { type: 'element', tagName: 'div', properties: { class: 'wrap-body' }, - children: [ - ...header - ], - } + children: [...header], + }, ], - } + }, ], - } + }; const childs = getChilds([...data.slice(n + 1)], level); const resultChilds = getTocsTree(childs); if (resultChilds.length > 0) { const bodyStyle = toc.properties['body-style']; - delete toc.properties['body-style'] + delete toc.properties['body-style']; const bodyClass = toc.properties['body-class']; - delete toc.properties['body-class'] + delete toc.properties['body-class']; panle.children = panle.children.concat({ type: 'element', tagName: 'div', properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle }, - children: [...resultChilds] + children: [...resultChilds], }); } result.push(panle); diff --git a/scripts/utils/homeCardIcons.mjs b/scripts/utils/homeCardIcons.mjs index 2fad267..2172039 100644 --- a/scripts/utils/homeCardIcons.mjs +++ b/scripts/utils/homeCardIcons.mjs @@ -15,16 +15,16 @@ export function homeCardIcons(node, parent, isHome) { type: 'element', tagName: 'span', children: child.children, - } + }; if (iconExist) { const svgNode = getSVGNode(iconPath); - child.children = [ ...svgNode, labelNode ]; + child.children = [...svgNode, labelNode]; } else { const svgNode = getSVGNode(iconDefaultPath); - child.children = [ ...svgNode, labelNode ]; + child.children = [...svgNode, labelNode]; } } - return child - }) + return child; + }); } -} \ No newline at end of file +} diff --git a/scripts/utils/panelAddNumber.mjs b/scripts/utils/panelAddNumber.mjs index 7a781d2..697709b 100644 --- a/scripts/utils/panelAddNumber.mjs +++ b/scripts/utils/panelAddNumber.mjs @@ -1,4 +1,3 @@ - /** 标记 Number */ export function panelAddNumber(arr = [], result = []) { let n = 0; @@ -10,9 +9,9 @@ export function panelAddNumber(arr = [], result = []) { level = titleNum; } if (toc) { - result.push({ ...toc, number: level }) + result.push({ ...toc, number: level }); } n++; } - return result -} \ No newline at end of file + return result; +} diff --git a/scripts/utils/rehypePreviewHTML.mjs b/scripts/utils/rehypePreviewHTML.mjs index 34bc4f4..ce5b5f4 100644 --- a/scripts/utils/rehypePreviewHTML.mjs +++ b/scripts/utils/rehypePreviewHTML.mjs @@ -5,10 +5,9 @@ export function rehypePreviewHTML(node, parent) { if (node.type === 'element' && node.tagName === 'pre' && node.properties?.className?.includes('language-html')) { const child = node.children[0]; if (child?.tagName === 'code' && child.data?.meta === 'preview') { - const code = getCodeString(node.children) - const vnode = getVNode(code || '') - node.children = vnode + const code = getCodeString(node.children); + const vnode = getVNode(code || ''); + node.children = vnode; } } - -} \ No newline at end of file +} diff --git a/scripts/utils/rehypeTitle.mjs b/scripts/utils/rehypeTitle.mjs index d88a448..1f21320 100644 --- a/scripts/utils/rehypeTitle.mjs +++ b/scripts/utils/rehypeTitle.mjs @@ -9,10 +9,10 @@ export function rehypeTitle(node, iconName) { const iconExist = fs.existsSync(iconPath); if (iconExist) { const svgNode = getSVGNode(iconPath); - node.children = [ ...svgNode, ...node.children ]; + node.children = [...svgNode, ...node.children]; } else { const svgNode = getSVGNode(iconDefaultPath); - node.children = [ ...svgNode, ...node.children ]; + node.children = [...svgNode, ...node.children]; } } -} \ No newline at end of file +} diff --git a/scripts/utils/rehypeUrls.mjs b/scripts/utils/rehypeUrls.mjs index 36a0eb4..ea2aea9 100644 --- a/scripts/utils/rehypeUrls.mjs +++ b/scripts/utils/rehypeUrls.mjs @@ -1,6 +1,11 @@ export function rehypeUrls(node) { - if (node.type === 'element' && node.properties?.href && /.md/.test(node.properties.href) && !/^(https?:\/\/)/.test(node.properties.href)) { + if ( + node.type === 'element' && + node.properties?.href && + /.md/.test(node.properties.href) && + !/^(https?:\/\/)/.test(node.properties.href) + ) { let href = node.properties.href; node.properties.href = href.replace(/([^\.\/\\]+)\.(md|markdown)/gi, '$1.html'); } -} \ No newline at end of file +} diff --git a/scripts/utils/tooltips.mjs b/scripts/utils/tooltips.mjs index ba832d6..e45f0f5 100644 --- a/scripts/utils/tooltips.mjs +++ b/scripts/utils/tooltips.mjs @@ -1,15 +1,15 @@ /** * 配置 tooltips 注释 - * + * * ```markdown * - [超链接有 tooltips 提示](#1xx-information) _Tooltips 展示内容_ * ``` - * + * * 上面示例：将 “Tooltips 展示内容” 放到 前一个 `` dom 节点作为子节点 - * + * * - 注释配置的，前一个节点 A，A 的前一个节点 B * - 如果 A 和 B 其中一个不存在 `tooltips` 将失效 - * - 设置 B 的类名称为 tooltips + * - 设置 B 的类名称为 tooltips */ export function tooltips(node, index, parent) { if (node.type === 'comment' && parent?.children.length > 2) { @@ -17,12 +17,12 @@ export function tooltips(node, index, parent) { const result = []; let recordPos = false; // 记录位置 let tooltipNode = null; - for(let i = childs.length; i > -1; i--) { + for (let i = childs.length; i > -1; i--) { const node = childs[i]; // 记录 tooltip 的开始位置 if (node?.type === 'comment' && node?.value === 'rehype:tooltips') { recordPos = true; - continue + continue; } // 记录 tooltip 的 node if (recordPos && !tooltipNode) { @@ -33,24 +33,24 @@ export function tooltips(node, index, parent) { tooltipNode = node; tooltipNode.properties['class'] = 'tooltiptext'; delete tooltipNode.position; - continue + continue; } } // 将 tooltip 节点，插入到下一个 element 节点的子节点中 if (tooltipNode) { if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) { recordPos = false; - tooltipNode = null + tooltipNode = null; } if (tooltipNode && node?.type === 'element') { recordPos = false; node.properties['class'] = 'tooltip'; node.children.push(tooltipNode); - tooltipNode = null + tooltipNode = null; } } if (!recordPos && node) { - result.push(node) + result.push(node); } } if (parent) { @@ -59,6 +59,4 @@ export function tooltips(node, index, parent) { } } -export function getPreviewNode() { - -} \ No newline at end of file +export function getPreviewNode() {} diff --git a/scripts/watch.mjs b/scripts/watch.mjs index ab91bb2..1456672 100644 --- a/scripts/watch.mjs +++ b/scripts/watch.mjs @@ -3,17 +3,18 @@ import chokidar from 'chokidar'; import { getStat } from 'recursive-readdir-files'; import { run, DOCS, createHTML } from './index.mjs'; -;(async () => { +(async () => { await run(); - const homeMdPath = path.relative(process.cwd(), 'README.md') + const homeMdPath = path.relative(process.cwd(), 'README.md'); const watcher = chokidar.watch([DOCS, homeMdPath], { ignored: /(^|[\/\\])\../, // ignore dotfiles - persistent: true + persistent: true, }); - watcher.on('change', async (path) => { - const stats = await getStat(path) - createHTML([stats]); - }) - .on('error', error => console.log(`Watcher error: ${error}`)) -})(); \ No newline at end of file + watcher + .on('change', async (path) => { + const stats = await getStat(path); + createHTML([stats]); + }) + .on('error', (error) => console.log(`Watcher error: ${error}`)); +})();