Added tags to search result, search no long matches the project tags (the ones used for filtering) and implemented author page that show up on search.

assets/featured.js

@@ -1,7 +1,7 @@
 const featuredHelper = document.querySelector("#featuredHelper");
 
 async function getFeaturedJSON() {
-    const response = await fetch(`featured.json`);
+    const response = await fetch(`/assets/featured.json`);
     if (!response.ok) { 
         featuredHelper.innerHTML = `
         <p>;( Oopsie! Could not load featured projects...</p>
@@ -17,13 +17,11 @@ async function getFeaturedJSON() {
         featuredDiv.id = `featured-${project}`;
         featuredDiv.innerHTML = `
             <a href="project.html?id=${project}">
-                <img src="projects/${project}/logo.png">
-                <p>:${project}</p>
+                <img src="/projects/${project}/logo.png">
+                <p>${project}</p>
             </a>
         `;
         featuredHelper.appendChild(featuredDiv);
-
-        loadProject(project, document.querySelector(`featured-${project} p`), undefined, undefined, undefined, document.querySelector(`featured-${project} img`))
     });
 }
 

assets/featured.json

@@ -0,0 +1 @@
+["aboukkit", "ghostsandstuff", "tenkumalib"]

assets/project.js

@@ -1,53 +0,0 @@
-const queryString = window.location.search;
-const urlParams = new URLSearchParams(queryString);
-const projectID = urlParams.get('id');
-
-async function getProjectJSON(id = projectID) {
-  const response = await fetch(`projects/${id}/project.json`);
-  if (!response.ok) throw new Error("Failed to fetch project JSON");
-  return response.json();
-}
-
-async function getProjectDescription(obj, id = projectID) {
-  const response = await fetch(`projects/${id}/description.md`);
-  if (response.ok) {
-    const text = await response.text();
-    obj.innerHTML = marked.parse(text.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""));
-  }
-}
-
-async function loadProject(id = projectID, objTitle, objSubtitle, objAuthor, objDescription, objLogo, objDownloadLink, changeColor, changeBackground) {
-  try {
-    const jsonData = await getProjectJSON(id);
-    document.title = `${jsonData.project.author}:${id}@neoBeta`
-    
-    if (objTitle) objTitle.innerText = jsonData.project.title;
-    if (objSubtitle) objSubtitle.innerText = jsonData.project.subtitle;
-    if (objAuthor) objAuthor.innerText = `by ${jsonData.project.author}`;
-    
-    if (objDescription) await getProjectDescription(objDescription, id);
-    
-    if (jsonData.project.downloadLink) {
-      if (objDownloadLink) objDownloadLink.href = jsonData.project.downloadLink;
-    } else {
-      if (objDownloadLink) objDownloadLink.innerText = "Download unavailable";
-    }
-    
-    if (jsonData.project.displayLogo == true) {
-      if (objLogo) objLogo.src = `projects/${id}/logo.png`;
-    } else {
-      objLogo.remove();
-    }
-    if (jsonData.project.backgroundColor) {
-      changeColor.style.backgroundColor = jsonData.project.backgroundColor;
-    }
-    if (jsonData.project.backgroundImage) {
-      changeBackground.style.backgroundImage = `url(${jsonData.project.backgroundImage})`;
-    }
-    if (jsonData.project.backgroundImageSize) {
-      changeBackground.style.backgroundSize = jsonData.project.backgroundImageSize;
-    }
-  } catch (error) {
-    console.error("Error loading project:", error);
-  }
-}

assets/search.js

@@ -3,22 +3,36 @@ fetch('/search_index.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 runSearch(q, tags = 'all') {
+      let result = idx.search(q, { expand: true }).map(r => docs[r.ref] )
+      if (tags === 'all') {
+        return result;
+      }
+      
+      result = result.filter(d => tags === 'all' || d.tags.includes(tags));
+
+      return result;
     }
 
     function render(doc) {
-      return `<div>
-        <img class="searchItemImage" src="${doc.image}">
-        <a class="searchItemTitle" href="${doc.url}">${doc.title}</a>
+      console.log(doc.imageq)
+      let tagsHTML = "";
+      console.log(doc.tags)
+
+      doc.tags.forEach(tag => {
+        tagsHTML += `<div class="tag-${tag}">${tag}</div>`
+      });
+
+      return `<div class="searchItem">
+        <p>${doc.image ? `<img float=left class="searchItemImage" src="${doc.image}">` : ''} <a class="searchItemTitle" href="${doc.url}">${doc.title}</a>${doc.author ? ` by <a href="/authors/${doc.author}">${doc.author}</a>` : ''}</p>
         <p class="searchItemDescription">${doc.subtitle}</p>
+        <div class="searchItemTagHolder">
+          ${tagsHTML}
+        </div>
       </div>`;
     }
 

assets/styles.css

@@ -55,6 +55,16 @@ code {
     margin-right: 2px; */
 }
 
+input, select {
+    padding: .4em;
+    background-color: black;
+    color: white;
+}
+
+p, ul {
+    padding-bottom: .6em;
+}
+
 #linksBox {
     padding: 10px;
     display: flex;
@@ -149,7 +159,7 @@ code {
     padding-top: 20px;
     gap: 20px;
     display: flex;
-    text-shadow: 2px 2px gray;
+    /* text-shadow: 2px 2px gray; */
 }
 
 #downloadButton {
@@ -163,7 +173,7 @@ code {
     margin-bottom: auto;
     margin-left: auto;
     text-align: right;
-    text-shadow: 2px 2px black;
+    /* text-shadow: 2px 2px black; */
 }
 
 #downloadButton:hover {
@@ -173,7 +183,8 @@ code {
 
 #projectHeader img {
     outline: 2px solid gray;
-    height: 100%;
+    height: 5em;
+    image-rendering: pixelated;
 }
 
 #projectDescription li {
@@ -199,6 +210,21 @@ code {
     margin-left: auto;
 }
 
+.searchItemTagHolder {
+    display: flex;
+    padding-top: .2em;
+    gap: .4em;
+}
+
+.searchItemTagHolder div {
+    border: thin solid greenyellow;
+    padding: .1em .2em .1em .2em;
+}
+
+.searchItemDescription {
+    margin-bottom: 0px;
+}
+
 @media only screen and (max-width: 1280px) {
 
     #everythingHelper {