Add wiki and feature page for MidnightControls

As well as some minor fixes

src/components/CallToAction.astro

@@ -1,19 +1,19 @@
 ---
-const { text, url_gh, url_mr, url_cf, url_wiki = "" } = Astro.props
+const { text, url_gh, url_mr, url_cf, url_wiki = "", mod = "default" } = Astro.props
 import { Icon } from 'astro-icon/components'
 ---
 
 <div class="container">
-  <div class="call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24">
+  <div class={"call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 " + mod}>
     <h2 class="text-center text-3xl md:text-5xl">{text}</h2>
     <div class="flex flex-col gap-3 min-[800px]:flex-row">
-      {(url_gh != '') ? <a href={url_gh} class="button has-icon text-center text-lg">
-        <Icon name="ion:logo-github" />GitHub</a> : ''}
-      {(url_mr != '') ? <a href={url_mr} class="button has-icon text-center text-lg">
+      {(url_mr != '') ? <a href={url_mr} class={"button has-icon text-lg " + mod+"-button-primary"}>
         <Icon name="modrinth" />Modrinth</a> : ''}
-      {(url_cf != '') ? <a href={url_cf} class="button has-icon color-tertiary text-lg">
+      {(url_cf != '') ? <a href={url_cf} class={"button has-icon text-lg " + mod+"-button-primary"}>
         <Icon name="curseforge" />CurseForge</a> : ''}
-      {(url_wiki != '') ? <a href={url_wiki} class="button has-icon color-secondary text-lg">
+      {(url_gh != '') ? <a href={url_gh} class={"button has-icon text-lg " + mod+"-button-primary"}>
+        <Icon name="ion:logo-github" />GitHub</a> : ''}
+      {(url_wiki != '') ? <a href={url_wiki} class={"button has-icon color-secondary text-lg " + mod+"-button-secondary"}>
         <Icon name="ion:book" />Visit the new Wiki!</a> : ''}
     </div>
   </div>
@@ -24,6 +24,16 @@ import { Icon } from 'astro-icon/components'
     color: var(--neutral-900);
     background-image: linear-gradient(40deg, var(--primary-100), var(--secondary-200));
   }
+  .midnightcontrols {
+    color: var(--neutral-100);
+    background-image: linear-gradient(40deg, #E302A4, #9400C6);
+  }
+  .midnightcontrols-button-primary {
+    background-color: #ff6fff;
+  }
+  .midnightcontrols-button-secondary {
+    background-color: #b356ff;
+  }
 
   .call-to-action a:not(button),
   .call-to-action a:not(button):visited {

src/components/Header.astro

@@ -18,6 +18,7 @@ import { Icon } from 'astro-icon/components'
       <ul class="dropdown-menu">
         <li class="submenu-item">
           <a href="/midnightlib/">MidnightLib</a>
+          <a href="/midnightcontrols/">MidnightControls</a>
         </li>
       </ul>
     </li>
@@ -26,6 +27,7 @@ import { Icon } from 'astro-icon/components'
       <ul class="dropdown-menu">
         <li class="submenu-item">
           <a href="/wiki/midnightlib/">MidnightLib</a>
+          <a href="/wiki/midnightcontrols/">MidnightControls</a>
         </li>
       </ul>
     </li>

src/pages/blog/[...page].astro

@@ -16,7 +16,7 @@ const { page } = Astro.props
 
 <DefaultLayout
   title="Blog"
-  description="An example of a blog with dynamic content fetched from JSONPlaceholder using the title, body and userId."
+  description="Just my personal blog, where I write about cool projects and endeavours."
 >
   <section class="my-12">
     <div class="space-content container">

src/pages/midnightcontrols.astro

@@ -0,0 +1,86 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+import Feature from '../components/Feature.astro'
+import CallToAction from '../components/CallToAction.astro'
+import ContentMedia from '../components/ContentMedia.astro'
+---
+
+<DefaultLayout title="MidnightControls">
+  <h2 class="my-8 text-6xl text-center">MidnightControls</h2>
+  <ContentMedia imgSrc="/midnightcontrols/feature-touchscreen.webp">
+    <h2>Play Minecraft whichever way <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">you</span> want!</h2>
+    <p class="text-2xl">
+      MidnightControls allows the use of controllers, touchscreens and even eye trackers!<br>
+      Minecraft Java was never more accessible.
+    </p>
+  </ContentMedia>
+  <ContentMedia imgSrc="/midnightcontrols/automobility.png" reverseImg={true}>
+    <h2>Broad mod compatibility</h2>
+    <p class="text-2xl">
+      Many Fabric and Quilt mods are compatible with MidnightControls right out of the box.<br>
+      The mod also exposes an API, allowing developers to easily add controller support to complex mods.<br>
+      <p>Shown here is <a href="https://modrinth.com/mod/automobility">Automobility</a>, go check it out!</p>
+    </p>
+  </ContentMedia>
+  <section>
+    <div class="container">
+      <h2 class="mb-16 text-6xl">Features</h2>
+      <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+        <Feature icon="mdi:controller" title="Controller Support">
+          Use your favorite controller to play your favorite game.<br>Many controllers are supported without any configuration!
+        </Feature>
+        <Feature icon="mdi:gesture-touch-button" title="Touchscreen Support">
+          You only have a touchscreen? No problem! The only thing missing is multitouch support.
+        </Feature>
+        <Feature icon="mdi:monitor-eye" title="Eye Tracker Support">
+          Eye Trackers are a great way for people with disabilities to still be able to enjoy this great game!
+        </Feature>
+        <Feature icon="mdi:cog" title="Configurable">
+          The MidnightLib-powered config is full of exciting features.<br>Use the advanced config screen for even more of them!
+        </Feature>
+        <Feature icon="mdi:account-multiple" title="Split Screen">
+          Invite your homies and loved ones for a local splitscreen Minecraft session! Consult the wiki for setup instructions.
+        </Feature>
+        <Feature icon="mdi:world" title="Great Community">
+          MidnightControls has an amazing community that is always willing to help with any trouble!
+        </Feature>
+      </div>
+    </div>
+  </section>
+  <CallToAction text="Start using MidnightControls right now!" 
+  url_gh="https://github.com/TeamMidnightDust/MidnightControls" 
+  url_mr="https://modrinth.com/mod/midnightcontrols"
+  url_cf="https://www.curseforge.com/minecraft/mc-mods/midnightcontrols"
+  url_wiki="/wiki/midnightcontrols"
+  mod="midnightcontrols"
+  />
+  <section>
+    <div class="container">
+      <h2 class="my-32 text-6xl text-center">MidnightControlsExtra</h2>
+      <ContentMedia imgSrc="/midnightcontrols/front-block-placing.webp">
+        <h2>You want even <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-cyan-500">more</span>?</h2>
+        <p class="text-2xl">
+          We got you!<br> <br>
+          MidnightControlsExtra provides useful features that might trigger anticheats.<br>
+          Front block placing, anyone?
+        </p>
+      </ContentMedia>
+      <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+        <Feature icon="mdi:speedometer" title="Fast Block Placement">
+          Place those pesky blocks almost as fast as Sonic would!
+        </Feature>
+        <Feature icon="mdi:chevron-left-right" title="Front Block Placing">
+          Place blocks in front of you without sneaking up to the edge of the block.<br>Many controllers are supported without any configuration!
+        </Feature>
+        <Feature icon="mdi:arrow-u-up-left-bold" title="Vertical Reacharound">
+          Easily place something below the block you are standing on!
+        </Feature>
+      </div>
+    </div>
+  </section>
+  <CallToAction text="Download MidnightControlsExtra!" 
+  url_gh="https://github.com/TeamMidnightDust/MidnightControlsExtra" 
+  url_mr="https://modrinth.com/mod/midnightcontrols-extra"
+  url_cf="https://www.curseforge.com/minecraft/mc-mods/midnightcontrolsextra"
+  />
+</DefaultLayout>

src/pages/midnightlib.astro

@@ -6,16 +6,17 @@ import ContentMedia from '../components/ContentMedia.astro'
 ---
 
 <DefaultLayout title="MidnightLib">
-  <ContentMedia imgSrc="/midnightlib-example-code.webp">
+  <h2 class="my-8 text-6xl text-center">MidnightLib</h2>
+  <ContentMedia imgSrc="/midnightlib/midnightlib-example-code.webp">
     <h2>Implement configurations easier than ever before!</h2>
     <p class="text-2xl">
-      Just create Java fields, annotate them with <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500 font-mono">@Entry</span>, 
+      Just create Java fields, annotate them with <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-orange-500 font-mono">@Entry</span>, 
       maybe add some more additional options, and boom! <br>
       This example can be found <a href="https://github.com/TeamMidnightDust/MidnightLib/blob/architectury/MidnightConfigExample.java"
         >here</a>, and helps you get started (almost) faster than speed of light!
     </p>
   </ContentMedia>
-  <ContentMedia imgSrc="/midnightlib-example.png" reverseImg={true}>
+  <ContentMedia imgSrc="/midnightlib/midnightlib-example.png" reverseImg={true}>
     <h2>User-friendly config screens</h2>
     <p class="text-2xl">
       Configuration screens are automatically created from config classes.<br>

src/pages/wiki/midnightcontrols.mdx

@@ -0,0 +1,61 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: MidnightControls Wiki
+---
+
+import { Icon } from 'astro-icon/components'
+import { Notification } from 'accessible-astro-components'
+
+# MidnightControls Wiki
+
+Welcome to the MidnightControls wiki.  
+This documentation aims to show you how to correctly configure the mod for your use case.  
+
+Explore MidnightControls' features on this page:
+[Get to know the features](/midnightcontrols)
+
+### Opening the settings
+Configure everything about the mod in the settings screen.
+To open it, simply open the default Minecraft options screen, click on the `Controls` section, and click on the controller button.  
+<center><img alt="A visual guide for finding the options screen" src="/midnightcontrols/open-settings.png" width="500"></img></center>
+<p class="text-center italic">Visual guide for finding the options screen</p>  
+
+### Creating and using custom controller mappings 
+Orange controller names indicate a missing controller mapping.  
+Download [GamepadTool](https://generalarcade.com/gamepadtool/), create and copy a mapping.
+Alternatively, you can use [AntiMicroX](https://github.com/AntiMicroX/antimicroX) to create the mappings, in case the Gamepad Tool is not working for you.
+
+<div class="flex flex-col gap-3 min-[1100px]:flex-row items-center">
+  <img alt="Screenshot of GamepadTool" src="/midnightcontrols/gamepad-tool.png" width="385" class="place-self-center"></img>
+  <img alt="Screenshot of AntiMicroX" src="/midnightcontrols/antimicrox.png" width="800" class="place-self-center"></img>
+</div>
+<p class="text-center italic">Screenshots of Gamepad Tool and AntiMicroX</p>  
+
+Once you've obtained the mapping, go to MidnightControls' Mappings File Editor and paste the string.
+<center>![Mapping Editor Screenshot](/midnightcontrols/mapping-editor.png)</center>
+<p class="text-center italic">MidnightControls' mappings file editor</p>  
+
+If that works, you might as well consider submitting the mapping by opening a PR in this GitHub repository: https://github.com/gabomdq/SDL_GameControllerDB  
+That will make sure other people using the same controller as you don't have to manually create a mapping anymore. 
+
+### Setting up splitscreen
+You need to setup multiple different instances of Minecraft to be able to play in splitscreen.  
+Make sure your PC can actually handle that; if so, install a launcher that allows you to run multiple instances of Minecraft in parallel (I recommend Prism Launcher).  
+In there, create a profile for the first controller, and install MidnightControls.  
+
+Start the game and open the MidnightControls settings screen.   
+In General Options, turn on <strong>`Virtual Mouse`</strong>
+<img alt="Screenshot of Virtual Mouse Option" src="/midnightcontrols/virtual-mouse.png" width="500"></img>
+In Controller Options, activate <strong>`Unfocused Input`</strong>
+<img alt="Screenshot of Unfocused Input Option" src="/midnightcontrols/unfocused-input.png" width="500"></img>
+Now, open a Minecraft world and press F3 + P to disable Minecraft pausing on lost focus.
+<img alt="Screenshot showing how to disable 'Pause on lost focus' in Minecraft" src="/midnightcontrols/pause-lost-focus.png" width="500"></img>
+
+<Notification type="info">
+  <Icon name="ion:information-circle-outline" />
+  <p>
+    <strong>Info:</strong> Splitscreen support in one single instance wouldn't be feasible without rewriting a significant portion of the Minecraft codebase.  
+    Minecraft Java is made only with one single local player in mind, so this would simply be a pain to update and break many mods.  
+    The only possibility for single-instance splitscreen is if Mojang decided to implement it themselves.
+  </p>
+</Notification>