More finishing touches

.astro/icon.d.ts

@@ -1,5 +1,5 @@
 // Automatically generated by astro-icon
-// e5c0fc0eb3d33158f5f6f437f5db228377727e61d76a0a51b052e85ec3b5ea80
+// dd75c69f234f6d5bc112e280307d6bbf56bab6a68dd7652d0ed885ef47b38458
 
 declare module 'virtual:astro-icon' {
 	export type Icon = 
@@ -9982,5 +9982,7 @@ declare module 'virtual:astro-icon' {
 		| "mdi:zodiac-sagittarius"
 		| "mdi:zodiac-scorpio"
 		| "mdi:zodiac-taurus"
-		| "mdi:zodiac-virgo";
+		| "mdi:zodiac-virgo"
+		| "curseforge"
+		| "modrinth";
 }

public/blog/blog-posts.json

@@ -1,9 +1,10 @@
 [
     {
+      "postId": "new-website",
       "userId": "Martin Prokoph",
-      "date": "08.02.2024",
+      "date": "09th February 2024",
       "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.",
+      "body": "I finally revamped my website, making it faster, more accessible and more useful!",
       "img": "/social-preview-image.png"
     }
 ]

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_907_31" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="512" height="512">
-<rect width="512" height="512" rx="80" fill="#161618"/>
-</mask>
-<g mask="url(#mask0_907_31)">
-<path d="M166.892 69.3845H390.357L226.065 315.018H2.6001L166.892 69.3845Z" fill="#42E0CE"/>
-<path d="M176.677 337.783L113.043 432.923H347.108L511.4 187.29H338.645L237.988 337.783H176.677Z" fill="#A14FD6"/>
-</g>
-</svg>

src/components/CallToAction.astro

@@ -1,15 +1,20 @@
 ---
 const { text, url_gh, url_mr, url_cf, url_wiki = "" } = 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">
     <h2 class="text-center text-3xl md:text-5xl">{text}</h2>
-    <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>
-      {(url_wiki != '') ? <a href={url_wiki} class="text-center text-lg">Wiki</a> : ''}
+    <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">
+        <Icon name="modrinth" />Modrinth</a> : ''}
+      {(url_cf != '') ? <a href={url_cf} class="button has-icon color-tertiary text-lg">
+        <Icon name="curseforge" />CurseForge</a> : ''}
+      {(url_wiki != '') ? <a href={url_wiki} class="button has-icon color-secondary text-lg">
+        <Icon name="ion:book" />Visit the new Wiki!</a> : ''}
     </div>
   </div>
 </div>
@@ -22,7 +27,6 @@ const { text, url_gh, url_mr, url_cf, url_wiki = "" } = Astro.props
 
   .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;

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
 
-const { src = '/retrowave-moon.png' } = Astro.props
+const { src = '/motschensummer-cutout.png' } = Astro.props
 ---
 
 <section class="hero my-24">
@@ -12,16 +12,16 @@ const { src = '/retrowave-moon.png' } = Astro.props
           <slot><span class="text-gradient">Modding</span> done with passion</slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
-          <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
+          <a class="button has-icon" href="https://github.com/Motschen">
             <Icon name="ion:logo-github" />
-            View on GitHub
+            Visit GitHub Profile
           </a>
           <a
             class="button has-icon color-secondary"
-            href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
+            href="wiki/midnightlib"
           >
-            <Icon name="ion:bookmark-outline" />
-            Read the Docs
+            <Icon name="ion:document-text" />
+            View the Wiki
           </a>
         </div>
       </div>

src/components/Navigation.astro

@@ -3,12 +3,17 @@ import ResponsiveToggle from './ResponsiveToggle.astro'
 import { DarkMode } from 'accessible-astro-components'
 import { Image } from 'astro:assets'
 import logo from '../assets/img/logo.png'
+import logo_lightmode from '../assets/img/logo_lightmode.png'
+
 ---
+<script>
+  
+</script>
 
 <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="47" />
+      <Image src={logo} class="drop-shadow-md fill-black" alt="MidnightDust Logo" width="47" height="47" />
       <span class="font-bold">MidnightDust – Mods by Motschen</span>
     </a>
     <div class="wrapper">

src/icons/curseforge.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="m6.307 5.581.391 1.675H0s.112.502.167.558c.168.279.335.614.559.837 1.06 1.228 2.902 1.73 4.409 2.009 1.06.224 2.121.28 3.181.335l1.228 3.293h.67l.391 1.061h-.558l-.949 3.07h9.321l-.949-3.07h-.558l.39-1.061h.67s.558-3.404 2.288-4.967C21.935 7.758 24 7.535 24 7.535V5.581H6.307zm9.377 8.428c-.447.279-.949.279-1.284.503-.223.111-.335.446-.335.446-.223-.502-.502-.67-.837-.781-.335-.112-.949-.056-1.786-.782-.558-.502-.614-1.172-.558-1.507v-.167c0-.056 0-.112.056-.168.111-.334.39-.669.948-.893 0 0-.39.559 0 1.117.224.335.67.502 1.061.279.167-.112.279-.335.335-.503.111-.39.111-.781-.224-1.06-.502-.446-.613-1.06-.279-1.451 0 0 .112.502.614.446.335 0 .335-.111.224-.223-.056-.167-.782-1.228.279-2.009 0 0 .669-.447 1.451-.391-.447.056-.949.335-1.116.782v.055c-.168.447-.056.949.279 1.396.223.335.502.614.614 1.06-.168-.056-.279 0-.391.112a.533.533 0 0 0-.112.502c.056.112.168.223.279.223h.168c.167-.055.279-.279.223-.446.112.111.167.391.112.558 0 .167-.112.335-.168.446-.056.112-.167.224-.223.335-.056.112-.112.224-.112.335 0 .112 0 .279.056.391.223.335.67 0 .782-.279.167-.335.111-.726-.112-1.061 0 0 .391.224.67 1.005.223.67-.168 1.451-.614 1.73z"/></svg>

src/icons/modrinth.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.629 14.971A7.875 7.875 0 0 1 4.051 12c0-4.37 3.553-7.917 7.93-7.917.135 0 .27.003.405.01l-.38 2.151h-.025a5.763 5.763 0 0 0-5.452 7.632l2.346-1.352-.5-1.724 1.923-2.16 2.644-.72.962.96-1.443 1.44-.961.24-.721.96.269 1.018.748.741 1.193-.143.689-.712 1.97-.527.352 1.312-1.946 1.926-2.835.583-1.098-1.141-2.35 1.354a5.755 5.755 0 0 0 4.737 1.801l.566 2.11a7.92 7.92 0 0 1-7.213-2.809l-1.686.972a9.861 9.861 0 0 0 16.694-1.753l2.042.742A12.027 12.027 0 0 1 11.981 24C5.671 24 .49 19.135 0 12.96h2.172a9.78 9.78 0 0 0 .776 2.98l1.681-.969Zm16.51-6.608a9.863 9.863 0 0 0-9.158-6.203c-5.115 0-9.326 3.9-9.809 8.88H0C.49 4.865 5.671 0 11.981 0 18.614 0 24 5.377 24 12c0 1.104-.15 2.173-.43 3.19l-2.042-.742a9.833 9.833 0 0 0 .22-3.763l-1.879.502c.027.268.041.539.041.813 0 3.318-2.048 6.162-4.95 7.339l-.566-2.111A5.758 5.758 0 0 0 17.746 12a5.764 5.764 0 0 0-3.818-5.419l.38-2.151a7.955 7.955 0 0 1 4.955 4.435l1.876-.502Z"/></svg>

src/layouts/BlogLayout.astro

@@ -0,0 +1,24 @@
+---
+import DefaultLayout from './DefaultLayout.astro'
+import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
+
+const { frontmatter } = Astro.props
+---
+
+<DefaultLayout title={frontmatter.title}>
+  <div class="container">
+    <div class="mt-12">
+      <Breadcrumbs>
+        <BreadcrumbsItem href="/" label="Home" />
+        <BreadcrumbsItem href="/blog" label="Blog" />
+        <BreadcrumbsItem currentPage={true} label={frontmatter.title} />
+      </Breadcrumbs>
+    </div>
+    <div class="space-content my-12">
+      <h1>{frontmatter.title}</h1>
+      <slot />
+      <h5>Written by {frontmatter.author}</h5>
+      <h7>Published: {frontmatter.date}</h7>
+    </div>
+  </div>
+</DefaultLayout>

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

@@ -22,9 +22,7 @@ const { page } = Astro.props
     <div class="space-content container">
       <h1>Blog</h1>
       <p class="text-2xl">
-        An example of a blog with dynamic content fetched from <a href="https://jsonplaceholder.typicode.com/posts"
-          >JSONPlaceholder</a
-        > using the title, body and userId. The Accessible Astro Card Component is used here to display al the posts.
+        Just my personal blog, where I write about cool projects and endeavours.
       </p>
     </div>
   </section>
@@ -36,9 +34,9 @@ const { page } = Astro.props
           page.data.map((post) => (
             <li>
               <Card
-                url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
+                url={'/blog/' + post.postId}
                 title={post.title}
-                footer={'Written by: ' + post.userId}
+                footer={'Published: ' + post.date}
                 img={post.img}
               >
                 {post.body}

src/pages/blog/[post].astro

@@ -1,59 +0,0 @@
----
-import DefaultLayout from '../../layouts/DefaultLayout.astro'
-import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
-import blogPosts from '../../../public/blog/blog-posts.json'
-
-export async function getStaticPaths() {
-  const data = blogPosts;
-  //const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
-
-  return data.map((post) => {
-    return {
-      params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
-      props: { post },
-    }
-  })
-}
-
-const { post } = Astro.props
----
-
-<DefaultLayout title={post.title} description={post.body} url={post.title}>
-  <div class="container">
-    <div class="mt-12">
-      <Breadcrumbs>
-        <BreadcrumbsItem href="/" label="Home" />
-        <BreadcrumbsItem href="/blog" label="Blog" />
-        <BreadcrumbsItem currentPage={true} label={post.title} />
-      </Breadcrumbs>
-    </div>
-  </div>
-  <section class="my-12">
-    <div class="container">
-      <h1>{post.title}</h1><br />
-      <p>By user: {post.userId}</p>
-    </div>
-  </section>
-  <section class="my-12">
-    <div class="container">
-      <p class="text-2xl">{post.body}</p>
-    </div>
-  </section>
-</DefaultLayout>
-
-<style lang="scss">
-  ul {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 4rem;
-
-    @media (min-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 2rem;
-    }
-
-    @media (min-width: 950px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-</style>

src/pages/blog/new-website.mdx

@@ -0,0 +1,17 @@
+---
+layout: ../../layouts/BlogLayout.astro
+title: So... I have a new website now!
+author: Martin Prokoph
+date: 09th February 2024
+---
+
+After years of just having a lame and half broken, useless site, I proudly present my new website.  
+I now utilize [Astro](https://astro.build/) to achieve blazing fast performance, eye candy and usefulness at the same time.  
+
+![!Image](/social-preview-image.png)
+<p centered="true">A preview of the main site</p>
+
+The new site is based on [Astro Accessible Starter](https://github.com/markteekman/accessible-astro-starter), making it accessible to everyone from the beginning.  
+I did however change quite a lot, adding an interactive wiki, dedicated pages for my mods, as well as this cool markdown-based blog.  
+The wiki for MidnightLib features a version selector which always lists the latest versions, obtained straight from Modrinth's API.
+I still have to finish that feature and update the assets to be more light-mode-friendly, but I'm going to publish the site first.

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

@@ -1,74 +0,0 @@
----
-import DefaultLayout from '../../layouts/DefaultLayout.astro'
-import { Card, Pagination } from 'accessible-astro-components'
-
-export async function getStaticPaths({ paginate }) {
-  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
-  const data = await response.json()
-
-  return paginate(data, { pageSize: 6 })
-}
-
-const { page } = Astro.props
----
-
-<DefaultLayout
-  title="Gallery"
-  description="An overview of my projects and endeavours."
->
-  <section class="my-12">
-    <div class="space-content container">
-      <h1>Gallery</h1>
-      <p class="text-2xl">
-        An overview of my projects and endeavours.
-      </p>
-    </div>
-  </section>
-  <section class="my-12">
-    <div class="container">
-      <p class="text-sm"><em>Post {page.start + 1} through {page.end + 1} of {page.total} total posts</em></p>
-      <ul class="my-3">
-        {
-          page.data.map((post) => (
-            <li>
-              <Card
-                url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
-                title={post.title}
-                footer={'userId:' + post.userId}
-              >
-                {post.body}
-              </Card>
-            </li>
-          ))
-        }
-      </ul>
-      <div class="mt-12 grid place-content-center">
-        <Pagination
-          firstPage={page.url.prev ? '/blog' : null}
-          previousPage={page.url.prev ? page.url.prev : null}
-          nextPage={page.url.next ? page.url.next : null}
-          lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
-          currentPage={page.currentPage}
-          totalPages={Math.round(page.total / page.size)}
-        />
-      </div>
-    </div>
-  </section>
-</DefaultLayout>
-
-<style lang="scss">
-  ul {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 4rem;
-
-    @media (min-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 2rem;
-    }
-
-    @media (min-width: 950px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-</style>

src/pages/gallery/[post].astro

@@ -1,57 +0,0 @@
----
-import DefaultLayout from '../../layouts/DefaultLayout.astro'
-import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
-
-export async function getStaticPaths() {
-  const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
-
-  return data.map((post) => {
-    return {
-      params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
-      props: { post },
-    }
-  })
-}
-
-const { post } = Astro.props
----
-
-<DefaultLayout title={post.title} description={post.body} url={post.title}>
-  <div class="container">
-    <div class="mt-12">
-      <Breadcrumbs>
-        <BreadcrumbsItem href="/" label="Home" />
-        <BreadcrumbsItem href="/blog" label="Blog" />
-        <BreadcrumbsItem currentPage={true} label={post.title} />
-      </Breadcrumbs>
-    </div>
-  </div>
-  <section class="my-12">
-    <div class="container">
-      <h1>{post.title}</h1><br />
-      <p>By userId: {post.userId}</p>
-    </div>
-  </section>
-  <section class="my-12">
-    <div class="container">
-      <p class="text-2xl">{post.body}</p>
-    </div>
-  </section>
-</DefaultLayout>
-
-<style lang="scss">
-  ul {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 4rem;
-
-    @media (min-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 2rem;
-    }
-
-    @media (min-width: 950px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-</style>

src/pages/midnightlib.astro

@@ -6,8 +6,8 @@ import ContentMedia from '../components/ContentMedia.astro'
 ---
 
 <DefaultLayout title="MidnightLib">
-  <ContentMedia imgSrc="/midnightlib-example-code.png">
-    <h2>Implement configurations easier than ever!</h2>
+  <ContentMedia imgSrc="/midnightlib-example-code.webp">
+    <h2>Implement configurations easier than ever before!</h2>
     <p class="text-2xl">
       Just create Java fields, annotate them with @Entry, 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"

src/pages/wiki/midnightlib.mdx

@@ -14,11 +14,8 @@ 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>
+Explore MidnightLib's features on this page:
+[Get to know the features](/midnightlib)
 
 To use the library in your mods, just edit `build.gradle` and `gradle.properties` as seen below:
 ### `build.gradle`
@@ -115,8 +112,8 @@ The .json language file for your config class could look similar to this:
 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`
+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:
 ```java 
     @Override
     public ConfigScreenFactory<?> getModConfigScreenFactory() {