Docsearch UI (#20)

* poc stage, ui elements working

* finish styling

* recolor search overlay

* use the search API key instead

* underline styles

src/css/doc.css

@@ -22,8 +22,8 @@
 
 @media screen and (max-width: 1023.5px) {
   .doc {
-    padding-left: var(--site-padding);
-    padding-right: var(--site-padding);
+    padding-left: var(--site-padding--mobile);
+    padding-right: var(--site-padding--mobile);
   }
 }
 

src/css/docsearch.css

@@ -0,0 +1,135 @@
+.DocSearch .DocSearch-Hit[aria-selected=true] a {
+  background-color: var(--ds-background-level1);
+}
+
+html[data-theme="dark"] .DocSearch .DocSearch-Modal {
+  border: 1px solid var(--ds-divider);
+}
+
+.DocSearch .DocSearch-Footer {
+  border-top: 1px solid var(--ds-divider);
+}
+
+.DocSearch .DocSearch-Commands-Key,
+.DocSearch .DocSearch-Button-Key {
+  border-radius: 4px;
+  color: var(--ds-text-tertiary);
+}
+
+.DocSearch .DocSearch-LoadingIndicator svg,
+.DocSearch .DocSearch-MagnifierLabel svg {
+  width: 20px;
+  height: 20px;
+}
+
+.DocSearch .DocSearch-Input {
+  @include text-body;
+}
+
+.DocSearch .DocSearch-Form {
+  border-radius: 6px;
+  border: 1px solid var(--ds-neutral-outlined-border);
+
+  &:hover {
+    border-color: var(--ds-neutral-outlined-hover-border);
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--ds-focus-visible);
+    outline-offset: -2px;
+  }
+}
+
+.DocSearch .DocSearch-Button-Placeholder {
+  @include text-body;
+
+  color: var(--ds-text-placeholder);
+  margin-right: var(--ds-space-3);
+}
+
+.DocSearch .DocSearch-Button {
+  transition: var(--ds-transition);
+  height: var(--ds-space-5);
+  border-radius: 6px;
+  border: 1px solid var(--ds-neutral-outlined-border);
+  margin: 0;
+
+  &:hover {
+    background-color: var(--ds-neutral-outlined-hover-bg);
+    border-color: var(--ds-neutral-outlined-hover-border);
+  }
+
+  &:active {
+    background-color: var(--ds-neutral-outlined-active-bg);
+  }
+}
+
+.DocSearch .DocSearch-Hit[aria-selected=false] mark {
+  text-decoration: underline;
+}
+
+@media screen and (max-width: 768px) {
+  .DocSearch.DocSearch-Container {
+    position: fixed;
+    height: 100vh;
+  }
+}
+
+.DocSearch {
+  --docsearch-primary-color: var(--ds-text-primary);
+  --docsearch-text-color: var(--ds-text-primary);
+  --docsearch-spacing: 2rem;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--ds-text-primary);
+  --docsearch-muted-color: var(--ds-text-placeholder);
+  --docsearch-container-background: rgba(0, 0, 0, 0.5);
+  --docsearch-logo-color: var(--ds-text-primary);
+
+  /* modal */
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: var(--ds-background-body);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1);
+
+  /* searchbox */
+  --docsearch-searchbox-height: var(--ds-space-7);
+  --docsearch-searchbox-background: none;
+  --docsearch-searchbox-focus-background: none;
+  --docsearch-searchbox-shadow: none;
+
+  /* hit */
+  --docsearch-hit-height: var(--ds-space-7);
+  --docsearch-hit-color: var(--ds-text-primary);
+  --docsearch-hit-active-color: var(--ds-text-primary);
+  --docsearch-hit-background: var(--ds-background-body);
+  --docsearch-hit-shadow: none;
+
+  /* key */
+  --docsearch-key-gradient: var(--ds-background-level1);
+  --docsearch-key-shadow: none;
+
+  /* footer */
+  --docsearch-footer-height: var(--ds-space-6);
+  --docsearch-footer-background: var(--ds-background-body);
+  --docsearch-footer-shadow: none;
+}
+
+/* Darkmode */
+
+html[data-theme='dark'] .DocSearch {
+  --docsearch-text-color: var(--ds-text-primary);
+  --docsearch-container-background: rgba(20, 20, 20, 0.7);
+  --docsearch-modal-background: var(--ds-background-body);
+  --docsearch-modal-shadow: none;
+  --docsearch-searchbox-background: none;
+  --docsearch-searchbox-focus-background: none;
+  --docsearch-hit-color: var(--ds-text-primary);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: var(--ds-background-body);
+  --docsearch-key-gradient: var(--ds-background-level1);
+  --docsearch-key-shadow: none;
+  --docsearch-footer-background: var(--ds-background-body);
+  --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--ds-text-primary);
+  --docsearch-muted-color: var(--ds-text-placeholder);
+}

src/css/header.css

@@ -70,18 +70,6 @@ html[data-theme="dark"] #theme-toggle::before {
   color: var(--ds-warning-300);
 }
 
-@media screen and (min-width: 769px) {
-  #search-input {
-    width: calc(200 / var(--rem-base) * 1rem);
-  }
-}
-
-@media screen and (max-width: 768.5px) {
-  #search-button {
-    display: none;
-  }
-}
-
 @media screen and (max-width: 1023.5px) {
   #get-support {
     width: var(--ds-space-5);
@@ -95,7 +83,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
   .navbar-brand {
     height: inherit;
-    padding: 0 var(--site-padding);
+    padding: 0 var(--site-padding--mobile);
   }
 
   .navbar-brand .navbar-item {
@@ -109,7 +97,7 @@ html[data-theme="dark"] #theme-toggle::before {
     max-height: var(--body-min-height);
     overflow-y: auto;
     overscroll-behavior: none;
-    padding: var(--site-padding);
+    padding: var(--site-padding--mobile);
     border-top: 1px solid var(--ds-divider);
     border-bottom: 1px solid var(--ds-divider);
   }

src/css/nav.css

@@ -106,6 +106,13 @@ html.is-clipped--nav {
   padding: var(--ds-space-1) var(--site-padding);
 }
 
+@media screen and (max-width: 1023.5px) {
+  .nav-link,
+  .nav-text {
+    padding: var(--ds-space-1) var(--site-padding--mobile);
+  }
+}
+
 .nav-link {
   transition: var(--ds-transition);
 

src/css/site.css

@@ -27,3 +27,4 @@
 @import "highlight.css";
 @import "print.css";
 @import "tutorial-info.css";
+@import "docsearch.css"

src/css/toolbar.css

@@ -55,6 +55,6 @@
 
 @media screen and (max-width: 1023.5px) {
   .toolbar {
-    padding-right: var(--site-padding);
+    padding-right: var(--site-padding--mobile);
   }
 }

src/css/vars.css

@@ -105,6 +105,7 @@
   --footer-link-font-color: var(--link-font-color);
   /* dimensions and positioning */
   --site-padding: var(--ds-space-4);
+  --site-padding--mobile: var(--ds-space-2);
   --navbar-height: calc(100 / var(--rem-base) * 1rem);
   --toolbar-height: calc(22 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);

src/partials/footer-scripts.hbs

@@ -1,5 +1,13 @@
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
-{{#if env.SITE_SEARCH_PROVIDER}}
-{{> search-scripts}}
-{{/if}}
+
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+<script>
+  docsearch({
+    container: '#docsearch',
+    appId: '2ELPRZR9UC',
+    indexName: 'crawler_DocSearch Astra Serverless',
+    {{!-- This is the public API key which can be safely used in frontend code. --}}
+    apiKey: '1f4acbf51d118e4137e9a63b38bd8456',
+  })
+</script>

src/partials/head-scripts.hbs

@@ -2,8 +2,8 @@
 <script async src="https://www.googletagmanager.com/gtag/js?id={{this}}"></script>
 <script>function gtag() { dataLayer.push(arguments) }; window.dataLayer = window.dataLayer || []; gtag('js', new Date()); gtag('config', '{{this}}')</script>
 {{/with}}
-{{!--
-<script>var uiRootPath = '{{{uiRootPath}}}'</script> --}}
+
+<script>var uiRootPath = '{{{uiRootPath}}}'</script>
 
 <link rel="preload" href="{{uiRootPath}}/font/material-icons-outlined-latin-400-normal.woff2" as="font"
     type="font/woff2" crossorigin>
@@ -21,4 +21,6 @@
     } else {
         document.documentElement.setAttribute('data-theme', 'light')
     }
-</script>
+</script>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

src/partials/header-content.hbs

@@ -9,12 +9,7 @@
       <div class="navbar-end hide-for-print">
         {{!-- {{#if env.SITE_SEARCH_PROVIDER}} --}}
         <div class="search">
-          <div class="ds-input-container search">
-            <span class="material-icons ds-input--leading-icon">search</span>
-            <input id="search-input" class="ds-input" type="text" placeholder="Search the docs" {{#if page.home}}
-              autofocus{{/if}}>
-          </div>
-          <button id="search-button" class="ds-button ds-button--color-neutral ds-button--variant-solid">Search</button>
+          <div class="DocSearch" id="docsearch"></div>
         </div>
         {{!-- {{/if}} --}}
         <button class="ds-button ds-button--color-neutral ds-button--variant-outlined" id="get-support"><span