Merge pull request #79 from phukon/master

leecalcote · web-flow · commit ebc035c8040b · 2023-11-23T14:39:09.000-06:00
feat: add hotkey access for searchbar
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,17 +3,14 @@
   <head>
     {{ partial "head.html" . }}
   </head>
-  <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
-    <header>
-      {{ partial "navbar.html" . }}
-    </header>
+  <body
+    class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}"
+  >
+    <header>{{ partial "navbar.html" . }}</header>
     <div class="container-fluid td-default td-outer">
-      <main role="main" class="td-main">
-        {{ block "main" . }}{{ end }}
-      </main>
+      <main role="main" class="td-main">{{ block "main" . }}{{ end }}</main>
       {{ partial "footer.html" . }}
     </div>
-    {{ partialCached "scripts.html" . }}
-    {{ partial "image-modal.html" . }}
+    {{ partialCached "scripts.html" . }} {{ partial "image-modal.html" . }}
   </body>
-</html>
+</html>
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -1,10 +1,11 @@
 <!doctype html>
 <html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
   <head>
-    {{ partial "head.html" . }}
-    {{ partial "favicon.html" . }}
+    {{ partial "head.html" . }} {{ partial "favicon.html" . }}
   </head>
-  <body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
+  <body
+    class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}"
+  >
     <header>
       {{ partial "navbar.html" . }}
     </header>
@@ -15,20 +16,18 @@
             {{ partial "sidebar.html" . }}
           </aside>
           <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
-            {{ partial "page-meta-links.html" . }}
-            {{ partial "toc.html" . }}
-            {{ partial "taxonomy_terms_clouds.html" . }}
+            {{ partial "page-meta-links.html" . }} {{ partial "toc.html" . }} {{
+            partial "taxonomy_terms_clouds.html" . }}
           </aside>
           <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
-            {{ partial "version-banner.html" . }}
-            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
-            {{ block "main" . }}{{ end }}
+            {{ partial "version-banner.html" . }} {{ if not
+            .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" .
+            }}{{ end }} {{ block "main" . }}{{ end }}
           </main>
         </div>
       </div>
       {{ partial "footer.html" . }}
     </div>
-    {{ partial "scripts.html" . }}
-    {{ partial "image-modal.html" . }}
+    {{ partial "scripts.html" . }} {{ partial "image-modal.html" . }}
   </body>
-</html>
+</html>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,4 +1,7 @@
 <footer class="footer">
+        <!-- Hotkey func -->
+        {{partial "hotkey.html" .}}
+        <!----------------->
         <div class="row footer-top">
             <div class="col-lg-6">
                 <a href="/">
diff --git a/layouts/partials/hotkey.html b/layouts/partials/hotkey.html
@@ -0,0 +1,54 @@
+<style>
+  #iconParent {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  #promptChild {
+    position: relative;
+    right: -70px;
+    top: -1.5px;
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    background-color: #cccccc;
+    border-radius: 6px;
+    padding: 0px 8px;
+  }
+</style>
+<script>
+  function focusSearchBar() {
+    var searchBar = document.querySelector(".td-search-input");
+    if (searchBar) {
+      searchBar.focus();
+    }
+  }
+
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "/") {
+      event.preventDefault();
+      focusSearchBar();
+    }
+  });
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var parent = document.createElement("div");
+    parent.id = "iconParent";
+
+    var prompt = document.createElement("span");
+    prompt.textContent = "/";
+    prompt.id = "promptChild";
+    parent.appendChild(prompt);
+
+    var searchElement = document.querySelector(".td-search__icon");
+    if (searchElement) {
+      searchElement.appendChild(parent);
+    }
+
+    var inputElement = document.querySelector(".td-search-input");
+    if (inputElement) {
+      inputElement.placeholder = "Search";
+    }
+  });
+</script>
