Add better guide (#141)

docs/better-guide/part-1/en-US.md

@@ -0,0 +1,267 @@
+# Installing Linux
+
+In this guide, I have chosen to install base Arch Linux. The following guides will assume that you are using Arch, but any Arch derivative should be able to follow the following guides too. If you aren't installing Arch, skip to the next guide [here](../part-2/en-US.md).
+
+> [!IMPORTANT]
+> Note: Commands prefixed with `#` should be run as root, and those prefixed with `$` should be run unprivileged.
+> 
+> In the ISO, all commands are run as root as default.
+> 
+> Lines prefixed with `//` are comments and should NOT be run.
+
+Psst! Can't be bothered to manually install? Try the `archinstall` command after connecting to internet in the live environment, or maybe try an Arch derivative :3
+
+
+# Downloading the ISO
+First things first, we need to download the ISO file for Arch Linux. You can download it from [here](https://archlinux.org/download/). 
+
+Next, scroll down to the mirror lists:
+![image](./iso-mirrors.png)
+
+Find your closest mirror, then click it.
+You should be met with a page similar to this:
+![image](./iso-download.png)
+Select `archlinux-202x.xx.xx-x86_64.iso`.
+
+# Preparing an installation medium
+
+Next, we need to prepare something to boot from. I assume you don't have a CD, and I don't either, so we will use a USB drive. 
+
+1. Download [ventoy](https://www.ventoy.net/en/download.html). 
+2. Follow the instructions on the website to install ventoy.
+3. Plug in your USB drive.
+4. Open ventoy, select your USB drive, and install ventoy to the drive.
+5. Drag and drop the downloaded ISO onto your USB drive
+
+# Booting into the Arch live environment
+
+Once you have flashed the USB, plug it into your computer and boot into the USB. You can do this by pressing the boot menu key on your computer. This is usually `F12` or `F2`, otherwise you can find your correct key [here](https://www.wikihow.com/Enter-BIOS)
+
+When you boot into the USB you will be greeted with this screen:
+![img](./systemd-boot.png)
+Hit <ENTER> to continue. You should see something like this:
+![img](./initial-boot.png)
+
+# Installing Arch Linux
+
+> [!CAUTION]
+> I recommend you follow the official installation guide [here](https://wiki.archlinux.org/title/Installation_guide), and research what options you want, but you can continue on if you just want to install. I will be picking options suitable for my hardware: 512GB nvme, Intel i7, Integrated graphics. Please do your own research and pick more sensible options if you have different hardware.
+
+Also note that I have opinions, and the packages I install may not be the best for you.
+
+## Connecting to the internet
+This is much easier if you have ethernet. I don't, so I will be showing how to do it with wifi.
+
+1. First, check your network interface:
+```
+# ip link
+```
+Look for `wlan0`.
+
+2. Now we can use `iwctl` to connect.
+```
+# iwctl
+// Scan for networks
+  [iwd]# station wlan0 scan
+  [iwd]# station wlan0 get-networks
+// Select your wifi
+  [iwd]# station wlan0 connect <YOUR WIFI NETWORK NAME>
+  [iwd]# quit
+```
+
+3. Now, verify your connection:
+```
+# ping ping.archlinux.org
+```
+
+## Update system clock
+```
+# timedatectl
+```
+
+## Disk Setup
+When recognised by the live system, disks are assigned to a block device such as `/dev/sda`, `/dev/nvme0n1` or `/dev/mmcblk0`. 
+
+> [!CAUTION]
+> Partitioning should depend on your disk. Please don't blindly follow my steps, my setup is not optimal. See [here](https://wiki.archlinux.org/title/Installation_guide#Partition_the_disks). If you really just want to install, continue on.
+
+1. Identify your block device:
+```
+# lsblk
+```
+For me, this will be `nvme0n1`
+
+2. Now, to partition:
+```
+# fdisk /dev/nvme0n1
+Command (m for help): g
+
+Created a new GPT disklabel (GUID: BEBC11C7-507C-4D2D-A069-656DED1F8ECD).
+
+Command (m for help): n
+Partition number (1-128, default 1): 1
+First sector (2048-1000215182, default 2048): 2048
+Last sector, +/-sectors or +/-size{K,M,G,T,P} (2048-1000215182, default 1000214527): +1G
+
+Created a new partition 1 of type 'Linux filesystem' and of size 1 GiB.
+
+Command (m for help): t
+
+Selected partition 1
+Partition type or alias (type L to list all): uefi
+Changed type of partition 'Linux filesystem' to 'EFI System'.
+
+Command (m for help): n
+Partition number (2-128, default 2): 2
+First sector (2099200-1000215182, default 2099200): 2099200
+Last sector, +/-sectors or +/-size{K,M,G,T,P} (2099200-1000215182, default 1000214527): 1000214527
+
+Created a new partition 2 of type 'Linux filesystem' and of size 475.9 GiB.
+
+Command (m for help): w
+```
+
+Our resulting partition table:
+| Mount point on the installed system | Partition      | Partition type        |
+| :---------------------------------: | :------------: | :-------------------: |
+| /boot                               | /dev/nvme0n1p1 | EFI system partition  |
+| /                                   | /dev/nvme0n1p2 | Linux x86-64 root (/) |
+
+3. Now, we need to add filesystems:
+
+Format the boot partition
+```
+# mkfs.fat -F 32 /dev/nvme0n1p1
+```
+Format our root partition. There are better filesystems, do your own research [here](https://wiki.archlinux.org/title/File_system) please!
+```
+# mkfs.ext4 /dev/nvme0n1p2
+```
+
+## Mounting partitions
+We need to mount our partitions so we can actually do things.
+```
+# mount /dev/nvme0n1p2 /mnt
+# mount --mkdir /dev/nvme0n1p1 /mnt/boot
+```
+
+## Installation
+Now for the actual installation...
+### 1. Select mirrors
+
+Packages to be installed must be downloaded from mirror servers, which are defined in /etc/pacman.d/mirrorlist. The higher a mirror is placed in the list, the more priority it is given when downloading a package.
+
+The topmost worldwide mirror should be fast enough for most people, but you may still want to inspect the file to see if it is satisfactory. If it is not, edit the file accordingly, and move the geographically closest mirrors to the top of the list, although other criteria should be taken into account. 
+
+This file will later be copied to the new system by pacstrap, so it is worth getting right. 
+
+```
+# nano /etc/pacman.d/mirrorlist
+// Make your changes
+```
+### 2. Install essential packages
+
+> [!CAUTION] 
+> Please go [here](https://wiki.archlinux.org/title/Installation_guide#Install_essential_packages) and make sure the right packages for YOU are installed.
+
+A base system:
+```
+# pacstrap -K /mnt base linux-firmware intel-ucode sudo fsck networkmanager nano man-db man-pages texinfo
+```
+
+### 3. fstab
+To get needed file systems (like the one used for the boot directory /boot) mounted on startup, generate an fstab file. Use -U or -L to define by UUID or labels, respectively: 
+```
+# genfstab -U /mnt >> /mnt/etc/fstab
+```
+Check the resulting /mnt/etc/fstab file, and edit it in case of errors. 
+
+### 4. chroot
+To directly interact with the new system's environment, tools, and configurations for the next steps as if you were booted into it, change root into the new system: 
+```
+# arch-chroot /mnt
+```
+
+### 5. Time
+For human convenience (e.g. showing the correct local time or handling Daylight Saving Time), set the time zone:
+```
+# ln -sf /usr/share/zoneinfo/Australia/Sydney /etc/localtime
+# hwclock --systohc
+```
+
+### 6. Localization
+
+To use the correct region and language specific formatting (like dates, currency, decimal separators), edit /etc/locale.gen and uncomment the UTF-8 locales you will be using. Generate the locales by running:
+```
+# locale-gen
+```
+Create the `/etc/locale.conf` file, and set the LANG variable accordingly:
+```
+# nano /etc/locale.conf
+
+LANG=en_US.UTF-8
+```
+
+### 7. Network configuration
+
+To assign a consistent, identifiable name to your system (particularly useful in a networked environment), create the hostname file:
+```
+# echo "yourhostname" > /etc/hostname
+```
+Now, lets enable NetworkManager:
+```
+# systemctl enable NetworkManager
+```
+
+### 8. Bootloader
+I opt for systemd-boot. You can find comparisons of some bootloaders [here](https://wiki.archlinux.org/title/Arch_boot_process#Feature_comparison).
+```
+# bootctl install
+```
+
+### 9. Root password
+
+Set a secure password for the root user to allow performing administrative actions:
+```
+# passwd
+```
+
+### 10. Final configuration
+#### 1. Create an user
+> See [here](https://apple.stackexchange.com/questions/192365/is-it-ok-to-use-the-root-user-as-a-normal-user/192422#192422) for why you shouldn't stay logged in as root
+
+Add an unprivileged user:
+```
+# useradd -m <yourusername>
+```
+Set a possword:
+```
+# passwd <yourusername>
+```
+Edit the `/etc/sudoers` file to allow yourself to use sudo:
+```
+# nano /etc/sudoers
+```
+Locate `# User priveilege specification`. 
+
+Add: `<yourusername> ALL=(ALL)`
+#### 2. Audio
+We will use pipewire:
+```
+# pacman -S wireplumber
+```
+Reboot, and log in to the user you created.
+
+We will need to enable wireplumber:
+```
+$ systemctl --user enable wireplumber
+```
+#### 3. Shell Completions
+Assuming you are using bash, install `bash-completion`:
+```
+# pacman -S bash-completion
+```
+
+Yippeee we now have a base system! 
+
+Click [here](../part-2/en-US.md) to advance to the next session.

docs/better-guide/part-2/en-US.md

@@ -0,0 +1,180 @@
+# Installing additional packages
+In this guide, I have chosen to install base Arch Linux. The following guide will assume that you are using Arch, but any Arch derivative should be able to follow the following guides too.
+
+Also, a reminder that I have opinions, so these packages may not be the best for you :3
+
+You can find alternatives [here](https://github.com/rcalixte/awesome-wayland), [here](https://wiki.archlinux.org/title/Common_Applications/) and just searching!
+
+> [!IMPORTANT]
+> Note: Commands prefixed with `#` should be run as root, and those prefixed with `$` should be run unprivileged.
+> 
+> To run something as root, use `sudo <command>`. If for some reason this doesn't work, try `sudo -E <command>` and finally try `su` to get a root shell
+>
+> Lines prefixed with `//` are comments and should NOT be run.
+
+
+# Desktop Environment
+Well, we have Linux, but all you see is a black console?? 
+
+We need to install a desktop environment and/or a compositor!
+
+I have opted to use [niri](https://github.com/YaLTeR/niri), why? Because it's written in rust and looks nice :3
+
+```
+# sudo pacman -Syu niri xwayland-satellite xdg-desktop-portal-gnome xdg-desktop-portal-gtk 
+```
+
+See configuration options [here](https://yalter.github.io/niri/)
+
+Note that using a complete desktop environment like KDE plasma or GNOME will make setup much easier, but may restrict what you can rice.
+
+KDE Plasma:
+```
+# pacman -S plasma
+```
+
+Gnome:
+```
+# pacman -S gnome
+```
+
+# Greeter
+Without a greeter, you'd have to use the ugly console to log in all the time.
+
+I choose sddm as a greeter.
+
+```
+# sudo pacman -S sddm
+```
+
+# AUR helper
+This simplifies using the AUR a lot!
+
+I choose to use yay:
+```
+# pacman -S base-devel
+$ git clone https://aur.archlinux.org/yay.git
+$ cd yay
+$ makepkg
+# sudo pacman -U yay-12.5.6-1-x86_64.pkg.tar.zst yay-debug-12.5.6-1-x86_64.pkg.tar.zst
+```
+
+# File Manager
+I persoanlly use thunar, but it isn't very riceable ;-;
+```
+# pacman -S thunar
+```
+
+# Browser
+I use zen-browser
+```
+$ yay -S zen-browser
+// or
+$ yay -S zen-browser-bin
+```
+Zen documentation can be found [here](https://docs.zen-browser.app/)
+
+Zen can be riced using userChrome.css!
+
+# Code Editor
+I use Zed:
+```
+# pacman -S zed
+```
+Zed documentation can be found [here](https://zed.dev/docs/)
+
+If you reallyyyy want to use vscode, see Arch wiki [here](https://wiki.archlinux.org/title/Visual_Studio_Code)
+
+You can find other IDEs/editors [here](https://wiki.archlinux.org/title/List_of_applications/Utilities#Integrated_development_environments)
+
+# Hackatime
+With Zed:
+1. `Ctrl+Shift+P`
+2. Search for `zed: extensions`
+3. Search for `wakatime`
+4. Install!
+
+# Terminal Emulator
+I like kitty, but I've heard that Hack Club is sponsoring ghostty!
+```
+# pacman -S kitty
+// or
+# pacman -S ghostty
+```
+Kitty docs can be found [here](https://sw.kovidgoyal.net/kitty/conf/)
+
+Ghostty docs can be found [here](https://ghostty.org/docs)
+
+# Video Player
+mpv is a lightweight video player:
+```
+# pacman -S mpv
+```
+if you want, you can install VLC:
+```
+# pacman -S vlc
+```
+On Arch, VLC and its plugins are split. I would recommend:
+```
+# pacman -S vlc-plugins-all
+```
+
+# Status Bar
+If you like, there are widget frameworks that help you build cool bars and other widgets.
+
+This includes:
+- ags (Configured in JavaScript, docs [here](https://aylur.github.io/ags/guide/quick-start.html)) - `$ yay -S aylurs-gtk-shell-git`
+- Quickshell (Configured in QML, docs [here](https://quickshell.org/about/)) - `$ yay -S quickshell`
+- Fabric (Configured in Python, docs [here](https://wiki.ffpy.org/getting-started/introduction/)) - `$ yay -S python-fabric-git`
+
+If you only want a simple bar, I use waybar:
+```
+# pacman -S waybar
+```
+Waybar docs can be found [here](https://github.com/Alexays/Waybar/wiki)
+
+# App Launcher
+I use rofi:
+```
+# pacman -S rofi
+```
+Rofi docs can be found [here](https://davatorium.github.io/rofi/)
+
+# Clipboard
+I use cliphist with wl-clipboard
+```
+# pacman -S cliphist
+```
+Docs [here](https://github.com/sentriz/cliphist)
+
+# Screen Locker
+I use hyprlock
+```
+# pacman -S hyprlock
+```
+hyprlock docs can be found [here](https://wiki.hypr.land/Hypr-Ecosystem/hyprlock/)
+
+# System Monitor
+I use btop, it runs in the terminal!
+```
+# pacman -S btop
+```
+Docs can be found [here](https://github.com/aristocratos/btop)
+
+# Color Palettes
+If you like having color palettes that change with your wallpaper, try `matugen` or `pywal`:
+```
+$ yay -S matugen
+// or
+# pacman -S python-pywal
+```
+Matugen docs can be found [here](https://github.com/InioX/matugen/wiki/Configuration)
+
+# Wallpaper Picker
+I use waypaper!
+```
+# pacman -S waypaper
+```
+Waypaper docs can be found [here](https://anufrievroman.gitbook.io/waypaper/configuration)
+
+Now that we have a more complete system, reboot and [continue to part 3](../part-3/en-US.md) for the actual ricing!

docs/better-guide/part-3/en-US.md

@@ -0,0 +1,633 @@
+# Ricing your desktop
+What even is ricing?
+
+(Stolen off some website)
+"Ricing is a term that has been used in the computer and technology world to describe the act of customizing the appearance of Linux. The term originated from the practice of modifying a car’s appearance, specifically by adding decorative features such as spoilers or other embellishments to make it look more appealing. Ricing involves making changes to the user interface, icons, themes, fonts, and other visual elements of Linux to give it a unique and personalised look."
+
+# Getting Started
+Because we are going to submit a git repo to riceathon, it's best to get organised before we start.
+
+Create a new directory for your dotfiles:
+```sh
+mkdir -p ~/dotfiles
+```
+> [!IMPORTANT] 
+> **What are dotfiles?**
+> On linux, configuration files are usually stored in "dot"config (~/.config). 
+> Dotfiles are these configuration files!
+
+Create a GitHub repository:
+![img](./github-repo.png)
+```sh
+cd ~/dotfiles
+git init
+git branch -M main
+git remote add origin github_url
+```
+
+Now, we've set up our folder.
+
+Whenever we want to add a configuration folder to this github repo, we can create a symbolic link:
+```
+sln ~/.config/FOLDER_OR_FILE ~/dotfiles/FOLDER_OR_FILE
+```
+> [!IMPORTANT] 
+> **What is a symbolic link?**
+> A symbolic link (symlink) is a pointer to another file or folder.
+> So, if that file or folder changes, the symlinked contents also change!
+
+# Ricing
+When ricing, it is nice to set a color palette or a theme that you want to center your rice around. 
+
+Alternatively, you can try color palette generators - see [matugen](https://github.com/InioX/matugen/wiki/Configuration), or just go crazy!
+
+If you want inspiration, you can visit [r/unixporn](https://www.reddit.com/r/unixporn/), or look through [my old dotfiles](https://github.com/x-9917638/dotfiles)!
+
+This guide will walk you through ricing a program that was installed in part 2, waybar :3
+
+Our end result should look somewhat like this!
+![waybar](./waybar.png)
+
+## Fonts
+We've been using an ugly font this whole time ;-;
+
+Lets spice it up!
+
+The Arch wiki has a list of fonts [here](https://wiki.archlinux.org/title/Fonts#Font_packages), browse through them or search for a fun font!
+
+Personally, I use [Maple Mono](https://github.com/subframe7536/Maple-font):
+```sh
+yay -S maplemononormal-nf-cn
+```
+
+Also, install a Nerd Font for icons:
+```sh
+pacman -S nerd-font
+```
+Pick your favourite! I use Jetbrains Mono (42) :3 
+
+## Waybar
+
+Waybar docs can be found [here](https://github.com/Alexays/Waybar/wiki)!
+
+Make sure waybar is installed:
+```sh
+pacman -S waybar
+```
+Now, create the folders and files for waybar's config files:
+```sh
+mkdir -p ~/.config/waybar/{css,layouts}
+touch ~/.config/waybar/{config.jsonc,modules.jsonc,style.css}
+touch ~/.config/waybar/layouts/{with_music.jsonc,with_window.jsonc}
+touch ~/.config/waybar/css/{style.css,colors.css}
+```
+
+> [!TIP]
+> **What did we do?**
+> 
+> `mkdir` creates a directory. The `-p` option makes it create intermediate paths too! `touch` is a command that creates a file. 
+>
+> Whenever we use the `{}`, syntax, we are using **brace expansions**:
+>
+> > "Brace expansions are a mechanism to generate arbitrary strings sharing a common prefix and suffix, either of which can be empty"
+>
+> So:
+> ```sh
+> echo a{d,c,b}e
+> # RESULT: ade ace abe
+> ```
+
+Remember to symlink the waybar folder!
+```sh
+sln ~/.config/waybar ~/dotfiles/waybar
+```
+
+Now that we have our proper file layout, let's open our editor and do some coding :3
+
+To open Zed:
+```sh
+zeditor ~/.config/waybar
+```
+
+Make sure that Hackatime is working!
+
+We've structured our waybar folder to be organised and modular:
+```
+~/.config/waybar/
+├── config.jsonc
+├── css
+│   ├── colors.css
+│   └── style.css
+├── layouts
+│   ├── with_music.jsonc
+│   └── with_window.jsonc
+├── modules.jsonc
+└── style.css
+```
+
+Waybar has 2 files that must exist: config.jsonc, and style.css.
+
+However, to make it easier to edit small things like modules or layout, we've separated out a `modules.jsonc` and a `layouts` folder.
+
+Our top-level config.jsonc is simple, because all we do is import a layout.
+Open the terminal from Zed (Ctrl + ~) and type:
+```sh
+echo '{ "include": [ "~/.config/waybar/layouts/with_music.jsonc" ] }' > config.jsonc
+```
+
+> [!TIP]
+> **What did we do?**
+> 
+> `>` is a redirection operator. Here, we redirect the output of a command (`echo`) into a file (`config.jsonc`).
+
+Next, lets make our modules. Open the `modules.jsonc` file in Zed.
+
+Enter this in and look at the comments. Don't worry if the icons aren't visible on GitHub, as their font doesn't include the nerd font icons! Remember that you can customise things to suit you:
+```json
+// You can find icons using the nerd font cheat sheet: https://nerdfonts.com/cheat_sheet
+{
+  // Shows our workspaces!
+  "niri/workspaces": {
+    "format": "{icon}",
+    "persistent-workspaces": { "*": 5 },
+    "cursor": true,
+    "format-icons": {
+      // Our current workspace will be a star, workspaces with a window will be a filled dot
+      // and empty workspaces will be empty dots!
+      "active": "",
+      "persistent": "",
+      "empty": "",
+    },
+  },
+
+  "niri/window": {
+    "max-length": 45,
+  },
+  
+  // A module for monitoring cpu usage
+  "cpu": {
+    // Polling interval, in ms
+    "interval": 10,
+    "format": " {usage}%",
+    "states": {
+      // Warning and critical change the class, which we can target in css.
+      "warning": 80,
+      "critical": 90,
+    },
+  },
+
+  "tray": {
+    "icon-size": 13,
+    "spacing": 10,
+    "cursor": true,
+  },
+
+  // cpu load
+  "load": {
+    "interval": 10,
+    "format": " {load1}",
+    "cursor": true,
+  },
+
+  "memory": {
+    "interval": 10,
+    "format": "  {used:0.1f}G/{total:0.1f}G",
+    "states": {
+      "warning": 80,
+      "critical": 90,
+    },
+  },
+
+  // cpu temperatures
+  "temperature": {
+    "interval": 10,
+    "format": "{icon} {temperatureC}°",
+    "critical-threshold": 90,
+    "hwmon-path": "/sys/class/hwmon/hwmon3/temp1_input",
+    // Icons will change depending on temperature's value!
+    "format-icons": ["", "", "", "", ""],
+  },
+
+  "backlight": {
+    "scroll-step": 2,
+    "format": "{icon} {percent}%",
+    "tooltip-format": "{percent}%",
+    "format-icons": [
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+      "",
+    ],
+  },
+
+  "wireplumber": {
+    "format": "{icon}  {volume}%",
+    "format-bluetooth": "{icon} {volume}%",
+    // This will mute your volume
+    "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
+    // Make sure you install pavucontrol!
+    "on-click-right": "pavucontrol -t 4",
+    // When scrolling, increase/decrease volume by 2
+    "scroll-step": 2,
+    "tooltip": true,
+    "tooltip-format": "{volume}%",
+    "format-muted": "{icon}",
+    "format-icons": {
+      "headphone": "",
+      "headset": "",
+      "headphone-muted": "󰟎",
+      "headset-muted": "󰟎",
+      "default": ["", ""],
+      "default-muted": "󰖁",
+    },
+  },
+
+  "network": {
+    "interval": 10,
+    "format-wifi": "  ",
+    // Alt-format appears if you click the module.
+    "format-alt": "   {frequency}Ghz ({essid}) | {signalStrength}%",
+    "format-disconnected": "",
+  },
+
+  "bluetooth": {
+    "format": "{}",
+    "format-on": "󰂰",
+    "format-off": "󰂲",
+    "format-disabled": "󰂲",
+    "tooltip-format": "{device_enumerate}",
+    "tooltip-format-enumerate-connected": "{device_alias}",
+    "tooltip-format-enumerate-connected-battery": "{device_alias}\t {device_battery_percentage}%",
+    "on-click-right": "blueman-manager",
+  },
+
+  "battery": {
+    "interval": 20,
+    "full-at": 100,
+    "tooltip": true,
+    "format": "{icon} {capacity}%",
+    "format-time": "{H}:{M:02}",
+    "format-charging": " {capacity}% ({time})",
+    "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂂", "󰁹"],
+    "states": {
+      "warning": 30,
+      "critical": 15,
+    },
+  },
+
+  "clock": {
+    "tooltip-format": "<tt><small>{calendar}</small></tt>",
+    "format-alt": "{:%H:%M %d %B %Y}",
+    // You can have arbitrary commands to be execute on click and on right click
+    "on-click-right": "kitty --app-id 'float-tty-clock' -e tty-clock -c",
+    "calendar": {
+      "mode": "month",
+      "format": {
+        "months": "<b>{}</b>",
+        "days": "<span color='#acb0d0'><b>{}</b></span>",
+        "today": "<span color='#41a6b5'><b><u>{}</u></b></span>",
+      },
+    },
+  },
+  
+  // mpris is a interface that lets programs poll playing media
+  "mpris": {
+    "format": "{artist} - {title}",
+    "tooltip-format": "{album}",
+    "format-paused": " {artist} - {title}",
+    "on-click": "playerctl play-pause",
+    "on-scroll-up": "playerctl previous",
+    "on-scroll-down": "playerctl next",
+    "max-length": 45,
+  },
+
+  "power-profiles-daemon": {
+    "format": "{icon}",
+    "tooltip-format": "Power profile: {profile}",
+    "format-icons": {
+      "performance": "",
+      "balanced": " ",
+      "power-saver": "󰂄",
+    },
+  },
+}
+```
+
+Yippee! We finished our waybar modules!
+
+Now it's time for the layout.
+
+Open `layouts/with_music.jsonc` in Zed. Enter this:
+```json
+{
+  "layer": "bottom",
+  "position": "top",
+  "margin": "0 0 0 0",
+  "reload_style_on_change": true,
+
+  // We group modules for better organisation
+  "group/gleft1": {
+    "orientation": "horizontal",
+    "modules": ["battery", "cpu"],
+  },
+
+  "group/gleft2": {
+    "orientation": "horizontal",
+    "modules": ["niri/workspaces", "mpris"],
+  },
+
+  "group/gright1": {
+    "orientation": "horizontal",
+    "modules": ["memory", "temperature", "tray"],
+  },
+
+  "group/gright2": {
+    "orientation": "horizontal",
+    "modules": ["wireplumber", "bluetooth", "network"],
+  },
+
+  "modules-left": ["power-profiles-daemon", "group/gleft1", "group/gleft2"],
+  "modules-center": ["clock"],
+  "modules-right": ["group/gright2", "group/gright1"],
+
+  // We need to include our modules to use them here.
+  "include": ["~/.config/waybar/modules.jsonc"],
+}
+```
+Done! Optionally, you can place this into `layouts/with_window.jsonc`:
+```json
+{
+  "layer": "top",
+  "position": "top",
+  "width": 1920,
+  "margin": "5 0",
+
+  "group/gleft1": {
+    "orientation": "horizontal",
+    "modules": ["battery", "cpu", "backlight"],
+  },
+
+  "group/gleft2": {
+    "orientation": "horizontal",
+    "modules": ["niri/workspaces", "niri/window"],
+  },
+
+  "group/gright1": {
+    "orientation": "horizontal",
+    "modules": ["memory", "temperature", "tray"],
+  },
+
+  "group/gright2": {
+    "orientation": "horizontal",
+    "modules": ["wireplumber", "bluetooth", "network"],
+  },
+
+  "modules-left": ["power-profiles-daemon", "group/gleft1", "group/gleft2"],
+  "modules-center": ["clock"],
+  "modules-right": ["group/gright2", "group/gright1", "custom/ctlcenter"],
+
+  "include": ["~/.config/waybar/modules.jsonc"],
+}
+```
+Now that we've finished defining our layouts and modules, we can work on our styles.
+
+Like `config.jsonc`, our top level `style.css` is a simple 1 line import:
+```sh
+echo '@import "css/style.css";' > style.css
+```
+
+Now we can run `waybar` and see our edits live!
+
+In Zed, open `css/colors.css`. Here, we define our colour palette! Here are mine:
+
+```css
+/* 
+Define your background, foreground, inactive colour 
+(Lowkey doesn't have a big difference 
+*/
+@define-color background rgba(20, 19, 24, 0.5);
+@define-color tooltip-bg @background;
+@define-color module-bg @background;
+@define-color inactive rgb(230, 225, 233);
+@define-color fg rgb(230, 225, 233);
+@define-color workspace-fg @fg;
+
+/* You should copy these colours though! */
+@define-color red #c87878;
+@define-color blue #7878c8;
+@define-color yellow #c8c878;
+@define-color green #78c878;
+```
+
+Now, we can edit our styles. Open `css/style.css` in Zed and enter this:
+```css
+/* Import our color palette */
+@import "colors.css";
+
+* {
+    /* Your Nerd Font */
+    font-family: "JetBrains Mono Nerd Font";
+    border: none;
+    border-radius: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    text-shadow: none;
+}
+
+#waybar {
+    font-weight: 700;
+    background: rgba(0, 0, 0, 0.2);
+    font-size: 14px;
+    border-radius: 15px;
+    color: @fg;
+    padding: 0 15px;
+}
+
+.modules-left,
+.modules-center,
+.modules-right {
+    margin-bottom: -10px;
+    margin-top: -10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding: 10px;
+}
+
+tooltip {
+    padding: 8px;
+    border-radius: 15px;
+    background: transparent;
+}
+
+tooltip label {
+    padding: 8px;
+    font-weight: bold;
+}
+
+.popup * {
+    box-shadow: none;
+    outline: none;
+}
+
+#tray menu,
+menu {
+    border-radius: 10px;
+    font-weight: 700;
+    color: @fg;
+}
+
+#tray menu > *,
+menu > * {
+    padding: 0 0;
+}
+
+#tray menu > *:hover,
+menu > *:hover {
+    border-radius: 10px;
+    background-color: @inactive;
+}
+
+/* global paddings */
+#backlight,
+#wireplumber,
+#network,
+#temperature,
+#bluetooth,
+#battery,
+#memory,
+#cpu,
+#load {
+    padding: 0 7px;
+}
+
+#workspaces,
+#bluetooth,
+#battery,
+#memory,
+#temperature,
+#network,
+#wireplumber,
+#backlight,
+#cpu,
+#load {
+    background: transparent;
+    border-radius: 15px;
+    margin: 0 3px;
+}
+
+#network {
+    padding: 0;
+}
+
+#custom-start,
+#custom-logout,
+#gright1,
+#gleft1,
+#gright2,
+#gleft2,
+#custom-ctlcenter,
+#power-profiles-daemon {
+    padding: 0 9px;
+    border-radius: 15px;
+    background: transparent;
+}
+
+#clock {
+    padding: 0;
+    border-radius: 15px;
+    background: transparent;
+}
+
+/* single icons cool size  */
+
+#gright2,
+#gleft2 {
+    margin: 0;
+}
+
+#gleft1 {
+    margin: 0;
+}
+
+#gright1 {
+    margin: 0;
+}
+
+#memory.critical,
+#cpu.critical,
+#temperature.critical,
+#battery.critical,
+#network.disconnected {
+    color: @red;
+}
+
+#memory.warning,
+#cpu.warning,
+#temperature.warning,
+#battery.warning {
+    color: @yellow;
+}
+
+#workspaces button {
+    color: @workspace-fg;
+    font-size: 14px;
+    border-radius: 15px;
+    margin: 0 7px;
+}
+
+#workspaces button:hover {
+    background: rgba(0, 0, 0, 0);
+}
+
+#mpris,
+#window {
+    margin: 0;
+}
+
+#mpris.paused {
+    color: @inactive;
+}
+
+#power-profiles-daemon {
+    margin-left: 5px;
+    padding: 0;
+}
+
+#power-profiles-daemon.performance {
+    color: @red;
+}
+
+#power-profiles-daemon.power-saver {
+    color: @green;
+}
+```
+
+# End
+Yippeee! You've reached the end of the guide!
+
+## What's next?
+Make all your other programs look nice :3
+
+This could include:
+- Compositor
+- Terminal Emulator
+- App Launcher
+- etc!
+
+## Helpful Resources
+
+- [r/unixporn](https://www.reddit.com/r/unixporn/) - This is the biggest online community for ricing! Go here for inspiration.
+- [Arch Wiki](https://wiki.archlinux.org) - The Arch Linux wiki is incredibly helpful for everything related to Linux, with helpful information on tons of software.
+- [awesome-ricing](https://github.com/fosslife/awesome-ricing) - A massive open-source list of ricing/Linux tools and software from window managers, to terminals, to colour schemes, to even wallpapers.