lazy load all images

.vitepress/config.ts

@@ -60,6 +60,11 @@ export default () => {
 		},
 		cleanUrls: true,
 		outDir: "./dist",
+		markdown: {
+			image: {
+				lazyLoading: true,
+			},
+		},
 		vite: {
 			resolve: {
 				alias: [

pages/dungeons/alpha-img.md

@@ -31,7 +31,7 @@ _If you find any bugs, please post a new issue on GitHub._
 <ul>
     <li>
         <code>remove_alpha.py</code><br><br>
-        <img src="/images/dungeons/alpha-img/remove_alpha.png" alt="remove alpha" width="192" height="64" loading="lazy">
+        <img src="/images/dungeons/alpha-img/remove_alpha.png" alt="remove alpha" width="192" height="64">
         <blockquote>From Alpha to Opaque.</blockquote>
         <p>Set <strong class="red-text">all pixels</strong> opaque.</p>
         <ul>
@@ -42,7 +42,7 @@ _If you find any bugs, please post a new issue on GitHub._
     <br>
     <li>
         <code>get_alpha.py</code><br><br>
-        <img src="/images/dungeons/alpha-img/get_alpha.png" alt="get alpha" width="192" height="64" loading="lazy">
+        <img src="/images/dungeons/alpha-img/get_alpha.png" alt="get alpha" width="192" height="64">
         <blockquote>From Opaque to Alpha.</blockquote>
         <p>Set <strong class="red-text">all pixels</strong> transparent.</p>
         <ul>
@@ -53,7 +53,7 @@ _If you find any bugs, please post a new issue on GitHub._
     <br>
     <li>
         <code>merge_alpha_layers.py</code><br><br>
-        <img src="/images/dungeons/alpha-img/merge_alpha_layers.png" alt="merge alpha layers" width="192" height="192" loading="lazy">
+        <img src="/images/dungeons/alpha-img/merge_alpha_layers.png" alt="merge alpha layers" width="192" height="192">
         <blockquote>Merge both types easily.</blockquote>
         <p>With this one, you have to set "masks", one with opaque pixels, one with transparent pixels.</p>
         <ul>

pages/dungeons/loader-texture.md

@@ -21,36 +21,36 @@ All needed files for this tutorial can be found [here](https://github.com/Faithf
 
 1. Open `LoadingSpinnerBlock.blend` with Blender
 2. Drag the green bar at the bottom at the beginning of the animation
-<img class="center" src="/images/dungeons/loader-texture/1.png" alt="green bar" loading="lazy">
+<img class="center" src="/images/dungeons/loader-texture/1.png" alt="green bar">
 
 3. Go to the `Shading` tab at the top of the screen
-<img class="center" src="/images/dungeons/loader-texture/2.png" alt="shading tab" loading="lazy">
+<img class="center" src="/images/dungeons/loader-texture/2.png" alt="shading tab">
 
 4. Click on the blank face of the block in front of you (you get a green outline surrounding it)
-<img class="center" src="/images/dungeons/loader-texture/3.png" alt="block green outline" loading="lazy">
+<img class="center" src="/images/dungeons/loader-texture/3.png" alt="block green outline">
 
 5. In the bottom slide, in the Orange Area, click on the cross & import a new texture:
-    A. <img style="padding-left: 10px;" src="/images/dungeons/loader-texture/4.png" alt="import texture 1" loading="lazy"><br>
-    B. <img style="padding-left: 10px;" src="/images/dungeons/loader-texture/5.png" alt="import texture 2" loading="lazy"><br>
-    C. <img style="padding-left: 10px;" src="/images/dungeons/loader-texture/6.png" alt="import texture 3" loading="lazy"><br>
+    A. <img style="padding-left: 10px;" src="/images/dungeons/loader-texture/4.png" alt="import texture 1"><br>
+    B. <img style="padding-left: 10px;" src="/images/dungeons/loader-texture/5.png" alt="import texture 2"><br>
+    C. <img style="padding-left: 10px;" src="/images/dungeons/loader-texture/6.png" alt="import texture 3"><br>
 
 6. Drag the green slider until a new face
     - Remake the previous step & this one until all faces are done
     - <p class="red-text">⚠️ The second side of the animation got 2 orange tabs: this is because the animation file uses a non-euclidean cube, there are 2 textures for 1 face.</p>
     > Optional: You can go to the `Texture Paint` tab & press the space bar to see your texture on the model.
 
 7. Return to the `Layout` tab, and in the bottom right, change the output path
-  <img class="center" src="/images/dungeons/loader-texture/7.png" alt="output path" loading="lazy">
+  <img class="center" src="/images/dungeons/loader-texture/7.png" alt="output path">
 
 8. Finally: at the top left, click on render, then render the animation, all screenshots should be in where you set the output path.
-  <img class="center" src="/images/dungeons/loader-texture/8.png" alt="render animation" loading="lazy">
+  <img class="center" src="/images/dungeons/loader-texture/8.png" alt="render animation">
 
 ## Step by step: Python
 ### Install Pillow:
 As said before, you will need the Pillow module, install it (if you haven't already installed it).
 1. Press `Windows` + `R` then type `cmd` then `enter`
 2. Write this command: `pip install pillow` then press `enter`
-    <img class="center" src="/images/dungeons/loader-texture/9.png" alt="pip install command" loading="lazy">
+    <img class="center" src="/images/dungeons/loader-texture/9.png" alt="pip install command">
 
 3. Once you have installed python & Pillow and that you have all the screenshots (with the right name), you can simply double click the `Merge.py` script to get the texture atlas.
     <strong class="red-text">⚠️ The script needs to be in the same file as screenshots took by Blender.</strong>
@@ -60,12 +60,12 @@ As said before, you will need the Pillow module, install it (if you haven't alre
 1. You need to put the `loader.png` file in this folder: `UE4Project\Content\UI\Materials\LoadingScreens\Misc`
 2. Open your `Dungeons.uproject` from `UE4Project/`
 3. Find the file in your project and open it:
-    <img class="center" src="/images/dungeons/loader-texture/10.png" alt="open file" loading="lazy">
+    <img class="center" src="/images/dungeons/loader-texture/10.png" alt="open file">
 
 4. Then you have to change settings on the right tab:
     - Compression Settings → BC7
     - Mip Gen Settings → NoMipmaps
     - Texture Group → UI
-    <img class="center" src="/images/dungeons/loader-texture/11.png" alt="settings" loading="lazy">
+    <img class="center" src="/images/dungeons/loader-texture/11.png" alt="settings">
 
 <p class="center"><em>Everything should be good, you now just have to package your files using the <a href="https://github.com/Dokucraft/Dungeons-Mod-Kit">Dokucraft Tool</a></em></p>

pages/manuals/branding-guidelines.md

@@ -53,25 +53,25 @@ Logos work well for displaying our branding in places with limited space. This i
 
 For most general-purpose applications, use our plain logo. This logo additionally encompasses Classic Faithful, but if you specifically want to refer to Classic Faithful, you can use its respective plain logo as well.
 
-<img src="/images/manuals/branding-guidelines/main_logos.png" loading="lazy">
+<img src="/images/manuals/branding-guidelines/main_logos.png">
 <i class="center">Left: Plain logo. Right: Classic Faithful plain logo.</i>
 
 If you only want to refer to one project, such as in a card, use that project's respective logo. The Classic Faithful logos have different margins to the regular Faithful logo, so bear that in mind when adjusting sizes.
 
-<img src="/images/manuals/branding-guidelines/all_logos.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/all_logos.png" class="center">
 
 You can use a monochrome version of our logo in small spaces if using the regular logo would look visually noisy or be hard to read.
 
-<img src="/images/manuals/branding-guidelines/monochrome_logos.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/monochrome_logos.png" class="center">
 
 All our logos should always retain their pixel art form. Even when using the monochrome logo, don't simplify the shape into vectors.
 
-<img src="/images/manuals/branding-guidelines/no_vectors.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/no_vectors.png" class="center">
 <i class="center">Left: Correct depiction of the Faithful monochrome logo. Right: Incorrect depiction.</i>
 
 Finally, our logos should always be centered based on their main hexagonal part. The numbers and symbols in the bottom-right corner should not be taken into account when positioning.
 
-<img src="/images/manuals/branding-guidelines/centering.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/centering.png" class="center">
 <i class="center">Left: Correctly centered Faithful 32x logo. Right: An example of incorrect centering; Note that the logo on the right has been centered based on the whole image, and not just the hexagonal part.</i>
 
 ## Part 3: Logotexts
@@ -80,12 +80,12 @@ Finally, our logos should always be centered based on their main hexagonal part.
 
 Logotexts were designed for users to be able to use a logo and a wordmark at the same time without having a clash in resolution. Each logo has a corresponding logotext and this can be used if the Faithful name is not already well established.
 
-<img src="https://database.faithfulpack.net/images/branding/logotexts/plain_logotext.png" class="center" loading="lazy">
+<img src="https://database.faithfulpack.net/images/branding/logotexts/plain_logotext.png" class="center">
 <i class="center">The Faithful logotext.</i>
 
 Always make sure to put logotexts on plain or low-contrast backgrounds — readability can be negatively impacted with noisy backgrounds. Please also note that the text and the logo that make up the logotexts are inseparable, so don't use the pixel art text by itself.
 
-<img src="/images/manuals/branding-guidelines/logotext_comparison.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/logotext_comparison.png" class="center">
 <i class="center">Top: Correct placement of a logotext that ensures it's easily readable. Bottom: Poorly placed logotext.</i>
 
 ## Part 4: Wordmarks
@@ -94,24 +94,24 @@ Always make sure to put logotexts on plain or low-contrast backgrounds — read
 
 Wordmarks tend to be pretty big and bold, so use them sparingly for large banners and other big areas. They're usually the preferred branding when placed over busy backgrounds such as screenshots.
 
-<img src="https://database.faithfulpack.net/images/branding/social%20media/banners/universal_banner.png" class="center" loading="lazy">
+<img src="https://database.faithfulpack.net/images/branding/social%20media/banners/universal_banner.png" class="center">
 <i class="center">The Faithful banner.</i>
 
 The plain Faithful wordmark is preferred for most purposes, but specific projects also have their own wordmarks, similarly to the project logos.
 
 In addition, both cracked, flat, and outlined versions exist. As a rule of thumb, use the flat versions for referring to Faithful (or Classic Faithful) as a whole, the cracked versions for specific projects, and the outlined versions to help readability when necessary.
 
-<img src="/images/manuals/branding-guidelines/wordmarks.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/wordmarks.png" class="center">
 <i class="center">Each Faithful wordmark variation.</i>
 
 Wordmarks don't tend to scale well, so refrain from using them in small spaces — consider using the logo or simply typing out the name when space is limited.
 
-<img src="/images/manuals/branding-guidelines/bad_wordmark_scaling.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/bad_wordmark_scaling.png" class="center">
 <i class="center">An example of a wordmark not scaling well.</i>
 
 However, don't mix logos and wordmarks, since that's what the logotexts are for. The reasoning is because the pixelated logos don't mix well with the high-resolution wordmarks.
 
-<img src="/images/manuals/branding-guidelines/wordmark_vs_logotext.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/wordmark_vs_logotext.png" class="center">
 <i class="center">A logo next to a wordmark. A logotext is much better suited for this situation.</i>
 
 ## Part 5: Typography
@@ -122,12 +122,12 @@ The Faithful font should be used for titles and headings, while any neutral sans
 
 The individual pixels on a logotext also tend to blend at small resolutions so you're usually better off just typing the name out in a regular font.
 
-<img src="/images/manuals/branding-guidelines/bad_font.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/bad_font.png" class="center">
 <i class="center">Left: Good diversity in font sizing. Right: Blends together from the uniform size and font.</i>
 
 The semibold Faithful font should be used for large headings and the regular Faithful font for sub-headings. Only use the bold Faithful font for top-level titles when more than two levels of nested titles are required, due to its low readability and large horizontal footprint.
 
-<img src="/images/manuals/branding-guidelines/font_scaling.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/font_scaling.png" class="center">
 <i class="center">Each font weight and where it should be used.</i>
 
 ## Part 6: Scaling
@@ -138,12 +138,12 @@ In general, the hierarchy of branding elements to be used should be as following
 
 Always leave padding around the edges of any logo, logotext, and wordmark. Specific ratios don't really matter as long as the padding is even on all sides and the respective branding doesn't appear too large.
 
-<img src="/images/manuals/branding-guidelines/padding.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/padding.png" class="center">
 <i class="center">Left: Correct padding and scaling of the logo. Right: Incorrect padding and sizing.</i>
 
 Don't distort our branding to fit in a given space. Instead try using another suitable image or simply typing out the Faithful name using the format specified in part 1.
 
-<img src="/images/manuals/branding-guidelines/distortion.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/distortion.png" class="center">
 <i class="center">Do not.</i>
 
 ## Part 7: Colors and Backgrounds
@@ -152,12 +152,12 @@ Faithful has a fairly limited color palette used throughout most of the branding
 
 The main brand color is used for most accent colors, such as buttons or embeds. It works in combination with the "generic" background image.
 
-<img src="/images/manuals/branding-guidelines/faithful_color.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/faithful_color.png" class="center">
 <i class="center">The main Faithful brand color and image.</i>
 
 Each pack additionally has a unique color and background screenshot assigned to it.
 
-<img src="/images/manuals/branding-guidelines/colors.png" class="center" loading="lazy">
+<img src="/images/manuals/branding-guidelines/colors.png" class="center">
 <i class="center">All Faithful project colors with their respective images.</i>
 
 A background image works well with a wordmark, decently with a logo, and not very well with a logotext. This placement hierarchy should be used to determine an element to go on top of a background image. If you absolutely have to use a logo or a logotext on a background image, it is recommended to add a drop shadow and/or blur the background.

pages/mods/add-new-mod.md

@@ -16,18 +16,18 @@ deprecated: true
 
 *  If you want to add a new mod to our project, firstly check the mod list in our [GitHub](https://github.com/Faithful-Mods) **and** on our [Faithful Website](https://faithfulpack.net/mods) by typing the name of the mod or its assets folder name.
 
-<img src="/images/mods/add-new-mod/github-research.png" alt="github-research.png" class="center" loading="lazy">
+<img src="/images/mods/add-new-mod/github-research.png" alt="github-research.png" class="center">
 
 > ℹ️ **Info**
 > See [here](/pages/mods/add-textures) if the mod repository already exists.
 
 *  If the mod does not have any repository, then create a repository in your **own** profile (if you have access to the Faithful Mods organisation, then create it there). The repository needs to have the same name as the `assets` folder file (ex: `Actually Additions` mod repository would be named: `actuallyadditions`).
 
-<img src="/images/mods/add-new-mod/new-repo-img.png" alt="new-repo-img" class="center" loading="lazy">
+<img src="/images/mods/add-new-mod/new-repo-img.png" alt="new-repo-img" class="center">
 
 *  Keep the `main` branch empty (you can add a `readme.md` / `license.md` stuff but **no textures** on that branch) and make a new branch for each supported Minecraft version.
 
-<img src="/images/mods/add-new-mod/branches-list.png" alt="branches-list" class="center" loading="lazy">
+<img src="/images/mods/add-new-mod/branches-list.png" alt="branches-list" class="center">
 
 > ⚠️ **Warning**
 > - The `main` branch needs to be set as the **default branch**! Do not merge other branches into the main branch!
@@ -41,7 +41,7 @@ deprecated: true
 
 * Your repository now should look like this:
 
-<img src="/images/mods/add-new-mod/final-result.png" alt="final-result" class="center" loading="lazy">
+<img src="/images/mods/add-new-mod/final-result.png" alt="final-result" class="center">
 
 
 > ℹ️ **Info**

pages/mods/add-new-version.md

@@ -19,14 +19,14 @@ deprecated: true
 	#### **Using GitHub Website:**
 
 	Type the Minecraft version you want to add support for, then click on `Create a branch`.
-	<img src="/images/mods/add-new-version/github-add-branch.png" alt="github-add-branch.png" class="center" loading="lazy">
+	<img src="/images/mods/add-new-version/github-add-branch.png" alt="github-add-branch.png" class="center">
 
 	#### **Using GitHub Desktop:**
 
 	1. Click on the `current branch` button, then `New branch`, then type the Minecraft version you want to add support for, if `main` is not selected, click on it, then `create branch`.
-	<img src="/images/mods/add-new-version/github-desktop-add-branch-1st-step.png" alt="github-desktop-add-branch-1st-step.png" class="center" loading="lazy">
+	<img src="/images/mods/add-new-version/github-desktop-add-branch-1st-step.png" alt="github-desktop-add-branch-1st-step.png" class="center">
 	<br>
-	<img src="/images/mods/add-new-version/github-desktop-add-branch-2nd-step.png" alt="github-desktop-add-branch-2nd-step.png" class="center" loading="lazy">
+	<img src="/images/mods/add-new-version/github-desktop-add-branch-2nd-step.png" alt="github-desktop-add-branch-2nd-step.png" class="center">
 
 	2. Add those files to your new branch:
 		- **The pack.png and pack.mcmeta are not needed anymore, because that process is now automated. If you still find them, just delete them.**

pages/mods/add-textures-commands.md

@@ -15,7 +15,7 @@ deprecated: true
 ## Step by Step:
 
 1.  Firstly find your Mod repository in our [organization](https://github.com/Faithful-Mods), then find the repository `HTTPS` and use those commands in a shell:
-<img src="/images/mods/add-textures-commands/get-repository-https.png" alt="github get https" class="center" loading="lazy">
+<img src="/images/mods/add-textures-commands/get-repository-https.png" alt="github get https" class="center">
 ```shell
   $ git clone <git url>
 ```
@@ -29,7 +29,7 @@ deprecated: true
 > Note: If the branch doesn't exist, create a new one using `git branch <new-branch>` first, the new branch will be based on the actual branch
 
 3.  Your local repository should now looks like the image below, you can now edit/add textures locally.
-<img src="/images/mods/add-textures-commands/folder-example.png" alt="folder result" class="center" loading="lazy">
+<img src="/images/mods/add-textures-commands/folder-example.png" alt="folder result" class="center">
 
 4.  Once you are done with editing/adding textures, you can commit and push your changes to the online repository:
 ```shell