From 410c8f09da29d455a3ce6f5b132878f594bafa75 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Fri, 30 Sep 2022 14:15:26 +0800
Subject: [PATCH] website: add icons for home page list.
---
scripts/assets/cron.svg | 3 +++
scripts/assets/docker.svg | 3 +++
scripts/assets/emoji.svg | 3 +++
scripts/assets/find.svg | 2 ++
scripts/assets/git.svg | 3 +++
scripts/assets/javascript.svg | 3 +++
scripts/assets/jest.svg | 3 +++
scripts/assets/json.svg | 3 +++
scripts/assets/list.svg | 3 +++
scripts/assets/markdown.svg | 3 +++
scripts/assets/npm.svg | 3 +++
scripts/assets/quickreference.svg | 5 ++++
scripts/assets/semver.svg | 3 +++
scripts/assets/sketch.svg | 3 +++
scripts/assets/toml.svg | 5 ++++
scripts/assets/typescript.svg | 3 +++
scripts/assets/vscode.svg | 4 +++
scripts/create.mjs | 2 ++
scripts/style.css | 7 ++++-
scripts/utils/homeCardIcons.mjs | 43 +++++++++++++++++++++++++++++++
scripts/utils/rehypeUrls.mjs | 2 +-
21 files changed, 107 insertions(+), 2 deletions(-)
create mode 100644 scripts/assets/cron.svg
create mode 100644 scripts/assets/docker.svg
create mode 100644 scripts/assets/emoji.svg
create mode 100644 scripts/assets/find.svg
create mode 100644 scripts/assets/git.svg
create mode 100644 scripts/assets/javascript.svg
create mode 100644 scripts/assets/jest.svg
create mode 100644 scripts/assets/json.svg
create mode 100644 scripts/assets/list.svg
create mode 100644 scripts/assets/markdown.svg
create mode 100644 scripts/assets/npm.svg
create mode 100644 scripts/assets/quickreference.svg
create mode 100644 scripts/assets/semver.svg
create mode 100644 scripts/assets/sketch.svg
create mode 100644 scripts/assets/toml.svg
create mode 100644 scripts/assets/typescript.svg
create mode 100644 scripts/assets/vscode.svg
create mode 100644 scripts/utils/homeCardIcons.mjs
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');
}