mirror of
https://github.com/Motschen/midnightdust-eu.git
synced 2025-12-18 03:15:09 +01:00
Custom image comparison slider component
This commit is contained in:
Martin Prokoph
@@ -4,7 +4,8 @@ title: Life is changing
|
||||
author: Martin Prokoph
|
||||
date: 11th October 2024
|
||||
---
|
||||
import ImgComparisonSlider from '../../components/ImgComparisonSlider.astro'
|
||||
import ImageComparison from '../../components/ImageComparison.astro'
|
||||
import { Image } from 'astro:assets'
|
||||
|
||||
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.
|
||||
@@ -24,7 +25,10 @@ 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'/>
|
||||
<ImageComparison firstTitle="MidnightLib 0.2.4" secondTitle="MidnightLib 1.6.3" sliderColor='var(--action-color)' sliderShadowColor='var(--action-color)'>
|
||||
<Image slot="first-image" width="1920" height="1080" alt="A config screen generated with MidnightLib 0.2.4" src="/blog/life/midnightlib-0.2.4.png"/>
|
||||
<Image slot="second-image" width="1920" height="1080" alt="A config screen generated with MidnightLib 1.6.3" src="/blog/life/midnightlib-1.6.3.png"/>
|
||||
</ImageComparison>
|
||||
<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!
|
||||
|
||||
29
src/pages/components/astro-image-comparison-slider.mdx
Normal file
29
src/pages/components/astro-image-comparison-slider.mdx
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
layout: ../../layouts/MarkdownLayout.astro
|
||||
title: Image Comparison Slider for Astro
|
||||
---
|
||||
|
||||
import ImageComparison from '../../components/ImageComparison.astro'
|
||||
import { Image } from 'astro:assets';
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
# Image Comparison Slider for Astro
|
||||
|
||||
Image comparison sliders are useful for comparing a previous state to the current one.
|
||||
Since I wasn't fully satisfied with existing solutions, I created my own.
|
||||
|
||||
<ImageComparison firstTitle="lol" secondTitle="omg">
|
||||
<Image slot="first-image" alt="alt" width="500" height="500" src="https://images.unsplash.com/photo-1532680281192-617c0da3810c?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
|
||||
<img slot="second-image" src="https://images.unsplash.com/photo-1539757812543-fe5fb5746951?q=80&w=3039&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
|
||||
</ImageComparison>
|
||||
|
||||
You can even customize the style to best fit your needs.
|
||||
<ImageComparison sliderColor='var(--action-color)' sliderShadowColor='var(--action-color)'>
|
||||
<Image slot="first-image" alt="alt" width="500" height="500" src="https://images.unsplash.com/photo-1532680281192-617c0da3810c?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
|
||||
<img slot="second-image" src="https://images.unsplash.com/photo-1539757812543-fe5fb5746951?q=80&w=3039&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
|
||||
|
||||
<p slot="first-title" class="absolute top-1/2 left-1 translate-x-1/2 -translate-y-1/2 text-6xl font-bold text-center text-white [text-shadow:_0_0_15px_rgb(0_0_0_/_40%)]">lol</p>
|
||||
<p slot="second-title" class="absolute top-1/2 right-1 -translate-x-1/2 -translate-y-1/2 text-6xl font-bold text-center text-white [text-shadow:_0_0_15px_rgb(0_0_0_/_40%)]">omg</p>
|
||||
|
||||
<Icon slot="handle-icon" name="line-md:star-pulsating-filled-loop" width={32} height={32}/>
|
||||
</ImageComparison>
|
||||
71
src/pages/components/astro-tab-buttons.mdx
Normal file
71
src/pages/components/astro-tab-buttons.mdx
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
layout: ../../layouts/MarkdownLayout.astro
|
||||
title: Tab Button Component for Astro
|
||||
---
|
||||
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import CustomTabs from "../../components/CustomTabs.astro"
|
||||
|
||||
# Tab Button Component for Astro
|
||||
|
||||
Having a paragraph of your text seperated by tabs can help readers choose their own path.
|
||||
It is therefore a great way to improve your website's interactivity.
|
||||
|
||||
<CustomTabs tabs={[{
|
||||
name: `Tab 1`,
|
||||
id: 'tab1',
|
||||
icon: 'simple-icons:astro',
|
||||
active: true
|
||||
}, {
|
||||
name: `Tab 2`,
|
||||
id: 'tab2',
|
||||
icon: 'line-md:cloud-alt-tags-filled-loop'
|
||||
}]}>
|
||||
<div id="tab1" data-active="true">
|
||||
Content in these divs can be written as regular Markdown in MDX files.
|
||||
Otherwise, you can just add any HTML tags as usual.
|
||||
The tab icons are powered by the awesome [Astro Icon](https://www.astroicon.dev/) component.
|
||||
</div>
|
||||
<div id="tab2" class="hidden">
|
||||
```java
|
||||
You can even use code blocks in here :D
|
||||
```
|
||||
</div>
|
||||
</CustomTabs>
|
||||
|
||||
<br/>
|
||||
A common use case for these are installation guides for different operating systems:
|
||||
<CustomTabs tabs={[{
|
||||
name: `Windows`,
|
||||
id: 'windows',
|
||||
icon: 'simple-icons:windows',
|
||||
active: true
|
||||
}, {
|
||||
name: `Linux`,
|
||||
icon: 'linux',
|
||||
id: 'linux'
|
||||
}, {
|
||||
name: `MacOS`,
|
||||
icon: 'simple-icons:apple',
|
||||
id: 'macos'
|
||||
}, {
|
||||
name: `BSD`,
|
||||
icon: 'simple-icons:freebsd',
|
||||
id: 'bsd'
|
||||
}]}>
|
||||
<div id="windows" data-active="true">
|
||||
Step 1: Download a Linux ISO and flash it to a USB stick
|
||||
Step 2: Uninstall Windows
|
||||
Step 3: Install Linux
|
||||
Step 4: Continue with the Linux section
|
||||
</div>
|
||||
<div id="linux" class="hidden">
|
||||
Get yourself a nice meal, you're goated!
|
||||
</div>
|
||||
<div id="macos" class="hidden">
|
||||
A monitor stand for over 1000€... Are you serious?
|
||||
</div>
|
||||
<div id="bsd" class="hidden">
|
||||
Get a life. For real.
|
||||
</div>
|
||||
</CustomTabs>
|
||||
@@ -3,10 +3,13 @@ layout: ../../layouts/MarkdownLayout.astro
|
||||
title: Better Leaves Wiki
|
||||
---
|
||||
|
||||
import ImgComparisonSlider from '../../components/ImgComparisonSlider.astro'
|
||||
import ImageComparison from '../../components/ImageComparison.astro'
|
||||
import { Image } from 'astro:assets';
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import { Notification } from 'accessible-astro-components'
|
||||
import CustomTabs from "../../components/CustomTabs.astro"
|
||||
import pythonCodeImage from '../../assets/betterleaves/script.png';
|
||||
import ingameImage from '../../assets/betterleaves/ingame.png';
|
||||
|
||||
# Better Leaves Wiki
|
||||
|
||||
@@ -14,8 +17,10 @@ Welcome to the Better Leaves wiki.
|
||||
This documentation aims to help you create your own flavour for any texturepack or mod.
|
||||
|
||||
<br/>
|
||||
<ImgComparisonSlider imgBefore="/betterleaves/script.png" imgAfter="/betterleaves/ingame.png" captionBefore='Python Code' captionAfter='Ingame'/>
|
||||
<p class="text-center italic">Better Leaves 9.0 is automatically generated using our Python script</p>
|
||||
<ImageComparison firstTitle="Python Code" secondTitle="In-Game" sliderColor='var(--action-color)' sliderShadowColor='var(--action-color)'>
|
||||
<Image slot="first-image" width="1920" height="1080" alt="A screenshot showing the Python script code" src={pythonCodeImage}/>
|
||||
<Image slot="second-image" width="1920" height="1080" alt="A screenshot of the Better Leaves resourcepack in action" src={ingameImage}/>
|
||||
</ImageComparison>
|
||||
|
||||
## Getting Started
|
||||
First of all, you need to download the contents of the GitHub repository.
|
||||
@@ -37,7 +42,7 @@ After that, follow the <a href="#building">Building</a> section to get your flav
|
||||
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 ito input/mods, and the script will take care of extracting all textures with "leaves" in their name.
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user