Complete Fedora Workstation 42 Install Guide

README.md

@@ -7,6 +7,17 @@ learn more about Linux.
 
 This project uses Astro, Tailwind CSS, and Breeze icons.
 
+## Images
+
+Images, excluding logos, are mostly captured from VMs in this project. You are
+free to contribute better images if they can reflect real hardware better.
+
+Anaconda WebUI compress icon (`./src/assets/icons/fa-compress-arrows-alt.svg`)
+sourced from Patternfly Icons.
+
 ## License
 
 This project is licensed under MIT License.
+
+Logos of other projects (such as Linux Distributions, located in `./public/logos`)
+belong to their respective owner.

astro.config.mjs

@@ -1,30 +1,40 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig, envField } from 'astro/config';
 
 import tailwindcss from '@tailwindcss/vite';
 import { fileURLToPath } from 'node:url';
 
 import solidJs from "@astrojs/solid-js";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-  i18n: {
-      locales: ["en", "th"],
-      defaultLocale: "en",
-      routing: {
-          prefixDefaultLocale: true,
-          redirectToDefaultLocale: false
-      }
-  },
+    i18n: {
+        locales: ["en", "th"],
+        defaultLocale: "en",
+        routing: {
+            prefixDefaultLocale: true,
+            redirectToDefaultLocale: false
+        }
+    },
 
-  vite: {
-      plugins: [tailwindcss()],
-      resolve: {
-          alias: {
-              "@": fileURLToPath(new URL("./src", import.meta.url))
-          }
-      }
-  },
+    env: {
+        schema: {
+            // Example value: https://movetolinux.example.com
+            // If unset, code will use Astro.url.host instead, which is most likely "http://localhost:4321"
+            ORIGIN: envField.string({ context: "server", access: "public", optional: true })
+        }
+    },
 
-  integrations: [solidJs()]
+    vite: {
+        plugins: [tailwindcss()],
+        resolve: {
+            alias: {
+                "@": fileURLToPath(new URL("./src", import.meta.url))
+            }
+        }
+    },
+
+    integrations: [solidJs(), mdx()]
 });

package.json

@@ -9,14 +9,19 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^4.3.5",
     "@astrojs/solid-js": "^5.1.1",
     "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.13.7",
+    "party-js": "^2.2.0",
+    "qrcode-generator": "^2.0.4",
+    "sharp": "^0.34.3",
     "solid-js": "^1.9.9",
     "tailwindcss": "^4.1.13"
   },
   "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
   "devDependencies": {
-    "@types/node": "^24.3.1"
+    "@types/node": "^24.3.1",
+    "wrangler": "^4.37.0"
   }
 }

pnpm-workspace.yaml

@@ -1,2 +1,5 @@
 onlyBuiltDependencies:
   - '@tailwindcss/oxide'
+  - esbuild
+  - sharp
+  - workerd

src/assets/icons/fa-compress-arrows-alt.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="100%" height="100%" color="" xmlns="http://www.w3.org/2000/svg"><path d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></svg>

src/components/ChoiceList.astro

@@ -0,0 +1,3 @@
+<div class="max-h-[60vh] grid md:grid-flow-col md:auto-cols-fr gap-2">
+	<slot />
+</div>

src/components/Party.astro

@@ -0,0 +1,8 @@
+<script>
+	import party from "party-js";
+
+	party.confetti(document.body, {
+		count: party.variation.range(60, 120),
+		size: party.variation.range(1, 3),
+	});
+</script>

src/components/QRCode.astro

@@ -0,0 +1,26 @@
+---
+import { ORIGIN } from "astro:env/server";
+import qrcode from "qrcode-generator";
+
+const { msg, width, height } = Astro.props;
+
+const qr = qrcode(0, "M");
+
+let data = msg;
+
+if (msg.startsWith("/")) {
+	data = (ORIGIN ?? Astro.url.host) + msg;
+}
+
+qr.addData(data);
+qr.make();
+let img = qr.createImgTag();
+
+if (width !== undefined) {
+	img = img.replace(/width="[0-9]+"/, `width="${width}"`);
+}
+
+img = img.replace(">", ' style="image-rendering: pixelated;">');
+---
+
+<Fragment set:html={img} />

src/content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, z } from "astro:content";
+
+import { glob, file } from "astro/loaders";
+
+const distroGuide = defineCollection({
+    loader: glob({ pattern: "**/*.mdx", base: "./src/data/distro" }),
+    schema: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+    })
+});
+
+export const collections = { distroGuide };

src/data/distro/fedora/fedora.ts

@@ -1,9 +1,9 @@
 import type { Dialog } from "@/lib/tinyvn";
 import { getRelativeLocaleUrl } from "astro:i18n";
-import fedoraWorkstation from "@/assets/imgs/fedora42_workstation.avif";
-import fedoraWorkstationPng from "@/assets/imgs/fedora42_workstation.png";
-import fedoraPlasma from "@/assets/imgs/fedora42_kdeplasma.avif";
-import fedoraPlasmaPng from "@/assets/imgs/fedora42_kdeplasma.png";
+import fedoraWorkstation from "@/assets/imgs/Fedora/fedora42_workstation.avif";
+import fedoraWorkstationPng from "@/assets/imgs/Fedora/fedora42_workstation.png";
+import fedoraPlasma from "@/assets/imgs/Fedora/fedora42_kdeplasma.avif";
+import fedoraPlasmaPng from "@/assets/imgs/Fedora/fedora42_kdeplasma.png";
 
 const fedoraDialogs: Dialog[] = [
     {
@@ -145,7 +145,7 @@ appearance. KDE Plasma (Right) may be more familiar for Windows users.`,
             {
                 action: "link",
                 text: "Continue",
-                data: getRelativeLocaleUrl("en", "fedora/workstation/0")
+                data: getRelativeLocaleUrl("en", "distro/fedora/workstation/0")
             }
         ]
     }, // 8
@@ -164,7 +164,7 @@ appearance. KDE Plasma (Right) may be more familiar for Windows users.`,
             {
                 action: "link",
                 text: "Continue",
-                data: getRelativeLocaleUrl("en", "fedora/plasma/0")
+                data: getRelativeLocaleUrl("en", "distro/fedora/plasma/0")
             }
         ]
     } // 9

src/data/distro/fedora/workstation/0.mdx

@@ -0,0 +1,25 @@
+---
+title: Fedora Media Writer
+description: Choosing to download Fedora automatically.
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import selectImageSource from "@/assets/imgs/Fedora/FedoraMediaWriter/SelectImageSource.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={selectImageSource}
+		formats={["avif"]}
+		alt="Fedora Media Writer's Select Image Source page"
+		class="h-72 w-auto"
+	/>
+</div>
+
+Select "Download automatically" and click Next.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/1/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/1.mdx

@@ -0,0 +1,25 @@
+---
+title: Select Fedora Release
+description: Select the Fedora release according to your choosing.
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import selectImageSource from "@/assets/imgs/Fedora/FedoraMediaWriter/SelectFedoraRelease_Workstation.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={selectImageSource}
+		formats={["avif"]}
+		alt="Fedora Media Writer's Select Fedora Release page"
+		class="h-72 w-auto"
+	/>
+</div>
+
+Select "Fedora Workstation" and click Next.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/2/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/2.mdx

@@ -0,0 +1,31 @@
+---
+title: Write Options
+description: Selecting the USB flash drive write options
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import writeOptions from "@/assets/imgs/Fedora/FedoraMediaWriter/WriteOptions.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={writeOptions}
+		formats={["avif"]}
+		alt="Fedora Media Writer's Write Options page"
+		class="h-72 w-auto"
+	/>
+</div>
+
+Select the latest version available (as of writing, is version 42) and make
+sure you're choosing the right device in the USB Drive dropdown.
+
+Optionally, check "Delete download after writing" if you'd like to save space
+and do not plan to format a USB flash drive again with Fedora anytime soon.
+
+Then, Click "Write"
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/3/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/3.mdx

@@ -0,0 +1,27 @@
+---
+title: Erase Confirmation
+description: Confirming the formatting of the USB drive.
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import eraseConfirmation from "@/assets/imgs/Fedora/FedoraMediaWriter/EraseConfirmation.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={eraseConfirmation}
+		formats={["avif"]}
+		alt="Fedora Media Writer's Erase Confirmation dialog"
+		class="h-48 w-auto"
+	/>
+</div>
+
+**The entire device that you have selected will be wiped.** Click "Write" if
+you have absolutely made sure that the selected device does not have important
+data on it. This action is **irreversible.**
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/4/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/4.mdx

@@ -0,0 +1,26 @@
+---
+title: Wait
+description: Wait while Fedora Media Writer does its thing.
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import writing from "@/assets/imgs/Fedora/FedoraMediaWriter/Writing.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={writing}
+		formats={["avif"]}
+		alt="Fedora Media Writer's Writing page"
+		class="h-72 w-auto"
+	/>
+</div>
+
+Now, wait while Fedora Media Writer is downloading and writing to your USB
+flash drive. You can do something else while it does its thing.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/5/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/5.mdx

@@ -0,0 +1,25 @@
+---
+title: Finished
+description: Finished! Get ready to install.
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import finished from "@/assets/imgs/Fedora/FedoraMediaWriter/Finished.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={finished}
+		formats={["avif"]}
+		alt="Fedora Media Writer's Finished page"
+		class="h-72 w-auto"
+	/>
+</div>
+
+Done! Next, We'll start the real installation process.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/0/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/0.mdx

@@ -0,0 +1,23 @@
+---
+title: Willkommen
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import welcome from "@/assets/imgs/Fedora/AfterInstall/WelcomeCropped.png";
+
+<Picture
+	src={welcome}
+	formats={["avif"]}
+	alt="The Welcome window"
+	class="max-h-[60vh] w-auto"
+	priority
+/>
+
+Confirm your language selection and simply click "Next".
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/1/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/1.mdx

@@ -0,0 +1,25 @@
+---
+title: Keyboard Layout
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import keyboard from "@/assets/imgs/Fedora/AfterInstall/TypingCropped.png";
+
+<Picture
+	src={keyboard}
+	formats={["avif"]}
+	alt="The Typing page listing keyboard layouts"
+	class="max-h-[60vh] w-auto"
+	priority
+/>
+
+Select your preferred keyboard layout and click "Next".
+
+(Don't worry bilinguals, You'll be able to add another keyboard layout later!)
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/2/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/2.mdx

@@ -0,0 +1,28 @@
+---
+title: Privacy
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import welcome from "@/assets/imgs/Fedora/AfterInstall/PrivacyCropped.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={welcome}
+		formats={["avif"]}
+		alt="The Privacy page"
+		class="max-h-[60vh] w-auto"
+		priority
+	/>
+</div>
+
+Check whether you want location services and automatic problem reporting.
+
+You can disable the location service if you do not plan to use any apps
+that rely on your location such as Maps.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/3/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/3.mdx

@@ -0,0 +1,23 @@
+---
+title: On the topic of time
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import timeZone from "@/assets/imgs/Fedora/AfterInstall/TimeZoneCropped.png";
+
+<Picture
+	src={timeZone}
+	formats={["avif"]}
+	alt="The Time zone selection page"
+	class="max-h-[60vh] w-auto"
+	priority
+/>
+
+Search for your city (or the one near you) to select the time zone.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/4/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/4.mdx

@@ -0,0 +1,28 @@
+---
+title: Parties!
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import image from "@/assets/imgs/Fedora/AfterInstall/ThirdPartyRepoCropped.png";
+
+<Picture
+	src={image}
+	formats={["avif"]}
+	alt="The Time zone selection page"
+	priority
+/>
+
+Choose whether you want third-party <span 
+    class="border-b border-dotted" 
+    title="Imagine a warehouse that stores software, That is a software repository.">
+repositories</span>
+
+It is recommended that you enable it to ensure access to a wide-variety of
+software and any drivers that you may need now or in the future.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/5/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/5.mdx

@@ -0,0 +1,29 @@
+---
+title: What is thy name?
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import image from "@/assets/imgs/Fedora/AfterInstall/UsernameCropped.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={image}
+		formats={["avif"]}
+		alt="Full name & username input page"
+		class="max-h-[60vh] w-auto"
+		priority
+	/>
+</div>
+
+I think this is obvious enough. Full names can have spaces and whatever you
+fancy and username mostly just contains <span
+    class="border-b border-dotted"
+    title="a.k.a numbers and English alphabets">alphanumeric</span> characters
+under 64 characters in length.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/6/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/6.mdx

@@ -0,0 +1,27 @@
+---
+title: "********"
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import image from "@/assets/imgs/Fedora/AfterInstall/PasswordCropped.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={image}
+		formats={["avif"]}
+		alt="Setting account password page"
+		class="max-h-[60vh] w-auto"
+		priority
+	/>
+</div>
+
+Set a new password for your new user account. Just use whatever but most
+importantly, **Don't forget them.** (Write it down in a note somewhere if you
+must)
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/7/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/7.mdx

@@ -0,0 +1,26 @@
+---
+title: Hooray
+---
+
+import { Picture } from "astro:assets";
+import Party from "@/components/Party.astro";
+import ChoiceList from "@/components/ChoiceList.astro";
+import image from "@/assets/imgs/Fedora/AfterInstall/OnboardDoneCropped.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={image}
+		formats={["avif"]}
+		alt="Page showing that the system is ready to be used"
+		class="max-h-[60vh] w-auto"
+		priority
+	/>
+</div>
+
+<Party />
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/8/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/afterInstall/8.mdx

@@ -0,0 +1,28 @@
+---
+title: Hooray
+---
+
+import { Picture } from "astro:assets";
+import Party from "@/components/Party.astro";
+import ChoiceList from "@/components/ChoiceList.astro";
+import image from "@/assets/imgs/Fedora/AfterInstall/OptionalTour.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={image}
+		formats={["avif"]}
+		alt="An optional tour for the desktop"
+		class="max-h-[60vh] w-auto"
+		priority
+	/>
+</div>
+
+Now press the Super key (or also called the Windows key) and get into the
+overview of your desktop! You may receive this tour invitation and I would
+recommend that you take the tour to learn your way around the desktop.
+
+<ChoiceList>
+	<a href="/en/" class="button">
+		Back Home
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/0.mdx

@@ -0,0 +1,21 @@
+---
+title: Installation
+description: The steps of installing Fedora Linux
+---
+
+import ChoiceList from "@/components/ChoiceList.astro";
+import QRCode from "@/components/QRCode.astro";
+
+The steps after this will require you to restart the machine you're going to
+install Linux on. If that is the machine you're viewing this guide on, You
+should likely switch to a phone or other devices.
+
+<div class="flex justify-center">
+	<QRCode msg="/en/distro/fedora/workstation/install/0/" width="164" />
+</div>
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/1/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/1.mdx

@@ -0,0 +1,18 @@
+---
+title: Restart
+description: Restarting your machine to boot from the USB flash drive
+---
+
+import ChoiceList from "@/components/ChoiceList.astro";
+
+Next, you'll need to restart your machine to boot from the USB flash drive.
+
+Please look up the boot menu key for your laptop/mainboard manufacturer and
+then when restarting, Press that key repeatedly until the "Boot Menu" pops
+up.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/2/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/10.mdx

@@ -0,0 +1,32 @@
+---
+title: Installation Method
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import installMethod from "@/assets/imgs/Fedora/Install/InstallationMethod_Cropped.png";
+
+<div class="relative">
+	<Picture
+		src={installMethod}
+		formats={["avif"]}
+		alt="Installation method page"
+	/>
+	<div class="absolute bottom-1/4 max-w-7/8 left-1/16 translate-y-1/2 bg-white/50 text-black rounded p-4">
+		"Share disk with other operating system" - Share disk space, have more than one OS on your machine
+
+        "Use entire disk" - Wipe the entire thing and install Fedora
+
+        We won't talk about the third option in the picture because it's advanced&trade;
+    </div>
+
+</div>
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/11/" class="button">
+		I choose to share
+	</a>
+	<a href="/en/distro/fedora/workstation/install/14/" class="button">
+		Use the entire thang
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/11.mdx

@@ -0,0 +1,23 @@
+---
+title: Sharing is caring
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import reclaimSpace from "@/assets/imgs/Fedora/Install/ReclaimSpace_Cropped.png";
+import ResizeIcon from "@/assets/icons/fa-compress-arrows-alt.svg";
+
+<Picture src={reclaimSpace} formats={["avif"]} alt="Reclaim space dialog" />
+
+You should likely resize the biggest partition, which in the picture is `sda3`
+with 67.9 GB of total space (which in the example system, is the Windows C
+drive). Click <ResizeIcon 
+    class="size-5 inline-block" 
+    aria-label="Compress icon" role="img" />
+to resize.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/12/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/12.mdx

@@ -0,0 +1,22 @@
+---
+title: Resize it!
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import reclaimSpace from "@/assets/imgs/Fedora/Install/ReclaimSpaceSlider_Cropped.png";
+
+<Picture
+	src={reclaimSpace}
+	formats={["avif"]}
+	alt="Reclaim space dialog with a new size slider"
+/>
+
+Choose a new size for your partition. Please also keep in mind the available
+space of your partition. Simply click "Resize" after you're done.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/13/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/13.mdx

@@ -0,0 +1,21 @@
+---
+title: Reclaim Territory
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import reclaimSpace from "@/assets/imgs/Fedora/Install/ReclaimSpaceDone_Cropped.png";
+
+<Picture
+	src={reclaimSpace}
+	formats={["avif"]}
+	alt="Reclaim space dialog after partition has been resized"
+/>
+
+Now, Verify your configuration and click "Reclaim space".
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/14/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/14.mdx

@@ -0,0 +1,27 @@
+---
+title: Disk Encryption
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import diskEncryption from "@/assets/imgs/Fedora/Install/DiskEncryptionUnchecked_Cropped.png";
+
+<div class="relative">
+	<Picture
+		src={diskEncryption}
+		formats={["avif"]}
+		alt="Disk encryption page"
+	/>
+	<div class="absolute bottom-1/4 max-w-7/8 left-1/16 translate-y-1/2 bg-white/50 text-black rounded p-4">
+		You can optionally encrypt your disk. If you wish to encrypt, Check the 
+        checkbox and enter the required information. If not, Just go ahead and 
+        press "Next".
+    </div>
+
+</div>
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/15/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/15.mdx

@@ -0,0 +1,25 @@
+---
+title: Review and Install
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import reviewAndInstall from "@/assets/imgs/Fedora/Install/ReviewAndInstall_Cropped.png";
+
+<div class="relative">
+	<Picture
+		src={reviewAndInstall}
+		formats={["avif"]}
+		alt="Review and Installation page"
+	/>
+	<div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 translate-y-1/2 bg-white/50 text-black rounded p-4">
+		Review what the installer is going to do, and press "Install"!
+    </div>
+
+</div>
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/16/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/16.mdx

@@ -0,0 +1,24 @@
+---
+title: Installing...
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import installing from "@/assets/imgs/Fedora/Install/Installing_Cropped.png";
+
+<Picture
+	src={installing}
+	formats={["avif"]}
+	alt="Installing page, Software installation step."
+/>
+
+Patiently wait. Eat some snacks, listen to some music, find something else to do.
+
+This process should take around 5-10 minutes or longer depending on your
+hardware speed and internet connection.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/17/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/17.mdx

@@ -0,0 +1,21 @@
+---
+title: You slayed it
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import installing from "@/assets/imgs/Fedora/Install/InstallationFinished_Cropped.png";
+
+<Picture
+	src={installing}
+	formats={["avif"]}
+	alt="Installation finished page."
+/>
+
+Done!
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/18/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/18.mdx

@@ -0,0 +1,26 @@
+---
+title: Your journey begins anew
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import restart from "@/assets/imgs/Fedora/Install/RestartMenu_Cropped.png";
+
+<div class="flex justify-center">
+	<Picture
+		src={restart}
+		formats={["avif"]}
+		alt="Restart menu"
+		class="max-h-[50vh] w-auto"
+	/>
+</div>
+
+Now, go to the top right corner of your desktop and click to open the System
+menu, then press the power button and restart. (Remember this menu, you'll use
+it often!)
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/afterinstall/0/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/2.mdx

@@ -0,0 +1,25 @@
+---
+title: Boot Menu
+description: Choose your USB flash drive
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import bootMenu from "@/assets/imgs/Fedora/Boot/MSIBootMenu_Cropped.jpg";
+
+<figure>
+	<Picture src={bootMenu} formats={["avif"]} alt="A photo of the boot menu" />
+	<figcaption>Example: MSI Boot Menu</figcaption>
+</figure>
+
+In the next 3 steps, Please read what's on here first before putting it into
+action as it will mostly require fast actions.
+
+After the boot menu pops up, use the arrow keys (Up/Down) on your keyboard to
+select the USB flash drive then press Enter.
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/3/" class="button">
+		Continue
+	</a>
+</ChoiceList>

src/data/distro/fedora/workstation/install/3.mdx

@@ -0,0 +1,29 @@
+---
+title: Boot Menu
+description: Choose your USB flash drive
+---
+
+import { Picture } from "astro:assets";
+import ChoiceList from "@/components/ChoiceList.astro";
+import bootOption from "@/assets/imgs/Fedora/Boot/BootOptionRestoration_Cropped.png";
+
+<div class="relative">
+    <Picture
+        src={bootOption}
+        formats={["avif"]}
+        alt="A photo of the boot option menu"
+    />
+    <div class="absolute bottom-1/4 max-w-3/4 left-1/8 translate-y-3/8 bg-black/30 rounded p-4 text-white">
+        You _may_ see this screen if you have secure boot enabled, Press any key on
+        your keyboard to stop your system from restarting.
+
+        You can ignore this step (and the next) if you do not face this screen.
+    </div>
+
+</div>
+
+<ChoiceList>
+	<a href="/en/distro/fedora/workstation/install/4/" class="button">
+		Continue
+	</a>
+</ChoiceList>