New blog post!

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@astrojs/alpinejs": "^0.4.0",
         "@types/alpinejs": "^3.13.10",
-        "alpinejs": "^3.14.1"
+        "alpinejs": "^3.14.1",
+        "img-comparison-slider": "^8.0.6"
       },
       "devDependencies": {
         "@astrojs/mdx": "^3.1.6",
@@ -6713,6 +6714,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/img-comparison-slider": {
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/img-comparison-slider/-/img-comparison-slider-8.0.6.tgz",
+      "integrity": "sha512-ej4de7mWyjcXZvDgHq8K2a/dG8Vv+qYTdUjZa3cVILf316rLtDrHyGbh9fPvixmAFgbs30zTLfmaRDa7abjtzw==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",

package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@astrojs/alpinejs": "^0.4.0",
     "@types/alpinejs": "^3.13.10",
-    "alpinejs": "^3.14.1"
+    "alpinejs": "^3.14.1",
+    "img-comparison-slider": "^8.0.6"
   }
 }

public/blog/blog-posts.json

@@ -1,10 +1,18 @@
 [
-    {
+  {
-      "postId": "new-website",
+    "postId": "life-is-changing",
-      "userId": "Martin Prokoph",
+    "userId": "Martin Prokoph",
-      "date": "09th February 2024",
+    "date": "11th October 2024",
-      "title": "So... I have a new website now!",
+    "title": "Life is changing",
-      "body": "I finally revamped my website, making it more performant, more accessible and more useful!",
+    "body": "A retrospective of my Modding journey so far, and an outlook into the future",
-      "img": "/social-preview-image.png"
+    "img": "/blog/life/leipzig.jpg"
-    }
+  },
+  {
+    "postId": "new-website",
+    "userId": "Martin Prokoph",
+    "date": "09th February 2024",
+    "title": "So... I have a new website now!",
+    "body": "I finally revamped my website, making it more performant, accessible and useful!",
+    "img": "/social-preview-image.png"
+  }
 ]

src/components/ImgComparisonSlider.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  imgBefore: string
+  imgAfter: string
+  captionBefore?: string
+  captionAfter?: string
+}
+const { imgBefore, imgAfter, captionBefore, captionAfter } = Astro.props
+---
+
+<img-comparison-slider class="slider-with-animated-handle">
+  <figure slot="first" class="before">
+    <img width="100%" src={imgBefore}>
+    {captionBefore ? <figcaption>{captionBefore}</figcaption> : ""}
+  </figure>
+  <figure slot="second" class="after">
+    <img width="100%" src={imgAfter}>
+    {captionAfter ? <figcaption>{captionAfter}</figcaption> : ""}
+  </figure>
+</img-comparison-slider>
+
+<style lang="scss" is:global>
+  #handle {
+    transition: transform 0.2s;
+  }
+
+  #handle:hover #handle {
+    transform: scale(1.2);
+  }
+  img-comparison-slider:focus, img-comparison-slider:focus-visible {
+    outline: unset;
+    box-shadow: unset;
+  }
+  .before,
+  .after {
+    margin: 0;
+  }
+
+  .before figcaption,
+  .after figcaption {
+    background: #fff;
+    border: 1px solid #c0c0c0;
+    border-radius: 12px;
+    color: #2e3452;
+    opacity: 0.8;
+    padding: 12px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 100%;
+  }
+
+  .before figcaption {
+    left: 12px;
+  }
+
+  .after figcaption {
+    right: 12px;
+  }
+</style>
+
+<script>
+  import "img-comparison-slider/dist/index"
+  import "img-comparison-slider/dist/styles.css"
+</script>
+
+<!-- <script>
+import { HTMLImgComparisonSliderElement } from "img-comparison-slider";
+
+customElements.define('img-comparison-slider', HTMLImgComparisonSliderElement);
+</script> -->

src/components/Navigation.astro

@@ -14,9 +14,8 @@ import { Icon } from 'astro-icon/components'
 <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} class="drop-shadow-md fill-black" alt="MidnightDust Logo" width="47" height="47" /> -->
       <Icon name="ion:sparkles-outline" width="24" height="24" />
-      <span class="font-bold">MidnightDust – Mods by Motschen</span>
+      <span class="font-bold midnightdust-text">MidnightDust</span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">
@@ -39,6 +38,7 @@ import { Icon } from 'astro-icon/components'
   document.addEventListener('astro:page-load', () => {
     // variables
     const mainNav = document.querySelector('#main-navigation')
+    if (!mainNav) return;
     const mainMenu = mainNav.querySelector('ul')
     const dropdownMenus = [...document.querySelectorAll('.has-dropdown button')]
 

src/pages/blog/life-is-changing.mdx

@@ -0,0 +1,51 @@
+---
+layout: ../../layouts/BlogLayout.astro
+title: Life is changing
+author: Martin Prokoph
+date: 11th October 2024
+---
+import ImgComparisonSlider from '../../components/ImgComparisonSlider.astro'
+
+I started modding games back in 2018, when I was just 12 years old.  
+In fact, Round Trees – one of my most popular resourcepacks to this day – had its first release back then.  
+
+<center><img alt="Round Trees: Created June 23rd, 2018" src="/blog/life/round-trees-pmc.png" width="500"></img></center>  
+<p class="text-center italic">Round Trees was uploaded more than six years ago on PlanetMinecraft</p>  
+
+At some point, I grew tired of the many limitations that resourcepacks have, so naturally, I started to create actual Java mods.  
+Fabric was still quite new at that point, but I already saw the many benefits it provides and had been playing with Fabric mods since 1.14 snapshots (and Rift in 1.13, certified legend if you remember it).  
+That's why I decided to also base my mods on the – at that time – new platform, even though only few learning resources were available.  
+
+While starting with smaller mods such as Vertical Slabs and Simply Strawberries (can you guess what those two added to the game?), almost every new mod I released got more complex than the one that came before.  
+Delicious Dishes – a mod that adds... well... delicious dishes – was my first real entry into the modding scene.  
+Made in just a couple days for Modfest 1.16, I'm still proud of it to this day.  
+
+MidnightLib also deserves a mention.  
+After becoming frustrated about the large file size of other config libraries, I had decided to take it on myself and write a tiny – but still feature-packed – config library, a task that I think I absolutely nailed.  
+It is not only the basis for the vast majority of my mods, but also a lot of third-party ones, such as Effective, The Bumblezone, Bewitchment, as well as many others.  
+
+<ImgComparisonSlider imgBefore="/blog/life/midnightlib-0.2.4.png" imgAfter="/blog/life/midnightlib-1.6.3.png" captionBefore='MidnightLib 0.2.4' captionAfter='MidnightLib 1.6.3'/>
+<p class="text-center italic">MidnightLib has come a long way</p>
+
+Fast forward to today, I've created over 25 mods and resourcepacks, which have almost reached a total download amount of a staggering 100 Million!  
+Even though maintaining such a massive amount of mods all by myself is a massive undertaking and comes with a lot of responsibility, I'm still motivated to keep working on these projects.  
+That is – in large parts – thanks to you (yes, YOU) as part of my community.  
+Thank you for continuing to support me with bug reports, feature suggestions, contributions, and – most importantly – kind words.  
+
+During this time, I witnessed first hand as Fabric's popularity grew rapidly and OptiFine was finally succeeded by modern, open-source solutions.  
+I've also gained a lot of experience in managing big projects and communities – skills that are infinitely valueable, especially now...  
+
+<center><img alt="A nice view of the city of Leipzig" src="/blog/life/leipzig.jpg" width="800"></img></center>  
+<p class="text-center italic">A nice view of the city of Leipzig</p>  
+
+On October 1st, I finally moved from the rural village I grew up in, to the city of Leipzig, Germany.  
+As if this isn't a big change in itself already, I also started studying Media Informatics (IT with a focus on multimedia) at HTWK Leipzig on October 7th – which also was my 19th birthday :)  
+This will allow me to turn my passion into a job and at the same time, improve code quality as well as functionality.  
+
+The first semester is going to be quite difficult, with lots of homework in addition to the chores I have to do now that I'm living on my own, as well as social events.  
+Therefore, expect less activity from me for the next few months – but don't worry – I'll still continue to work on my mods and give support in the spare time I have, and I'll be fully back when things have calmed down.  
+
+Thanks for reading!  
+~ Motschen
+
+---

src/pages/blog/new-website.mdx

@@ -8,7 +8,7 @@ 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)
+![A preview of the main site](/social-preview-image.png)
 <p class="text-center italic">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. It also makes use of [TailwindCSS](https://tailwindcss.com/) for styling.