mirror of
https://github.com/System-End/riceathon.git
synced 2026-04-19 16:28:27 +00:00
fix: quick pretty & fixes
This commit is contained in:
End
parent
d74855c9e0
commit
f97ed33635
6 changed files with 607 additions and 360 deletions
2
.github/pull_request_template.md
vendored
2
.github/pull_request_template.md
vendored
|
|
@ -29,7 +29,7 @@
|
|||
- [ ] I have filled out the form correctly
|
||||
- [ ] I have my PR labeled correctly
|
||||
- [ ] I have not already submitted a rice
|
||||
- [ ] Under the section where it states "How many hours did it take to write this:" I have a valid image link
|
||||
- [ ] Under the section where it states "How many hours did it take to write this:" I have filled in my hours
|
||||
- [ ] i have my screenshot images in the json file (urls please).
|
||||
- [ ] i have my hackatime badge
|
||||
- - if you have errors finding it please put your slack ID instead!!
|
||||
|
|
|
|||
|
|
@ -217,6 +217,4 @@ LANG=en_US.UTF-8
|
|||
<pre style="white-space:pre-wrap;"><code># pacman -S bash-completion
|
||||
</code></pre>
|
||||
<p>Yippeee we now have a base system! </p>
|
||||
<p>Click <a href="?part=2">here</a> to advance to the next session.
|
||||
guide.html:199:29</p>
|
||||
|
||||
<p>Click <a href="?part=2">here</a> to advance to the next session.</p>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,68 @@
|
|||
<h1>Installing additional packages</h1>
|
||||
<p>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.</p>
|
||||
<p>Also, a reminder that I have opinions, so these packages may not be the best for you :3</p>
|
||||
<p>You can find alternatives <a href="https://github.com/rcalixte/awesome-wayland">here</a>, <a href="https://wiki.archlinux.org/title/Common_Applications/">here</a> and just searching!</p>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p>Note: Commands prefixed with <code>#</code> should be run as root, and those prefixed with <code>$</code> should be run unprivileged.<br>To run something as root, use <code>sudo <command></code>. If for some reason this doesn't work, try <code>sudo -E <command></code> and finally try <code>su</code> to get a root shell<br>Lines prefixed with <code>//</code> are comments and should NOT be run.</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Also, a reminder that I have opinions, so these packages may not be the best
|
||||
for you :3
|
||||
</p>
|
||||
<p>
|
||||
You can find alternatives
|
||||
<a href="https://github.com/rcalixte/awesome-wayland">here</a>,
|
||||
<a href="https://wiki.archlinux.org/title/Common_Applications/">here</a> and
|
||||
just searching!
|
||||
</p>
|
||||
<div class="alert alert-important">
|
||||
<strong>ℹ️ IMPORTANT</strong><br />
|
||||
<p>
|
||||
Note: Commands prefixed with <code>#</code> should be run as root, and
|
||||
those prefixed with <code>$</code> should be run unprivileged.<br />To
|
||||
run something as root, use <code>sudo <command></code>. If for
|
||||
some reason this doesn't work, try
|
||||
<code>sudo -E <command></code> and finally try <code>su</code> to
|
||||
get a root shell<br />Lines prefixed with <code>//</code> are comments
|
||||
and should NOT be run.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Desktop Environment</h1>
|
||||
<p>Well, we have Linux, but all you see is a black console?? </p>
|
||||
<p>Well, we have Linux, but all you see is a black console??</p>
|
||||
<p>We need to install a desktop environment and/or a compositor!</p>
|
||||
<p>I have opted to use <a href="https://github.com/YaLTeR/niri">niri</a>, why? Because it's written in rust and looks nice :3</p>
|
||||
<pre style="white-space:pre-wrap;"><code># sudo pacman -Syu niri xwayland-satellite xdg-desktop-portal-gnome xdg-desktop-portal-gtk
|
||||
<p>
|
||||
I have opted to use <a href="https://github.com/YaLTeR/niri">niri</a>, why?
|
||||
Because it's written in rust and looks nice :3
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code># sudo pacman -Syu niri xwayland-satellite xdg-desktop-portal-gnome xdg-desktop-portal-gtk
|
||||
</code></pre>
|
||||
<p>See configuration options <a href="https://yalter.github.io/niri/">here</a></p>
|
||||
<p>Note that using a complete desktop environment like KDE plasma or GNOME will make setup much easier, but may restrict what you can rice.</p>
|
||||
<p>
|
||||
See configuration options <a href="https://yalter.github.io/niri/">here</a>
|
||||
</p>
|
||||
<p>
|
||||
Note that using a complete desktop environment like KDE plasma or GNOME will
|
||||
make setup much easier, but may restrict what you can rice.
|
||||
</p>
|
||||
<p>KDE Plasma:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S plasma
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S plasma
|
||||
</code></pre>
|
||||
<p>Gnome:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S gnome
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S gnome
|
||||
</code></pre>
|
||||
<h1>Greeter</h1>
|
||||
<p>Without a greeter, you'd have to use the ugly console to log in all the time.</p>
|
||||
<p>
|
||||
Without a greeter, you'd have to use the ugly console to log in all the
|
||||
time.
|
||||
</p>
|
||||
<p>I choose sddm as a greeter.</p>
|
||||
<pre style="white-space:pre-wrap;"><code># sudo pacman -S sddm
|
||||
<pre style="white-space: pre-wrap"><code># sudo pacman -S sddm
|
||||
</code></pre>
|
||||
<h1>AUR helper</h1>
|
||||
<p>This simplifies using the AUR a lot!</p>
|
||||
<p>I choose to use yay:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S base-devel
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S base-devel
|
||||
$ git clone https://aur.archlinux.org/yay.git
|
||||
$ cd yay
|
||||
$ makepkg
|
||||
|
|
@ -36,93 +70,141 @@ $ makepkg
|
|||
</code></pre>
|
||||
<h1>File Manager</h1>
|
||||
<p>I persoanlly use thunar, but it isn't very riceable ;-;</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S thunar
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S thunar
|
||||
</code></pre>
|
||||
<h1>Browser</h1>
|
||||
<p>I use zen-browser</p>
|
||||
<pre style="white-space:pre-wrap;"><code>$ yay -S zen-browser
|
||||
<pre style="white-space: pre-wrap"><code>$ yay -S zen-browser
|
||||
// or
|
||||
$ yay -S zen-browser-bin
|
||||
</code></pre>
|
||||
<p>Zen documentation can be found <a href="https://docs.zen-browser.app/">here</a></p>
|
||||
<p>
|
||||
Zen documentation can be found
|
||||
<a href="https://docs.zen-browser.app/">here</a>
|
||||
</p>
|
||||
<p>Zen can be riced using userChrome.css!</p>
|
||||
<h1>Code Editor</h1>
|
||||
<p>I use Zed:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S zed
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S zed
|
||||
</code></pre>
|
||||
<p>Zed documentation can be found <a href="https://zed.dev/docs/">here</a></p>
|
||||
<p>If you reallyyyy want to use vscode, see Arch wiki <a href="https://wiki.archlinux.org/title/Visual_Studio_Code">here</a></p>
|
||||
<p>You can find other IDEs/editors <a href="https://wiki.archlinux.org/title/List_of_applications/Utilities#Integrated_development_environments">here</a></p>
|
||||
<p>
|
||||
If you reallyyyy want to use vscode, see Arch wiki
|
||||
<a href="https://wiki.archlinux.org/title/Visual_Studio_Code">here</a>
|
||||
</p>
|
||||
<p>
|
||||
You can find other IDEs/editors
|
||||
<a
|
||||
href="https://wiki.archlinux.org/title/List_of_applications/Utilities#Integrated_development_environments"
|
||||
>here</a
|
||||
>
|
||||
</p>
|
||||
<h1>Hackatime</h1>
|
||||
<p>With Zed:</p>
|
||||
<ol>
|
||||
<li><code>Ctrl+Shift+P</code></li>
|
||||
<li>Search for <code>zed: extensions</code></li>
|
||||
<li>Search for <code>wakatime</code></li>
|
||||
<li>Install!</li>
|
||||
<li><code>Ctrl+Shift+P</code></li>
|
||||
<li>Search for <code>zed: extensions</code></li>
|
||||
<li>Search for <code>wakatime</code></li>
|
||||
<li>Install!</li>
|
||||
</ol>
|
||||
<h1>Terminal Emulator</h1>
|
||||
<p>I like kitty, but I've heard that Hack Club is sponsoring ghostty!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S kitty
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S kitty
|
||||
// or
|
||||
# pacman -S ghostty
|
||||
</code></pre>
|
||||
<p>Kitty docs can be found <a href="https://sw.kovidgoyal.net/kitty/conf/">here</a></p>
|
||||
<p>
|
||||
Kitty docs can be found
|
||||
<a href="https://sw.kovidgoyal.net/kitty/conf/">here</a>
|
||||
</p>
|
||||
<p>Ghostty docs can be found <a href="https://ghostty.org/docs">here</a></p>
|
||||
<h1>Video Player</h1>
|
||||
<p>mpv is a lightweight video player:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S mpv
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S mpv
|
||||
</code></pre>
|
||||
<p>if you want, you can install VLC:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S vlc
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S vlc
|
||||
</code></pre>
|
||||
<p>On Arch, VLC and its plugins are split. I would recommend:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S vlc-plugins-all
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S vlc-plugins-all
|
||||
</code></pre>
|
||||
<h1>Status Bar</h1>
|
||||
<p>If you like, there are widget frameworks that help you build cool bars and other widgets.</p>
|
||||
<p>
|
||||
If you like, there are widget frameworks that help you build cool bars and
|
||||
other widgets.
|
||||
</p>
|
||||
<p>This includes:</p>
|
||||
<ul>
|
||||
<li>ags (Configured in JavaScript, docs <a href="https://aylur.github.io/ags/guide/quick-start.html">here</a>) - <code>$ yay -S aylurs-gtk-shell-git</code></li>
|
||||
<li>Quickshell (Configured in QML, docs <a href="https://quickshell.org/about/">here</a>) - <code>$ yay -S quickshell</code></li>
|
||||
<li>Fabric (Configured in Python, docs <a href="https://wiki.ffpy.org/getting-started/introduction/">here</a>) - <code>$ yay -S python-fabric-git</code></li>
|
||||
<li>
|
||||
ags (Configured in JavaScript, docs
|
||||
<a href="https://aylur.github.io/ags/guide/quick-start.html">here</a>) -
|
||||
<code>$ yay -S aylurs-gtk-shell-git</code>
|
||||
</li>
|
||||
<li>
|
||||
Quickshell (Configured in QML, docs
|
||||
<a href="https://quickshell.org/about/">here</a>) -
|
||||
<code>$ yay -S quickshell</code>
|
||||
</li>
|
||||
<li>
|
||||
Fabric (Configured in Python, docs
|
||||
<a href="https://wiki.ffpy.org/getting-started/introduction/">here</a>)
|
||||
- <code>$ yay -S python-fabric-git</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>If you only want a simple bar, I use waybar:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S waybar
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S waybar
|
||||
</code></pre>
|
||||
<p>Waybar docs can be found <a href="https://github.com/Alexays/Waybar/wiki">here</a></p>
|
||||
<p>
|
||||
Waybar docs can be found
|
||||
<a href="https://github.com/Alexays/Waybar/wiki">here</a>
|
||||
</p>
|
||||
<h1>App Launcher</h1>
|
||||
<p>I use rofi:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S rofi
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S rofi
|
||||
</code></pre>
|
||||
<p>Rofi docs can be found <a href="https://davatorium.github.io/rofi/">here</a></p>
|
||||
<p>
|
||||
Rofi docs can be found <a href="https://davatorium.github.io/rofi/">here</a>
|
||||
</p>
|
||||
<h1>Clipboard</h1>
|
||||
<p>I use cliphist with wl-clipboard</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S cliphist
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S cliphist
|
||||
</code></pre>
|
||||
<p>Docs <a href="https://github.com/sentriz/cliphist">here</a></p>
|
||||
<h1>Screen Locker</h1>
|
||||
<p>I use hyprlock</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S hyprlock
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S hyprlock
|
||||
</code></pre>
|
||||
<p>hyprlock docs can be found <a href="https://wiki.hypr.land/Hypr-Ecosystem/hyprlock/">here</a></p>
|
||||
<p>
|
||||
hyprlock docs can be found
|
||||
<a href="https://wiki.hypr.land/Hypr-Ecosystem/hyprlock/">here</a>
|
||||
</p>
|
||||
<h1>System Monitor</h1>
|
||||
<p>I use btop, it runs in the terminal!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S btop
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S btop
|
||||
</code></pre>
|
||||
<p>Docs can be found <a href="https://github.com/aristocratos/btop">here</a></p>
|
||||
<h1>Color Palettes</h1>
|
||||
<p>If you like having color palettes that change with your wallpaper, try <code>matugen</code> or <code>pywal</code>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>$ yay -S matugen
|
||||
<p>
|
||||
If you like having color palettes that change with your wallpaper, try
|
||||
<code>matugen</code> or <code>pywal</code>:
|
||||
</p>
|
||||
<pre style="white-space: pre-wrap"><code>$ yay -S matugen
|
||||
// or
|
||||
# pacman -S python-pywal
|
||||
</code></pre>
|
||||
<p>Matugen docs can be found <a href="https://github.com/InioX/matugen/wiki/Configuration">here</a></p>
|
||||
<p>
|
||||
Matugen docs can be found
|
||||
<a href="https://github.com/InioX/matugen/wiki/Configuration">here</a>
|
||||
</p>
|
||||
<h1>Wallpaper Picker</h1>
|
||||
<p>I use waypaper!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S waypaper
|
||||
<pre style="white-space: pre-wrap"><code># pacman -S waypaper
|
||||
</code></pre>
|
||||
<p>Waypaper docs can be found <a href="https://anufrievroman.gitbook.io/waypaper/configuration">here</a></p>
|
||||
<p>Now that we have a more complete system, reboot and <a href="?part=3">continue to part 3</a> for the actual ricing!
|
||||
guide.html:199:29</p>
|
||||
|
||||
<p>
|
||||
Waypaper docs can be found
|
||||
<a href="https://anufrievroman.gitbook.io/waypaper/configuration">here</a>
|
||||
</p>
|
||||
<p>
|
||||
Now that we have a more complete system, reboot and
|
||||
<a href="?part=3">continue to part 3</a> for the actual ricing!
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,77 +1,155 @@
|
|||
<h1>Ricing your desktop</h1>
|
||||
<p>What even is ricing?</p>
|
||||
<p>(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."</p>
|
||||
<p>
|
||||
(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."
|
||||
</p>
|
||||
<h1>Getting Started</h1>
|
||||
<p>Because we are going to submit a git repo to riceathon, it's best to get organised before we start.</p>
|
||||
<p>
|
||||
Because we are going to submit a git repo to riceathon, it's best to get
|
||||
organised before we start.
|
||||
</p>
|
||||
<p>Create a new directory for your dotfiles:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">mkdir -p ~/dotfiles
|
||||
<pre style="white-space: pre-wrap"><code class="language-sh">mkdir -p ~/dotfiles
|
||||
</code></pre>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p><strong>What are dotfiles?</strong><br>On linux, configuration files are usually stored in "dot"config (~/.config).<br>Dotfiles are these configuration files!</p>
|
||||
<div class="alert alert-important">
|
||||
<strong>ℹ️ IMPORTANT</strong><br />
|
||||
<p>
|
||||
<strong>What are dotfiles?</strong><br />On linux, configuration files
|
||||
are usually stored in "dot"config (~/.config).<br />Dotfiles
|
||||
are these configuration files!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>Create a GitHub repository:
|
||||
<img src="./part-3/github-repo.png" alt="img"></p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">cd ~/dotfiles
|
||||
<p>
|
||||
Create a GitHub repository: <img src="./part-3/github-repo.png" alt="img" />
|
||||
</p>
|
||||
<pre style="white-space: pre-wrap"><code class="language-sh">cd ~/dotfiles
|
||||
git init
|
||||
git branch -M main
|
||||
git remote add origin github_url
|
||||
</code></pre>
|
||||
<p>Now, we've set up our folder.</p>
|
||||
<p>Whenever we want to add a configuration folder to this github repo, we can create a symbolic link:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>sln ~/.config/FOLDER_OR_FILE ~/dotfiles/FOLDER_OR_FILE
|
||||
<p>
|
||||
Whenever we want to add a configuration folder to this github repo, we can
|
||||
create a symbolic link:
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code>sln ~/.config/FOLDER_OR_FILE ~/dotfiles/FOLDER_OR_FILE
|
||||
</code></pre>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p><strong>What is a symbolic link?</strong><br>A symbolic link (symlink) is a pointer to another file or folder.<br>So, if that file or folder changes, the symlinked contents also change!</p>
|
||||
<div class="alert alert-important">
|
||||
<strong>ℹ️ IMPORTANT</strong><br />
|
||||
<p>
|
||||
<strong>What is a symbolic link?</strong><br />A symbolic link (symlink)
|
||||
is a pointer to another file or folder.<br />So, if that file or folder
|
||||
changes, the symlinked contents also change!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1>Ricing</h1>
|
||||
<p>When ricing, it is nice to set a color palette or a theme that you want to center your rice around. </p>
|
||||
<p>Alternatively, you can try color palette generators - see <a href="https://github.com/InioX/matugen/wiki/Configuration">matugen</a>, or just go crazy!</p>
|
||||
<p>If you want inspiration, you can visit <a href="https://www.reddit.com/r/unixporn/">r/unixporn</a>, or look through <a href="https://github.com/x-9917638/dotfiles">my old dotfiles</a>!</p>
|
||||
<p>This guide will walk you through ricing a program that was installed in part 2, waybar :3</p>
|
||||
<p>Our end result should look somewhat like this!
|
||||
<img src="./part-3/waybar.png" alt="waybar"></p>
|
||||
<p>
|
||||
When ricing, it is nice to set a color palette or a theme that you want to
|
||||
center your rice around.
|
||||
</p>
|
||||
<p>
|
||||
Alternatively, you can try color palette generators - see
|
||||
<a href="https://github.com/InioX/matugen/wiki/Configuration">matugen</a>,
|
||||
or just go crazy!
|
||||
</p>
|
||||
<p>
|
||||
If you want inspiration, you can visit
|
||||
<a href="https://www.reddit.com/r/unixporn/">r/unixporn</a>, or look through
|
||||
<a href="https://github.com/x-9917638/dotfiles">my old dotfiles</a>!
|
||||
</p>
|
||||
<p>
|
||||
This guide will walk you through ricing a program that was installed in part
|
||||
2, waybar :3
|
||||
</p>
|
||||
<p>
|
||||
Our end result should look somewhat like this!
|
||||
<img src="./part-3/waybar.png" alt="waybar" />
|
||||
</p>
|
||||
<h2>Fonts</h2>
|
||||
<p>We've been using an ugly font this whole time ;-;</p>
|
||||
<p>Lets spice it up!</p>
|
||||
<p>The Arch wiki has a list of fonts <a href="https://wiki.archlinux.org/title/Fonts#Font_packages">here</a>, browse through them or search for a fun font!</p>
|
||||
<p>Personally, I use <a href="https://github.com/subframe7536/Maple-font">Maple Mono</a>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">yay -S maplemononormal-nf-cn
|
||||
<p>
|
||||
The Arch wiki has a list of fonts
|
||||
<a href="https://wiki.archlinux.org/title/Fonts#Font_packages">here</a>,
|
||||
browse through them or search for a fun font!
|
||||
</p>
|
||||
<p>
|
||||
Personally, I use
|
||||
<a href="https://github.com/subframe7536/Maple-font">Maple Mono</a>:
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-sh">yay -S maplemononormal-nf-cn
|
||||
</code></pre>
|
||||
<p>Also, install a Nerd Font for icons:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">pacman -S nerd-font
|
||||
<pre style="white-space: pre-wrap"><code class="language-sh">pacman -S nerd-font
|
||||
</code></pre>
|
||||
<p>Pick your favourite! I use Jetbrains Mono (42) :3 </p>
|
||||
<p>Pick your favourite! I use Jetbrains Mono (42) :3</p>
|
||||
<h2>Waybar</h2>
|
||||
<p>Waybar docs can be found <a href="https://github.com/Alexays/Waybar/wiki">here</a>!</p>
|
||||
<p>
|
||||
Waybar docs can be found
|
||||
<a href="https://github.com/Alexays/Waybar/wiki">here</a>!
|
||||
</p>
|
||||
<p>Make sure waybar is installed:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">pacman -S waybar
|
||||
<pre style="white-space: pre-wrap"><code class="language-sh">pacman -S waybar
|
||||
</code></pre>
|
||||
<p>Now, create the folders and files for waybar's config files:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">mkdir -p ~/.config/waybar/{css,layouts}
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-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}
|
||||
</code></pre>
|
||||
<div class="alert alert-tip"><strong>💡 TIP</strong><br><p><strong>What did we do?</strong><br><code>mkdir</code> creates a directory. The <code>-p</code> option makes it create intermediate paths too! <code>touch</code> is a command that creates a file.<br>Whenever we use the <code>{}</code>, syntax, we are using <strong>brace expansions</strong>:</p>
|
||||
<blockquote>
|
||||
<p>"Brace expansions are a mechanism to generate arbitrary strings sharing a common prefix and suffix, either of which can be empty"<br>So:</p>
|
||||
</blockquote>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">echo a{d,c,b}e
|
||||
<div class="alert alert-tip">
|
||||
<strong>💡 TIP</strong><br />
|
||||
<p>
|
||||
<strong>What did we do?</strong><br /><code>mkdir</code> creates a
|
||||
directory. The <code>-p</code> option makes it create intermediate paths
|
||||
too! <code>touch</code> is a command that creates a file.<br />Whenever
|
||||
we use the <code>{}</code>, syntax, we are using
|
||||
<strong>brace expansions</strong>:
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
"Brace expansions are a mechanism to generate arbitrary strings
|
||||
sharing a common prefix and suffix, either of which can be
|
||||
empty"<br />So:
|
||||
</p>
|
||||
</blockquote>
|
||||
<pre style="white-space: pre-wrap"><code class="language-sh">echo a{d,c,b}e
|
||||
# RESULT: ade ace abe
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<p>Remember to symlink the waybar folder!</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">sln ~/.config/waybar ~/dotfiles/waybar
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-sh">sln ~/.config/waybar ~/dotfiles/waybar
|
||||
</code></pre>
|
||||
<p>Now that we have our proper file layout, let's open our editor and do some coding :3</p>
|
||||
<p>
|
||||
Now that we have our proper file layout, let's open our editor and do
|
||||
some coding :3
|
||||
</p>
|
||||
<p>To open Zed:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">zeditor ~/.config/waybar
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-sh">zeditor ~/.config/waybar
|
||||
</code></pre>
|
||||
<p>Make sure that Hackatime is working!</p>
|
||||
<p>We've structured our waybar folder to be organised and modular:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>~/.config/waybar/
|
||||
<pre style="white-space: pre-wrap"><code>~/.config/waybar/
|
||||
├── config.jsonc
|
||||
├── css
|
||||
│ ├── colors.css
|
||||
|
|
@ -83,17 +161,40 @@ touch ~/.config/waybar/css/{style.css,colors.css}
|
|||
└── style.css
|
||||
</code></pre>
|
||||
<p>Waybar has 2 files that must exist: config.jsonc, and style.css.</p>
|
||||
<p>However, to make it easier to edit small things like modules or layout, we've separated out a <code>modules.jsonc</code> and a <code>layouts</code> folder.</p>
|
||||
<p>Our top-level config.jsonc is simple, because all we do is import a layout.
|
||||
Open the terminal from Zed (Ctrl + ~) and type:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">echo '{ "include": [ "~/.config/waybar/layouts/with_music.jsonc" ] }' > config.jsonc
|
||||
<p>
|
||||
However, to make it easier to edit small things like modules or layout,
|
||||
we've separated out a <code>modules.jsonc</code> and a
|
||||
<code>layouts</code> folder.
|
||||
</p>
|
||||
<p>
|
||||
Our top-level config.jsonc is simple, because all we do is import a layout.
|
||||
Open the terminal from Zed (Ctrl + ~) and type:
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-sh">echo '{ "include": [ "~/.config/waybar/layouts/with_music.jsonc" ] }' > config.jsonc
|
||||
</code></pre>
|
||||
<div class="alert alert-tip"><strong>💡 TIP</strong><br><p><strong>What did we do?</strong><br><code>></code> is a redirection operator. Here, we redirect the output of a command (<code>echo</code>) into a file (<code>config.jsonc</code>).</p>
|
||||
<div class="alert alert-tip">
|
||||
<strong>💡 TIP</strong><br />
|
||||
<p>
|
||||
<strong>What did we do?</strong><br /><code>></code> is a redirection
|
||||
operator. Here, we redirect the output of a command (<code>echo</code>)
|
||||
into a file (<code>config.jsonc</code>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>Next, lets make our modules. Open the <code>modules.jsonc</code> file in Zed.</p>
|
||||
<p>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:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-json">// You can find icons using the nerd font cheat sheet: https://nerdfonts.com/cheat_sheet
|
||||
<p>
|
||||
Next, lets make our modules. Open the <code>modules.jsonc</code> file in
|
||||
Zed.
|
||||
</p>
|
||||
<p>
|
||||
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:
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-json">// You can find icons using the nerd font cheat sheet: https://nerdfonts.com/cheat_sheet
|
||||
{
|
||||
// Shows our workspaces!
|
||||
"niri/workspaces": {
|
||||
|
|
@ -112,7 +213,7 @@ Open the terminal from Zed (Ctrl + ~) and type:</p>
|
|||
"niri/window": {
|
||||
"max-length": 45,
|
||||
},
|
||||
|
||||
|
||||
// A module for monitoring cpu usage
|
||||
"cpu": {
|
||||
// Polling interval, in ms
|
||||
|
|
@ -249,7 +350,7 @@ Open the terminal from Zed (Ctrl + ~) and type:</p>
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
// mpris is a interface that lets programs poll playing media
|
||||
"mpris": {
|
||||
"format": "{artist} - {title}",
|
||||
|
|
@ -275,7 +376,7 @@ Open the terminal from Zed (Ctrl + ~) and type:</p>
|
|||
<p>Yippee! We finished our waybar modules!</p>
|
||||
<p>Now it's time for the layout.</p>
|
||||
<p>Open <code>layouts/with_music.jsonc</code> in Zed. Enter this:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-json">{
|
||||
<pre style="white-space: pre-wrap"><code class="language-json">{
|
||||
"layer": "bottom",
|
||||
"position": "top",
|
||||
"margin": "0 0 0 0",
|
||||
|
|
@ -310,8 +411,11 @@ Open the terminal from Zed (Ctrl + ~) and type:</p>
|
|||
"include": ["~/.config/waybar/modules.jsonc"],
|
||||
}
|
||||
</code></pre>
|
||||
<p>Done! Optionally, you can place this into <code>layouts/with_window.jsonc</code>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-json">{
|
||||
<p>
|
||||
Done! Optionally, you can place this into
|
||||
<code>layouts/with_window.jsonc</code>:
|
||||
</p>
|
||||
<pre style="white-space: pre-wrap"><code class="language-json">{
|
||||
"layer": "top",
|
||||
"position": "top",
|
||||
"width": 1920,
|
||||
|
|
@ -344,15 +448,26 @@ Open the terminal from Zed (Ctrl + ~) and type:</p>
|
|||
"include": ["~/.config/waybar/modules.jsonc"],
|
||||
}
|
||||
</code></pre>
|
||||
<p>Now that we've finished defining our layouts and modules, we can work on our styles.</p>
|
||||
<p>Like <code>config.jsonc</code>, our top level <code>style.css</code> is a simple 1 line import:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">echo '@import "css/style.css";' > style.css
|
||||
<p>
|
||||
Now that we've finished defining our layouts and modules, we can work on
|
||||
our styles.
|
||||
</p>
|
||||
<p>
|
||||
Like <code>config.jsonc</code>, our top level <code>style.css</code> is a
|
||||
simple 1 line import:
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-sh">echo '@import "css/style.css";' > style.css
|
||||
</code></pre>
|
||||
<p>Now we can run <code>waybar</code> and see our edits live!</p>
|
||||
<p>In Zed, open <code>css/colors.css</code>. Here, we define our colour palette! Here are mine:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-css">/*
|
||||
Define your background, foreground, inactive colour
|
||||
(Lowkey doesn't have a big difference
|
||||
<p>
|
||||
In Zed, open <code>css/colors.css</code>. Here, we define our colour
|
||||
palette! Here are mine:
|
||||
</p>
|
||||
<pre style="white-space: pre-wrap"><code class="language-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;
|
||||
|
|
@ -367,8 +482,13 @@ Define your background, foreground, inactive colour
|
|||
@define-color yellow #c8c878;
|
||||
@define-color green #78c878;
|
||||
</code></pre>
|
||||
<p>Now, we can edit our styles. Open <code>css/style.css</code> in Zed and enter this:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-css">/* Import our color palette */
|
||||
<p>
|
||||
Now, we can edit our styles. Open <code>css/style.css</code> in Zed and
|
||||
enter this:
|
||||
</p>
|
||||
<pre
|
||||
style="white-space: pre-wrap"
|
||||
><code class="language-css">/* Import our color palette */
|
||||
@import "colors.css";
|
||||
|
||||
* {
|
||||
|
|
@ -555,16 +675,25 @@ menu > *:hover {
|
|||
<p>Make all your other programs look nice :3</p>
|
||||
<p>This could include:</p>
|
||||
<ul>
|
||||
<li>Compositor</li>
|
||||
<li>Terminal Emulator</li>
|
||||
<li>App Launcher</li>
|
||||
<li>etc!</li>
|
||||
<li>Compositor</li>
|
||||
<li>Terminal Emulator</li>
|
||||
<li>App Launcher</li>
|
||||
<li>etc!</li>
|
||||
</ul>
|
||||
<h2>Helpful Resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://www.reddit.com/r/unixporn/">r/unixporn</a> - This is the biggest online community for ricing! Go here for inspiration.</li>
|
||||
<li><a href="https://wiki.archlinux.org">Arch Wiki</a> - The Arch Linux wiki is incredibly helpful for everything related to Linux, with helpful information on tons of software.</li>
|
||||
<li><a href="https://github.com/fosslife/awesome-ricing">awesome-ricing</a> - A massive open-source list of ricing/Linux tools and software from window managers, to terminals, to colour schemes, to even wallpapers.
|
||||
guide.html:199:29</li>
|
||||
<li>
|
||||
<a href="https://www.reddit.com/r/unixporn/">r/unixporn</a> - This is
|
||||
the biggest online community for ricing! Go here for inspiration.
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.archlinux.org">Arch Wiki</a> - The Arch Linux wiki
|
||||
is incredibly helpful for everything related to Linux, with helpful
|
||||
information on tons of software.
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/fosslife/awesome-ricing">awesome-ricing</a>
|
||||
- A massive open-source list of ricing/Linux tools and software from
|
||||
window managers, to terminals, to colour schemes, to even wallpapers.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,167 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>YSWS: socks - gallery </title>
|
||||
<link rel="stylesheet" href="https://css.hackclub.com/theme.css" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
|
||||
<meta property="og:title" content="YSWS: socks - gallery " />
|
||||
<meta name="twitter:title" content="YSWS: socks - gallery" />
|
||||
<meta name="description" content="Gallery of the rice's " />
|
||||
<meta property="og:description" content="Gallery of the rice's" />
|
||||
<meta name="twitter:description" content="Gallery of the rice's" />
|
||||
<link rel="stylesheet" href="./gallery/carousel.css">
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
animation-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.col:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Delete this HTML and replace with your own HTML -->
|
||||
<!-- starter code below -->
|
||||
<a class="banner" target="_blank" href="https://hackclub.com/">
|
||||
<img src="../images/flag-orpheus-top.png" />
|
||||
</a>
|
||||
|
||||
<header>
|
||||
<h1 class="ultratitle">Gallery</h1>
|
||||
<p class="headline" id="headline">Gallery of the {count} rice's</p>
|
||||
</header>
|
||||
<div id="gallery"></div>
|
||||
</body>
|
||||
<script src="./gallery/carousel.js"></script>
|
||||
<script src="./gallery/icon.js"></script>
|
||||
<script>
|
||||
function groupArray(arr, size = 3) {
|
||||
const groups = []
|
||||
for (let i = 0; i < arr.length; i += size) {
|
||||
groups.push(arr.slice(i, i + size))
|
||||
}
|
||||
return groups
|
||||
}
|
||||
async function mainIfHome(gallery) {
|
||||
console.log(1)
|
||||
|
||||
document.getElementById('headline').innerText = `Gallery of the ${gallery.length} rices`
|
||||
// console.log(groupArray(gallery), 0)
|
||||
const grouped = groupArray(gallery)
|
||||
let index = 0;
|
||||
for (const group of grouped) {
|
||||
const row = document.createElement('div')
|
||||
row.classList.add('row')
|
||||
for (const cold of group) {
|
||||
const col = document.createElement('a')
|
||||
col.classList.add('card')
|
||||
col.classList.add('col')
|
||||
col.href = `#${index}`
|
||||
const img = document.createElement('img')
|
||||
// lazy load
|
||||
img.setAttribute('loading', 'lazy')
|
||||
img.src = cold.images[0]
|
||||
img.alt = cold.name
|
||||
img.style.width = "90%"
|
||||
img.style.height = "90%"
|
||||
img.style.borderRadius = "10px"
|
||||
const h1 = document.createElement('h1')
|
||||
// h1.append(setupIcon(cold.distro))
|
||||
h1.innerText = cold.name
|
||||
h1.style.paddingBottom = "10px"
|
||||
col.appendChild(h1)
|
||||
col.appendChild(img)
|
||||
row.appendChild(col)
|
||||
index++
|
||||
}
|
||||
|
||||
document.getElementById('gallery').appendChild(row)
|
||||
}
|
||||
}
|
||||
async function mainIfViewIndex(gallery) {
|
||||
const index = parseInt(window.location.hash.slice(1))
|
||||
const data = gallery[index]
|
||||
if (!data) window.location.hash = ''
|
||||
console.log(data)
|
||||
const carousel = document.createElement('div')
|
||||
carousel.classList.add('carousel-container')
|
||||
const imgCarousel = document.createElement('div')
|
||||
imgCarousel.classList.add('carousel')
|
||||
for (const image of data.images) {
|
||||
const img = document.createElement('img')
|
||||
img.src = image
|
||||
img.alt = data.name
|
||||
img.style.width = "100%"
|
||||
img.style.height = "auto"
|
||||
imgCarousel.appendChild(img)
|
||||
}
|
||||
carousel.appendChild(imgCarousel)
|
||||
const next = document.createElement('button')
|
||||
next.classList.add('next')
|
||||
next.innerText = 'Next Image'
|
||||
const prev = document.createElement('button')
|
||||
prev.classList.add('prev')
|
||||
prev.innerText = 'Prev Image'
|
||||
if (data.images.length > 1) {
|
||||
carousel.appendChild(prev)
|
||||
carousel.appendChild(next)
|
||||
}
|
||||
const titleThing = document.createElement('div')
|
||||
titleThing.innerText = data.name
|
||||
const div = titleThing
|
||||
div.style.display = "flex"
|
||||
div.style.justifyContent = "center"
|
||||
div.style.alignItems = "center"
|
||||
div.style.gap = "var(--spacing-2)"
|
||||
div.style.fontSize = "var(--font-5)"
|
||||
div.style.fontWeight = "var(--font-weight-bold)"
|
||||
|
||||
const gitLink = document.createElement('a')
|
||||
gitLink.href = data.git
|
||||
gitLink.innerText = "Dotfiles"
|
||||
gitLink.style.textDecoration = "none"
|
||||
gitLink.target = "_blank"
|
||||
|
||||
div.appendChild(document.createTextNode(" - "))
|
||||
div.appendChild(gitLink)
|
||||
div.appendChild(setupIcon(data.distro))
|
||||
document.body.appendChild(titleThing)
|
||||
document.body.appendChild(carousel)
|
||||
const acarousel = setupCarousel()
|
||||
next.onclick = () => acarousel.moveSlide(1)
|
||||
prev.onclick = () => acarousel.moveSlide(-1)
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const gallery = await fetch(
|
||||
"https://raw.githubusercontent.com/hackclub/riceathon/refs/heads/main/members.json"
|
||||
).then(r => r.json())
|
||||
if (isNaN(window.location.hash.slice(1)) || window.location.hash == "#" || window.location.hash == "") {
|
||||
console.log(`Loading main`)
|
||||
mainIfHome(gallery)
|
||||
} else {
|
||||
console.log(`#${window.location.hash.slice(1)}`)
|
||||
document.getElementById('headline').remove()
|
||||
mainIfViewIndex(gallery)
|
||||
}
|
||||
window.addEventListener('hashchange', () => location.reload())
|
||||
}
|
||||
main()
|
||||
</script>
|
||||
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>YSWS: socks - gallery</title>
|
||||
<link rel="stylesheet" href="https://css.hackclub.com/theme.css" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
|
||||
<meta property="og:title" content="YSWS: socks - gallery " />
|
||||
<meta name="twitter:title" content="YSWS: socks - gallery" />
|
||||
<meta name="description" content="Gallery of the rices" />
|
||||
<meta property="og:description" content="Gallery of the rices" />
|
||||
<meta name="twitter:description" content="Gallery of the rices" />
|
||||
<link rel="stylesheet" href="./carousel.css" />
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
animation-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.col:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Delete this HTML and replace with your own HTML -->
|
||||
<!-- starter code below -->
|
||||
<a class="banner" target="_blank" href="https://hackclub.com/">
|
||||
<img src="../images/flag-orpheus-top.png" />
|
||||
</a>
|
||||
|
||||
<header>
|
||||
<h1 class="ultratitle">Gallery</h1>
|
||||
<p class="headline" id="headline">Gallery of the {count} rices</p>
|
||||
</header>
|
||||
<div id="gallery"></div>
|
||||
</body>
|
||||
<script src="./carousel.js"></script>
|
||||
<script src="./icon.js"></script>
|
||||
<script>
|
||||
function groupArray(arr, size = 3) {
|
||||
const groups = [];
|
||||
for (let i = 0; i < arr.length; i += size) {
|
||||
groups.push(arr.slice(i, i + size));
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
async function mainIfHome(gallery) {
|
||||
console.log(1);
|
||||
|
||||
document.getElementById("headline").innerText =
|
||||
`Gallery of the ${gallery.length} rices`;
|
||||
// console.log(groupArray(gallery), 0)
|
||||
const grouped = groupArray(gallery);
|
||||
let index = 0;
|
||||
for (const group of grouped) {
|
||||
const row = document.createElement("div");
|
||||
row.classList.add("row");
|
||||
for (const cold of group) {
|
||||
const col = document.createElement("a");
|
||||
col.classList.add("card");
|
||||
col.classList.add("col");
|
||||
col.href = `#${index}`;
|
||||
const img = document.createElement("img");
|
||||
// lazy load
|
||||
img.setAttribute("loading", "lazy");
|
||||
img.src = cold.images[0];
|
||||
img.alt = cold.name;
|
||||
img.style.width = "90%";
|
||||
img.style.height = "90%";
|
||||
img.style.borderRadius = "10px";
|
||||
const h1 = document.createElement("h1");
|
||||
// h1.append(setupIcon(cold.distro))
|
||||
h1.innerText = cold.name;
|
||||
h1.style.paddingBottom = "10px";
|
||||
col.appendChild(h1);
|
||||
col.appendChild(img);
|
||||
row.appendChild(col);
|
||||
index++;
|
||||
}
|
||||
|
||||
document.getElementById("gallery").appendChild(row);
|
||||
}
|
||||
}
|
||||
async function mainIfViewIndex(gallery) {
|
||||
const index = parseInt(window.location.hash.slice(1));
|
||||
const data = gallery[index];
|
||||
if (!data) window.location.hash = "";
|
||||
console.log(data);
|
||||
const carousel = document.createElement("div");
|
||||
carousel.classList.add("carousel-container");
|
||||
const imgCarousel = document.createElement("div");
|
||||
imgCarousel.classList.add("carousel");
|
||||
for (const image of data.images) {
|
||||
const img = document.createElement("img");
|
||||
img.src = image;
|
||||
img.alt = data.name;
|
||||
img.style.width = "100%";
|
||||
img.style.height = "auto";
|
||||
imgCarousel.appendChild(img);
|
||||
}
|
||||
carousel.appendChild(imgCarousel);
|
||||
const next = document.createElement("button");
|
||||
next.classList.add("next");
|
||||
next.innerText = "Next Image";
|
||||
const prev = document.createElement("button");
|
||||
prev.classList.add("prev");
|
||||
prev.innerText = "Prev Image";
|
||||
if (data.images.length > 1) {
|
||||
carousel.appendChild(prev);
|
||||
carousel.appendChild(next);
|
||||
}
|
||||
const titleThing = document.createElement("div");
|
||||
titleThing.innerText = data.name;
|
||||
const div = titleThing;
|
||||
div.style.display = "flex";
|
||||
div.style.justifyContent = "center";
|
||||
div.style.alignItems = "center";
|
||||
div.style.gap = "var(--spacing-2)";
|
||||
div.style.fontSize = "var(--font-5)";
|
||||
div.style.fontWeight = "var(--font-weight-bold)";
|
||||
|
||||
const gitLink = document.createElement("a");
|
||||
gitLink.href = data.git;
|
||||
gitLink.innerText = "Dotfiles";
|
||||
gitLink.style.textDecoration = "none";
|
||||
gitLink.target = "_blank";
|
||||
|
||||
div.appendChild(document.createTextNode(" - "));
|
||||
div.appendChild(gitLink);
|
||||
div.appendChild(setupIcon(data.distro));
|
||||
document.body.appendChild(titleThing);
|
||||
document.body.appendChild(carousel);
|
||||
const acarousel = setupCarousel();
|
||||
next.onclick = () => acarousel.moveSlide(1);
|
||||
prev.onclick = () => acarousel.moveSlide(-1);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const gallery = await fetch(
|
||||
"https://raw.githubusercontent.com/hackclub/riceathon/refs/heads/main/members.json",
|
||||
).then((r) => r.json());
|
||||
if (
|
||||
isNaN(window.location.hash.slice(1)) ||
|
||||
window.location.hash == "#" ||
|
||||
window.location.hash == ""
|
||||
) {
|
||||
console.log(`Loading main`);
|
||||
mainIfHome(gallery);
|
||||
} else {
|
||||
console.log(`#${window.location.hash.slice(1)}`);
|
||||
document.getElementById("headline").remove();
|
||||
mainIfViewIndex(gallery);
|
||||
}
|
||||
window.addEventListener("hashchange", () => location.reload());
|
||||
}
|
||||
main();
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
183
docs/index.html
183
docs/index.html
|
|
@ -1,84 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Riceathon</title>
|
||||
<link rel="stylesheet" href="https://css.hackclub.com/theme.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta property="og:title" content="Riceathon" />
|
||||
<meta name="twitter:title" content="Riceathon" />
|
||||
<meta
|
||||
name="description"
|
||||
content="You ship your Linux rice, we ship programmer socks. "
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="You ship your Linux rice, we ship programmer socks."
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="You ship your Linux rice, we ship programmer socks."
|
||||
/>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Riceathon</title>
|
||||
<link rel="stylesheet" href="https://css.hackclub.com/theme.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta property="og:title" content="Riceathon" />
|
||||
<meta name="twitter:title" content="Riceathon" />
|
||||
<meta name="description" content="You ship your Linux rice, we ship programmer socks. " />
|
||||
<meta property="og:description" content="You ship your Linux rice, we ship programmer socks." />
|
||||
<meta name="twitter:description" content="You ship your Linux rice, we ship programmer socks." />
|
||||
</head>
|
||||
<body>
|
||||
<a class="banner" target="_blank" href="https://hackclub.com/">
|
||||
<img src="images/flag-orpheus-top.png" />
|
||||
</a>
|
||||
|
||||
<body>
|
||||
<a class="banner" target="_blank" href="https://hackclub.com/">
|
||||
<img src="images/flag-orpheus-top.png" />
|
||||
</a>
|
||||
<header>
|
||||
<img src="images/unix-porn.png" class="tiny-img" />
|
||||
<h1 class="ultratitle">Riceathon</h1>
|
||||
<p class="headline">
|
||||
A Hack Club YSWS where you can rice your Linux desktop and
|
||||
submit your dotfiles to get free programmer socks
|
||||
</p>
|
||||
<a href="./better-guide/guide.html" class="guide-btn"
|
||||
>Start the Guide</a
|
||||
>
|
||||
</header>
|
||||
|
||||
<header>
|
||||
<img src="images/unix-porn.png" class="tiny-img" />
|
||||
<h1 class="ultratitle">Riceathon</h1>
|
||||
<p class="headline">A Hack Club YSWS where you can rice your Linux desktop and submit your dotfiles to get free
|
||||
programmer socks</p>
|
||||
<a href="./better-guide/guide.html" class="guide-btn">Start the Guide</a>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div class="container blurb">
|
||||
<p>
|
||||
Run a <a target="_blank" href="https://en.wikipedia.org/wiki/Linux_distribution">Linux Distro</a> on your Computer
|
||||
or Laptop, spend some time spicing it up with customizations and recieve some cool swag to match your desktop.
|
||||
</p>
|
||||
<!-- <p>
|
||||
<div class="container blurb">
|
||||
<p>
|
||||
Run a
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://en.wikipedia.org/wiki/Linux_distribution"
|
||||
>Linux Distro</a
|
||||
>
|
||||
on your Computer or Laptop, spend some time spicing it up with
|
||||
customizations and receive some cool swag to match your desktop.
|
||||
</p>
|
||||
<!-- <p>
|
||||
Haven't used Linux Before? Check out the <a target="_blank" href="https://jams.hackclub.com/">Jam</a> on how to dual boot and install your first Linux Distro
|
||||
</p> commenting until the jam actually gets made-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card container">
|
||||
<h2 class="headline">So What is a Rice / Ricing?</h2>
|
||||
<p>
|
||||
The term ‘rice’ is used to describe a person’s unix desktop where ‘ricing’ is when someone is customizing their
|
||||
desktop such as the icons, panels, or system interface. When it comes to ricing a tiling window manager though,
|
||||
the ricing of a user’s system becomes much more involved. Basic things such as the panel bar and application
|
||||
launcher must be configured by the user.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
See the basics of ricing <a target="_blank" href="https://jie-fang.github.io/blog/basics-of-ricing">here</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
<h2 class="headline">Where does your rice go?</h2>
|
||||
<p>
|
||||
After you submit your rice it will be added to the <a target="_blank" href="./gallery">gallery</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
<h2 class="headline">When does it end?</h2>
|
||||
<p>
|
||||
V3 will end on TBD
|
||||
</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
<h2 class="headline">Ready to start?</h2>
|
||||
<div class="card container">
|
||||
<h2 class="headline">So What is a Rice / Ricing?</h2>
|
||||
<p>
|
||||
The term ‘rice’ is used to describe a person’s unix desktop
|
||||
where ‘ricing’ is when someone is customizing their desktop such
|
||||
as the icons, panels, or system interface. When it comes to
|
||||
ricing a tiling window manager though, the ricing of a user’s
|
||||
system becomes much more involved. Basic things such as the
|
||||
panel bar and application launcher must be configured by the
|
||||
user.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
See the basics of ricing
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://jie-fang.github.io/blog/basics-of-ricing"
|
||||
>here</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
<h2 class="headline">Where does your rice go?</h2>
|
||||
<p>
|
||||
After you submit your rice it will be added to the
|
||||
<a target="_blank" href="./gallery">gallery</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
<h2 class="headline">When does it end?</h2>
|
||||
<p>V3 will end on TBD</p>
|
||||
</div>
|
||||
<div class="card container">
|
||||
<h2 class="headline">Ready to start?</h2>
|
||||
|
||||
<p>
|
||||
Set up <a href="https://hackatime.hackclub.com">Hakatime</a> and start ricing using the editor of your choice!
|
||||
Hakatime
|
||||
will need to be set up with the same email as your Hack Club Slack account in order to count. You will need to
|
||||
push your customization files to a Github repo once you're done. Afterward, <a
|
||||
href="https://github.com/hackclub/riceathon">submit a PR</a> to the Riceathon repo with an update to the
|
||||
members.json(check the formatting there for a template!)
|
||||
</p>
|
||||
|
||||
<p>Development chatter happens in the <a target="_blank"
|
||||
href="https://app.slack.com/client/T0266FRGM/C07MLF9A8H5">#riceathon</a> channel in the <a target="_blank"
|
||||
href="https://hackclub.com/slack/">Hack Club Slack</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
<p>
|
||||
Set up
|
||||
<a href="https://hackatime.hackclub.com">Hackatime</a> and start
|
||||
ricing using the editor of your choice! Hackatime will need to
|
||||
be set up with the same email as your Hack Club Slack account in
|
||||
order to count. You will need to push your customization files
|
||||
to a Github repo once you're done. Afterward,
|
||||
<a href="https://github.com/hackclub/riceathon">submit a PR</a>
|
||||
to the Riceathon repo with an update to the members.json(check
|
||||
the formatting there for a template!)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Development chatter happens in the
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://app.slack.com/client/T0266FRGM/C07MLF9A8H5"
|
||||
>#riceathon</a
|
||||
>
|
||||
channel in the
|
||||
<a target="_blank" href="https://hackclub.com/slack/"
|
||||
>Hack Club Slack</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue