feat: add difficulty labels & other utils

src/components/BlurryDivider.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+    vertical?: boolean    
+}
+const { vertical = false } = Astro.props
+// Inspired by: https://tw-elements.com/docs/standard/content-styles/dividers/
+---
+
+{!vertical ? 
+<hr class="my-12 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400" /> 
+    : 
+<div class="flex flex-1">
+    <slot name="left">
+        <p class="pe-6">Left</p>
+    </slot>
+    <div class="h-[250px] min-h-[1em] w-px self-stretch bg-gradient-to-tr from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400"></div>
+    <slot name="right">
+        <p class="ps-6">Right</p>
+    </slot>
+</div>
+}

src/components/ChapterButtons.astro

@@ -0,0 +1,53 @@
+---
+interface Props {
+  previous?: {
+        name: string
+        url: string
+        label?: string
+        icon?: string
+    }
+  next?: {
+        name: string
+        url: string
+        label?: string
+        icon?: string
+    }
+}
+const { previous, next } = Astro.props
+import { Icon } from 'astro-icon/components'
+import BlurryDivider from './BlurryDivider.astro'
+---
+<section class="w-full">
+    <BlurryDivider />
+    <div class="w-fit md:w-full flex flex-col md:flex-row mx-auto">
+    {
+        previous ? 
+            <a class={`max-w-96 button has-icon ml-0 mt-3 content-left lg:mt-0 lg:ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16`} href={previous.url}>
+                <div class="flex">
+                    <Icon name={previous.icon ? previous.icon : 'line-md:arrow-left'} class="mr-2 shrink-0" />
+                    <div class="leading-5">
+                        <p class="text-xs font-thin">{previous.label ? previous.label : "Previous Page"}</p>
+                        <p class="line-clamp-2">{previous.name}</p>
+                    </div>
+                </div>
+            </a>
+            
+        : ''
+    }
+    <div class="flex-grow hidden md:block" />
+    {
+        next ? 
+            <a class={`max-w-96 button has-icon bg-[var(--action-color)] ml-0 mt-3 lg:mt-0 lg:ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16`} href={next.url}>
+                <div class="flex">
+                    <div class="leading-5">
+                        <p class="text-xs font-thin">{next.label ? next.label : "Next Page"}</p>
+                        <p class="line-clamp-2">{next.name}</p>
+                    </div>
+                    <Icon name={next.icon ? next.icon : 'line-md:arrow-right'} class="shrink-0" />
+                </div>
+            </a>
+            
+        : ''
+    }
+    </div>
+</section>

src/components/Difficulty.astro

@@ -0,0 +1,31 @@
+---
+
+export default interface Props {
+  difficulty: 'easy' | 'medium' | 'advanced' | 'hard'
+}
+enum DifficultyName {
+    easy = "Easy",
+    medium = "Medium",
+    advanced = "Advanced",
+    hard = "Hard"
+}
+const { difficulty } = Astro.props
+---
+<span class={`difficulty-${difficulty} inline-block whitespace-nowrap rounded-[0.27rem] bg-primary-100 px-[0.65em] pb-[0.25em] pt-[0.35em] text-center align-middle text-[0.5em] font-bold leading-none text-black dark:text-black`}>
+    { DifficultyName[difficulty] }
+</span>
+
+<style lang="scss">
+  .difficulty-easy {
+    background-color: rgb(134 239 172);
+  }
+  .difficulty-medium {
+    background-color: rgb(254 240 138);
+  }
+  .difficulty-advanced {
+    background-color: rgb(196 181 253);
+  }
+  .difficulty-hard {
+    background-color: rgb(252 165 165);
+  }
+</style>

src/pages/wiki/betterleaves.mdx

@@ -8,6 +8,7 @@ import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components'
 import { Notification } from 'accessible-astro-components'
 import CustomTabs from "../../components/CustomTabs.astro"
+import Difficulty from "../../components/Difficulty.astro"
 import pythonCodeImage from '../../assets/betterleaves/script.png';
 import ingameImage from '../../assets/betterleaves/ingame.png';
 
@@ -22,7 +23,7 @@ This documentation aims to help you create your own flavour for any texturepack
     <Image slot="second-image" width="1920" height="1080" alt="A screenshot of the Better Leaves resourcepack in action" src={ingameImage}/>
 </ImageComparison>
 
-## Getting Started
+## Getting Started <Difficulty difficulty="easy" />
 First of all, you need to download the contents of the GitHub repository.  
 To do so, you can either download the [zip file](https://github.com/TeamMidnightDust/BetterLeavesLite/archive/refs/heads/main.zip), or just execute
 ```bash
@@ -30,7 +31,7 @@ git clone https://github.com/TeamMidnightDust/BetterLeavesLite.git
 ```
 in a terminal window.
 
-## Texturepacks
+## Texturepacks <Difficulty difficulty="easy" />
 You can easily create a build for any texturepack.  
 Just add the pack (as a .zip file or folder) to the input/texturepacks/ folder.  
 After that, follow the <a href="#building">Building</a> section to get your flavour!
@@ -38,14 +39,14 @@ After that, follow the <a href="#building">Building</a> section to get your flav
 <center><img alt="An overview of the input folder" src="/betterleaves/input-folder.png" width="500"></img></center>
 <p class="text-center italic">The input folder is all you have to worry about</p>  
 
-## Mods
+## Mods <Difficulty difficulty="easy" />
 In simple cases, it is enough to put the mod file in the /input/mods folder and continue with the <a href="#building">Building</a> section.  
 
 <center><img alt="An overview of the input/mods folder, showing the automatic unpacking process" src="/betterleaves/mods-unpacking.png" width="500"></img></center>
 <p class="text-center italic">Put the .jar file into input/mods, and the script will take care of extracting all textures with "leaves" in their name.
 <br/>The _temp folder is purely symbolic here, it will only exist for a few milliseconds during the extraction process.</p>
 
-## Building
+## Building <Difficulty difficulty="medium" />
 To build your flavour of the pack, you need to have Python installed on your system.  
 You can get it on any modern operating system.  
 
@@ -102,7 +103,7 @@ python3 gen_pack.py 1.0 Your Edition
 Replace "1.0" with your desired version number and "Your Edition" with the name you'd like to appear in the resourcepack description ingame.  
 And in no time, the script will generate a ready-to-use zip file with your desired content.
 
-## (Advanced) Irregularities and Missing Textures
+## Irregularities and Missing Textures <Difficulty difficulty="advanced" />
 If you see missing textures when trying your freshly-built pack, the mod you're adding support for has a more complicated asset structure.  
 In these cases, you unfortunately have to manually configure exceptions in the /input/overrides.json file.  
 ```json