feat: add tocs feature & fix page element generation issue (#9).

scripts/utils/anchorPoint.mjs

@@ -3,6 +3,7 @@ const scripts = `
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
   window.onhashchange = function () {
     anchorPoint()
+    updateAnchor()
   };
 }
 function anchorPoint() {
@@ -16,6 +17,26 @@ function anchorPoint() {
   }
 }
 anchorPoint();
+
+function updateAnchor(element) {
+  const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+  anchorContainer.forEach((tocanchor) => {
+    tocanchor.classList.remove('is-active-link');
+  });
+  const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
+  console.log('anchor', anchor)
+  if (anchor) {
+    anchor.classList.add('is-active-link');
+  }
+}
+// toc 定位
+updateAnchor()
+const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+anchor.forEach((item) => {
+  item.addEventListener('click', (e) => {
+    updateAnchor()
+  })
+})
 `;
 
 export function anchorPoint() {

scripts/utils/getSVGNode.mjs

@@ -1,8 +1,11 @@
 import fs from 'fs-extra';
+import path from 'path';
 import rehypeParse from 'rehype-parse';
 import {unified} from 'unified';
 import { VFile } from 'vfile';
 
+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 })

scripts/utils/getTocsTree.mjs

@@ -1,5 +1,71 @@
+import path from 'path';
 import { panelAddNumber } from './panelAddNumber.mjs';
 import { getChilds, getHeader } from './childs.mjs';
+import { ICONS_PATH, getSVGNode } from './getSVGNode.mjs';
+
+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') })
+    } else if (children?.length > 0) {
+      result = result.concat(getTocsTitleNode(children))
+    }
+  });
+  return result
+}
+
+export function addTocsInWarp(tocsData = [], menuData, isDone = false) {
+  const childs = tocsData.map((item) => {
+    if (item.properties?.class?.includes('h1wrap-body')) {
+      isDone = true;
+    }
+    if (!isDone && item.children) {
+      item.children = addTocsInWarp([...item.children], menuData, isDone)
+    }
+    return item
+  });
+  if (isDone) {
+    childs.splice(1, 0, menuData);
+  }
+  return childs
+}
+
+export const getTocsTitleNodeWarpper = (children = []) => {
+  const iconPath = path.resolve(ICONS_PATH, `menu.svg`);
+  const svgNode = getSVGNode(iconPath);
+  return {
+    type: 'element',
+    tagName: 'div',
+    properties: {
+      class: 'menu-tocs',
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          class: 'menu-btn',
+        },
+        children: [
+          // { type: 'text', value: 'menu' }
+          ...svgNode
+        ]
+      },
+      {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          class: 'menu-modal',
+        },
+        children: children
+      }
+    ]
+  }
+}
 
 /** Markdown 文档转成树形结构 */
 export function getTocsTree(arr = [], result = []) {
@@ -14,9 +80,7 @@ export function getTocsTree(arr = [], result = []) {
     if (level === -1) {
       level = toc.number;
     }
-    const titleNum = Number(toc.tagName?.replace(/^h/, ''));
-
-    if (toc.number === level && titleNum === level) {
+    if (toc.number === level && titleNum(toc.tagName) === level) {
       const header = getHeader(data.slice(n), level);
       const wrapCls = ['wrap'];
       const headerCls = ['wrap-header', `h${level}wrap`];

scripts/utils/homeCardIcons.mjs

@@ -1,8 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { getSVGNode } from './getSVGNode.mjs';
-
-export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')
+import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
 
 export function homeCardIcons(node, parent, isHome) {
   if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {

scripts/utils/rehypeTitle.mjs

@@ -1,7 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { getSVGNode } from './getSVGNode.mjs';
-import { ICONS_PATH } from './homeCardIcons.mjs';
+import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
 
 export function rehypeTitle(node, iconName) {
   if (node.type === 'element' && node.tagName === 'h1' && iconName !== 'index') {