Add search

assets/js/search.js

@@ -1,9 +1,9 @@
 "use strict";
 
 (function () {
-    var searchBox = document.getElementById("search-box");
-    var spinner = document.getElementById("spinner");
-    var searchResultsContainer = document.getElementById("search-results-container");
+    var searchBox = document.getElementById("search-query");
+    var spinner = document.getElementById("search-spinner");
+    var searchResultsContainer = document.getElementById("search-results");
 
     // Use a worker to download and setup the index in the background.
     var worker = new Worker("/js/search-worker.js");
@@ -139,15 +139,15 @@
     }
 
     function buildCategoryString(categoryName, category) {
-        var appendString = "<div class='search-results'><h3>" + categoryName + " (" + category.length + ")</h3>";
+        var appendString = "<div class='search-results-category'><h2>" + categoryName + " (" + category.length + ")</h2>";
 
         // Display the top 5 results first.
         appendString += "<ul>";
         var topResults = category.splice(0, 5);
         for (var i = 0; i < topResults.length; i++) {
             var item = topResults[i];
             var prefix = getPrefix(item, categoryName);
-            appendString += "<li class='top'><a href='" + item.url + "'>" + prefix + item.display + "</a>";
+            appendString += "<li><a href='" + item.url + "' title='" + item.display + "'>" + prefix + item.display + "</a>";
         }
         appendString += "</ul>";
 
@@ -173,9 +173,9 @@
         if (result.type) {
             switch (result.type) {
                 case "module":
-                    return "<span class='symbol module'></span>";
+                    return "<span class='symbol module' title='Module'></span>";
                 case "package":
-                    return "<span class='symbol package'></span>"
+                    return "<span class='symbol package' title='Package'></span>"
             }
         }
 

assets/sass/_animation.scss

@@ -0,0 +1,12 @@
+@keyframes rotate360 {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner {
+    animation: rotate360 1s linear infinite;
+}

assets/sass/_search.scss

@@ -0,0 +1,37 @@
+.search-results-category {
+    @apply mb-4 justify-between flex-1 p-4 bg-gray-200 text-sm overflow-auto rounded;
+
+    &:not(:last-of-type) {
+        @apply mr-4
+    }
+
+    h2 {
+        @apply mt-0 mb-4 text-gray-700 text-xl;
+    }
+
+    ul {
+        @apply p-0 list-none;
+
+        li {
+            .symbol {
+                &:before {
+                    @apply text-white text-xs rounded mr-2 px-1;
+                }
+
+                &.module {
+                    &:before {
+                        content: "M";
+                        @apply bg-green-700;
+                    }
+                }
+
+                &.package {
+                    &:before {
+                        content: "Pk";
+                        @apply bg-purple-700;
+                    }
+                }
+            }
+        }
+    }
+}

assets/sass/styles.scss

@@ -3,16 +3,19 @@
 
 @import "colors";
 @import "mixins";
-@import "fonts";
+
+@import "animation";
 @import "buttons";
-@import "tables";
 @import "code";
+@import "fonts";
+@import "hubspot";
 @import "icons";
-@import "toc";
 @import "langchoose";
 @import "no-select";
 @import "pagination";
-@import "hubspot";
+@import "search";
+@import "tables";
+@import "toc";
 
 h1, h2, h3, h4, h5, h6 {
     @apply font-display text-gray-700 mb-2;

content/docs/search.md

@@ -1,5 +1,5 @@
 ---
-layout: "search"
-aliases: ["search.html"]
+title: Search Results
+layout: search
 noindex: true
 ---

layouts/docs/list.html

@@ -2,6 +2,16 @@
     <div class="container mx-auto px-8 py-8 md:px-0">
         <div class="md:flex">
 
+            <div class="md:w-2/12 mt-2 md:order-last">
+                <div class="mb-8 md:mb-4">
+                    {{ partial "docs/search.html" . }}
+                </div>
+
+                <div class="ml-3 hidden md:block">
+                    {{ partial "docs/edit.html" . }}
+                </div>
+            </div>
+
             <div class="md:w-3/12 pr-8 mt-2">
                 {{ partial "docs/toc.html" . }}
             </div>
@@ -10,10 +20,6 @@
                 <h1>{{ .Title }}</h1>
                 {{ .Content }}
             </div>
-
-            <div class="md:w-2/12 pl-8 mt-2">
-                {{ partial "docs/edit.html" . }}
-            </div>
         </div>
     </div>
 {{ end }}

layouts/docs/search.html

@@ -1,7 +1,23 @@
 {{ define "main" }}
-    <div id="spinner" class="loader"></div>
+    <div class="container mx-auto px-8 py-8 md:px-0">
+        <div class="md:flex">
+            <div class="w-full">
 
-    <div id="search-results-container"></div>
+                <div class="md:flex items-center mb-4">
+                    <div class="mb-4 md:ml-auto md:order-last">
+                        {{ partial "docs/search.html" . }}
+                    </div>
+                    <h1 class="no-anchor mt-0">{{ .Title }}</h1>
+                </div>
+
+                <div class="my-4 text-gray-500" id="search-spinner">
+                    <i class="fas fa-sync-alt spinner text-xl"></i>
+                </div>
+
+                <div class="md:flex items-start" id="search-results"></div>
+            </div>
+        </div>
+    </div>
 
     <!--
         Minify and fingerprint script. Generated file will contain content

layouts/docs/single.html

@@ -2,6 +2,16 @@
     <div class="container mx-auto px-8 py-8 md:px-0">
         <div class="md:flex">
 
+            <div class="md:w-2/12 mt-2 md:order-last">
+                <div class="mb-8 md:mb-4">
+                    {{ partial "docs/search.html" . }}
+                </div>
+
+                <div class="ml-3 hidden md:block">
+                    {{ partial "docs/edit.html" . }}
+                </div>
+            </div>
+
             <div class="md:w-3/12 pr-8 mt-2">
                 {{ partial "docs/toc.html" . }}
             </div>
@@ -10,10 +20,6 @@
                 <h1>{{ .Title }}</h1>
                 {{ .Content }}
             </div>
-
-            <div class="md:w-2/12 pl-8 mt-2">
-                {{ partial "docs/edit.html" . }}
-            </div>
         </div>
     </div>
 {{ end }}

layouts/partials/docs/edit.html

@@ -1,6 +1,6 @@
 {{ with .File }}
-    <a class="text-gray-600 hover:text-blue-700 text-sm" href="{{ $.Site.Params.repositoryURL }}/edit/{{ $.Site.Params.repositoryBranch }}/content/{{ .Path }}" target="_blank">
-        <i class="fab fa-github"></i>
+    <a class="text-gray-600 hover:text-blue-700 text-xs" href="{{ $.Site.Params.repositoryURL }}/edit/{{ $.Site.Params.repositoryBranch }}/content/{{ .Path }}" target="_blank">
+        <i class="fab fa-github mr-2"></i>
         Edit This Page
     </a>
 {{ end }}

layouts/partials/docs/search.html

@@ -0,0 +1,9 @@
+<form class="relative" action="{{ relref . "/docs/search" }}" method="GET">
+    <i class="fas fa-search absolute inset-y-0 flex items-center pl-3 text-gray-500"></i>
+    <input
+        id="search-query"
+        name="q"
+        class="block w-full py-2 px-4 pl-8 text-sm border border-gray-400 focus:border-blue-500 focus:outline-none rounded transition"
+        placeholder="Search the docs"
+        autocomplete="off">
+</form>