From ed5c696655c24c854b897a15e9387aeb8755e847 Mon Sep 17 00:00:00 2001
From: William Kray <williamkray@users.noreply.github.com>
Date: Mon, 26 Jun 2023 12:07:01 -0700
Subject: [PATCH] Add basic searchbar (#5)

Co-authored-by: Tulir Asokan <tulir@maunium.net>
---
 layouts/index.html           |  3 +++
 layouts/partials/plugin.html |  2 +-
 static/index.css             |  8 ++++++++
 static/index.js              | 15 +++++++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 static/index.js

diff --git a/layouts/index.html b/layouts/index.html
index a3e5676..19188bd 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -19,6 +19,7 @@
       To add your own plugins, send a pull request to
       <a href="https://github.com/maubot/plugins.maubot.xyz">github.com/maubot/plugins.maubot.xyz</a>
     </p>
+    <input class="search" type="text" id="search-input" placeholder="Search..." onkeyup="searchPlugins()">
   </header>
   <main>
     {{ range index $.Site.Data.plugins.official }}
@@ -32,5 +33,7 @@
     <a href="https://github.com/maubot/plugins">Website source</a>
     - Licensed under <a href="https://mau.fi/LICENSE">CC-BY-SA-4.0</a>
   </footer>
+
+  <script type="module" src="/index.js"></script>
 </body>
 </html>
diff --git a/layouts/partials/plugin.html b/layouts/partials/plugin.html
index b493310..23d6465 100644
--- a/layouts/partials/plugin.html
+++ b/layouts/partials/plugin.html
@@ -1,5 +1,5 @@
 <div class="plugin">
-  <h3>{{ .name }}</h3>
+  <h3 class="title">{{ .name }}</h3>
   <div class="metadata">
     <div class="author">Author: {{ .author }}</div>
     <div class="license">License: {{ or .license "unknown" }}</div>
diff --git a/static/index.css b/static/index.css
index 2afd435..c12236b 100644
--- a/static/index.css
+++ b/static/index.css
@@ -18,6 +18,14 @@ main {
 
 body > header {
   text-align: center;
+  margin: 0 1rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 800px;
+  box-sizing: border-box;
+  padding: .5rem;
 }
 
 .plugin {
diff --git a/static/index.js b/static/index.js
new file mode 100644
index 0000000..5944bcb
--- /dev/null
+++ b/static/index.js
@@ -0,0 +1,15 @@
+function searchPlugins() {
+    const filter = document.querySelector("#search-input").value.toLowerCase()
+    for (const plugin of document.querySelectorAll(".plugin")) {
+        const name = plugin.querySelector(".title").textContent.toLowerCase()
+        const description = plugin.querySelector(".description").textContent.toLowerCase()
+
+        if (name.includes(filter) || description.includes(filter)) {
+            plugin.style.display = ""
+        } else {
+            plugin.style.display = "none"
+        }
+    }
+}
+
+window.searchPlugins = searchPlugins