Finish main content, add MidnightLib wiki

src/assets/img/logo.svg

@@ -1,4 +0,0 @@
-<svg width="47" height="37" viewBox="0 0 47 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.5092 1.89746H35.3259L20.7566 23.6923H0.939941L15.5092 1.89746Z" fill="#42E0CE"/>
-<path d="M16.3771 25.7122L10.7341 34.1539H31.4908L46.0601 12.3591H30.7403L21.8141 25.7122H16.3771Z" fill="#A14FD6"/>
-</svg>

src/assets/scss/base/_color.scss

@@ -11,11 +11,11 @@ $colors: (
     500: hsl(276, 96%, 20%),
   ),
   secondary: (
-    100: hsl(173, 81%, 68%),
+    100: hsl(140, 80%, 68%),
-    200: hsl(173, 80%, 63%),
+    200: hsl(140, 80%, 63%),
-    300: hsl(173, 72%, 57%),
+    300: hsl(140, 72%, 57%),
-    400: hsl(173, 75%, 47%),
+    400: hsl(140, 75%, 47%),
-    500: hsl(173, 90%, 30%),
+    500: hsl(140, 90%, 30%),
   ),
   neutral: (
     100: hsl(0 0% 100%),

src/components/CallToAction.astro

@@ -1,7 +1,15 @@
+---
+const { text, url_gh, url_mr, url_cf } = Astro.props
+---
+
 <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">
-    <h2 class="text-center text-3xl md:text-5xl">Get this theme on GitHub</h2>
+    <h2 class="text-center text-3xl md:text-5xl">{text}</h2>
-    <a href="https://github.com/markteekman/accessible-astro-starter" class="text-center text-lg"> Use this theme</a>
+    <div class="flex-row">
+      <a href={url_gh} class="text-center text-lg">GitHub</a>
+      <a href={url_mr} class="text-center text-lg">Modrinth</a>
+      <a href={url_cf} class="text-center text-lg">CurseForge</a>
+    </div>
   </div>
 </div>
 
@@ -13,7 +21,10 @@
 
   .call-to-action a:not(button),
   .call-to-action a:not(button):visited {
+    display: inline-block;
+    vertical-align: top;
     padding: 1rem;
+    margin: 0 1rem 0 1rem;
     color: var(--neutral-900);
     font-weight: bold;
     border: 3px solid var(--neutral-900);

src/components/ContentMedia.astro

@@ -4,7 +4,7 @@ import { Media } from 'accessible-astro-components'
 const { imgSrc, reverseImg = false } = Astro.props
 ---
 
-<section class="my-64">
+<section class="my-32">
   <div class="container">
     <div class="grid grid-cols-1 gap-24 md:grid-cols-2">
       {!reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}

src/components/Footer.astro

@@ -1,16 +1,13 @@
 ---
-import CallToAction from './CallToAction.astro'
-
 const currentYear = new Date().getFullYear()
 ---
 
 <footer>
-  <CallToAction />
   <section class="py-8">
     <div class="container">
       <p>
-        &copy; {currentYear} - Starter Theme for <a href="https://astro.build/">Astro</a>. Made with ❤️ by <a
+        &copy; {currentYear} - MidnightDust. A project by <a
-          href="https://github.com/markteekman">Mark Teekman</a
+          href="https://github.com/Motschen">Martin Prokoph</a
         >.
       </p>
     </div>

src/components/Header.astro

@@ -14,21 +14,26 @@ import { Icon } from 'astro-icon/components'
       <a href="/blog/">Blog</a>
     </li>
     <li class="menu-item has-dropdown">
-      <button aria-haspopup="true" aria-expanded="false">Example Pages</button>
+      <button aria-haspopup="true" aria-expanded="false">Mods</button>
       <ul class="dropdown-menu">
         <li class="submenu-item">
           <a href="/mdx-page/">MDX Page</a>
         </li>
         <li class="submenu-item">
-          <a href="/markdown-page/">Markdown Page</a>
+          <a href="/midnightlib/">MidnightLib</a>
         </li>
         <li class="submenu-item">
           <a href="/accessible-components">Accessible Components</a>
         </li>
       </ul>
     </li>
-    <li class="menu-item">
+    <li class="menu-item has-dropdown">
-      <a href="https://accessible-astro.dev" title="external link" rel="external noopener noreferrer">External Link</a>
+      <button aria-haspopup="true" aria-expanded="false">Wiki</button>
+      <ul class="dropdown-menu">
+        <li class="submenu-item">
+          <a href="/wiki/midnightlib/">MidnightLib</a>
+        </li>
+      </ul>
     </li>
     <li class="menu-item type-icon">
       <a href="https://github.com/markteekman/accessible-astro-starter" title="Go to the GitHub page">

src/components/Navigation.astro

@@ -2,14 +2,14 @@
 import ResponsiveToggle from './ResponsiveToggle.astro'
 import { DarkMode } from 'accessible-astro-components'
 import { Image } from 'astro:assets'
-import logo from '../assets/img/logo.svg'
+import logo from '../assets/img/logo.png'
 ---
 
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/" class="flex items-center gap-2 !no-underline">
-      <Image src={logo} alt="MidnightDust Logo" width="47" height="37" />
+      <Image src={logo} alt="MidnightDust Logo" width="47" height="47" />
-      <span class="font-bold">MidnightDust by Motschen</span>
+      <span class="font-bold">MidnightDust – Mods by Motschen</span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">

src/layouts/DefaultLayout.astro

@@ -6,11 +6,11 @@ import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
 
 const {
-  title = 'Astro',
+  title = 'Motschen',
   description = 'A starter project with accessibility features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.',
   url,
   image = '/social-preview-image.png',
-  author = 'Mark Teekman',
+  author = 'Martin Prokoph',
 } = Astro.props
 ---
 

src/pages/index.astro

@@ -1,65 +1,12 @@
 ---
 import DefaultLayout from '../layouts/DefaultLayout.astro'
 import Hero from '../components/Hero.astro'
-import Feature from '../components/Feature.astro'
 import Counter from '../components/Counter.astro'
-import ContentMedia from '../components/ContentMedia.astro'
 ---
 
 <DefaultLayout title="Home">
   <Hero />
-  <section class="my-64">
+  <section class="mb-32 mt-32">
-    <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:tailwind" title="Tailwind CSS">
-          Use the power of Tailwind to greatly improve your productivity and enhance your developer workflow.
-        </Feature>
-        <Feature icon="mdi:wheelchair-accessibility" title="a11y Components">
-          17 components and counting, all tried and tested for the most optimal accessible experience for your visitors.
-        </Feature>
-        <Feature icon="mdi:looks" title="Prettier">
-          Less worry about formatting your code, let the Astro Prettier integration do the heavy lifting.
-        </Feature>
-        <Feature icon="mdi:eslint" title="ESLint">
-          Lint your code with strict a11y settings to ensure you stay on track with the WCAG standards.
-        </Feature>
-        <Feature icon="mdi:book-open-page-variant" title="Blog">
-          This theme comes with a fully integrated blog, dynamic pages and SEO optimization.
-        </Feature>
-        <Feature icon="mdi:language-markdown" title="Markdown & MDX">
-          Easily use .md and .mdx pages to build your websites or use it with Netlify CMS.
-        </Feature>
-        <Feature icon="mdi:theme-light-dark" title="Dark mode">
-          Fully integrated Dark mode gives your users the choice for their favorite viewing mode.
-        </Feature>
-        <Feature icon="mdi:cog" title="Design System">
-          The theme offers some very handy utilities to help you build your website faster.
-        </Feature>
-        <Feature icon="mdi:lighthouse" title="Lighthouse Scores">
-          Excellent lighthouse scores means your website will load faster and get better SEO rankings.
-        </Feature>
-      </div>
-    </div>
-  </section>
-  <ContentMedia imgSrc="/accessible-components.webp">
-    <h2>Accessible Components</h2>
-    <p class="text-2xl">
-      This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a
-      lot of others are integrated using a <a href="https://github.com/markteekman/accessible-astro-components"
-        >separate package</a
-      >. They'll get you up and running in building an accessible solution for your visitors.
-    </p>
-  </ContentMedia>
-  <ContentMedia imgSrc="/wcag-compliant.webp" reverseImg={true}>
-    <h2>WCAG 2.1 AA Compliant</h2>
-    <p class="text-2xl">
-      Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible
-      navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of
-      reaching WCAG AA compliance.
-    </p>
-  </ContentMedia>
-  <section class="mb-32 mt-64">
     <div class="container">
       <h2 class="mb-16 text-6xl">Statistics</h2>
       <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">

src/pages/midnightlib.astro

@@ -1,30 +1,27 @@
 ---
 import DefaultLayout from '../layouts/DefaultLayout.astro'
-import Hero from '../components/Hero.astro'
 import Feature from '../components/Feature.astro'
-import Counter from '../components/Counter.astro'
+import CallToAction from '../components/CallToAction.astro'
 import ContentMedia from '../components/ContentMedia.astro'
 ---
 
 <DefaultLayout title="MidnightLib">
-  <ContentMedia imgSrc="/accessible-components.webp">
+  <ContentMedia imgSrc="/midnightlib-example-code.png">
-    <h2>Accessible Components</h2>
+    <h2>Implement configurations easier than ever!</h2>
     <p class="text-2xl">
-      This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a
+      Just create Java fields, annotate them with @Entry, maybe add some more additional options, and boom! <br>
-      lot of others are integrated using a <a href="https://github.com/markteekman/accessible-astro-components"
+      This example can be found <a href="https://github.com/TeamMidnightDust/MidnightLib/blob/architectury/MidnightConfigExample.java"
-        >separate package</a
+        >here</a>, and helps you get started (almost) faster than speed of light!
-      >. They'll get you up and running in building an accessible solution for your visitors.
     </p>
   </ContentMedia>
-  <ContentMedia imgSrc="/wcag-compliant.webp" reverseImg={true}>
+  <ContentMedia imgSrc="/midnightlib-example.png" reverseImg={true}>
-    <h2>WCAG 2.1 AA Compliant</h2>
+    <h2>User-friendly config screens</h2>
     <p class="text-2xl">
-      Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible
+      Configuration screens are automatically created from config classes.<br>
-      navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of
+      Here's one generated from a class similar to the one from above!
-      reaching WCAG AA compliance.
     </p>
   </ContentMedia>
-  <section class="my-64">
+  <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">
@@ -43,20 +40,15 @@ import ContentMedia from '../components/ContentMedia.astro'
         <Feature icon="mdi:person" title="User-friendly">
           Organize your config screen using comments, sliders, colors and tabs.
         </Feature>
-        <Feature icon="mdi:language-markdown" title="Commands">
+        <Feature icon="mdi:world" title="Universal">
-          Operators can edit server configs using /midnightconfig &lt;modid&gt; &lt;option&gt;
+          MidnightLib is compatible with Quilt, Fabric and (Neo-)Forge, making it ideal for multiplatform mods!
         </Feature>
       </div>
     </div>
   </section>
-  <section class="mb-32 mt-64">
+  <CallToAction text="Start using MidnightLib right now!" 
-    <div class="container">
+  url_gh="https://github.com/TeamMidnightDust/MidnightLib" 
-      <h2 class="mb-16 text-6xl">Statistics</h2>
+  url_mr="https://modrinth.com/mod/midnightlib"
-      <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">
+  url_cf="https://www.curseforge.com/minecraft/mc-mods/midnightlib"
-        <Counter icon="ion:star" count="484+" title="Stars in Total" sub="On GitHub" />
+  />
-        <Counter icon="ion:download" count="61.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
-        <Counter icon="ion:code-slash" count="5+" title="Years" sub="Development experience" />
-      </div>
-    </div>
-  </section>
 </DefaultLayout>

src/pages/wiki/midnightlib.mdx

@@ -0,0 +1,116 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: MidnightLib Wiki
+---
+
+import { Icon } from 'astro-icon/components'
+import { Notification } from 'accessible-astro-components'
+
+# MidnightLib Wiki
+
+Welcome to the MidnightLib wiki. Thanks for showing interest in our library!  
+This documentation aims to show you how to use the config system and the other features the library provides.  
+Use the tabs on the right side to switch between the different pages.
+
+To use the library in your mods, just edit `build.gradle` and `gradle.properties` as seen below:
+### `build.gradle`
+```java
+repositories {
+  [... other repos ...]
+  maven {
+    url = "https://api.modrinth.com/maven"
+  }
+}
+dependencies {  
+  [... other dependencies ...]  
+  modImplementation include "maven.modrinth:midnightlib:${project.midnightlib_version}"  
+}
+```
+### `gradle.properties`  
+```js
+midnightlib_version=1.5.3-fabric
+```
+<Notification type="info">
+  <Icon name="ion:information-circle-outline" />
+  <p>
+    <strong>Info:</strong> You should always pick the version that suits your modloader and Minecraft version best.  
+    Find all available versions on [Modrinth](https://www.modrinth.com/mod/midnightlib/versions)
+  </p>
+</Notification>  
+
+### `MidnightConfigExample.java`
+To get started with implementing the config, you must create a public class that extends MidnightConfig.  
+In this class, your variables can be stored and accessed. Here you can see the contents of an example config class:
+```java
+package eu.midnightdust.core.config;
+
+import com.google.common.collect.Lists;
+import eu.midnightdust.lib.config.MidnightConfig;
+
+import java.util.List;
+
+/** Every option in a MidnightConfig class has to be public and static, so we can access it from other classes.
+ * The config class also has to extend MidnightConfig*/
+
+public class MidnightConfigExample extends MidnightConfig {
+    @Comment(category = "text") public static Comment text1;                       // Comments are rendered like an option without a button and are excluded from the config file
+    @Comment(category = "text", centered = true) public static Comment text2;      // Centered comments are the same as normal ones - just centered!
+    @Comment(category = "text") public static Comment spacer1;                     // Comments containing the word "spacer" will just appear as a blank line
+    @Entry(category = "text") public static boolean showInfo = true;               // Example for a boolean option
+    @Entry(category = "text") public static String name = "Hello World!";          // Example for a string option, which is in a category!
+    @Entry(category = "text") public static TestEnum testEnum = TestEnum.FABRIC;   // Example for an enum option
+    public enum TestEnum {                               // Enums allow the user to cycle through predefined options
+        QUILT, FABRIC, FORGE
+    }
+    @Entry(category = "numbers") public static int fabric = 16777215;                 // Example for an int option
+    @Entry(category = "numbers") public static double world = 1.4D;                   // Example for a double option
+    @Entry(category = "numbers", min=69,max=420) public static int hello = 420;   // - The entered number has to be larger than 69 and smaller than 420
+    @Entry(category = "text", width = 7, min = 7, isColor = true, name = "I am a color!") public static String titleColor = "#ffffff"; // The isColor property adds a preview box for a hexadecimal color
+    @Entry(category = "text", name = "I am an array list!") public static List<String> arrayList = Lists.newArrayList("String1", "String2"); // Array String Lists are also supported
+    @Entry(category = "sliders", name = "I am an int slider.",isSlider = true, min = 0, max = 100) public static int intSlider = 35; // Int fields can also be displayed as a Slider
+    @Entry(category = "sliders", name = "I am a float slider!", isSlider = true, min = 0f, max = 1f, precision = 1000) public static float floatSlider = 0.24f; // And so can floats! Precision defines the amount of decimal places
+    // The name field can be used to specify a custom translation string or plain text
+
+    public static int imposter = 16777215; // - Entries without an @Entry or @Comment annotation are ignored
+}
+```
+### `assets/modid/lang/`**`en_US.json`**
+The .json language file for your config class could look similar to this:
+```json
+{
+  "modid.midnightconfig.title":"I am a title",
+      // "*.midnightconfig.title" defines the title of the screen
+  "modid.midnightconfig.text1":"I am a comment *u*",
+      // Translation for the comment "text1" defined in the example config
+  "modid.midnightconfig.text2":"I am a centered comment (╯°□°）╯︵ ┻━┻",
+  "modid.midnightconfig.name":"I am a string!",
+      // Translation for the field "name" defined in the example config
+  "modid.midnightconfig.name.tooltip":"I am a tooltip uwu \nI am a new line",
+      // When hovering over the option "showInfo",
+      // this text will appear as a tooltip.
+      // "\n" inserts a line break.
+  "modid.midnightconfig.fabric":"I am an int",
+  "modid.midnightconfig.world":"I am a double",
+  "modid.midnightconfig.showInfo":"I am a boolean",
+  "modid.midnightconfig.hello":"I am a limited int!",
+  "modid.midnightconfig.testEnum":"I am an enum!",
+  "modid.midnightconfig.enum.TestEnum.FORGE":"Slow",
+  "modid.midnightconfig.enum.TestEnum.FABRIC":"Fancy",
+  "modid.midnightconfig.enum.TestEnum.QUILT":"Fabulous",
+  "modid.midnightconfig.category.numbers": "Numbers",
+  "modid.midnightconfig.category.text": "Text",
+  "modid.midnightconfig.category.sliders": "Sliders"
+}
+```
+    
+To initialize the config you have to call `MidnightConfig.init("modid", MidnightConfigExample.class);` in your ModInitializer.  
+To get an instance of the config screen you have to call `MidnightConfig.getScreen(parent, "modid");`  
+
+If you don't use the whole library and therefore not the automatic ModMenu integration, the code in your ModMenu integration class would look something like this:
+### `ModMenuInit.java`
+```java 
+    @Override
+    public ConfigScreenFactory<?> getModConfigScreenFactory() {
+      return parent -> MidnightConfig.getScreen(parent, "modid");
+    }`
+```