From 994cccea70072a515348cea3ba47981742fb2743 Mon Sep 17 00:00:00 2001
From: Calum H <hendersoncal117@gmail.com>
Date: Sun, 5 May 2024 15:18:46 +0100
Subject: [PATCH] Develop page redesign. (#81)

* Develop page redesign.

* Update develop.md

* Cleanup
---
 _sass/fabric.scss                    | 41 +++++++++++++++++-
 assets/dark.scss                     |  1 +
 assets/main.scss                     |  1 +
 develop.md                           | 65 +++++++++++++++++++---------
 scripts/src/lib/Documentation.svelte | 46 +++++++++-----------
 scripts/src/lib/Versions.svelte      | 28 ++++++++----
 6 files changed, 125 insertions(+), 57 deletions(-)

diff --git a/_sass/fabric.scss b/_sass/fabric.scss
index e45be97a..d3317642 100644
--- a/_sass/fabric.scss
+++ b/_sass/fabric.scss
@@ -64,6 +64,19 @@ button, .button {
 		font-size: 20px;
 		font-weight: 700;
 	}
+	&.warning {
+		border: 2px solid $warning-color;
+
+		&:hover, &:focus {
+			background-color: darken($warning-color, 10%);
+			border-color: darken($warning-color, 10%);
+		}
+
+		&:active {
+			background-color: lighten($warning-color, 5%);
+			border-color: lighten($warning-color, 5%);
+		}
+	}
 
 	border-radius: 5px;
 	color: white !important;
@@ -143,7 +156,33 @@ p {
 
 		section {
 			padding-bottom: 12px;
-			margin-bottom: auto;
+		}
+
+		.button-group {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+		.javadoc-selector {
+			margin-bottom: 8px;
+
+			select {
+				max-width: 100%; width: 100%;
+
+				border: 2px solid $button-color;
+				color: $text-color !important;
+				padding: 8px 8px;
+				text-align: center;
+				display: inline-block;
+				box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+				font-size: 16px;
+				background-color: transparent;
+
+				option {
+					background-color: $grey-color-very-dark;
+				}
+			}
 		}
 	}
 
diff --git a/assets/dark.scss b/assets/dark.scss
index e30e3dff..af0ab9fd 100644
--- a/assets/dark.scss
+++ b/assets/dark.scss
@@ -8,6 +8,7 @@ $grey-color-dark: #6e7681;
 $grey-color-very-dark: #30363d;
 
 $button-color: #1f6feb;
+$warning-color: #eb811f;
 
 $content-width: 1024px;
 
diff --git a/assets/main.scss b/assets/main.scss
index 5fd8f504..e2ce7df7 100755
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -2,6 +2,7 @@
 ---
 
 $button-color: #2D46B9;
+$warning-color: #b96e2d;
 $grey-color-very-dark: #30363d;
 
 $content-width: 1024px;
diff --git a/develop.md b/develop.md
index 24cea03f..cbb945ba 100755
--- a/develop.md
+++ b/develop.md
@@ -1,34 +1,57 @@
 ---
-layout: page
+layout: default
 title: Develop
 permalink: /develop/
 topnav: true
 ---
 
-This page contains a range of resources to help you create a new mod or maintain an existing mod.
-
-### Getting started
-
-* If you would like to create a new mod please see the [wiki](https://fabricmc.net/wiki/start/).
-
-* Use the online [template mod generator](./template/).
-
-* An up-to date template mod can be found on [github](https://github.com/FabricMC/fabric-example-mod).
-
-* Install the [Fabric command line tools](./cli/).
-
-* If you need some extra help we have a number of mod development channels on our [Discord](https://discord.gg/v6v4pMv).
-
-### Latest Versions
+# Develop
+
+This page provides a curated selection of resources to support both new mod creation and the maintenance of existing projects. 
+
+If you require additional help, [the Fabric Discord server](https://discord.gg/v6v4pMv) offers dedicated mod development channels with resources and advice from the community.
+
+<div class="home post-content">
+<hr>
+   <section>
+      <div class="row-3">
+         <article class="column">
+            <h3>Getting Started</h3>
+            <section class="with-button-group">
+               <p class="component-body">If you want to learn how to create mods, you should refer to the wiki or the official documentation site.</p>
+            </section>
+            <div class="button-group">
+							<a class="button secondary" href="https://fabricmc.net/wiki/start">Fabric Wiki</a>
+							<a class="button secondary" href="https://docs.fabricmc.net/">Fabric Documentation</a>
+						</div>
+         </article>
+         <article class="column">
+            <h3>Project Templates</h3>
+            <section class="with-button-group">
+               <p>Project templates offer a standardized foundation for Fabric mods - allowing you to quickly create new projects.</p>
+            </section>
+            <div class="button-group">
+							<a class="button secondary" href="https://github.com/FabricMC/fabric-example-mod">Example Mod Repository</a>
+							<a class="button secondary" href="./cli/">Fabric Command Line Tools</a>
+							<a class="button secondary" href="./template/">Online Template Mod Generator</a>
+						</div>
+         </article>
+         <article class="column">
+            <h3>Javadoc</h3>
+            <section class="with-button-group">
+               <p>Easily access Javadoc for toolchain projects and the game, either online or directly within your IDE.</p>
+            </section>
+            <noscript style="color:red">You need Javascript to show the documentation links</noscript>
+<div class="fabric-component" data-component="Documentation"></div>
+         </article>
+      </div>
+   </section>
+   <hr>
+</div>
 
 <noscript style="color:red">You need Javascript to show the latest Versions</noscript>
 <div class="fabric-component" data-component="Versions"></div>
 
-### Online documentation
-
-<noscript style="color:red">You need Javascript to show the documentation links</noscript>
-<div class="fabric-component" data-component="Documentation"></div>
-
 {% assign cacheBust = site.time | date:'?v=%s' %}
 <script type="text/javascript" src="{{ "/scripts/main.js" | relative_url | append: cacheBust }}"></script>
 <link href="{{ "/scripts/style.css" | relative_url | append: cacheBust }}" rel="stylesheet">
diff --git a/scripts/src/lib/Documentation.svelte b/scripts/src/lib/Documentation.svelte
index cea55da8..d92268c8 100644
--- a/scripts/src/lib/Documentation.svelte
+++ b/scripts/src/lib/Documentation.svelte
@@ -5,6 +5,14 @@
         getLoaderVersions,
     } from "./Api";
 
+		function handleSelectChange(event: any, project: any) {
+				const selectedVersion = event.target.value;
+
+				if (selectedVersion.includes("Select")) return;
+
+				window.open(`https://maven.fabricmc.net/docs/${project.prefix}${selectedVersion}/`, '_blank');
+		}
+
     function filterAndSortVersions(
         versions: string[],
         prefix: string,
@@ -31,7 +39,7 @@
 
         return [
             {
-                name: "Minecraft (yarn mappings)",
+                name: "Minecraft (Yarn)",
                 desc: "Javadoc documentation for Minecraft generated from the comments in the yarn mappings.",
                 prefix: "yarn-",
                 versions: filterAndSortVersions(
@@ -39,14 +47,14 @@
                     "yarn-",
                     yarnVersions.map((v) => v.version)
                 ),
-                selected: yarnVersions[0].version,
+                selected: "Select Version",
             },
             {
                 name: "Fabric API",
                 desc: "Javadoc documentation for Fabric API",
                 prefix: "fabric-api-",
                 versions: apiVersions,
-                selected: apiVersions[0],
+                selected: "Select Version",
             },
             {
                 name: "Fabric Loader",
@@ -57,7 +65,7 @@
                     "fabric-loader-",
                     loaderVersions.map((v) => v.version)
                 ),
-                selected: loaderVersions[0].version,
+                selected: "Select Version",
             },
             // Disabled for now as the mixin JD css seems broken
             // {
@@ -76,29 +84,15 @@
 {#await data}
     <p>Loading versions..</p>
 {:then data}
-    <p>Online Javadoc is available for each project and the game itself using the links below, but also through your IDE directly.</p>
     {#each data as project}
-        <!-- <h5>{project.name}</h5> -->
-        <!-- <p>{project.desc}</p> -->
-
-        <p>
-            {project.name}:
-            <select bind:value={project.selected} style="min-width: 200px">
-                {#each project.versions as version}
-                    <option value={version}>{version}</option>
-                {/each}
-            </select>
-
-            <a
-            class="jdbutton"
-            href={"https://maven.fabricmc.net/docs/" +
-                project.prefix +
-                project.selected +
-                "/"}
-            >
-                Go to JavaDoc
-            </a>
-        </p>
+        <div class="javadoc-selector">
+					<select value="Select {project.name} Version" on:change={(event) => handleSelectChange(event, project)}>
+						<option>Select {project.name} Version</option>
+							{#each project.versions as version}
+									<option value={version}>{version}</option>
+							{/each}
+					</select>
+				</div>
     {/each}
 {:catch error}
     <p style="color: red">Error: {error.message}</p>
diff --git a/scripts/src/lib/Versions.svelte b/scripts/src/lib/Versions.svelte
index 6aab570f..a82bdc59 100644
--- a/scripts/src/lib/Versions.svelte
+++ b/scripts/src/lib/Versions.svelte
@@ -31,8 +31,10 @@
 </script>
 
 {#await gameVersions}
-    <p>Loading versions..</p>
+    <p>Loading versions...</p>
 {:then gameVersions}
+		<h2>Latest Versions</h2>
+		<p>Select a Minecraft version to get the recommended versions of Fabric Loader, Yarn, and Fabric API for your <code>gradle.properties</code> file.</p>
     <p>
         Minecraft Version:
         <select bind:value={minecraftVersion} style="min-width: 200px">
@@ -48,19 +50,25 @@ minecraft_version={minecraftVersion}
 yarn_mappings={yarnVersion}
 loader_version={loaderVersion}
 
-#Fabric api
+# Fabric API
 fabric_version={apiVersion}
         </code></pre>
+
+				<p><strong>Important Note:</strong> In some cases, such as snapshots or special releases, the <code>fabric-api</code> version might not align perfectly with your Minecraft version.</p>
+				<p>If you encounter issues, double-check the latest release of Fabric API on <a href="https://modrinth.com/mod/fabric-api">Modrinth</a> or <a href="https://minecraft.curseforge.com/projects/fabric/files">CurseForge</a>.</p> 
       </div>
+			
+			<hr />
+
+      <h2>Automatically Update Mappings</h2>
+			<p>Keep your project up-to-date with the correct Yarn mappings using this automatic update command:</p>
 
-      <h4>Automatically update mappings</h4>
-      <p>Mappings can be auto updated by using the following command. See the <a href="https://fabricmc.net/wiki/tutorial:migratemappings">wiki page</a> for more help.</p>
+			<code class="copy-code">
+				gradlew migrateMappings --mappings "{yarnVersion}"
+			</code>
 
-      <code class="copy-code">
-        gradlew migrateMappings --mappings "{yarnVersion}"
-      </code>
+			<p>For more information on this command, you should refer to the <a href="https://fabricmc.net/wiki/tutorial:migratemappings">Updating Yarn Mappings</a> wiki page.</p>
 
-      <p>Note: The fabric-api version may not be the correct version for the given Minecraft version in some situations. Check the <a href="https://minecraft.curseforge.com/projects/fabric/files">CurseForge</a> page if you run into issues.</p>
 {:catch error}
     <p style="color: red">Error: {error.message}</p>
     <p>
@@ -70,7 +78,9 @@ fabric_version={apiVersion}
     </p>
 {/await}
 
-<h4>Loom</h4>
+<hr />
+
+<h2>Loom</h2>
 
 <p>The recommended loom version is <strong>1.6-SNAPSHOT</strong>. This is usually defined near the top of your build.gradle file.</p>