From 32ebfc6176bf8f29a2a0e4b7d277bba49bb3eb56 Mon Sep 17 00:00:00 2001
From: tenkuma <adrianvictor@disroot.org>
Date: Sat, 25 Oct 2025 15:58:28 -0300
Subject: [PATCH] Added search using elasticlunr.

---
 _includes/header.njk             |  5 ++--
 assets/search.js                 | 38 ++++++++++++++++++++++++
 assets/styles.css                |  5 ++++
 eleventy.config.js               |  8 +++--
 projects/aboukkit/index.md       |  2 +-
 projects/ghostsandstuff/index.md |  4 +--
 search.html                      | 50 ++++++++++++--------------------
 7 files changed, 71 insertions(+), 41 deletions(-)
 create mode 100644 assets/search.js

diff --git a/_includes/header.njk b/_includes/header.njk
index 17486bb..d4b807b 100644
--- a/_includes/header.njk
+++ b/_includes/header.njk
@@ -2,9 +2,8 @@
     <div id="linksBox">
         <h1 id="title">neoBeta</h1>
         <ul id="headerLinks">
-            <a href="/index.html">home</a> - 
-            <a href="/index.html">mods</a> - 
-            <a href="/index.html">plugins</a>
+            <a href="/">home</a> - 
+            <a href="/search">search</a>
         </ul>
         <p id="credits">Adrian Victor, 2025 (<a href="https://git.disroot.org/adrianvictor/neoBeta">Unlicense</a>)</p>
     </div>
diff --git a/assets/search.js b/assets/search.js
new file mode 100644
index 0000000..dc1b6fc
--- /dev/null
+++ b/assets/search.js
@@ -0,0 +1,38 @@
+fetch('/search_index.json')
+  .then(r => r.json())
+  .then(data => {
+    const idx = elasticlunr.Index.load(data);
+    const docs = idx.documentStore.docs;
+    console.log(Object.values(docs)[0])
+    const searchInput = document.getElementById('search');
+    const out = document.getElementById('searchResults');
+    const filterSelect = document.getElementById('searchMode');
+
+    function runSearch(q, tags) {
+      return idx.search(q, { expand: true })
+        .map(r => docs[r.ref] )
+        .filter(d => tags === 'all' || d.tags.includes(tags));
+    }
+
+    function render(doc) {
+      return `<div>
+        <img class="searchItemImage" src="${doc.image}">
+        <a class="searchItemTitle" href="${doc.url}">${doc.title}</a>
+        <p class="searchItemDescription">${doc.subtitle}</p>
+      </div>`;
+    }
+
+    function update() {
+      const q = searchInput.value.trim();
+      if (!q) {
+        out.innerHTML = '';
+        return;
+      }
+      
+      const results = runSearch(q, filterSelect.value);
+      out.innerHTML = results.map(render).join('');
+    }
+
+    searchInput.addEventListener('input', update);
+    filterSelect.addEventListener('change', update);
+  });
\ No newline at end of file
diff --git a/assets/styles.css b/assets/styles.css
index 3828d2c..6fa9e00 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,6 +1,7 @@
 * {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
 
 @font-face {
@@ -86,6 +87,10 @@ code {
     margin-bottom: auto;
 }
 
+.searchItemImage {
+    height: 1em;
+}
+
 #featured {
     margin-top: 20px;
     border: 2px solid greenyellow;
diff --git a/eleventy.config.js b/eleventy.config.js
index f7fd917..0d09f23 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -2,7 +2,6 @@ import elasticlunr from 'elasticlunr';
 import fs from 'fs';
 
 let allPlugins = [];
-let lunrIndex = null;
 
 export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("projects/**/*.png");
@@ -11,11 +10,13 @@ export default function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy("assets");
     
     eleventyConfig.addCollection('searchIndex', (collectionApi) => {
-        const result =  collectionApi.getFilteredByTag("plugin").map(item => {
+        const result =  collectionApi.getAll().map(item => {
             return {
                 title: item.data.projectName,
                 subtitle: item.data.projectSubtitle || "",
-                url: item.url
+                url: item.url,
+                image: (item.data.logoName && item.data.logoExtension) ? item.url + item.data.logoName + '.' + item.data.logoExtension : '',
+                tags: item.data.tags
             };
         });
         
@@ -28,6 +29,7 @@ export default function (eleventyConfig) {
             this.setRef('url');
             this.addField('title', { boost: 2 });
             this.addField('subtitle');
+            this.addField('tags')
             
             allPlugins.forEach(doc => this.addDoc(doc));
         });
diff --git a/projects/aboukkit/index.md b/projects/aboukkit/index.md
index ae36262..28adc04 100644
--- a/projects/aboukkit/index.md
+++ b/projects/aboukkit/index.md
@@ -1,7 +1,7 @@
 ---
 layout: "project.njk"
 projectName: "Aboukkit"
-projectSubtitle: "Adds a simple way to add custom commands with custom responses to your server."
+projectSubtitle: "A simple way to add custom commands with custom responses to your server."
 projectAuthor: "tenkuma"
 projectDownloadLink: "https://modrinth.com/plugin/aboukkit/versions"
 backgroundImageSize: "cover"
diff --git a/projects/ghostsandstuff/index.md b/projects/ghostsandstuff/index.md
index f27d39c..a714e9e 100644
--- a/projects/ghostsandstuff/index.md
+++ b/projects/ghostsandstuff/index.md
@@ -1,7 +1,7 @@
 ---
 layout: "project.njk"
 projectName: "Ghosts 'n Stuff"
-projectSubtitle: "Adds a simple way to add custom commands with custom responses to your server."
+projectSubtitle: "Miscellaneous additions to your Minecraft server."
 projectAuthor: "tenkuma"
 projectDownloadLink: "https://modrinth.com/plugin/ghosts/versions"
 backgroundImageSize: "cover"
@@ -10,7 +10,7 @@ logoExtension: "png"
 tags: "plugin"
 ---
 
-This plugins aims to use stuff from my library that would not fit into any plugin (or not in the way presented here) that has ~~a lot~~ (WIP) of random stuff. Everything should be togglable in the config.
+This plugins was made to use stuff from my library that would not fit into any plugin (or not in the way presented here) that has ~~a lot~~ (WIP) of random stuff. Everything should be togglable in the config.
 
 ## Features
 - **RainbowChat:** Rainbow color code.
diff --git a/search.html b/search.html
index 4a5fb01..46d003f 100644
--- a/search.html
+++ b/search.html
@@ -1,37 +1,23 @@
 ---
 layout: "base.njk"
 ---
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js"></script>
+<script src="/assets/search.js" defer></script>
 
-<input type="text" id="search" placeholder="Search..." />
-<ul id="results"></ul>
+<style>
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    justify-content: center;
+  }
+</style>
 
-<script
-type="text/javascript"
-src="https://cdnjs.cloudflare.com/ajax/libs/elasticlunr/0.9.6/elasticlunr.min.js"
-></script>
-<script>
-  fetch('/search_index.json')
-  .then(r => r.json())
-  .then(data => {
-    const idx = elasticlunr.Index.load(data);
-    const docs = idx.documentStore.docs;
-    const searchInput = document.getElementById('search');
-    const out = document.getElementById('results');
-    
-    searchInput.addEventListener('input', function () {
-      const q = this.value.trim();
-      if (!q) {
-        out.innerHTML = '';
-        return;
-      }
-      
-      const items = idx.search(q).map(r => {
-        const doc = docs[r.ref];
-        return `<li><a href="${doc.url}">${doc.title}</a></li>`;
-      });
-      
-      out.innerHTML = items.join('');
-    });
-    
-  });
-</script>
\ No newline at end of file
+<div style="display: flex; gap: .5em;">
+  <input type="text" id="search" placeholder="Search..." style="flex-grow: 1;"/>
+  <select name="Search mode" id="searchMode">
+    <option value="plugin" selected>Plugins</option>
+    <option value="mod">Mods</option>
+  </select>
+</div>
+<div id="searchResults" style="display: flex; gap: .5em; flex-direction: column;"></div>
\ No newline at end of file