Merge branch 'search' into staging

ar-io · Apr 9, 2024 · 31d8517 · 31d8517
2 parents a7a5665 + 6e7ce45
commit 31d8517
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/docs/src/.vuepress/theme/components/SearchModal.vue b/docs/src/.vuepress/theme/components/SearchModal.vue
@@ -32,8 +32,9 @@
           <a :href="s.path" @click.prevent>
             <span class="page-title">{{ s.title || s.path }}</span>
             <span v-if="s.header" class="header"
-              >&gt; {{ s.header.title }}</span
+              >&gt; {{ s.header }}</span
             >
+            <span v-if="s.contentStr && s.contentHighlight" class="content-snippet" v-html="highlightSnippet(s)"></span>
           </a>
         </li>
       </ul>
@@ -94,6 +95,17 @@ export default {
   },
 
   methods: {
+    highlightSnippet(s) {
+      // console.log(s.contentStr)
+      const start = s.contentHighlight[0];
+      const end = start + s.contentHighlight[1];
+      const before = s.contentStr.slice(0, start);
+      const match = s.contentStr.slice(start, end);
+      const after = s.contentStr.slice(end);
+
+      return `${before}<span class="highlight">${match}</span>${after}`;
+    },
+
     async fetchSuggestions() {
       const query = this.query.trim().toLowerCase();
       if (!query) {
@@ -102,11 +114,14 @@ export default {
       }
 
       const results = await flexsearchSvc.match(query, query.split(/\s+/));
+      // console.log(results)
       this.suggestions = results.map((result) => {
         return {
           title: result.title,
-          path: result.path,
-          header: result.header,
+          path: result.path + result.slug,
+          header: result.headingStr,
+          contentStr: result.contentStr,
+          contentHighlight: result.contentHighlight
         };
       });
     },
@@ -121,6 +136,7 @@ export default {
       const modalOuter = this.$refs.modalOuter;
       const modalProper = this.$refs.modalProper;
       if (
+        modalOuter &&
         modalOuter.contains(event.target) &&
         !modalProper.contains(event.target)
       ) {
@@ -219,6 +235,26 @@ input:focus
   border 2px solid var(--AccentColor) !important
   outline none
 
+.search-modal-content .content-snippet
+  display: block
+  margin-top: 0.5em
+  white-space: pre-wrap
+  color: var(--TextColor)
+
+.highlight
+  text-decoration: underline
+  color: var(--AccentColor)
+
+
+.suggestion:hover
+  color: var(--AccentColor) 
+  a 
+    color: var(--AccentColor) 
+    span:not(.content-snippet)
+      color: var(--AccentColor) 
+    .content-snippet
+       color: var(--TextColor) !important
+
 
 .search-modal
   position fixed
@@ -273,6 +309,8 @@ input:focus
     background-color var(--LineColor)
     border 1px solid var(--AccentColor) !important
     cursor pointer
+    span
+     color var(--AccentColor)
 
 .search-modal-content li:last-child
   border-bottom none

diff --git a/docs/src/.vuepress/theme/components/SidebarGroup.vue b/docs/src/.vuepress/theme/components/SidebarGroup.vue
@@ -84,7 +84,7 @@ export default {
 <style lang="stylus">
 span
   &:hover
-    color var(--AccentColor) !important
+    color var(--AccentColor)
 .sidebar-group
   .sidebar-group
     padding-left 0.5em

diff --git a/docs/src/.vuepress/theme/components/search-dependencies/flexsearchSvc.js b/docs/src/.vuepress/theme/components/search-dependencies/flexsearchSvc.js
@@ -24,7 +24,7 @@ export default {
         // here you choose the fields you want to index.
         // for me I will search in the title and the content of each page.
         // of course I stripped the content before so I use the plain text content not the markdown text
-        field: ['title', 'headersStr', 'content'],
+        field: ['title', 'header', 'headersStr', 'content'],
       },
     }
     index = new Flexsearch(indexSettings)