Moving to Eleventy. Search not working yet.

assets/featured.js

@@ -0,0 +1,30 @@
+const featuredHelper = document.querySelector("#featuredHelper");
+
+async function getFeaturedJSON() {
+    const response = await fetch(`featured.json`);
+    if (!response.ok) { 
+        featuredHelper.innerHTML = `
+        <p>;( Oopsie! Could not load featured projects...</p>
+        `
+        throw new Error("Failed to fetch featured projects JSON");
+    }
+
+    const data = await response.json();
+
+    data.forEach(project => {
+        const featuredDiv = document.createElement("div");
+        featuredDiv.classList.add("featuredProject");
+        featuredDiv.id = `featured-${project}`;
+        featuredDiv.innerHTML = `
+            <a href="project.html?id=${project}">
+                <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`))
+    });
+}
+
+getFeaturedJSON();

assets/index.js

@@ -0,0 +1,11 @@
+const featuredHelper = document.querySelector("#featuredHelper")
+
+async function loadFeatured() {
+    const response = await fetch(`bananas.json`);
+    if (!response.ok) {
+        featuredHelper.innerHTML = `
+        <p>Oops! Failed to fetch featured projects...</p>
+        `
+        throw new Error("Failed to fetch featured projects JSON");
+    }
+}

assets/project.js

@@ -0,0 +1,53 @@
+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/styles.css

@@ -0,0 +1,255 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+@font-face {
+    font-family: Minecraft;
+    src: url("MinecraftRegular-Bmg3.otf") format("opentype");
+}
+
+body {
+    font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+    background-color: black;
+    color:white;
+    font-size : clamp(1.2rem, .2vw, 2rem);
+}
+
+header {
+    display: flex;
+}
+
+a {
+    text-decoration: none;
+    color:greenyellow;
+}
+
+main {
+    outline: 2px solid gray;
+    margin-top: 20px;
+    padding: 20px;
+    background-color: black;
+}
+
+button {
+    transition: .2s;
+    background-color: black;
+    color: white;
+    padding: 10px;
+    outline: 1px white;
+}
+
+button:hover {
+    color: gray;
+    border: 1px solid gray;
+}
+
+code {
+    font-family: Minecraft, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+    background-color: rgb(75, 75, 75);
+    border: 1px solid white;
+    padding-left: 4px;
+    padding-right: 4px;
+    /* margin-left: 2px;
+    margin-right: 2px; */
+}
+
+#linksBox {
+    padding: 10px;
+    display: flex;
+    width: 100%;
+    background-color: black;
+    outline: 2px solid gray;
+    height: fit-content;
+}
+
+#headerLinks a {
+    margin-top: auto;
+    margin-bottom: auto;
+    padding: 0;
+    padding-left: 0;
+}
+
+#everythingHelper {
+    max-width: 60%;
+    margin: auto;
+    transform: .2s;
+}
+
+#headerLinks {
+    padding: 0;
+    margin-left: 10px;
+}
+
+#title {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+#featured {
+    margin-top: 20px;
+    border: 2px solid greenyellow;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+#featuredHelper {
+    display: flex;
+    flex-direction: row;
+}
+
+
+.featuredProject {
+    transition: .2s;
+    height: fit-content;
+    width: 15%;
+    font-size: smaller;
+    padding: 4px;
+    overflow: hidden;
+}
+
+.featuredProject:hover {
+    transition: .2s;
+    outline: 4px solid gray;
+}
+
+.featuredProject img {
+    width: 100%;
+}
+
+.featuredProject p {
+    margin-right: auto;
+    margin-left: auto;
+    text-overflow:clip;
+}
+
+#featured h2 {
+    font-size: medium;
+    font-weight: 100;
+    margin-bottom: 10px;
+}
+
+#featuredHelper {
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+#projectTitleSubtitle {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+#projectHeader {
+    padding-top: 20px;
+    gap: 20px;
+    display: flex;
+    text-shadow: 2px 2px gray;
+}
+
+#downloadButton {
+    border: 2px solid gray;
+}
+
+#downloadLink {
+    color: gray;
+    height: fit-content;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: auto;
+    text-align: right;
+    text-shadow: 2px 2px black;
+}
+
+#downloadButton:hover {
+    cursor: pointer;
+    border-color: white;
+}
+
+#projectHeader img {
+    outline: 2px solid gray;
+    height: 100%;
+}
+
+#projectDescription li {
+    margin-left: 20px;
+    list-style-type: "> ";
+}
+
+#projectDescription h1, h2 {
+    margin-top: 8px;
+}
+
+#projectTitleAuthor {
+    display: flex;
+}
+
+#projectAuthor {
+    margin-left: 10px;
+    margin-top: auto;
+    margin-bottom: 6px;
+}
+
+#credits {
+    margin-left: auto;
+}
+
+@media only screen and (max-width: 1280px) {
+
+    #everythingHelper {
+        max-width: 80%;
+    }
+
+    #linksBox {
+        flex-direction: column;
+    }
+
+    #linksBox * {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    #projectHeader {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    #projectHeader * {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    #projectHeader img {
+        width: 10vh;
+        height: 10vh;
+    }
+
+    #projectTitleAuthor {
+        flex-direction: column;
+    }
+
+    /* #featuredHelper {
+        flex-direction: column;
+    } */
+
+    #featuredHelper * {
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    header {
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 300px) {
+
+    #everythingHelper {
+        max-width: 90%;
+    }
+
+    #projectAuthor {
+        margin: 0;
+    }
+    
+}