Init

templates/index.j2

@@ -0,0 +1,78 @@
+{% extends "base.j2" %}
+{% block extra_css %}
+        input#searchInput {
+            width: 100%;
+            height: 2rem;
+            padding: 0.5rem;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+            margin-bottom: 1rem;
+            font-size: 1rem;
+            outline: none;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        input#searchInput:focus {
+            border-color: #0FB981;
+            box-shadow: 0 0 8px 0 #0FB981;
+        }
+
+        #searchInputLabel {
+            display: block;
+            font-size: larger;
+            margin-bottom: 1rem;
+        }
+{% endblock %}
+{% block body %}
+    <header class="header">
+        <h1>{{ header_title }}</h1>
+    </header>
+    <main class="main-content">
+        <label id="searchInputLabel" for="searchInput">Search:</label>
+        <input id="searchInput" placeholder="Loading..." oninput="searchItems()" role="search" disabled />
+        <br />
+        <h2 id="result_header"></h2>
+        <ul id="results"></ul>
+    </main>
+    <script>
+        let fuse;
+        let index;
+
+        fetch('list.json.gz')
+            .then(response => response.body.pipeThrough(new DecompressionStream('gzip')))
+            .then(stream => new Response(stream))
+            .then(response => response.json())
+            .then(data => {
+                const flattenedData = [];
+                Object.values(data).forEach(category => {
+                    Object.values(category).forEach(item => {
+                        flattenedData.push(item);
+                    });
+                });
+                fuse = new Fuse(flattenedData, {
+                    keys: ['fullname'],
+                    threshold: 0.2
+                });
+                index = fuse.index; // Create the index
+                document.getElementById("searchInput").placeholder = "";
+                document.getElementById("searchInput").disabled = false;
+            });
+
+        function searchItems() {
+            const query = document.getElementById("searchInput").value;
+            const results = fuse.search(query, { limit: 50 }); // Limit results for performance
+            const list = document.getElementById("results");
+            reault_header = document.getElementById("result_header");
+            result_header.textContent = `Results:`;
+            list.innerHTML = "";
+            results.forEach(item => {
+                const li = document.createElement("li");
+                const a = document.createElement("a");
+                a.href = item.item.url;
+                a.textContent = item.item.fullname;
+                li.appendChild(a);
+                list.appendChild(li);
+            });
+        }
+    </script>
+{% endblock %}