feat: offline search

config.toml

@@ -99,6 +99,7 @@ enableRobotsTXT = true
   time_format_blog = "Monday, January 02, 2006"
   time_format_default = "January 2, 2006"
   rss_sections = ["blog"]
+  offlineSearch = true
 
 [outputFormats]
   [outputFormats.PRINT]
@@ -149,5 +150,5 @@ enableRobotsTXT = true
   sidebar_menu_compact = false
   sidebar_menu_foldable = true
   ul_show = 3
-  sidebar_search_disable = false
+  sidebar_search_disable = true
   showLightDarkModeMenu = false

layouts/partials/navbar.html

@@ -66,7 +66,7 @@
 		  {{ end -}}
 		</ul>
 	  </div>
-	  <div class="navbar-nav d-none d-lg-block">
+	  <div class="navbar-nav d-none d-md-block">
 		{{ partial "search-input.html" . }}
 	  </div>
 	 </div>

layouts/partials/search-input.html

@@ -0,0 +1,61 @@
+{{ .Scratch.Set "docsy-search" 0 -}}
+
+{{ if .Site.Params.gcs_engine_id -}}
+{{ .Scratch.Add "docsy-search" 1 -}}
+
+<div class="td-search">
+  <div class="td-search__icon"></div>
+  <input type="search" class="td-search__input form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
+</div>
+
+{{- end -}}
+
+
+{{ if and .Site.Params.search (isset .Site.Params.search "algolia") -}}
+{{ .Scratch.Add "docsy-search" 1 -}}
+{{ .Scratch.Add "docsearch-id-num" 1 -}}
+
+<div class="td-search">
+  <div class="td-search--algolia" id="docsearch-{{ mod (.Scratch.Get "docsearch-id-num") 2 }}"></div>
+</div>
+
+{{- end -}}
+
+
+{{ if .Site.Params.offlineSearch -}}
+{{ .Scratch.Add "docsy-search" 1 -}}
+
+{{ $offlineSearchIndex := resources.Get "json/offline-search-index.json" | resources.ExecuteAsTemplate "offline-search-index.json" . -}}
+{{ if hugo.IsProduction -}}
+{{/* Use `md5` as finger print hash function to shorten file name to avoid `file name too long` error. */ -}}
+{{ $offlineSearchIndex = $offlineSearchIndex | fingerprint "md5" -}}
+{{ end -}}
+{{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}}
+
+<div class="td-search td-search--offline">
+  <div class="td-search__icon"></div>
+  <input
+    type="search"
+    class="td-search__input form-control"
+    placeholder="{{ T "ui_search" }}"
+    aria-label="{{ T "ui_search" }}"
+    autocomplete="off"
+    {{/*
+      The data attribute name of the json file URL must end with `src` since
+      Hugo's absurlreplacer requires `src`, `href`, `action` or `srcset` suffix for the attribute name.
+      If the absurlreplacer is not applied, the URL will start with `/`.
+      It causes the json file loading error when when relativeURLs is enabled.
+      https://github.com/google/docsy/issues/181
+    */}}
+    data-offline-search-index-json-src="{{ $offlineSearchLink }}"
+    data-offline-search-base-href="/"
+    data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
+  >
+</div>
+
+{{- end -}}
+
+{{ if gt (.Scratch.Get "docsy-search") 1 -}}
+{{ warnf `You have more than one site-search option configured: choose only one.
+      For details, see https://www.docsy.dev/docs/adding-content/search.` -}}
+{{ end -}}

layouts/partials/sidebar-tree.html

@@ -11,7 +11,6 @@
   {{ else -}}
   <div id="content-mobile">
   <form class="td-sidebar__search d-flex align-items-center p-0">
-    {{ partial "search-input.html" . }}
     <button class="btn btn-link td-sidebar__toggle d-md-none p-0 mx-auto fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>

static/css/rosenpass.css

@@ -876,6 +876,58 @@ margin-left: 1rem;
   font-size: larger;
 }
 
+/* Search Bar */
+.navbar-nav:has(.td-search){
+  align-self: stretch;
+  align-content: center;
+  padding-bottom: 0 !important;
+}
+
+.navbar-nav:has(input.td-search__input:not(:hover, :focus)) {
+  transition: all 0.5s 1s;
+  max-height: 200px;
+
+
+  div.td-search input.td-search__input:not(:hover) {
+    width: 36px;
+  }
+
+  div.td-search div.td-search__icon {
+    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+    display: block !important;
+  }
+
+}
+
+.container-fluid:has(input.td-search__input:focus),
+.container-fluid:has(input.td-search__input:hover),
+body:has(.td-offline-search-results) {
+  .td-search__input {
+    transition: all 0.5s ease-in-out 0.2s;
+    width: 207px !important;
+    margin-left: 0.2rem;
+    margin-right: 0.1rem;
+  }
+  #main_navbar {
+  width: min-content !important;
+  }
+  #navbar-custom {
+    overflow: hidden !important;
+  }
+
+}
+.navbar-nav {
+  @media(min-width:768px){
+    max-height: 99px !important;
+    }
+  @media(min-width:947px){
+    max-height: 48px !important;
+    }
+  @media(min-width:1000px){
+    max-height: 40px !important;
+    }
+  }
+
 /* MAIN COVER */
 
 .new-update-bar {