Init

2025-01-04 08:18:27 -06:00
commit 2287678798
16 changed files with 1534 additions and 0 deletions
--- a/templates/base.j2
+++ b/templates/base.j2
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>{{ title }}</title>
+    <link rel="icon"
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 36%22><text y=%2232%22 font-size=%2232%22>🚀</text></svg>">
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script>
+    <style>
+        /* Reset Styles */
+        * {
+            box-sizing: border-box;
+        }
+
+        /* General Styles */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #0D0A09;
+            color: white;
+        }
+
+        li {
+            font-size: large;
+            list-style-type: none;
+            margin-bottom: 0.5rem;
+        }
+
+        /* Header Styles */
+        .header {
+            background-color: #0FB981;
+            color: white;
+            padding: 1rem;
+            text-align: center;
+        }
+
+        /* Main Content Styles */
+        .main-content {
+            margin: 2rem auto;
+            padding: 1rem;
+            background-color: #282828;
+            color: white;
+            max-width: 800px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .main-content a {
+            color: #0FB981;
+        }
+
+        .head-vol {
+            color: white;
+        }
+
+        .Bl-compact { #Table of Contents
+            list-style-type: none;
+        }
+
+        /* Responsive Adjustments */
+        @media (max-width: 600px) {
+            .main-content {
+                margin: 1rem;
+                padding: 0.5rem;
+            }
+        }
+
+        /* Extra CSS */
+        {% block extra_css %}
+        {% endblock %}
+    </style>
+</head>
+
+<body>
+    {% block body %}
+    {% endblock %}
+</body>
+
+</html>
--- a/templates/index.j2
+++ b/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 %}
--- a/templates/man_page.j2
+++ b/templates/man_page.j2
@@ -0,0 +1,9 @@
+{% extends "base.j2" %}
+{% block body %}
+    <header class="header">
+        <h1>{{ header_title }}</h1>
+    </header>
+    <main class="main-content">
+        {{ main_content }}
+    </main>
+{% endblock %}