refactor: move search UI to categories page

- remove global search panel (according to my web analytics, the search panel is rarely used)
- remove relevant instructions and scripts
- rename 'categories' to a more abstract and acurate name, 'find' (搜寻)


Former-commit-id: 30a4d643c798adcaec646a4cd8e82f0bc3fd77ea

2 files changed, 1 insertions, 90 deletions

diff --git a/layouts/_partials/components/global-search.html b/layouts/_partials/components/global-search.html
deleted file mode 100644
index 674ecdcc..00000000
--- a/layouts/_partials/components/global-search.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<style>
-#global-search-overlay.shown {
-    z-index: 10!important;
-    opacity: 1!important;
-}
-
-#global-search #pagefind input {
-    outline: none
-}
-
-#global-search.shown {
-    z-index: 15!important;
-    display: flex!important;
-}
-</style>
-
-<div id="global-search-container">
-    <div id="global-search"
-        class="fixed -z-10 hidden top-0 left-0 right-0 bottom-0 items-center justify-center">
-        <div id="global-search-close" class="absolute top-0 right-0 px-4 text-12 cursor-pointer">×</div>
-        <!-- Pagefind Search -->
-        <div id="pagefind" class="max-h-[90vh] overflow-y-auto w-full m-4 md:w-[600px]"></div>
-        <script>
-          window.addEventListener('DOMContentLoaded', () => {
-            new PagefindUI({ element: "#pagefind", showSubResults: true });
-          });
-        </script>
-    </div>
-
-    <div id="global-search-overlay"
-        class="fixed top-0 left-0 w-full h-full bg-[rgba(250,250,250,0.75)] dark:bg-[rgba(30,30,30,0.75)]
-            backdrop-blur-md -z-10 opacity-0 transition-opacity duration-300">
-    </div>
-
-    <script>
-      (() => {
-        const search = document.getElementById("global-search");
-        const overlay = document.getElementById("global-search-overlay");
-
-        const turnOn = () => {
-          search.classList.add("shown");
-          search.classList.add("animation-fade-in");
-          overlay.classList.add("shown");
-
-          umami.track('🔍 Open search panel')
-        };
-        const turnOff = () => {
-          search.classList.remove("shown");
-          search.classList.remove("animation-fade-in");
-          overlay.classList.remove("shown");
-        };
-
-        window.addEventListener("keydown", (event) => {
-          if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-            event.preventDefault();
-            // 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();
-          }
-        });
-
-        // trigger by clicking instruction text
-        // to allow mobile users to search
-        const searchInstruction = document.getElementById("search-instruction");
-        if (searchInstruction) {
-          searchInstruction.addEventListener("click", turnOn);
-        }
-
-        // double-click to turn off search
-        // in case esc and ctrl/cmd+k cannot be used
-        search.addEventListener("dblclick", turnOff);
-
-        const closeButton = document.getElementById("global-search-close");
-        closeButton.addEventListener("click", turnOff);
-      })();
-    </script>
-</div>
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index cbeb034d..d6e8960e 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -20,9 +20,7 @@
                     (strings.HasPrefix $.Page.RelPermalink "/tags/"))
             ) }}
         {{ end }}
-        <li id="search-instruction" class="cursor-pointer text-size-sm text-secondary ml-2">
-            <span>{{ T "searchInstruction" }}</span>
-        </li>
+
         <li class="absolute right-0 dark:invert">
             <a href="{{ .Site.LanguagePrefix }}/stats"
                 data-tooltip="{{ T "statsTooltip" }}"