feat: global search

press command/ctrl + k anywhere to search the site


Former-commit-id: 87617f9e21540c8075b99238c5b3461d89765acc

2 files changed, 110 insertions, 0 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ebbb6ec7..5898e418 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,6 +6,7 @@
       {{ block "main" . }}{{ end }}
   </main>
   {{ partial "scripts.html" . }}
+  {{ partial "components/global-search" . }}
   {{ if .Site.Params.extraBody }}
   {{ .Site.Params.extraBody | safeHTML }}
   {{ end }}
diff --git a/layouts/partials/components/global-search.html b/layouts/partials/components/global-search.html
new file mode 100644
index 00000000..c12a6d79
--- /dev/null
+++ b/layouts/partials/components/global-search.html
@@ -0,0 +1,109 @@
+<div id="global-search">
+    {{ partial "components/pagefind" . }}
+</div>
+<div id="global-search-overlay"></div>
+
+<style>
+    #global-search-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(250,250,250,0.75);
+        @media (prefers-color-scheme: dark) {
+            background-color: rgba(30,30,30,0.75);
+        }
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+
+        z-index: -10;
+        opacity: 0;
+        transition-duration: 0.3s;
+        transition-property: opacity;
+    }
+    #global-search-overlay.shown {
+        z-index: 10;
+        opacity: 1;
+    }
+
+    #global-search {
+        position: fixed;
+        z-index: -10;
+        display: none;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #global-search #pagefind {
+        max-height: 90vh;
+        overflow-y: auto;
+        width: 100%;
+        margin: 1rem;
+    }
+
+    @media screen and (min-width: 768px) {
+        #global-search #pagefind {
+            width: 600px
+        }
+    }
+
+    #global-search #pagefind input {
+        outline: none
+    }
+
+    #global-search.shown {
+        z-index: 15;
+        display: flex;
+        animation: fade-in 0.3s ease-in-out;
+    }
+
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+            transform: translateY(1rem);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+</style>
+
+<script>
+  (() => {
+    window.addEventListener("keydown", (event) => {
+      const search = document.getElementById("global-search");
+      const overlay = document.getElementById("global-search-overlay");
+
+      const turnOn = () => {
+        search.classList.add("shown");
+        overlay.classList.add("shown");
+      };
+      const turnOff = () => {
+        search.classList.remove("shown");
+        overlay.classList.remove("shown");
+      };
+
+      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+        // Open the popup window
+        if (search.classList.contains("shown")) {
+          turnOff()
+        } else {
+          turnOn();
+        }
+        // Focus on the search input
+        const input = search.querySelector("input");
+        input.focus();
+      }
+
+      if (event.key === 'Escape') {
+        turnOff();
+      }
+    });
+  })();
+</script>