feat: add http-status-code.md cheatsheet.

scripts/create.mjs

@@ -1,45 +1,14 @@
 import markdown from '@wcj/markdown-to-html';
 import rehypeDocument from 'rehype-document';
 import rehypeFormat from 'rehype-format';
-import { rehypeUrls } from './nodes/rehypeUrls.mjs';
+import remarkGemoji from 'remark-gemoji'
 import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
 import { footer } from './nodes/footer.mjs';
 import { header } from './nodes/header.mjs';
-
-/** 标记 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;
-}
+import { rehypeUrls } from './utils/rehypeUrls.mjs';
+import { tooltips } from './utils/tooltips.mjs';
+import { panelAddNumber } from './utils/panelAddNumber.mjs';
+import { getChilds, getHeader } from './utils/childs.mjs';
 
 /** Markdown 文档转成树形结构 */
 export function getTocsTree(arr = [], result = []) {
@@ -120,7 +89,7 @@ export function create(str = '', options = {}) {
   const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & `: ''
   const mdOptions = {
     hastNode: false,
-    remarkPlugins: [],
+    remarkPlugins: [remarkGemoji],
     rehypePlugins: [
       rehypeFormat,
       [rehypeDocument, {
@@ -133,6 +102,7 @@ export function create(str = '', options = {}) {
       }],
     ],
     rewrite: (node, index, parent) => {
+      tooltips(node, index, parent);
       htmlTagAddAttri(node, options);
       rehypeUrls(node);
       if (node.type === 'element' && node.tagName === 'body') {

scripts/style.css

@@ -62,10 +62,6 @@ 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;
@@ -322,6 +318,7 @@ a.text-grey {
   right: 0px;
   top: 0px;
   z-index: 10;
+  border-top-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   background-color: #228e6c;
   padding-left: 0.75rem;
@@ -447,7 +444,6 @@ a.text-grey {
   position: relative;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   border-radius: 0.5rem;
   padding-top: 1.5rem;
   margin-bottom: 1rem;
@@ -495,6 +491,46 @@ a.text-grey {
 .wrap-text {
   white-space: pre-wrap !important;
   overflow-wrap: break-word !important;
+  word-break: break-all;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+.tooltip .tooltiptext {
+  display: none;
+  font-style: inherit;
+  position: absolute;
+  background-color: rgb(67 67 67 / 66%);
+  color: #fff;
+  padding: 0.5rem;
+  font-size: 12px;
+  opacity: 0;
+  border-radius: 0.5rem;
+  z-index: 1;
+  transition: opacity .6s;
+  line-height: 1.5;
+
+  width: 220px;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -110px;
+}
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgb(67 67 67 / 66%) transparent transparent transparent;
+}
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  display: inline-block;
+  opacity: 1;
 }
 
 [data-color-mode*='light'], [data-color-mode*='light'] body {

scripts/utils/childs.mjs

@@ -0,0 +1,18 @@
+
+export 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 之间的内容*/
+export 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;
+}

scripts/utils/panelAddNumber.mjs

@@ -0,0 +1,18 @@
+
+/** 标记 Number */
+export 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
+}

scripts/utils/tooltips.mjs

@@ -0,0 +1,64 @@
+/**
+ * 配置 tooltips 注释
+ * 
+ * ```markdown
+ * - [超链接有 tooltips 提示](#1xx-information) _Tooltips 展示内容_ <!--rehype:tooltips-->
+ * ```
+ * 
+ * 上面示例：将 “Tooltips 展示内容” 放到 前一个 `<a>` dom 节点作为子节点
+ * 
+ * - 注释配置的，前一个节点 A，A 的前一个节点 B
+ * - 如果 A 和 B 其中一个不存在 `tooltips` 将失效
+ * - 设置 B 的类名称为 tooltips 
+ */
+export function tooltips(node, index, parent) {
+  if (node.type === 'comment' && parent?.children.length > 2) {
+    const childs = parent?.children;
+    const result = [];
+    let recordPos = false; // 记录位置
+    let tooltipNode = null;
+    for(let i = childs.length; i > -1; i--) {
+      const node = childs[i];
+      // 记录 tooltip 的开始位置
+      if (node?.type === 'comment' && node?.value === 'rehype:tooltips') {
+        recordPos = true;
+        continue
+      }
+      // 记录 tooltip 的 node
+      if (recordPos && !tooltipNode) {
+        if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) {
+          recordPos = false;
+        }
+        if (recordPos && node.type === 'element') {
+          tooltipNode = node;
+          tooltipNode.properties['class'] = 'tooltiptext';
+          delete tooltipNode.position;
+          continue
+        }
+      }
+      // 将 tooltip 节点，插入到下一个 element 节点的子节点中
+      if (tooltipNode) {
+        if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) {
+          recordPos = false;
+          tooltipNode = null
+        }
+        if (tooltipNode && node?.type === 'element') {
+          recordPos = false;
+          node.properties['class'] = 'tooltip';
+          node.children.push(tooltipNode);
+          tooltipNode = null
+        }
+      }
+      if (!recordPos && node) {
+        result.push(node)
+      }
+    }
+    if (parent) {
+      parent.children = [...result.reverse()];
+    }
+  }
+}
+
+export function getPreviewNode() {
+
+}