mirror of
https://github.com/System-End/riceathon.git
synced 2026-04-19 19:45:17 +00:00
Prettified Code!
This commit is contained in:
System-End
GitHub Action
parent
c49a2ece80
commit
d74855c9e0
3 changed files with 254 additions and 126 deletions
|
|
@ -4,16 +4,16 @@ In this guide, I have chosen to install base Arch Linux. The following guides wi
|
|||
|
||||
> [!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/).
|
||||
|
||||
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:
|
||||
|
||||
|
|
@ -25,9 +25,9 @@ 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.
|
||||
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).
|
||||
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.
|
||||
|
|
@ -50,15 +50,19 @@ Hit <ENTER> to continue. You should see something like this:
|
|||
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
|
||||
|
|
@ -70,28 +74,34 @@ Look for `wlan0`.
|
|||
```
|
||||
|
||||
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`.
|
||||
|
||||
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
|
||||
|
|
@ -122,68 +132,84 @@ Command (m for help): w
|
|||
```
|
||||
|
||||
Our resulting partition table:
|
||||
| Mount point on the installed system | Partition | Partition type |
|
||||
| Mount point on the installed system | Partition | Partition type |
|
||||
| :---------------------------------: | :------------: | :-------------------: |
|
||||
| /boot | /dev/nvme0n1p1 | EFI system partition |
|
||||
| / | /dev/nvme0n1p2 | Linux x86-64 root (/) |
|
||||
| /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.
|
||||
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.
|
||||
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]
|
||||
> [!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:
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
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
|
||||
|
|
@ -192,10 +218,13 @@ For human convenience (e.g. showing the correct local time or handling Daylight
|
|||
### 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
|
||||
|
||||
|
|
@ -205,16 +234,21 @@ 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
|
||||
```
|
||||
|
|
@ -222,46 +256,63 @@ I opt for systemd-boot. You can find comparisons of some bootloaders [here](http
|
|||
### 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`.
|
||||
|
||||
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!
|
||||
Yippeee we now have a base system!
|
||||
|
||||
Click [here](../part-2/en-US.md) to advance to the next session.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
# 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
|
||||
|
|
@ -7,21 +8,21 @@ You can find alternatives [here](https://github.com/rcalixte/awesome-wayland), [
|
|||
|
||||
> [!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??
|
||||
|
||||
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
|
||||
# sudo pacman -Syu niri xwayland-satellite xdg-desktop-portal-gnome xdg-desktop-portal-gtk
|
||||
```
|
||||
|
||||
See configuration options [here](https://yalter.github.io/niri/)
|
||||
|
|
@ -29,16 +30,19 @@ 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.
|
||||
|
|
@ -48,9 +52,11 @@ I choose sddm as a greeter.
|
|||
```
|
||||
|
||||
# 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
|
||||
|
|
@ -60,27 +66,35 @@ $ makepkg
|
|||
```
|
||||
|
||||
# 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)
|
||||
|
|
@ -88,93 +102,126 @@ If you reallyyyy want to use vscode, see Arch wiki [here](https://wiki.archlinux
|
|||
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!
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
# 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]
|
||||
|
||||
> [!IMPORTANT]
|
||||
> **What are dotfiles?**
|
||||
> On linux, configuration files are usually stored in "dot"config (~/.config).
|
||||
> On linux, configuration files are usually stored in "dot"config (~/.config).
|
||||
> Dotfiles are these configuration files!
|
||||
|
||||
Create a GitHub repository:
|
||||
|
||||
|
||||
```sh
|
||||
cd ~/dotfiles
|
||||
git init
|
||||
|
|
@ -28,16 +33,19 @@ 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]
|
||||
|
||||
> [!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.
|
||||
|
||||
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!
|
||||
|
||||
|
|
@ -49,6 +57,7 @@ Our end result should look somewhat like this!
|
|||
|
||||
|
||||
## Fonts
|
||||
|
||||
We've been using an ugly font this whole time ;-;
|
||||
|
||||
Lets spice it up!
|
||||
|
|
@ -56,25 +65,31 @@ 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
|
||||
|
||||
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}
|
||||
|
|
@ -84,20 +99,22 @@ 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.
|
||||
>
|
||||
> `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
|
||||
```
|
||||
|
|
@ -105,6 +122,7 @@ 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
|
||||
```
|
||||
|
|
@ -112,6 +130,7 @@ zeditor ~/.config/waybar
|
|||
Make sure that Hackatime is working!
|
||||
|
||||
We've structured our waybar folder to be organised and modular:
|
||||
|
||||
```
|
||||
~/.config/waybar/
|
||||
├── config.jsonc
|
||||
|
|
@ -131,18 +150,20 @@ However, to make it easier to edit small things like modules or layout, we've se
|
|||
|
||||
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
|
||||
{
|
||||
|
|
@ -156,14 +177,14 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
// and empty workspaces will be empty dots!
|
||||
"active": "",
|
||||
"persistent": "",
|
||||
"empty": "",
|
||||
},
|
||||
"empty": ""
|
||||
}
|
||||
},
|
||||
|
||||
"niri/window": {
|
||||
"max-length": 45,
|
||||
"max-length": 45
|
||||
},
|
||||
|
||||
|
||||
// A module for monitoring cpu usage
|
||||
"cpu": {
|
||||
// Polling interval, in ms
|
||||
|
|
@ -172,21 +193,21 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"states": {
|
||||
// Warning and critical change the class, which we can target in css.
|
||||
"warning": 80,
|
||||
"critical": 90,
|
||||
},
|
||||
"critical": 90
|
||||
}
|
||||
},
|
||||
|
||||
"tray": {
|
||||
"icon-size": 13,
|
||||
"spacing": 10,
|
||||
"cursor": true,
|
||||
"cursor": true
|
||||
},
|
||||
|
||||
// cpu load
|
||||
"load": {
|
||||
"interval": 10,
|
||||
"format": " {load1}",
|
||||
"cursor": true,
|
||||
"cursor": true
|
||||
},
|
||||
|
||||
"memory": {
|
||||
|
|
@ -194,8 +215,8 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"format": " {used:0.1f}G/{total:0.1f}G",
|
||||
"states": {
|
||||
"warning": 80,
|
||||
"critical": 90,
|
||||
},
|
||||
"critical": 90
|
||||
}
|
||||
},
|
||||
|
||||
// cpu temperatures
|
||||
|
|
@ -205,7 +226,7 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"critical-threshold": 90,
|
||||
"hwmon-path": "/sys/class/hwmon/hwmon3/temp1_input",
|
||||
// Icons will change depending on temperature's value!
|
||||
"format-icons": ["", "", "", "", ""],
|
||||
"format-icons": ["", "", "", "", ""]
|
||||
},
|
||||
|
||||
"backlight": {
|
||||
|
|
@ -227,8 +248,8 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
],
|
||||
""
|
||||
]
|
||||
},
|
||||
|
||||
"wireplumber": {
|
||||
|
|
@ -249,8 +270,8 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"headphone-muted": "",
|
||||
"headset-muted": "",
|
||||
"default": ["", ""],
|
||||
"default-muted": "",
|
||||
},
|
||||
"default-muted": ""
|
||||
}
|
||||
},
|
||||
|
||||
"network": {
|
||||
|
|
@ -258,7 +279,7 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"format-wifi": " ",
|
||||
// Alt-format appears if you click the module.
|
||||
"format-alt": " {frequency}Ghz ({essid}) | {signalStrength}%",
|
||||
"format-disconnected": "",
|
||||
"format-disconnected": ""
|
||||
},
|
||||
|
||||
"bluetooth": {
|
||||
|
|
@ -269,7 +290,7 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"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",
|
||||
"on-click-right": "blueman-manager"
|
||||
},
|
||||
|
||||
"battery": {
|
||||
|
|
@ -282,8 +303,8 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"format-icons": ["", "", "", "", "", "", "", "", ""],
|
||||
"states": {
|
||||
"warning": 30,
|
||||
"critical": 15,
|
||||
},
|
||||
"critical": 15
|
||||
}
|
||||
},
|
||||
|
||||
"clock": {
|
||||
|
|
@ -296,11 +317,11 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"format": {
|
||||
"months": "<b>{}</b>",
|
||||
"days": "<span color='#acb0d0'><b>{}</b></span>",
|
||||
"today": "<span color='#41a6b5'><b><u>{}</u></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}",
|
||||
|
|
@ -309,7 +330,7 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"on-click": "playerctl play-pause",
|
||||
"on-scroll-up": "playerctl previous",
|
||||
"on-scroll-down": "playerctl next",
|
||||
"max-length": 45,
|
||||
"max-length": 45
|
||||
},
|
||||
|
||||
"power-profiles-daemon": {
|
||||
|
|
@ -318,9 +339,9 @@ Enter this in and look at the comments. Don't worry if the icons aren't visible
|
|||
"format-icons": {
|
||||
"performance": "",
|
||||
"balanced": " ",
|
||||
"power-saver": "",
|
||||
},
|
||||
},
|
||||
"power-saver": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -329,6 +350,7 @@ 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",
|
||||
|
|
@ -339,22 +361,22 @@ Open `layouts/with_music.jsonc` in Zed. Enter this:
|
|||
// We group modules for better organisation
|
||||
"group/gleft1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["battery", "cpu"],
|
||||
"modules": ["battery", "cpu"]
|
||||
},
|
||||
|
||||
"group/gleft2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["niri/workspaces", "mpris"],
|
||||
"modules": ["niri/workspaces", "mpris"]
|
||||
},
|
||||
|
||||
"group/gright1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["memory", "temperature", "tray"],
|
||||
"modules": ["memory", "temperature", "tray"]
|
||||
},
|
||||
|
||||
"group/gright2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["wireplumber", "bluetooth", "network"],
|
||||
"modules": ["wireplumber", "bluetooth", "network"]
|
||||
},
|
||||
|
||||
"modules-left": ["power-profiles-daemon", "group/gleft1", "group/gleft2"],
|
||||
|
|
@ -362,10 +384,12 @@ Open `layouts/with_music.jsonc` in Zed. Enter this:
|
|||
"modules-right": ["group/gright2", "group/gright1"],
|
||||
|
||||
// We need to include our modules to use them here.
|
||||
"include": ["~/.config/waybar/modules.jsonc"],
|
||||
"include": ["~/.config/waybar/modules.jsonc"]
|
||||
}
|
||||
```
|
||||
|
||||
Done! Optionally, you can place this into `layouts/with_window.jsonc`:
|
||||
|
||||
```json
|
||||
{
|
||||
"layer": "top",
|
||||
|
|
@ -375,34 +399,36 @@ Done! Optionally, you can place this into `layouts/with_window.jsonc`:
|
|||
|
||||
"group/gleft1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["battery", "cpu", "backlight"],
|
||||
"modules": ["battery", "cpu", "backlight"]
|
||||
},
|
||||
|
||||
"group/gleft2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["niri/workspaces", "niri/window"],
|
||||
"modules": ["niri/workspaces", "niri/window"]
|
||||
},
|
||||
|
||||
"group/gright1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["memory", "temperature", "tray"],
|
||||
"modules": ["memory", "temperature", "tray"]
|
||||
},
|
||||
|
||||
"group/gright2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["wireplumber", "bluetooth", "network"],
|
||||
"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"],
|
||||
"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
|
||||
```
|
||||
|
|
@ -431,72 +457,73 @@ Define your background, foreground, inactive colour
|
|||
```
|
||||
|
||||
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;
|
||||
/* 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;
|
||||
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;
|
||||
margin-bottom: -10px;
|
||||
margin-top: -10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
padding: 8px;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup * {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#tray menu,
|
||||
menu {
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
color: @fg;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
#tray menu > *,
|
||||
menu > * {
|
||||
padding: 0 0;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
#tray menu > *:hover,
|
||||
menu > *:hover {
|
||||
border-radius: 10px;
|
||||
background-color: @inactive;
|
||||
border-radius: 10px;
|
||||
background-color: @inactive;
|
||||
}
|
||||
|
||||
/* global paddings */
|
||||
|
|
@ -509,7 +536,7 @@ menu > *:hover {
|
|||
#memory,
|
||||
#cpu,
|
||||
#load {
|
||||
padding: 0 7px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
#workspaces,
|
||||
|
|
@ -522,13 +549,13 @@ menu > *:hover {
|
|||
#backlight,
|
||||
#cpu,
|
||||
#load {
|
||||
background: transparent;
|
||||
border-radius: 15px;
|
||||
margin: 0 3px;
|
||||
background: transparent;
|
||||
border-radius: 15px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
#network {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#custom-start,
|
||||
|
|
@ -539,30 +566,30 @@ menu > *:hover {
|
|||
#gleft2,
|
||||
#custom-ctlcenter,
|
||||
#power-profiles-daemon {
|
||||
padding: 0 9px;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
padding: 0 9px;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#clock {
|
||||
padding: 0;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* single icons cool size */
|
||||
|
||||
#gright2,
|
||||
#gleft2 {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#gleft1 {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#gright1 {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#memory.critical,
|
||||
|
|
@ -570,57 +597,60 @@ menu > *:hover {
|
|||
#temperature.critical,
|
||||
#battery.critical,
|
||||
#network.disconnected {
|
||||
color: @red;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
#memory.warning,
|
||||
#cpu.warning,
|
||||
#temperature.warning,
|
||||
#battery.warning {
|
||||
color: @yellow;
|
||||
color: @yellow;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
color: @workspace-fg;
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
margin: 0 7px;
|
||||
color: @workspace-fg;
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
#mpris,
|
||||
#window {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#mpris.paused {
|
||||
color: @inactive;
|
||||
color: @inactive;
|
||||
}
|
||||
|
||||
#power-profiles-daemon {
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.performance {
|
||||
color: @red;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.power-saver {
|
||||
color: @green;
|
||||
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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue