Merge pull request #314 from AMoo-Miki/add-custom-search

Enhance breadcrumbs and URLs in search results

_layouts/default.html

@@ -108,9 +108,13 @@ layout: table_wrappers
         {% if site.search_enabled != false or site.use_custom_search == true %}
         <div class="search">
           <div class="search-input-wrap">
+            {% assign docs_version = site.data.versions.current %}
+            {% if site.baseurl == '/docs/latest' %}
+              {% assign docs_version = "latest" %}
+            {% endif %}
             <input type="text" id="search-input" class="search-input"
                    tabindex="0" placeholder="Search..." aria-label="Search {{ site.title }}"
-                   data-docs-version="{{ site.data.versions.current }}" autocomplete="off">
+                   data-docs-version="{{ docs_version }}" autocomplete="off">
             <div class="search-spinner"><i></i></div>
             <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
           </div>

_sass/custom/custom.scss

@@ -1,3 +1,5 @@
+$content-width: 740px !default;
+
 @import "../../assets/fonts/open-sans/webfont.css";
 @import "../../assets/fonts/open-sans-condensed/webfont.css";
 @import "../../assets/fonts/noto-serif/webfont.css";
@@ -921,7 +923,7 @@ main {
   @include clearfix;
 }
 
-@media screen and (max-width: 799px) {
+@media screen and (max-width: 46.24rem) {
   [role="banner"] .nav-menu-on .small-nav {
 
     li {

assets/js/search.js

@@ -74,8 +74,17 @@
         debounceTimer = setTimeout(doSearch, 300);
     };
 
-    function abortPreviousCalls() {
+    const abortPreviousCalls = () => {
         while (abortControllers.length) abortControllers.pop()?.abort?.();
+    };
+
+    const getBreadcrumbs = result => {
+        const crumbs = [...result.ancestors];
+
+        if (result.type === 'DOCS') crumbs.unshift(`OpenSearch ${result.versionLabel || result.version}`);
+        else if (result.type) crumbs.unshift(result.type);
+
+        return sanitizeText(crumbs.join(' › '));
     }
 
     const doSearch = async () => {
@@ -116,11 +125,8 @@
                 ? `
                 <div class="custom-search-result">
                     <a href="${sanitizeAttribute(result.url)}">
-                        <cite>
+                        <cite>${getBreadcrumbs(result)}</cite>
-                            ${result.type === 'DOCS' ? `OpenSearch ${sanitizeText(result.version)} › ` : ''}
+                        ${sanitizeText(result.title || 'Unnamed Document')}
-                            ${sanitizeText(result.ancestors?.join?.(' › '))}
-                        </cite>
-                        ${sanitizeText(result.title)}
                     </a>
                     <span>${sanitizeText(result.content?.replace?.(/\n/g, '&hellip; '))}</span>
                 </div>