theme: Misc search improvements

* Add style for highlighted text
* Collapse all >= h3 into lvl3 and show that in the search results

assets/css/styles.css

@@ -117,4 +117,7 @@ body {
   }
 }
 
-/* flex-1 mx-auto lg:mx-0 px-4 md:px-8 lg:px-12 w-full max-w-3x lg:max-w-3x py-8 sm:py-14 */
+/* Algolia DocSearch */
+.algolia-docsearch-suggestion--highlight {
+  color: var(--color-primary);
+}

assets/js/alpinejs/data/search.js

@@ -8,6 +8,24 @@ const groupByLvl0 = (array) => {
 	}, {});
 };
 
+const applyHelperFuncs = (array) => {
+	if (!array) return [];
+	return array.map((item) => {
+		item.getHeadingHTML = function () {
+			let lvl2 = this._highlightResult.hierarchy.lvl2;
+			let lvl3 = this._highlightResult.hierarchy.lvl3;
+			if (!lvl2) {
+				return '';
+			}
+			if (lvl3) {
+				return `${lvl2.value} <span class="text-gray-500">&nbsp;>&nbsp;</span> ${lvl3.value}`;
+			}
+			return lvl2.value;
+		};
+		return item;
+	});
+};
+
 export const search = (Alpine, cfg) => ({
 	query: designMode ? 'shortcodes' : '',
 	open: designMode,
@@ -66,7 +84,7 @@ export const search = (Alpine, cfg) => ({
 		})
 			.then((response) => response.json())
 			.then((data) => {
-				this.result = groupByLvl0(data.results[0].hits);
+				this.result = groupByLvl0(applyHelperFuncs(data.results[0].hits));
 			});
 	},
 	root: {

layouts/partials/layouts/search/results.html

@@ -44,7 +44,9 @@
                 x-for="[group, entries] in Object.entries(result)"
                 :key="group">
                 <li class="py-4">
-                  <div class="mb-1 dark:text-gray-300" x-text="group"></div>
+                  <div
+                    class="mb-1 dark:text-gray-300 font-semibold uppercase tracking-widest text-sm"
+                    x-text="group"></div>
                   <template x-for="entry in entries" :key="entry.objectID">
                     <a
                       class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-500 hover:dark:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
@@ -56,7 +58,7 @@
                       <div class="w-2/3">
                         <h3
                           class="text-md font-bold"
-                          x-html="entry._highlightResult.hierarchy.lvl2 ? entry._highlightResult.hierarchy.lvl2.value :entry._highlightResult.hierarchy.lvl1.value"></h3>
+                          x-html="entry.getHeadingHTML()"></h3>
                         <template
                           x-if="entry._snippetResult && entry._snippetResult.content">
                           <div class="two-lines-ellipsis mt-1">