fix: fix search error & add name field in data.json #105

scripts/create.mjs

@@ -82,7 +82,14 @@ export function create(str = '', options = {}) {
       if (iconName) {
         detailData.icon = iconName;
       }
-      homeCardIcons(node, parent, options.isHome);
+      const resultHomeCard = homeCardIcons(node, parent, options.isHome);
+      if (options.filename && resultHomeCard[options.filename]) {
+        detailData.rgb = resultHomeCard[options.filename].rgb;
+        detailData.name = resultHomeCard[options.filename].title;
+        if (resultHomeCard[options.filename].tags) {
+          detailData.tags = resultHomeCard[options.filename].tags;
+        }
+      }
       tooltips(node, index, parent);
       htmlTagAddAttri(node, options);
       rehypeUrls(node);
@@ -111,7 +118,6 @@ export function create(str = '', options = {}) {
           }
           node.children.unshift(header(options));
           node.children.push(footer(options));
-          // node.children.push(search(options));
           node.children = node.children.concat(search(options));
         }
       }

scripts/js/main.js

@@ -41,8 +41,9 @@ const fuse = new Fuse(REFS_DATA, {
   matchEmptyQuery: !0,
   threshold: .1,
   keys: [
-    { name: "title", weight: 12 }, 
+    { name: "name", weight: 12 }, 
     { name: 'intro', weight: 2 }, 
+    { name: 'tags', weight: 2 }, 
     { name: 'sections.t', weight: 5 }
   ],
 });
@@ -70,9 +71,13 @@ document.addEventListener('keydown', (ev) => {
   }
 });
 
+let result = []
+let inputValue = '';
+
 function showSearch() {
   document.body.classList.add('search');
   searchBox.classList.add('show');
+  searchResult('')
   searchInput.focus();
 }
 
@@ -80,22 +85,29 @@ function hideSearch() {
   document.body.classList.remove('search');
   searchBox.classList.remove('show');
 }
-let result = []
-let inputValue = '';
+function getValueReg(val = '') {
+  return new RegExp(val.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'), 'ig');
+}
 
 function searchResult(value) {
   inputValue = value;
   result = fuse.search(value);
+  if (!value) {
+    result = REFS_DATA.map(item => ({ item: item }));
+  }
   let menuHTML = '';
   result.forEach((item, idx) => {
-    const label = item.item.title.replace(new RegExp(value, 'ig'), (txt) => {
+    const label = item.item.name.replace(getValueReg(value), (txt) => {
+      return `<mark>${txt}</mark>`
+    })
+    const tags = (item.item.tags || []).join(',').replace(getValueReg(value), (txt) => {
       return `<mark>${txt}</mark>`
     })
     const href = isHome ? item.item.path : item.item.path.replace('docs/', '');
     if (idx === 0) {
-      menuHTML += `<a href="${href}" class="active">${label}</a>`;
+      menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
     } else {
-      menuHTML += `<a href="${href}">${label}</a>`;
+      menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
     }
   });
   searchMenu.innerHTML = menuHTML;
@@ -116,13 +128,13 @@ function searchResult(value) {
 
 function searchSectionsResult(idx = 0) {
   const data = result[idx] || [];
-  const title = (data.item?.intro || '').replace(new RegExp(inputValue, 'ig'), (txt) => {
+  const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => {
     return `<mark>${txt}</mark>`
   });
   let sectionHTML = `<h3>${title}</h3><ol>`;
   if (data && data.item && data.item.sections) {
     data.item.sections.forEach((item, idx) => {
-      const label = item.t.replace(new RegExp(inputValue, 'ig'), (txt) => {
+      const label = item.t.replace(getValueReg(inputValue), (txt) => {
         return `<mark>${txt}</mark>`
       })
       const href = isHome ? data.item.path : data.item.path.replace('docs/', '');

scripts/style/style.css

@@ -1234,7 +1234,6 @@ body.search {
   height: 100%;
 }
 #mysearch.show .mysearch-result > * {
-  width: 50%;
   overflow-y: auto;
   padding: 0.6rem;
 }
@@ -1319,12 +1318,24 @@ body.search {
   white-space: pre-wrap;
   text-decoration: none;
   color: var(--color-fg-default);
+  align-items: center;
+  justify-content: space-between;
+}
+#mysearch-menu a > sup {
+  color: var(--color-fg-subtle);
+  font-size: 0.7rem;
 }
 #mysearch-menu a:hover,
 #mysearch-menu a.active {
   background-color: var(--color-neutral-muted);
   border-radius: 0.5rem;
 }
+#mysearch-menu {
+  width: 25rem;
+}
+#mysearch-content {
+  flex: 1;
+}
 #mysearch-content ol li div a:hover {
   background-color: var(--primary-color);
   color: #fff;

scripts/utils/homeCardIcons.mjs

@@ -1,7 +1,11 @@
 import fs from 'fs-extra';
 import path from 'path';
+import { getCodeString } from 'rehype-rewrite';
 import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
 
+const resultHomeCard = {};
+const COLOR_REG = /background:(\s+)?rgb\(([\d]+\s+[\d]+\s+[\d]+(\s+)?)\);?/gi;
+
 export function homeCardIcons(node, parent, isHome) {
   if (
     isHome &&
@@ -22,16 +26,23 @@ export function homeCardIcons(node, parent, isHome) {
   ) {
     node.children = node.children.map((child) => {
       const href = child.properties?.href;
-      if (href) {
+      if (href && href.endsWith('.md')) {
         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);
+        let color = '';
+        child.properties.style = child.properties.style.replace(COLOR_REG, (str) => {
+          color = str.replace(COLOR_REG, '$2');
+          return str.replace(/(\);)/, '/ var(--bg-opacity)$1');
+        });
+        const tags = child.properties['data-lang'];
         const labelNode = {
           type: 'element',
           tagName: 'span',
           children: child.children,
         };
+        const title = getCodeString(child.children);
         if (iconExist) {
           const svgNode = getSVGNode(iconPath);
           child.children = [...svgNode, labelNode];
@@ -39,8 +50,15 @@ export function homeCardIcons(node, parent, isHome) {
           const svgNode = getSVGNode(iconDefaultPath);
           child.children = [...svgNode, labelNode];
         }
+        resultHomeCard[iconName] = {
+          md: iconName,
+          title: title,
+          rgb: color,
+          tags: tags ? tags.split('/') : [],
+        };
       }
       return child;
     });
   }
+  return resultHomeCard;
 }