Added search using elasticlunr.

_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>

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);
+  });

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;

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));
         });

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"

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.

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>
-
-<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;
+<style>
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    justify-content: center;
   }
+</style>
 
-      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>
+<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>