feat(docs): Improve docs search widget

docs/assets/scripts/search-widget.ts

@@ -4,6 +4,7 @@ type Section = 'guides' | 'config' | 'gql';
 interface IndexItem {
     section: Section;
     title: string;
+    parent: string;
     headings: string[];
     url: string;
 }
@@ -11,6 +12,7 @@ interface IndexItem {
 interface DenormalizedItem {
     section: Section;
     title: string;
+    parent: string;
     heading: string;
     url: string;
 }
@@ -94,9 +96,9 @@ export class SearchWidget {
                 html += `<li class="section">${sectionName}</li>`;
             }
             html += matches.map((result) => {
-                const { section, title, heading, url } = result.original;
+                const { section, title, parent, heading, url } = result.original;
                 const anchor = heading !== title ? '#' + this.headingToAnchor(heading) : '';
-                const inner = `<div class="title">${title}</div><div class="heading">${result.string}</div>`;
+                const inner = `<div class="title"><span class="parent">${parent}</span> › ${title}</div><div class="heading">${result.string}</div>`;
                 const selected = i === this.selectedIndex ? 'selected' : '';
                 i++;
                 return `<li class="${selected}"><a href="${url + anchor}">${inner}</a></li>`;
@@ -172,10 +174,11 @@ export class SearchWidget {
                 .then(res => eval(res))
                 .then((items: IndexItem[]) => {
                     const denormalized: DenormalizedItem[] = [];
-                    for (const { section, title, headings, url } of items) {
+                    for (const { section, title, parent, headings, url } of items) {
                         denormalized.push({
                             section,
                             title,
+                            parent,
                             heading: title,
                             url,
                         });
@@ -184,6 +187,7 @@ export class SearchWidget {
                                 denormalized.push({
                                     section,
                                     title,
+                                    parent,
                                     heading,
                                     url,
                                 });

docs/assets/styles/_search-widget.scss

@@ -34,7 +34,7 @@
     top: 35px;
     right: 0;
     max-height: 80vh;
-    width: 500px;
+    width: 600px;
     overflow: hidden;
 
     @media all and (max-width: $sm-breakpoint){
@@ -63,12 +63,16 @@
         }
         a {
             display: flex;
-            align-items: baseline;
+            align-items: center;
         }
         .title {
             color: $gray-800;
             width: 200px;
             font-size: 12px;
+            margin-right: 6px;
+        }
+        .parent {
+            color: $gray-600;
         }
         .heading {
             color: $gray-900;

docs/layouts/searchindex/searchindex.html

@@ -7,7 +7,7 @@ result :[
         {{ $quoted := apply $cleaned "replaceRE" ".*" "'$0'" "." -}}
         {{ $section := cond (in .Dir "configuration") "config" (cond (in .Dir "graphql-api") "gql" "guides") }}
 
-        { section: '{{ $section }}', title: '{{ .Title }}', headings: [{{ delimit $quoted ", " }}], url: '{{ .RelPermalink }}' },
+        { section: '{{ $section }}', parent: '{{ title .Parent.Title }}', title: '{{ .Title }}', headings: [{{ delimit $quoted ", " }}], url: '{{ .RelPermalink }}' },
     {{- end }}
 ]
 }