diff --git a/scripts/assets/cron.svg b/scripts/assets/cron.svg new file mode 100644 index 0000000..17dbf0e --- /dev/null +++ b/scripts/assets/cron.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/docker.svg b/scripts/assets/docker.svg new file mode 100644 index 0000000..ec5f80c --- /dev/null +++ b/scripts/assets/docker.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/emoji.svg b/scripts/assets/emoji.svg new file mode 100644 index 0000000..26a4699 --- /dev/null +++ b/scripts/assets/emoji.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/find.svg b/scripts/assets/find.svg new file mode 100644 index 0000000..3ddd261 --- /dev/null +++ b/scripts/assets/find.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/scripts/assets/git.svg b/scripts/assets/git.svg new file mode 100644 index 0000000..91ba4f3 --- /dev/null +++ b/scripts/assets/git.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/javascript.svg b/scripts/assets/javascript.svg new file mode 100644 index 0000000..5d6d0c3 --- /dev/null +++ b/scripts/assets/javascript.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/jest.svg b/scripts/assets/jest.svg new file mode 100644 index 0000000..6bdfc64 --- /dev/null +++ b/scripts/assets/jest.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/json.svg b/scripts/assets/json.svg new file mode 100644 index 0000000..12e5978 --- /dev/null +++ b/scripts/assets/json.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/list.svg b/scripts/assets/list.svg new file mode 100644 index 0000000..d52f6f7 --- /dev/null +++ b/scripts/assets/list.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/scripts/assets/markdown.svg b/scripts/assets/markdown.svg new file mode 100644 index 0000000..0facf73 --- /dev/null +++ b/scripts/assets/markdown.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/scripts/assets/npm.svg b/scripts/assets/npm.svg new file mode 100644 index 0000000..436a7e4 --- /dev/null +++ b/scripts/assets/npm.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/quickreference.svg b/scripts/assets/quickreference.svg new file mode 100644 index 0000000..b0ed5e8 --- /dev/null +++ b/scripts/assets/quickreference.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/assets/semver.svg b/scripts/assets/semver.svg new file mode 100644 index 0000000..00d18ea --- /dev/null +++ b/scripts/assets/semver.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/sketch.svg b/scripts/assets/sketch.svg new file mode 100644 index 0000000..05b155a --- /dev/null +++ b/scripts/assets/sketch.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/toml.svg b/scripts/assets/toml.svg new file mode 100644 index 0000000..16870f4 --- /dev/null +++ b/scripts/assets/toml.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/scripts/assets/typescript.svg b/scripts/assets/typescript.svg new file mode 100644 index 0000000..bdb9054 --- /dev/null +++ b/scripts/assets/typescript.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/assets/vscode.svg b/scripts/assets/vscode.svg new file mode 100644 index 0000000..deaa692 --- /dev/null +++ b/scripts/assets/vscode.svg @@ -0,0 +1,4 @@ + + + + diff --git a/scripts/create.mjs b/scripts/create.mjs index 9e12037..65e24a6 100644 --- a/scripts/create.mjs +++ b/scripts/create.mjs @@ -7,6 +7,7 @@ import { footer } from './nodes/footer.mjs'; import { header } from './nodes/header.mjs'; import { rehypeUrls } from './utils/rehypeUrls.mjs'; import { tooltips } from './utils/tooltips.mjs'; +import { homeCardIcons } from './utils/homeCardIcons.mjs'; import { panelAddNumber } from './utils/panelAddNumber.mjs'; import { getChilds, getHeader } from './utils/childs.mjs'; @@ -102,6 +103,7 @@ export function create(str = '', options = {}) { }], ], rewrite: (node, index, parent) => { + homeCardIcons(node, parent, options.isHome); tooltips(node, index, parent); htmlTagAddAttri(node, options); rehypeUrls(node); diff --git a/scripts/style.css b/scripts/style.css index fb71817..616ee04 100644 --- a/scripts/style.css +++ b/scripts/style.css @@ -3,7 +3,7 @@ body { tab-size: 4; margin: 0; line-height: inherit; - font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; } body { @@ -173,6 +173,7 @@ body.home .h1wrap p { .home-card a { display: flex; align-items: center; + gap: 0.5rem; cursor: pointer; border-radius: 0.5rem; padding: 1rem; @@ -186,6 +187,10 @@ body.home .h1wrap p { .home-card a:hover { --bg-opacity: 1; } +.home-card a svg { + min-width: 1.5rem; + height: 1.8rem; +} .home-title-reset { padding-right: 0 !important; diff --git a/scripts/utils/homeCardIcons.mjs b/scripts/utils/homeCardIcons.mjs new file mode 100644 index 0000000..1cb2a73 --- /dev/null +++ b/scripts/utils/homeCardIcons.mjs @@ -0,0 +1,43 @@ +import fs from 'fs-extra'; +import rehypeParse from 'rehype-parse' +import {unified} from 'unified' +import path from 'path'; +import { VFile } from 'vfile'; + +const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets') + +function getSVGNode(iconPath) { + const svgStr = fs.readFileSync(iconPath); + const processor = unified().use(rehypeParse,{ fragment: true, space: "svg" }) + const file = new VFile(); + file.value = svgStr.toString(); + const hastNode = processor.runSync(processor.parse(file), file); + return hastNode.children || [] +} + +export function homeCardIcons(node, parent, isHome) { + if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) { + node.children = node.children.map((child) => { + const href = child.properties?.href; + if (href) { + const iconName = path.basename(href, '.md'); + const iconPath = path.resolve(ICONS_PATH, `${iconName}.svg`); + const iconDefaultPath = path.resolve(ICONS_PATH, `list.svg`); + const iconExist = fs.existsSync(iconPath); + const labelNode = { + type: 'element', + tagName: 'span', + children: child.children, + } + if (iconExist) { + const svgNode = getSVGNode(iconPath); + child.children = [ ...svgNode, labelNode ]; + } else { + const svgNode = getSVGNode(iconDefaultPath); + child.children = [ ...svgNode, labelNode ]; + } + } + return child + }) + } +} \ No newline at end of file diff --git a/scripts/utils/rehypeUrls.mjs b/scripts/utils/rehypeUrls.mjs index 223d97c..36a0eb4 100644 --- a/scripts/utils/rehypeUrls.mjs +++ b/scripts/utils/rehypeUrls.mjs @@ -1,5 +1,5 @@ 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'); }