Download Page Redesign

Gemfile

@@ -30,3 +30,7 @@ gem "wdm", "~> 0.1.0" if Gem.win_platform?
 
 gem "webrick", "~> 1.7"
 gem 'jekyll-sitemap'
+
+# Used to produce accurate redirects for the /use/ pages. 
+# Instead of using windows.location.href, create valid 3XX redirects that can be recognized by Google and other search engines.
+gem 'jekyll-redirect-from'

Gemfile.lock

@@ -33,6 +33,8 @@ GEM
       terminal-table (~> 2.0)
     jekyll-feed (0.15.1)
       jekyll (>= 3.7, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
     jekyll-sass-converter (2.1.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-seo-tag (2.7.1)
@@ -83,6 +85,7 @@ PLATFORMS
 DEPENDENCIES
   jekyll (~> 4.2.0)
   jekyll-feed (~> 0.15)
+  jekyll-redirect-from
   jekyll-sitemap
   minima (~> 2.5)
   tzinfo-data

_config.yml

@@ -24,6 +24,7 @@ theme: minima
 plugins:
   - jekyll-feed
   - jekyll-sitemap
+  - jekyll-redirect-from
 
 future: true
 

_data/topnav.yml

@@ -1,12 +1,12 @@
 
 links:
-  - title: download
-    page: use/installer.md
-  - title: blog
+  - title: Download
+    page: download.md
+  - title: Blog
     page: blog.md
-  - title: develop
+  - title: Develop
     page: develop.md
-  - title: discuss
+  - title: Discuss
     page: discuss.md
-  - title: wiki
+  - title: Wiki
     url: https://fabricmc.net/wiki/

_sass/fabric.scss

@@ -87,6 +87,16 @@ button, .button {
 	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
 }
 
+img.button-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: 4px;
+}
+
+.button span {
+	vertical-align: middle;
+}
+
 button {
 	font-size: inherit;
 	line-height: inherit;

download.md

@@ -0,0 +1,55 @@
+---
+layout: default
+title: Download
+permalink: /download/
+topnav: true
+---
+
+# Download Fabric Loader
+
+You can select the Minecraft and Fabric Loader versions in the installer, which works for all supported versions; it will install Fabric Loader and add it as a profile to your Minecraft Launcher.
+
+<noscript style="color:red">You need Javascript to show the Download button.</noscript>
+<div class="fabric-component" data-component="Download"></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">
+
+<div style="text-align: center;">
+	<b>Make sure to follow the <a href="https://docs.fabricmc.net/players/installing-fabric">installation instructions!</a></b>
+</div>
+
+## Using a Third-Party Launcher? {#third-party-launcher}
+
+These third-party launchers have their own installation process for Fabric Loader, consider checking out the relevant documentation for the launcher you are using:
+
+<!-- Todo: link to our own guides. -->
+
+<div class="button-group horizontal">
+	<a class="button secondary" href="https://fabricmc.net/wiki/player:tutorials:third-party:modrinth" target="_blank"><img class="button-icon" src="/assets/external/modrinth-app.png"><span>Modrinth App</span></a>
+	<a class="button secondary" href="https://fabricmc.net/wiki/player:tutorials:third-party:curseforge" target="_blank"><img class="button-icon" src="/assets/external/cf_app_icon.png"><span>CurseForge App</span></a>
+	<a class="button secondary" href="https://fabricmc.net/wiki/player:tutorials:third-party:prism" target="_blank"><img class="button-icon" src="/assets/external/prism_launcher.png"><span>Prism Launcher</span></a>
+	<a class="button secondary" href="https://fabricmc.net/wiki/player:tutorials:third-party:gdlauncher" target="_blank"><img class="button-icon" src="/assets/external/gdlauncher.png"><span>GDLauncher Carbon</span></a>
+	<a class="button secondary" href="https://fabricmc.net/wiki/player:tutorials:third-party:atlauncher" target="_blank"><img class="button-icon" src="/assets/external/ATLauncher.png"><span>ATLauncher</span></a>
+	<a class="button secondary" href="https://fabricmc.net/wiki/player:tutorials:third-party:ftb" target="_blank"><img class="button-icon" src="/assets/external/ftb.png"><span>FTB App</span></a>
+</div>
+<br />
+_Is your Launcher not in this list? Consider adding it to the website's [GitHub Repository.](https://github.com/FabricMC/fabricmc.net)_
+
+## Other Installation Methods
+
+### Minecraft Server {#server}
+
+To create a Minecraft server with Fabric mods, use the universal jar installer to set up a server on your system, or the Fabric Server Launcher, which wraps the vanilla server jar with Fabric Loader for dedicated servers. The executable jar is a small launcher that starts the Fabric-enabled Minecraft server using the specified versions, eliminating the need for an installer.
+
+<noscript style="color:red">You need Javascript to show the Server Executable Download button.</noscript>
+<div class="fabric-component" data-component="Server"></div>
+
+### Portable Minecraft {#portablemc}
+
+For a portable version, you can use [PortableMC](https://github.com/mindstorm38/portablemc). PortableMC is a fast, reliable, cross-platform command-line Minecraft launcher that simplifies the installation and usage of the Fabric mod loader.
+
+To use Fabric with PortableMC, you can simply run the `portablemc start fabric:` command to install and start a Fabric instance using the latest version of Fabric Loader and Minecraft.
+
+For more information, you should consult the [PortableMC repository](https://github.com/mindstorm38/portablemc).

index.md

@@ -8,7 +8,7 @@ layout: default
          <h1>Fabric Loader</h1>
          <p>Fabric is a modular, lightweight mod loader for Minecraft</p>
          <br>
-         <a class="button primary large" href="/use/">Download</a>
+         <a class="button primary large" href="/download/">Download</a>
       </div>
    </header>
    <hr>

scripts/src/lib/Installer.svelte → scripts/src/lib/Download.svelte

@@ -54,25 +54,20 @@
     {/if}
 
     <div class="download">
-      <p>
-        The Minecraft and Fabric Loader versions can be selected in the installer, this download
-        works for every version we support.
-      </p>
-
       {#if win32}
       <p>
         <a class="button primary large" href={selectedVersion.replace('.jar', '.exe')}>
           <DownloadIcon/> Download for Windows
         </a>
         <br>
         <a href={selectedVersion}>
-          Download universal jar
+          Download Universal JAR
         </a>
       </p>
     {:else}
       <p>
         <a class="button primary large" href={selectedVersion}>
-          <DownloadIcon/> Download installer (Universal/.JAR)
+          <DownloadIcon/> Download Installer (Universal/.JAR)
         </a>
         <br>
         <a href={selectedVersion.replace('.jar', '.exe')}>