Redesigned Installer box + Rounded UI + Other UI Improvements

assets/js/neoforge.js

@@ -9,14 +9,24 @@ async function loadLatestVersions(minecraftVersions) {
 	let gav;
 	let fn;
 	let mcvers;
+    let note;
+    let dropDown_VAL;
+    let badges_beta;
+    let badges_new;
 	if (mcVersion.startsWith("1.20.1")) {
 		gav = LEGACY_GAV;
-                fn = "forge";
-		mcvers = "1.20.1"
+        fn = "forge";
+		mcvers = "1.20.1";
+        badges_new = "";
+        badges_beta = "";
+        dropDown_VAL = "";
 	} else {
 		gav = FORGE_GAV;
-                fn = "neoforge";
-		mcvers = `1.${mcVersion}`
+        fn = "neoforge";
+		mcvers = `1.${mcVersion}`;
+        badges_beta = "";
+        badges_new = `<font class="badges_new">NEW</font>`;
+        dropDown_VAL = ` open="open"`;
 	}
         let currentMcVersionUrl = new URL(LATEST_ENDPOINT + encodeURIComponent(gav) + '?filter=' + encodeURIComponent(mcVersion));
         let versionJson;
@@ -34,17 +44,24 @@ async function loadLatestVersions(minecraftVersions) {
 
         if (versionJson) {
             const {version} = versionJson;
+            if (version.includes("beta")) {
+                badges_beta = `<font class="badges_beta">BETA</font>`;
+            }
+
             const vs = `#filelist${mcVersion}`.split('.').join("");
             const installerUrl = `${DOWNLOAD_URL}/${gav}/${encodeURIComponent(version)}/${fn}-${encodeURIComponent(version)}-installer.jar`;
             const changelogUrl = `${DOWNLOAD_URL}/${gav}/${encodeURIComponent(version)}/${fn}-${encodeURIComponent(version)}-changelog.txt`;
+
             document.querySelector(vs).innerHTML = `
-                <div class="fileinfo__header">NeoForge ${version} for Minecraft ${mcvers}</div>
+                <details${dropDown_VAL}>
+                <summary class="fileinfo__header">${badges_beta} ${badges_new} NeoForge ${version} for Minecraft ${mcvers}</summary>
                 <div class="fileinfo__body">
                 <a href="${installerUrl}"><span class="fileinfo__icon"><i class="bi-file-earmark-zip-fill" style="font-size: 2rem;"></i></span>
-			<span class="fileinfo__content"><span>Latest <em>NeoForge</em> Installer</span><span>${fn}-${version}-installer.jar</span></span></a>
+			    <span class="fileinfo__content"><span>Latest <em>NeoForge</em> Installer</span><span>${fn}-${version}-installer.jar</span></span></a>
                 <a href="${changelogUrl}"><span class="fileinfo__icon"><i class="bi-file-earmark-text-fill" style="font-size: 2rem;"></i></span>
-			<span class="fileinfo__content"><span>Latest Changelog</span><span>${version}</span></span></a>
+			    <span class="fileinfo__content"><span>Latest Changelog</span><span>${version}</span></span></a>
                 </div>
+                </details>
             `;
         }
     }

content/_index.md

@@ -12,11 +12,10 @@ description: |
 # NeoForge installer files
 You can find a direct link to our latest installer files below.
 
-{{<projects>}}
-
+<!--Change with the latest version here-->
+{{< files "20.4" >}}
 {{< files "1.20.1" >}}
-
-Note: the file is still called forge in 1.20.1 to maintain compatibility with launchers.
+{{< versions >}}
 
 # Using NeoForge for mod development
 

layouts/shortcodes/files.html

@@ -4,13 +4,17 @@
   {{ .Page.Scratch.Set "nfJS" "hi" }}
 {{ end }}
 
-<div id="filelist{{ replace (.Get 0) "." "" }}" class="fileinfo">
-    <div class="fileinfo__header">NeoForge (loading version...)</div>
-    <div class="fileinfo__body">
-        <a><span>Latest <em>NeoForge</em> Installer</span><span class="fileinfo__placeholder">neoforge-0.00.00-00.00.00-installer.jar</span></a>
-        <a><span>Latest Changelog</span><span class="fileinfo__placeholder">0.00.00-00.00.00</span></a>
+
+    <div id="filelist{{ replace (.Get 0) "." "" }}" class="fileinfo">
+        <details>
+            <summary class="fileinfo__header">NeoForge (loading version...)</summary>
+            <div class="fileinfo__body">
+                <a><span>Latest <em>NeoForge</em> Installer</span><span class="fileinfo__placeholder">neoforge-0.00.00-00.00.00-installer.jar</span></a>
+                <a><span>Latest Changelog</span><span class="fileinfo__placeholder">0.00.00-00.00.00</span></a>
+            </div>
+        </details>
     </div>
-</div>
+
 <script>
 document.addEventListener("readystatechange", evt=>{
     if (evt.target.readyState === "complete") {

layouts/shortcodes/versions.html

@@ -0,0 +1,3 @@
+<div class="versions-border">
+    <a class="versions" href="https://projects.neoforged.net/neoforged/neoforge">All Versions ➤</a>
+</div>

themes/mainroad/assets/css/style.css

@@ -1052,10 +1052,40 @@ textarea {
 	display: inline-block;
 }
 
+/* Installer Dropdowns */
+details {
+	border: .15rem solid transparent;
+}
+
+details:hover {
+	border: .15rem solid;
+}
+
+summary:hover {
+	filter: brightness(.85);
+}
+
+/* Installer */
 .fileinfo {
 	text-align: center;
 	margin: 0 0 20px;
 	margin: 0 0 1.25rem;
+	margin-bottom: 5px;
+}
+
+.versions {
+	padding: 5px 10px;
+}
+
+.versions-border {
+	padding: 10px 20px;
+	text-align: center;
+	width: max-content;
+}
+
+.versions-border:hover > .versions:hover  {
+	text-decoration: none;
+	color: var(--color-download-highlight);
 }
 
 .fileinfo .fileinfo__header {
@@ -1105,6 +1135,16 @@ textarea {
 	visibility: hidden;
 }
 
+/* Installer Badges */
+.badges_beta {
+	padding: 0 5px;
+}
+
+.badges_new {
+	padding: 0 5px;
+}
+
+/* News Section */
 .news {
 	margin-top: 1rem;
 }
@@ -1304,6 +1344,8 @@ textarea {
 [data-theme="light"] {
 	--color-highlight: #d7742f;
 	--color-background: #d5e0df;
+	--color-badges-beta: #d7742f;
+	--color-badges-new: #e57;
 	--color-download: #e68c37;
 	--color-download-highlight: #e5b04c;
 	--color-box: #bdc7c7;
@@ -1324,6 +1366,8 @@ textarea {
 [data-theme="dark"] {
 	--color-highlight: #d7742f;
 	--color-background: #323232;
+	--color-badges-beta: #d7742f;
+	--color-badges-new: #e57;
 	--color-download: #d7742f;
 	--color-download-highlight: #e68c37;
 	--color-box: #222222;

themes/mainroad/layouts/partials/colors.css

@@ -356,10 +356,25 @@ textarea {
 	background: var(--color-highlight);
 }
 
-.fileinfo {
+/* Installer Dropdowns */
+details:hover {
+	border-color:  var(--color-border);
+}
+
+/* Installer */
+.fileinfo, .versions-border {
 	background-color: var(--color-box);
 }
 
+.versions {
+	background-color: var(--color-background);
+}
+
+.versions-border:hover > .versions:hover  {
+	text-decoration: none;
+	color: var(--color-download-highlight);
+}
+
 .fileinfo .fileinfo__body a {
 	background-color: var(--color-download);
 	color: var(--color-text);
@@ -370,6 +385,16 @@ textarea {
 	color: var(--color-text);
 }
 
+/* Installer Badges */
+.badges_beta {
+	background-color: var(--color-badges-beta);
+}
+
+.badges_new {
+	background-color: var(--color-badges-new);
+}
+
+/* News Section */
 .news {
 	border-top: 3px solid var(--color-border);
 }