Progress towards publishing

public/blog/blog-posts.json

@@ -0,0 +1,14 @@
+[
+    {
+      "userId": 1,
+      "id": 1,
+      "title": "So... I have a new website now!",
+      "body": "After years of just having a lame and half broken, useless site, I proudly present my new website.\nIt is built using Astro to achieve blazing fast performance, eye candy and usefulness at the same time."
+    },
+    {
+      "userId": 1,
+      "id": 2,
+      "title": "qui est esse",
+      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
+    }
+]

src/components/CallToAction.astro

@@ -1,5 +1,5 @@
 ---
-const { text, url_gh, url_mr, url_cf } = Astro.props
+const { text, url_gh, url_mr, url_cf, url_wiki = "" } = Astro.props
 ---
 
 <div class="container">
@@ -9,6 +9,7 @@ const { text, url_gh, url_mr, url_cf } = Astro.props
       <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>
+      {(url_wiki != '') ? <a href={url_wiki} class="text-center text-lg">Wiki</a> : ''}
     </div>
   </div>
 </div>

src/components/VersionDropdown.astro

@@ -0,0 +1,315 @@
+---
+import { loaderList, selectedLoader, selectedVersion } from '../js/modversion.js'
+---
+
+<div id="version-dropdown">
+  <div class="container">
+    <div class="wrapper">
+        <ul class="version-dropdowns">
+          <li class="menu-item has-version-dropdown">
+            <button aria-haspopup="true" aria-expanded="false">{selectedLoader.charAt(0).toUpperCase() + selectedLoader.slice(1)}</button>
+            <ul class="dropdown-menu"> 
+              { loaderList.forEach((loader) =>
+                <li class="submenu-item">
+                  <a href="">{loader.charAt(0).toUpperCase() + loader.slice(1)}</a>
+                </li>
+              )}
+              <li class="submenu-item">
+                <a href="javascript:;">Quilt</a>
+              </li>
+              <li class="submenu-item">
+                <a href="javascript:;">Forge</a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item has-version-dropdown">
+            <button aria-haspopup="true" aria-expanded="false">{selectedVersion}</button>
+            <ul class="dropdown-menu">
+              <li class="submenu-item">
+                <a href="">MidnightLib</a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    // variables
+    const mainElement = document.querySelector('#version-dropdown')
+    const mainMenu = mainElement.querySelector('ul')
+    const dropdownMenus = [...document.querySelectorAll('.has-version-dropdown button')]
+
+    // functions
+    const setActiveMenuItem = () => {
+      const mobileDesktopMenus = mainElement.querySelectorAll('div > ul')
+      const currenPathname = window.location.pathname
+
+      mobileDesktopMenus.forEach((menu) => {
+        const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')] as HTMLAnchorElement[]
+
+        menuItems.forEach((menuItem) => {
+          if (currenPathname.includes(menuItem.pathname.replaceAll('/', ''))) {
+            menuItem.classList.add('is-active')
+            menuItem.setAttribute('aria-current', 'page')
+          }
+        })
+      })
+    }
+
+    const isOutOfViewport = (element) => {
+      const elementBounds = element.getBoundingClientRect()
+      return elementBounds.right > (window.innerWidth || document.documentElement.clientWidth)
+    }
+
+    const openDropdownMenu = (dropdownMenu) => {
+      const dropdownList = dropdownMenu.parentNode.querySelector('ul')
+
+      dropdownMenu.classList.add('show')
+      dropdownMenu.setAttribute('aria-expanded', 'true')
+
+      if (isOutOfViewport(dropdownList)) {
+        dropdownList.style.left = 'auto'
+      }
+    }
+
+    const closeDropdownMenu = (dropdownMenu) => {
+      dropdownMenu.classList.remove('show')
+      dropdownMenu.setAttribute('aria-expanded', 'false')
+    }
+
+    const closeAllDropdownMenus = () => {
+      for (let i = 0; i < dropdownMenus.length; i++) {
+        closeDropdownMenu(dropdownMenus[i])
+      }
+    }
+
+    const toggleDropdownMenu = (event) => {
+      if (event.target.getAttribute('aria-expanded') === 'false') {
+        closeAllDropdownMenus()
+        openDropdownMenu(event.target)
+      } else {
+        closeDropdownMenu(event.target)
+      }
+    }
+
+    // execution
+    mainMenu &&
+      mainMenu.addEventListener('keydown', (event) => {
+        const element = event.target as Element
+        const currentMenuItem = element.closest('li')
+        const menuItems = [...mainMenu.querySelectorAll('.menu-item')]
+        const currentDropdownMenu = element.closest('.has-dropdown button')
+        const currentDropdownMenuItem = element.closest('.has-version-dropdown li')
+        const currentIndex = menuItems.findIndex((item) => item === currentMenuItem)
+
+        const key = event.key
+        let targetItem
+
+        if (key === 'ArrowRight') {
+          if (menuItems.indexOf(currentMenuItem) === menuItems.length - 1) {
+            targetItem = menuItems[0]
+          } else {
+            targetItem = menuItems[currentIndex + 1]
+          }
+        }
+
+        if (key === 'ArrowLeft') {
+          if (menuItems.indexOf(currentMenuItem) === 0) {
+            targetItem = menuItems[menuItems.length - 1]
+          } else {
+            targetItem = menuItems[currentIndex - 1]
+          }
+        }
+
+        if (key === 'Escape') {
+          targetItem = menuItems[0]
+        }
+
+        if (currentDropdownMenu) {
+          const firstDropdownItem = currentDropdownMenu.nextElementSibling.querySelector('li')
+
+          if (key === 'ArrowDown') {
+            event.preventDefault()
+            openDropdownMenu(currentDropdownMenu)
+            targetItem = firstDropdownItem
+          }
+
+          if (key === 'Escape') {
+            closeDropdownMenu(currentDropdownMenu)
+          }
+        }
+
+        if (currentDropdownMenuItem) {
+          const currentDropdownList = currentDropdownMenuItem.parentNode
+          const dropdownMenuItems = [...currentDropdownList.querySelectorAll('li')]
+          const currentIndex = dropdownMenuItems.findIndex((item) => item === currentDropdownMenuItem)
+
+          if (key === 'ArrowDown') {
+            event.preventDefault()
+
+            if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === dropdownMenuItems.length - 1) {
+              targetItem = dropdownMenuItems[0]
+            } else {
+              targetItem = dropdownMenuItems[currentIndex + 1]
+            }
+          }
+
+          if (key === 'ArrowUp') {
+            event.preventDefault()
+
+            if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === 0) {
+              targetItem = dropdownMenuItems[dropdownMenuItems.length - 1]
+            } else {
+              targetItem = dropdownMenuItems[currentIndex - 1]
+            }
+          }
+
+          if (key === 'Escape') {
+            const currentDropdownMenu = (currentDropdownList as Element).previousElementSibling
+            targetItem = currentDropdownMenu.parentNode
+            closeAllDropdownMenus()
+          }
+
+          if (key === 'Tab') {
+            const currentDropdownMenu = (currentDropdownList as Element).previousElementSibling
+
+            if (dropdownMenuItems.indexOf(currentDropdownMenuItem as HTMLLIElement) === dropdownMenuItems.length - 1) {
+              closeDropdownMenu(currentDropdownMenu)
+            }
+          }
+        }
+
+        if (targetItem) {
+          targetItem.querySelector('a, button, input').focus()
+        }
+      })
+
+    dropdownMenus &&
+      dropdownMenus.forEach((dropdownMenu) => {
+        dropdownMenu.addEventListener('click', toggleDropdownMenu)
+      })
+
+    setActiveMenuItem()
+
+    window.addEventListener('click', (event) => {
+      const element = event.target as Element
+      if (!element.hasAttribute('aria-haspopup') && !element.classList.contains('submenu-item')) {
+        closeAllDropdownMenus()
+      }
+    })
+  })
+</script>
+
+<style lang="scss" is:global>
+  @use '../assets/scss/base/breakpoint' as *;
+  @use '../assets/scss/base/outline' as *;
+
+  #version-dropdown {
+    > .container {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+
+    .wrapper {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .wrapper {
+      > ul {
+        display: flex;
+        gap: 1.5rem;
+        list-style-type: none;
+
+        a,
+        button {
+          text-decoration: none;
+          font-size: 1.125rem;
+          line-height: 1.6875rem;
+        }
+
+        a:hover,
+        a:focus,
+        .is-active,
+        .has-version-dropdown > button:hover,
+        .has-version-dropdown > button:focus {
+          text-decoration: underline;
+          text-decoration-thickness: 1px;
+          text-decoration-style: wavy;
+          text-underline-offset: 7px;
+        }
+
+        .is-active {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .has-version-dropdown {
+      position: relative;
+
+      > button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0;
+        margin-top: -1px;
+        border: none;
+        color: var(--action-color);
+
+        &:hover {
+          color: var(--action-color-state);
+
+          &::after {
+            border-color: var(--action-color-state);
+          }
+        }
+
+        &::after {
+          content: '';
+          width: 0.85rem;
+          height: 0.75em;
+          margin-top: -0.25rem;
+          border-style: solid;
+          border-width: 0.2em 0.2em 0 0;
+          border-color: var(--action-color);
+          transform: rotate(135deg);
+        }
+
+        &.show {
+          &::after {
+            margin-top: 0.25rem;
+            transform: rotate(-45deg);
+          }
+
+          ~ ul {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+          }
+        }
+      }
+
+      ul {
+        display: none;
+        position: absolute;
+        z-index: 100;
+        min-width: 260px;
+        top: 125%;
+        right: 0;
+        bottom: auto;
+        left: 0;
+        padding: 1rem;
+        background-color: var(--neutral-background);
+        border: 2px solid black;
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+      }
+    }
+  }
+</style>

src/js/modversion.js

@@ -0,0 +1,22 @@
+export const modInfo = await fetch('https://api.modrinth.com/v2/project/midnightlib/version').then((response) => response.json())
+export const loaderList = ['fabric', 'quilt', 'forge', 'neoforge'];
+var finishedArray = modInfo.reduce(function(map, value) {
+  value.game_versions.forEach(version => {
+    value.loaders.forEach(loader => {
+      const loaderAndVersion = loader + "+" +version;
+      if (Object.values(map).includes(loaderAndVersion)) {
+        console.log("return")
+        return;
+      }
+      if (value.featured) map[loaderAndVersion] = value.id;
+    });
+  });
+  return map;
+}, {});
+console.log(finishedArray);
+export var selectedLoader = "fabric";
+export var selectedVersion = "1.20.4";
+var resultingVersionID = await finishedArray[selectedLoader + "+" + selectedVersion];
+export var resultingVersion = "Could not find the latest version!";
+resultingVersion = modInfo.find((info) => info.id == resultingVersionID).version_number;
+{console.log(resultingVersion)}

src/pages/midnightlib.astro

@@ -50,5 +50,6 @@ import ContentMedia from '../components/ContentMedia.astro'
   url_gh="https://github.com/TeamMidnightDust/MidnightLib" 
   url_mr="https://modrinth.com/mod/midnightlib"
   url_cf="https://www.curseforge.com/minecraft/mc-mods/midnightlib"
+  url_wiki="/wiki/midnightlib"
   />
 </DefaultLayout>

src/pages/wiki/midnightlib.mdx

@@ -3,8 +3,10 @@ layout: ../../layouts/MarkdownLayout.astro
 title: MidnightLib Wiki
 ---
 
+import VersionDropdown from '../../components/VersionDropdown.astro'
 import { Icon } from 'astro-icon/components'
 import { Notification } from 'accessible-astro-components'
+import { resultingVersion } from '../../js/modversion.js'
 
 # MidnightLib Wiki
 
@@ -12,6 +14,12 @@ 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.
 
+Explore MidnightLib's features on this page!
+<a class="button has-icon color-secondary text-center text-lg items-center" href="/midnightlib">
+<Icon name="ion:bookmark-outline" />
+Get to know the features
+          </a>
+
 To use the library in your mods, just edit `build.gradle` and `gradle.properties` as seen below:
 ### `build.gradle`
 ```java
@@ -27,18 +35,19 @@ dependencies {
 }
 ```
 ### `gradle.properties`
-```js
-midnightlib_version=1.5.3-fabric
-```
+<VersionDropdown></VersionDropdown>
+{<pre><code className="language-java">midnightlib_version = {resultingVersion}</code></pre>}
+
 <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.  
+    The version selector is currently still WIP.  
     Find all available versions on [Modrinth](https://www.modrinth.com/mod/midnightlib/versions)
   </p>
 </Notification>  
 
-### `MidnightConfigExample.java`
+### `YourConfigClass.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