Add basic searchbar (#5)

Co-authored-by: Tulir Asokan <tulir@maunium.net>

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>

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>

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 {

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