chore: init project.

scripts/build.mjs

@@ -0,0 +1,43 @@
+import fs from 'fs-extra';
+import path from 'path';
+import recursiveReaddirFiles from 'recursive-readdir-files';
+import { create } from './create.mjs';
+
+const OUTOUT = path.resolve(process.cwd(), 'dist');
+const DOCS = path.resolve(process.cwd(), 'docs');
+const CSSPATH = path.resolve(process.cwd(), 'scripts/style.css');
+const CSS_OUTPUT_PATH = path.resolve(OUTOUT, 'style/style.css');
+
+async function createHTML(files = [], num = 0) {
+  const dataFile = files[num];
+  if (!dataFile) {
+    console.log('\ndone!')
+    return;
+  }
+  ++num;
+  
+  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');
+
+  await fs.ensureDir(path.dirname(outputHTMLPath));
+  const html = create(mdstr.toString(), {
+    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)
+}
+
+;(async () => {
+  await fs.ensureDir(OUTOUT);
+  await fs.emptyDir(OUTOUT);
+  await fs.ensureDir(path.dirname(CSS_OUTPUT_PATH));
+  await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH)
+  const files = await recursiveReaddirFiles(process.cwd(), {
+    ignored: /\/(node_modules|\.git)/,
+    exclude: /(\.json|mjs)$/,
+    filter: (item) => item.ext === 'md',
+  });
+  createHTML(files);
+})();

scripts/create.mjs

@@ -0,0 +1,130 @@
+import markdown from '@wcj/markdown-to-html';
+import rehypeDocument from 'rehype-document';
+import rehypeFormat from 'rehype-format';
+
+/** 标记 Number */
+function panelAddNumber(arr = [], result = []) {
+  let n = 0;
+  let level = -1;
+  while (n < arr.length) {
+    const toc = arr[n];
+    const titleNum = Number(toc?.tagName?.replace(/^h/, ''));
+    if (titleNum && titleNum > -1) {
+      level = titleNum;
+    }
+    if (toc) {
+      result.push({ ...toc, number: level })
+    }
+    n++;
+  }
+  return result
+}
+
+function getChilds(data = [], level, result = []) {
+  for (let i = 1; i <= data.length; i++) {
+    const titleNum = Number(data[i]?.tagName?.replace(/^h/, ''));
+    if (titleNum && titleNum === level) break;
+    result.push(data[i]);
+  }
+  return result;
+}
+/** 获取 Heading 到下一个 Heading 之间的内容*/
+function getHeader(data = [], level, result = []) {
+  for (let i = 1; i <= data.length; i++) {
+    if (/^h\d$/.test(data[i]?.tagName) || data[i]?.number !== level) break;
+    result.push(data[i]);
+  }
+  return result;
+}
+
+/** Markdown 文档转成树形结构 */
+export function getTocsTree(arr = [], result = []) {
+  const data = panelAddNumber(arr);
+  
+  let n = 0;
+  let level = -1;
+
+  while (n < data.length) {
+    const toc = data[n];
+
+    if (level === -1) {
+      level = toc.number;
+    }
+    const titleNum = Number(toc.tagName?.replace(/^h/, ''));
+
+    if (toc.number === level && titleNum === level) {
+      const header = getHeader(data.slice(n), level);
+      const warpCls = ['warp'];
+      const headerCls = ['warp-header', `h${level}warp`];
+
+      if (level === 1) warpCls.push('max-container');
+
+      const warpStyle = toc.properties['data-warp-style'];
+      delete toc.properties['data-warp-style']
+
+      const panle = {
+        type: 'element',
+        tagName: 'div',
+        properties: { class: warpCls, style: warpStyle },
+        children: [
+          {
+            type: 'element',
+            tagName: level === 1 ? 'header' : 'div',
+            properties: { class: headerCls },
+            children: [
+              toc,
+              {
+                type: 'element',
+                tagName: 'div',
+                properties: { class: 'warp-body' },
+                children: [
+                  ...header
+                ],
+              }
+            ],
+          }
+        ],
+      }
+      const childs = getChilds([...data.slice(n + 1)], level);
+      const resultChilds = getTocsTree(childs);
+      if (resultChilds.length > 0) {
+        panle.children = panle.children.concat({
+          type: 'element',
+          tagName: 'div',
+          properties: { class: `h${level}warp-body` },
+          children: [...resultChilds]
+        });
+      }
+      result.push(panle);
+    }
+
+    n++;
+  }
+  return result;
+}
+
+export function create(str = '', options = {}) {
+  const mdOptions = {
+    hastNode: false,
+    remarkPlugins: [],
+    rehypePlugins: [
+      rehypeFormat,
+      [rehypeDocument, {
+        title: "Quick Reference",
+        css: [ ...options.css ],
+        meta: [
+          { description: '为开发人员分享快速参考备忘单。' },
+          { keywords: 'Quick,Reference' }
+        ]
+      }],
+    ],
+    rewrite: (node, index, parent) => {
+      if (node.type === 'element' && node.tagName === 'body') {
+        node.children = getTocsTree([ ...node.children ]);
+      }
+    }
+  }
+  
+
+  return markdown(str, mdOptions);
+}

scripts/style.css

@@ -0,0 +1,152 @@
+body {
+  -webkit-text-size-adjust: 100%;
+  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";
+}
+
+body {
+  background-color: rgb(15 23 42/1);
+  color: rgb(203 213 225/1);
+}
+
+*, ::before, ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+}
+
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+
+.max-container {
+  max-width: 1320px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem;
+}
+
+.warp-header.h1warp {
+  text-align: center;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.warp-header.h1warp h1 {
+  font-size: 3rem;
+  line-height: 1;
+  margin-bottom: 1rem;
+}
+
+
+.warp-header.h2warp h2 {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 24px;
+  position: relative;
+  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;
+  margin-top: 0;
+}
+
+.warp-header.h3warp {
+  z-index: 0;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.warp-header.h3warp h3 {
+  color: rgb(226 232 240/1);
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  z-index: 10;
+  border-bottom-left-radius: 0.5rem;
+  background-color: rgb(16 185 129/1);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.05em;
+}
+
+.warp-header.h3warp .warp-body {
+  z-index: 0;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.h2warp-body {
+  display: grid;
+  gap: 1.75rem;
+  font-size: 0.925rem;
+  line-height: 1.325rem;
+  grid-template-columns: repeat(3,minmax(0,1fr));
+  flex-direction: column;
+}
+
+.h2warp-body .warp {
+  background-color: rgb(30 41 59/1);
+  color: rgb(203 213 225/1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  padding-top: 1.5rem;
+  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);
+
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse
+}
+
+
+table td:not(:last-child)>code, kbd {
+  background-color: rgb(51 65 85/0.5);
+  color: rgb(203 213 225/1);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
+  letter-spacing: 0.075rem;
+  padding: 0.1em 0.54em;
+  border: 1px solid rgb(204,204,204);
+  border-color: rgb(51 65 85/1);
+  line-height: 1.6;
+  font-family: Arial,Helvetica,sans-serif;
+  font-size: 12px;
+  display: inline-block;
+  border-radius: 3px;
+}
+
+table tr+tr {
+  border-top: solid 1px #ececec94;
+  border-color: rgb(51 65 85/0.5);
+}
+
+table td:first-child {
+  white-space: nowrap;
+}
+table td, table th {
+  padding: 9px 14px;
+  text-align: left;
+}
+table tr th:last-child, table tr td:last-child {
+  text-align: right;
+}
+
+.table-thead-hide thead {
+  display: none;
+}