switch to built-in search but placed in top nav intead of sidebar

assets/js/custom.js

@@ -11,75 +11,3 @@ Array.from(myLabels).forEach(label => {
     };
   });
 });
-
-// Search helpers from https://github.com/onweru/compose
-const rootURL = window.location.protocol + "//" + window.location.host;
-const searchFieldClass = '.search_field';
-const searchClass = '.search';
-const quickLinks = '{{ T "quick_links" }}';
-const searchResultsLabel = '{{ T "search_results_label" }}';
-const shortSearchQuery = '{{ T "short_search_query" }}'
-const typeToSearch = '{{ T "type_to_search" }}';
-const noMatchesFound = '{{ T "no_matches" }}';
-
-function createEl(element = 'div') {
-  return document.createElement(element);
-}
-
-function emptyEl(el) {
-  while(el.firstChild)
-  el.removeChild(el.firstChild);
-}
-
-function wrapText(text, context, wrapper = 'mark') {
-  let open = `<${wrapper}>`;
-  let close = `</${wrapper}>`;
-  let escapedOpen = `%3C${wrapper}%3E`;
-  let escapedClose = `%3C/${wrapper}%3E`;
-  function wrap(context) {
-    let c = context.innerHTML;
-    let pattern = new RegExp(text, "gi");
-    let matches = text.length ? c.match(pattern) : null;
-
-    if(matches) {
-      matches.forEach(function(matchStr){
-        c = c.replaceAll(matchStr, `${open}${matchStr}${close}`);
-        context.innerHTML = c;
-      });
-
-      const images = elems('img', context);
-
-      if(images) {
-        images.forEach(image => {
-          image.src = image.src.replaceAll(open, '').replaceAll(close, '').replaceAll(escapedOpen, '').replaceAll(escapedClose, '');
-        });
-      }
-    }
-  }
-
-  const contents = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "code", "td"];
-
-  contents.forEach(function(c){
-    const cs = elems(c, context);
-    if(cs.length) {
-      cs.forEach(function(cx, index){
-        if(cx.children.length >= 1) {
-          Array.from(cx.children).forEach(function(child){
-            wrap(child);
-          })
-          wrap(cx);
-        } else {
-          wrap(cx);
-        }
-        // sanitize urls and ids
-      });
-    }
-  });
-
-  const hyperLinks = elems('a');
-  if(hyperLinks) {
-    hyperLinks.forEach(function(link){
-      link.href = link.href.replaceAll(encodeURI(open), "").replaceAll(encodeURI(close), "");
-    });
-  }
-}

assets/sass/_custom.sass

@@ -7,13 +7,6 @@ html, body
     &_brand
         img
             max-height: 2rem
-    // search box
-    &_search
-        display: grid
-        align-items: center
-        .search
-            @media screen and (min-width: 992px)
-                margin-right: 1.5rem
 
 .sidebar
     &_badge
@@ -77,58 +70,3 @@ code
     word-break: normal
     &.noClass
         line-break: normal
-
-
-// search from https://github.com/onweru/compose
-.search
-  flex: 1
-  display: flex
-  justify-content: flex-end
-  position: relative
-  &_field
-    padding: 0.5rem 1.5rem 0.5rem 2.5rem
-    border-radius: 1.5rem
-    width: 13.5rem
-    outline: none
-    border: none
-    background: transparent
-    color: var(--text)
-    box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
-    font-size: 1rem
-  &_label
-    width: 1rem
-    height: 1rem
-    position: absolute
-    left: 0.33rem
-    top: 0.25rem
-    opacity: 0.33
-    svg
-      width: 100%
-      height: 100%
-      fill: var(--text)
-  &_result
-    padding: 0.5rem 1rem
-    &:not(.passive):hover
-      background-color: var(--theme)
-      color: var(--light)
-    &.passive
-      display: grid
-    &s
-      width: 13.5rem
-      background-color: var(--bg)
-      border-radius: 0 0 0.25rem 0.25rem
-      box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
-      position: absolute
-      top: 125%
-      display: grid
-      overflow: hidden
-      z-index: 5
-      &:empty
-        display: none
-  &_title
-    padding: 0.5rem 1rem 0.5rem 1rem
-    background: var(--theme)
-    color: var(--light)
-    font-size: 0.9rem
-    opacity: 0.87
-    text-transform: uppercase

assets/sass/_override.sass

@@ -32,3 +32,12 @@ html
             &.tip
                 border-color: hsl(93, 85%, 32%)
                 background: hsl(93, 100%, 21%)
+
+    // search
+    .search
+        max-width: 20rem
+        margin: 0.4rem 0 0.4rem 0
+        &_field
+            background: var(--translucent-light)
+            color: var(--light)
+

config/_default/params.toml

@@ -30,6 +30,7 @@ numberOfRelatedPosts = 6
 numberOfFeaturedPosts = 4
 toc = true
 timeless = false
+enableSearch = true
 
 ## Website author
 [author]

layouts/_default/index.json

@@ -1,7 +0,0 @@
-{{- $.Scratch.Add "index" slice -}}
-{{- range .Site.Pages -}}
-  {{- if ne .Type "search" -}}
-    {{- $.Scratch.Add "index" (dict "title" .Title "body" .Plain "link" .Permalink) -}}
-  {{- end -}}
-{{- end -}}
-{{- jsonify (uniq ($.Scratch.Get "index")) -}}

layouts/partials/header.html

@@ -30,8 +30,8 @@
       {{- if $centerLogo }}
         {{- partial "logo" (dict "logo" $logo "class" "nav_center") }}
       {{- end }}
-      <li class="nav_search">
-        {{- partial "search" . }}
+      <li class="search">
+        {{ partialCached "search/widget" . }}
       </li>
       {{- partialCached "follow" . }}
     </div>

layouts/partials/search.html

@@ -1,12 +0,0 @@
-<!-- search from https://github.com/onweru/compose -->
-<div class="search">
-  <label for="find" class="search_label">
-    <svg class="icon icon_search">
-      <use xlink:href="#search"></use>
-    </svg>
-  </label>
-  <input type="search" class="search_field" placeholder='{{ T "search_field_placeholder" }}' id="find" autocomplete="off">
-  <div class="search_results results"></div>
-</div>
-<script src="{{ "/js/fuse.js" | relURL }}"></script>
-<script src="{{ "/js/search.js" | relURL }}"></script>