Add compressed wallpapers from dotfiles

README.md

@@ -17,7 +17,7 @@ The site recreates my [blomarchy](https://git.sirblob.co/SirBlob/blomarchy) setu
 ## Features
 
 - **Tiling windows** - every page opens as a window that tiles like Hyprland's dwindle layout, with gradient borders.
-- **Quickshell bar** - app launcher, workspaces, clock, music player, live Discord status, battery details and a theme picker.
+- **Quickshell bar** - app launcher, workspaces, clock, music player, live Discord status, battery details, a theme picker and a wallpaper picker.
 - **Music player** - plays a random song from a YouTube playlist, muted until you unmute it, with seek, skip, repeat, volume and a playlist view.
 - **Floating windows** - Alt + V or the title bar button pops a window out of the tiling layout so it can be dragged and resized.
 - **btop** - a system monitor window with my real GitHub commit graph, repos as processes and some very scientific CPU and caffeine readings.
@@ -111,7 +111,7 @@ bun run content:setup
 bun run content
 ```
 
-`content:setup` creates a virtual environment in `tools/content/.venv` and installs Textual. Run it once.
+`content:setup` creates a virtual environment in `tools/content/.venv` and installs Textual and Pillow. Run it once.
 
 | Key | Action |
 | --- | --- |
@@ -138,6 +138,15 @@ Show and movie titles are looked up on OMDb with `OMDB_API_KEY` from `.env`; fil
 | `projects/*.json` | Open source, packages, hackathons, research groups and organizations |
 | `music.json` | YouTube links for the music player |
 | `books.json` | Books scraped from Goodreads for the about page |
+| `wallpapers.json` | Wallpapers for the picker, written by `bun run wallpapers` |
 | `desktop.json` | Workspaces, desktop icons, the startup command and the default theme |
 | `themes.json` | Color themes for the site and the content editor |
 | `blog/*.md` | Blog posts |
+
+### Wallpapers
+
+```sh
+bun run wallpapers
+```
+
+Converts every image in `~/dotfiles/wallpapers` into a compressed JPEG in `static/wallpapers/gallery`, with a small thumbnail for the picker, and writes the list to `content/wallpapers.json`. Unchanged wallpapers are skipped, so run it again whenever the dotfiles change. Pass a folder to use a different source, or `--force` to convert everything again.

content/wallpapers.json

@@ -0,0 +1,112 @@
+[
+	{ "id": "1-a-slient-voice", "name": "A Slient Voice", "image": "/wallpapers/gallery/1-a-slient-voice.jpg", "thumb": "/wallpapers/gallery/thumbs/1-a-slient-voice.jpg" },
+	{ "id": "7-firewatch", "name": "Firewatch", "image": "/wallpapers/gallery/7-firewatch.jpg", "thumb": "/wallpapers/gallery/thumbs/7-firewatch.jpg" },
+	{ "id": "planetred", "name": "Planetred", "image": "/wallpapers/gallery/planetred.jpg", "thumb": "/wallpapers/gallery/thumbs/planetred.jpg" },
+	{ "id": "a-cat-in-a-cup", "name": "A Cat In A Cup", "image": "/wallpapers/gallery/a-cat-in-a-cup.jpg", "thumb": "/wallpapers/gallery/thumbs/a-cat-in-a-cup.jpg" },
+	{ "id": "anime-cafe-tokyonight", "name": "Anime Cafe Tokyonight", "image": "/wallpapers/gallery/anime-cafe-tokyonight.jpg", "thumb": "/wallpapers/gallery/thumbs/anime-cafe-tokyonight.jpg" },
+	{ "id": "anime-circuit", "name": "Anime Circuit", "image": "/wallpapers/gallery/anime-circuit.jpg", "thumb": "/wallpapers/gallery/thumbs/anime-circuit.jpg" },
+	{ "id": "anime-skyline", "name": "Anime Skyline", "image": "/wallpapers/gallery/anime-skyline.jpg", "thumb": "/wallpapers/gallery/thumbs/anime-skyline.jpg" },
+	{ "id": "astronaut", "name": "Astronaut", "image": "/wallpapers/gallery/astronaut.jpg", "thumb": "/wallpapers/gallery/thumbs/astronaut.jpg" },
+	{ "id": "astronaut2", "name": "Astronaut2", "image": "/wallpapers/gallery/astronaut2.jpg", "thumb": "/wallpapers/gallery/thumbs/astronaut2.jpg" },
+	{ "id": "autumn-forest", "name": "Autumn Forest", "image": "/wallpapers/gallery/autumn-forest.jpg", "thumb": "/wallpapers/gallery/thumbs/autumn-forest.jpg" },
+	{ "id": "awesome", "name": "Awesome", "image": "/wallpapers/gallery/awesome.jpg", "thumb": "/wallpapers/gallery/thumbs/awesome.jpg" },
+	{ "id": "baby-star", "name": "Baby Star", "image": "/wallpapers/gallery/baby-star.jpg", "thumb": "/wallpapers/gallery/thumbs/baby-star.jpg" },
+	{ "id": "be-productive-4k", "name": "Be Productive 4K", "image": "/wallpapers/gallery/be-productive-4k.jpg", "thumb": "/wallpapers/gallery/thumbs/be-productive-4k.jpg" },
+	{ "id": "black-hole", "name": "Black Hole", "image": "/wallpapers/gallery/black-hole.jpg", "thumb": "/wallpapers/gallery/thumbs/black-hole.jpg" },
+	{ "id": "black-car-girl", "name": "Black Car Girl", "image": "/wallpapers/gallery/black-car-girl.jpg", "thumb": "/wallpapers/gallery/thumbs/black-car-girl.jpg" },
+	{ "id": "camille-unknown", "name": "Camille Unknown", "image": "/wallpapers/gallery/camille-unknown.jpg", "thumb": "/wallpapers/gallery/thumbs/camille-unknown.jpg" },
+	{ "id": "cat", "name": "Cat", "image": "/wallpapers/gallery/cat.jpg", "thumb": "/wallpapers/gallery/thumbs/cat.jpg" },
+	{ "id": "chainsaw-denji-cat", "name": "Chainsaw Denji Cat", "image": "/wallpapers/gallery/chainsaw-denji-cat.jpg", "thumb": "/wallpapers/gallery/thumbs/chainsaw-denji-cat.jpg" },
+	{ "id": "cherry-blossoms", "name": "Cherry Blossoms", "image": "/wallpapers/gallery/cherry-blossoms.jpg", "thumb": "/wallpapers/gallery/thumbs/cherry-blossoms.jpg" },
+	{ "id": "clan-connections", "name": "Clan Connections", "image": "/wallpapers/gallery/clan-connections.jpg", "thumb": "/wallpapers/gallery/thumbs/clan-connections.jpg" },
+	{ "id": "cliff-edge", "name": "Cliff Edge", "image": "/wallpapers/gallery/cliff-edge.jpg", "thumb": "/wallpapers/gallery/thumbs/cliff-edge.jpg" },
+	{ "id": "colorful-planets", "name": "Colorful Planets", "image": "/wallpapers/gallery/colorful-planets.jpg", "thumb": "/wallpapers/gallery/thumbs/colorful-planets.jpg" },
+	{ "id": "deer-forest", "name": "Deer Forest", "image": "/wallpapers/gallery/deer-forest.jpg", "thumb": "/wallpapers/gallery/thumbs/deer-forest.jpg" },
+	{ "id": "delorean", "name": "Delorean", "image": "/wallpapers/gallery/delorean.jpg", "thumb": "/wallpapers/gallery/thumbs/delorean.jpg" },
+	{ "id": "delorean-pastel", "name": "Delorean Pastel", "image": "/wallpapers/gallery/delorean-pastel.jpg", "thumb": "/wallpapers/gallery/thumbs/delorean-pastel.jpg" },
+	{ "id": "doom-slayer", "name": "Doom Slayer", "image": "/wallpapers/gallery/doom-slayer.jpg", "thumb": "/wallpapers/gallery/thumbs/doom-slayer.jpg" },
+	{ "id": "ds-giyu", "name": "Ds Giyu", "image": "/wallpapers/gallery/ds-giyu.jpg", "thumb": "/wallpapers/gallery/thumbs/ds-giyu.jpg" },
+	{ "id": "evangelion", "name": "Evangelion", "image": "/wallpapers/gallery/evangelion.jpg", "thumb": "/wallpapers/gallery/thumbs/evangelion.jpg" },
+	{ "id": "everblush-creep", "name": "Everblush Creep", "image": "/wallpapers/gallery/everblush-creep.jpg", "thumb": "/wallpapers/gallery/thumbs/everblush-creep.jpg" },
+	{ "id": "firewatch-purple", "name": "Firewatch Purple", "image": "/wallpapers/gallery/firewatch-purple.jpg", "thumb": "/wallpapers/gallery/thumbs/firewatch-purple.jpg" },
+	{ "id": "fishschool", "name": "Fishschool", "image": "/wallpapers/gallery/fishschool.jpg", "thumb": "/wallpapers/gallery/thumbs/fishschool.jpg" },
+	{ "id": "geisha", "name": "Geisha", "image": "/wallpapers/gallery/geisha.jpg", "thumb": "/wallpapers/gallery/thumbs/geisha.jpg" },
+	{ "id": "ghost-in-the-shell", "name": "Ghost In The Shell", "image": "/wallpapers/gallery/ghost-in-the-shell.jpg", "thumb": "/wallpapers/gallery/thumbs/ghost-in-the-shell.jpg" },
+	{ "id": "goblin-slayer", "name": "Goblin Slayer", "image": "/wallpapers/gallery/goblin-slayer.jpg", "thumb": "/wallpapers/gallery/thumbs/goblin-slayer.jpg" },
+	{ "id": "godzilla-kong-noodles", "name": "Godzilla Kong Noodles", "image": "/wallpapers/gallery/godzilla-kong-noodles.jpg", "thumb": "/wallpapers/gallery/thumbs/godzilla-kong-noodles.jpg" },
+	{ "id": "goldfish", "name": "Goldfish", "image": "/wallpapers/gallery/goldfish.jpg", "thumb": "/wallpapers/gallery/thumbs/goldfish.jpg" },
+	{ "id": "hello-worlds", "name": "Hello Worlds", "image": "/wallpapers/gallery/hello-worlds.jpg", "thumb": "/wallpapers/gallery/thumbs/hello-worlds.jpg" },
+	{ "id": "hollow-knight-2", "name": "Hollow Knight 2", "image": "/wallpapers/gallery/hollow-knight-2.jpg", "thumb": "/wallpapers/gallery/thumbs/hollow-knight-2.jpg" },
+	{ "id": "hollow-knight-3", "name": "Hollow Knight 3", "image": "/wallpapers/gallery/hollow-knight-3.jpg", "thumb": "/wallpapers/gallery/thumbs/hollow-knight-3.jpg" },
+	{ "id": "hollow-knight", "name": "Hollow Knight", "image": "/wallpapers/gallery/hollow-knight.jpg", "thumb": "/wallpapers/gallery/thumbs/hollow-knight.jpg" },
+	{ "id": "home127-dark", "name": "Home127 Dark", "image": "/wallpapers/gallery/home127-dark.jpg", "thumb": "/wallpapers/gallery/thumbs/home127-dark.jpg" },
+	{ "id": "jellyfish", "name": "Jellyfish", "image": "/wallpapers/gallery/jellyfish.jpg", "thumb": "/wallpapers/gallery/thumbs/jellyfish.jpg" },
+	{ "id": "jupiter", "name": "Jupiter", "image": "/wallpapers/gallery/jupiter.jpg", "thumb": "/wallpapers/gallery/thumbs/jupiter.jpg" },
+	{ "id": "kimi-no-nawa", "name": "Kimi No Nawa", "image": "/wallpapers/gallery/kimi-no-nawa.jpg", "thumb": "/wallpapers/gallery/thumbs/kimi-no-nawa.jpg" },
+	{ "id": "kingler-drawing", "name": "Kingler Drawing", "image": "/wallpapers/gallery/kingler-drawing.jpg", "thumb": "/wallpapers/gallery/thumbs/kingler-drawing.jpg" },
+	{ "id": "krita-digiart", "name": "Krita Digiart", "image": "/wallpapers/gallery/krita-digiart.jpg", "thumb": "/wallpapers/gallery/thumbs/krita-digiart.jpg" },
+	{ "id": "large-asf-goodbg", "name": "Large Asf Goodbg", "image": "/wallpapers/gallery/large-asf-goodbg.jpg", "thumb": "/wallpapers/gallery/thumbs/large-asf-goodbg.jpg" },
+	{ "id": "literal-wallpaper", "name": "Literal Wallpaper", "image": "/wallpapers/gallery/literal-wallpaper.jpg", "thumb": "/wallpapers/gallery/thumbs/literal-wallpaper.jpg" },
+	{ "id": "makima-oxo", "name": "Makima Oxo", "image": "/wallpapers/gallery/makima-oxo.jpg", "thumb": "/wallpapers/gallery/thumbs/makima-oxo.jpg" },
+	{ "id": "material-pastel-1", "name": "Material Pastel 1", "image": "/wallpapers/gallery/material-pastel-1.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-1.jpg" },
+	{ "id": "material-pastel-2", "name": "Material Pastel 2", "image": "/wallpapers/gallery/material-pastel-2.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-2.jpg" },
+	{ "id": "material-pastel-3", "name": "Material Pastel 3", "image": "/wallpapers/gallery/material-pastel-3.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-3.jpg" },
+	{ "id": "material-pastel-4", "name": "Material Pastel 4", "image": "/wallpapers/gallery/material-pastel-4.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-4.jpg" },
+	{ "id": "material-pastel-5", "name": "Material Pastel 5", "image": "/wallpapers/gallery/material-pastel-5.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-5.jpg" },
+	{ "id": "material-pastel-6", "name": "Material Pastel 6", "image": "/wallpapers/gallery/material-pastel-6.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-6.jpg" },
+	{ "id": "material-pastel-7", "name": "Material Pastel 7", "image": "/wallpapers/gallery/material-pastel-7.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-7.jpg" },
+	{ "id": "material-pastel-8", "name": "Material Pastel 8", "image": "/wallpapers/gallery/material-pastel-8.jpg", "thumb": "/wallpapers/gallery/thumbs/material-pastel-8.jpg" },
+	{ "id": "melting-astro", "name": "Melting Astro", "image": "/wallpapers/gallery/melting-astro.jpg", "thumb": "/wallpapers/gallery/thumbs/melting-astro.jpg" },
+	{ "id": "monogatari8", "name": "Monogatari8", "image": "/wallpapers/gallery/monogatari8.jpg", "thumb": "/wallpapers/gallery/thumbs/monogatari8.jpg" },
+	{ "id": "montains", "name": "Montains", "image": "/wallpapers/gallery/montains.jpg", "thumb": "/wallpapers/gallery/thumbs/montains.jpg" },
+	{ "id": "mountain-snow-minima", "name": "Mountain Snow Minima", "image": "/wallpapers/gallery/mountain-snow-minima.jpg", "thumb": "/wallpapers/gallery/thumbs/mountain-snow-minima.jpg" },
+	{ "id": "nasa1", "name": "Nasa1", "image": "/wallpapers/gallery/nasa1.jpg", "thumb": "/wallpapers/gallery/thumbs/nasa1.jpg" },
+	{ "id": "neon-singularity", "name": "Neon Singularity", "image": "/wallpapers/gallery/neon-singularity.jpg", "thumb": "/wallpapers/gallery/thumbs/neon-singularity.jpg" },
+	{ "id": "nighttab-backdrop", "name": "Nighttab Backdrop", "image": "/wallpapers/gallery/nighttab-backdrop.jpg", "thumb": "/wallpapers/gallery/thumbs/nighttab-backdrop.jpg" },
+	{ "id": "nord-chainsaw", "name": "Nord Chainsaw", "image": "/wallpapers/gallery/nord-chainsaw.jpg", "thumb": "/wallpapers/gallery/thumbs/nord-chainsaw.jpg" },
+	{ "id": "nord-minimal-cat", "name": "Nord Minimal Cat", "image": "/wallpapers/gallery/nord-minimal-cat.jpg", "thumb": "/wallpapers/gallery/thumbs/nord-minimal-cat.jpg" },
+	{ "id": "nord-sky", "name": "Nord Sky", "image": "/wallpapers/gallery/nord-sky.jpg", "thumb": "/wallpapers/gallery/thumbs/nord-sky.jpg" },
+	{ "id": "nordic-heroin", "name": "Nordic Heroin", "image": "/wallpapers/gallery/nordic-heroin.jpg", "thumb": "/wallpapers/gallery/thumbs/nordic-heroin.jpg" },
+	{ "id": "p3", "name": "P3", "image": "/wallpapers/gallery/p3.jpg", "thumb": "/wallpapers/gallery/thumbs/p3.jpg" },
+	{ "id": "pacman-black", "name": "Pacman Black", "image": "/wallpapers/gallery/pacman-black.jpg", "thumb": "/wallpapers/gallery/thumbs/pacman-black.jpg" },
+	{ "id": "pastel-car-girl", "name": "Pastel Car Girl", "image": "/wallpapers/gallery/pastel-car-girl.jpg", "thumb": "/wallpapers/gallery/thumbs/pastel-car-girl.jpg" },
+	{ "id": "pastel-car", "name": "Pastel Car", "image": "/wallpapers/gallery/pastel-car.jpg", "thumb": "/wallpapers/gallery/thumbs/pastel-car.jpg" },
+	{ "id": "pastel-city", "name": "Pastel City", "image": "/wallpapers/gallery/pastel-city.jpg", "thumb": "/wallpapers/gallery/thumbs/pastel-city.jpg" },
+	{ "id": "peaks", "name": "Peaks", "image": "/wallpapers/gallery/peaks.jpg", "thumb": "/wallpapers/gallery/thumbs/peaks.jpg" },
+	{ "id": "perfect-blue", "name": "Perfect Blue", "image": "/wallpapers/gallery/perfect-blue.jpg", "thumb": "/wallpapers/gallery/thumbs/perfect-blue.jpg" },
+	{ "id": "pixel-city", "name": "Pixel City", "image": "/wallpapers/gallery/pixel-city.jpg", "thumb": "/wallpapers/gallery/thumbs/pixel-city.jpg" },
+	{ "id": "pixel-earth", "name": "Pixel Earth", "image": "/wallpapers/gallery/pixel-earth.jpg", "thumb": "/wallpapers/gallery/thumbs/pixel-earth.jpg" },
+	{ "id": "planet-minimal", "name": "Planet Minimal", "image": "/wallpapers/gallery/planet-minimal.jpg", "thumb": "/wallpapers/gallery/thumbs/planet-minimal.jpg" },
+	{ "id": "pokemon-legends-arceus-wallpapers", "name": "Pokemon Legends Arceus Wallpapers", "image": "/wallpapers/gallery/pokemon-legends-arceus-wallpapers.jpg", "thumb": "/wallpapers/gallery/thumbs/pokemon-legends-arceus-wallpapers.jpg" },
+	{ "id": "rain-world1", "name": "Rain World1", "image": "/wallpapers/gallery/rain-world1.jpg", "thumb": "/wallpapers/gallery/thumbs/rain-world1.jpg" },
+	{ "id": "rain-world2", "name": "Rain World2", "image": "/wallpapers/gallery/rain-world2.jpg", "thumb": "/wallpapers/gallery/thumbs/rain-world2.jpg" },
+	{ "id": "rm-rf", "name": "Rm Rf", "image": "/wallpapers/gallery/rm-rf.jpg", "thumb": "/wallpapers/gallery/thumbs/rm-rf.jpg" },
+	{ "id": "rocket-launch", "name": "Rocket Launch", "image": "/wallpapers/gallery/rocket-launch.jpg", "thumb": "/wallpapers/gallery/thumbs/rocket-launch.jpg" },
+	{ "id": "sakura", "name": "Sakura", "image": "/wallpapers/gallery/sakura.jpg", "thumb": "/wallpapers/gallery/thumbs/sakura.jpg" },
+	{ "id": "shiny-colors", "name": "Shiny Colors", "image": "/wallpapers/gallery/shiny-colors.jpg", "thumb": "/wallpapers/gallery/thumbs/shiny-colors.jpg" },
+	{ "id": "shooting-stars", "name": "Shooting Stars", "image": "/wallpapers/gallery/shooting-stars.jpg", "thumb": "/wallpapers/gallery/thumbs/shooting-stars.jpg" },
+	{ "id": "siri", "name": "Siri", "image": "/wallpapers/gallery/siri.jpg", "thumb": "/wallpapers/gallery/thumbs/siri.jpg" },
+	{ "id": "skeleton-heart", "name": "Skeleton Heart", "image": "/wallpapers/gallery/skeleton-heart.jpg", "thumb": "/wallpapers/gallery/thumbs/skeleton-heart.jpg" },
+	{ "id": "space-juice", "name": "Space Juice", "image": "/wallpapers/gallery/space-juice.jpg", "thumb": "/wallpapers/gallery/thumbs/space-juice.jpg" },
+	{ "id": "space-man", "name": "Space Man", "image": "/wallpapers/gallery/space-man.jpg", "thumb": "/wallpapers/gallery/thumbs/space-man.jpg" },
+	{ "id": "space-piano", "name": "Space Piano", "image": "/wallpapers/gallery/space-piano.jpg", "thumb": "/wallpapers/gallery/thumbs/space-piano.jpg" },
+	{ "id": "sunset-lake", "name": "Sunset Lake", "image": "/wallpapers/gallery/sunset-lake.jpg", "thumb": "/wallpapers/gallery/thumbs/sunset-lake.jpg" },
+	{ "id": "sushi-dark", "name": "Sushi Dark", "image": "/wallpapers/gallery/sushi-dark.jpg", "thumb": "/wallpapers/gallery/thumbs/sushi-dark.jpg" },
+	{ "id": "swords", "name": "Swords", "image": "/wallpapers/gallery/swords.jpg", "thumb": "/wallpapers/gallery/thumbs/swords.jpg" },
+	{ "id": "tabs", "name": "Tabs", "image": "/wallpapers/gallery/tabs.jpg", "thumb": "/wallpapers/gallery/thumbs/tabs.jpg" },
+	{ "id": "think", "name": "Think", "image": "/wallpapers/gallery/think.jpg", "thumb": "/wallpapers/gallery/thumbs/think.jpg" },
+	{ "id": "totoro", "name": "Totoro", "image": "/wallpapers/gallery/totoro.jpg", "thumb": "/wallpapers/gallery/thumbs/totoro.jpg" },
+	{ "id": "trigonometry", "name": "Trigonometry", "image": "/wallpapers/gallery/trigonometry.jpg", "thumb": "/wallpapers/gallery/thumbs/trigonometry.jpg" },
+	{ "id": "two-astronauts", "name": "Two Astronauts", "image": "/wallpapers/gallery/two-astronauts.jpg", "thumb": "/wallpapers/gallery/thumbs/two-astronauts.jpg" },
+	{ "id": "underwater", "name": "Underwater", "image": "/wallpapers/gallery/underwater.jpg", "thumb": "/wallpapers/gallery/thumbs/underwater.jpg" },
+	{ "id": "united-in-severance", "name": "United In Severance", "image": "/wallpapers/gallery/united-in-severance.jpg", "thumb": "/wallpapers/gallery/thumbs/united-in-severance.jpg" },
+	{ "id": "vintage-ascent", "name": "Vintage Ascent", "image": "/wallpapers/gallery/vintage-ascent.jpg", "thumb": "/wallpapers/gallery/thumbs/vintage-ascent.jpg" },
+	{ "id": "windows-black", "name": "Windows Black", "image": "/wallpapers/gallery/windows-black.jpg", "thumb": "/wallpapers/gallery/thumbs/windows-black.jpg" },
+	{ "id": "windows-error", "name": "Windows Error", "image": "/wallpapers/gallery/windows-error.jpg", "thumb": "/wallpapers/gallery/thumbs/windows-error.jpg" },
+	{ "id": "windows-magenta-blue", "name": "Windows Magenta Blue", "image": "/wallpapers/gallery/windows-magenta-blue.jpg", "thumb": "/wallpapers/gallery/thumbs/windows-magenta-blue.jpg" },
+	{ "id": "windows-magenta-pink", "name": "Windows Magenta Pink", "image": "/wallpapers/gallery/windows-magenta-pink.jpg", "thumb": "/wallpapers/gallery/thumbs/windows-magenta-pink.jpg" },
+	{ "id": "windows-xp", "name": "Windows Xp", "image": "/wallpapers/gallery/windows-xp.jpg", "thumb": "/wallpapers/gallery/thumbs/windows-xp.jpg" },
+	{ "id": "xavier-cuenca-w4-3", "name": "Xavier Cuenca W4 3", "image": "/wallpapers/gallery/xavier-cuenca-w4-3.jpg", "thumb": "/wallpapers/gallery/thumbs/xavier-cuenca-w4-3.jpg" },
+	{ "id": "yosemite-color-block", "name": "Yosemite Color Block", "image": "/wallpapers/gallery/yosemite-color-block.jpg", "thumb": "/wallpapers/gallery/thumbs/yosemite-color-block.jpg" },
+	{ "id": "yosemite-lowpoly", "name": "Yosemite Lowpoly", "image": "/wallpapers/gallery/yosemite-lowpoly.jpg", "thumb": "/wallpapers/gallery/thumbs/yosemite-lowpoly.jpg" }
+]

package.json

@@ -9,7 +9,8 @@
 		"preview": "vite preview",
 		"start": "bun --bun vite build && bun ./build/index.js",
 		"content": "tools/content/.venv/bin/python tools/content/app.py",
-		"content:setup": "python3 -m venv tools/content/.venv && tools/content/.venv/bin/pip install -r tools/content/requirements.txt",
+		"wallpapers": "tools/content/.venv/bin/python tools/content/wallpapers.py",
+		"content:setup":"python3 -m venv tools/content/.venv && tools/content/.venv/bin/pip install -r tools/content/requirements.txt",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"

src/lib/components/shell/Bar.svelte

@@ -4,6 +4,7 @@
 	import Clock from './Clock.svelte';
 	import Workspaces from './Workspaces.svelte';
 	import ThemeMenu from './ThemeMenu.svelte';
+	import WallpaperMenu from './WallpaperMenu.svelte';
 	import DiscordStatus from './DiscordStatus.svelte';
 	import Battery from './Battery.svelte';
 	import Music from './Music.svelte';
@@ -27,6 +28,7 @@
 		<DiscordStatus />
 		<Battery />
 		<Donate />
+		<WallpaperMenu />
 		<ThemeMenu />
 	</div>
 </header>

src/lib/components/shell/PopupCard.svelte

@@ -2,7 +2,12 @@
 	import { focusTrap } from '#lib/ui/focusTrap';
 	import type { Snippet } from 'svelte';
 
-	let { title, onclose, children }: { title: string; onclose: () => void; children: Snippet } = $props();
+	let {
+		title,
+		wide = false,
+		onclose,
+		children
+	}: { title: string; wide?: boolean; onclose: () => void; children: Snippet } = $props();
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape') onclose();
@@ -12,7 +17,7 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <button class="backdrop" aria-label="Close {title}" onclick={onclose}></button>
-<div class="popup" role="dialog" aria-modal="true" aria-label={title} tabindex="-1" use:focusTrap>
+<div class="popup" class:wide role="dialog" aria-modal="true" aria-label={title} tabindex="-1" use:focusTrap>
 	<div class="popup-title">{title}</div>
 	<div class="popup-body">
 		{@render children()}
@@ -42,6 +47,10 @@
 		animation: window-pop-in 0.15s ease-out;
 	}
 
+	.popup.wide {
+		width: 560px;
+	}
+
 	.popup-title {
 		padding: 0.4rem 0.6rem;
 		background: var(--background);
@@ -58,7 +67,8 @@
 	}
 
 	@media (max-width: 640px) {
-		.popup {
+		.popup,
+		.popup.wide {
 			position: fixed;
 			top: calc(var(--bar-height) + 6px);
 			right: 8px;

src/lib/components/shell/WallpaperMenu.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { wallpapers } from '#lib/content';
+	import { wallpaperState } from '#lib/theme/wallpaper.svelte';
+	import PopupCard from './PopupCard.svelte';
+
+	let open = $state(false);
+	let search = $state('');
+
+	const filtered = $derived(
+		wallpapers.filter((wallpaper) => wallpaper.name.toLowerCase().includes(search.trim().toLowerCase()))
+	);
+</script>
+
+{#if wallpapers.length}
+	<div class="wallpaper-menu">
+		<button class="tray-button" title="Wallpaper" aria-expanded={open} onclick={() => (open = !open)}>
+			<Icon icon="mdi:image-multiple-outline" width="18" />
+		</button>
+
+		{#if open}
+			<PopupCard title="Wallpapers ({wallpapers.length})" wide onclose={() => (open = false)}>
+				<div class="toolbar">
+					<input class="search" type="search" placeholder="search wallpapers" bind:value={search} />
+					<button class="tool" title="Random wallpaper" onclick={() => wallpaperState.shuffle()}>
+						<Icon icon="mdi:shuffle-variant" width="16" />
+					</button>
+					<button
+						class="tool"
+						class:selected={wallpaperState.currentId === null}
+						title="Use the theme's wallpaper"
+						onclick={() => wallpaperState.set(null)}
+					>
+						<Icon icon="mdi:palette-outline" width="16" />
+						<span>theme</span>
+					</button>
+				</div>
+
+				<div class="grid">
+					{#each filtered as wallpaper (wallpaper.id)}
+						<button
+							class="thumb"
+							class:selected={wallpaper.id === wallpaperState.currentId}
+							title={wallpaper.name}
+							onclick={() => wallpaperState.set(wallpaper.id)}
+						>
+							<img src={wallpaper.thumb} alt={wallpaper.name} loading="lazy" decoding="async" />
+							<span class="name">{wallpaper.name}</span>
+						</button>
+					{:else}
+						<span class="empty muted">No wallpapers match "{search}"</span>
+					{/each}
+				</div>
+			</PopupCard>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.wallpaper-menu {
+		position: relative;
+	}
+
+	.toolbar {
+		display: flex;
+		gap: 0.35rem;
+		margin-bottom: 0.35rem;
+	}
+
+	.search {
+		flex: 1;
+		min-width: 0;
+		padding: 0.3rem 0.5rem;
+		background: var(--dark-background);
+		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+		color: var(--foreground);
+		font: inherit;
+		font-size: 0.8rem;
+	}
+
+	.search:focus {
+		border-color: var(--accent);
+		outline: none;
+	}
+
+	.tool {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0 0.5rem;
+		background: none;
+		border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
+		color: var(--foreground);
+		font-size: 0.78rem;
+	}
+
+	.tool:hover,
+	.tool.selected {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 0.4rem;
+	}
+
+	.thumb {
+		position: relative;
+		aspect-ratio: 16 / 9;
+		padding: 0;
+		overflow: hidden;
+		background: var(--dark-background);
+		border: 2px solid transparent;
+	}
+
+	.thumb:hover {
+		border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+	}
+
+	.thumb.selected {
+		border-color: var(--accent);
+	}
+
+	.thumb img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.name {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		padding: 0.1rem 0.35rem;
+		background: color-mix(in srgb, var(--background) 85%, transparent);
+		font-size: 0.68rem;
+		text-align: left;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		opacity: 0;
+		transition: opacity 0.15s ease;
+	}
+
+	.thumb:hover .name,
+	.thumb:focus-visible .name,
+	.thumb.selected .name {
+		opacity: 1;
+	}
+
+	.empty {
+		grid-column: 1 / -1;
+		padding: 0.5rem;
+		font-size: 0.8rem;
+	}
+
+	@media (max-width: 640px) {
+		.grid {
+			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+		}
+	}
+</style>

src/lib/content/index.ts

@@ -12,6 +12,7 @@ import researchData from '#content/projects/research.json';
 import organizationsData from '#content/projects/organizations.json';
 import tcgDecksData from '#content/tcgDecks.json';
 import booksData from '#content/books.json';
+import wallpapersData from '#content/wallpapers.json';
 import type {
 	AboutContent,
 	BlogSettings,
@@ -25,7 +26,8 @@ import type {
 	ProjectCategory,
 	ProjectCategoryId,
 	ResearchGroup,
-	TcgDeck
+	TcgDeck,
+	Wallpaper
 } from './types';
 
 export type * from './types';
@@ -40,6 +42,7 @@ export const playlist: Playlist = musicData;
 export const researchGroups: ResearchGroup[] = researchData;
 export const tcgDecks: TcgDeck[] = tcgDecksData as TcgDeck[];
 export const books: Book[] = booksData as Book[];
+export const wallpapers: Wallpaper[] = wallpapersData as Wallpaper[];
 
 function featuredFirst(projects: Project[]): Project[] {
 	return [...projects].sort((first, second) => Number(!!second.featured) - Number(!!first.featured));

src/lib/content/types.ts

@@ -251,3 +251,10 @@ export interface TcgDeck {
 	name: string;
 	cards: DeckCard[];
 }
+
+export interface Wallpaper {
+	id: string;
+	name: string;
+	image: string;
+	thumb: string;
+}

src/lib/theme/wallpaper.svelte.ts

@@ -0,0 +1,52 @@
+import { wallpapers, type Wallpaper } from '#lib/content';
+
+const wallpaperStorageKey = 'wallpaper';
+
+function readStoredWallpaperId(): string | null {
+	try {
+		return localStorage.getItem(wallpaperStorageKey);
+	} catch {
+		return null;
+	}
+}
+
+function storeWallpaperId(wallpaperId: string | null) {
+	try {
+		if (wallpaperId) localStorage.setItem(wallpaperStorageKey, wallpaperId);
+		else localStorage.removeItem(wallpaperStorageKey);
+	} catch {}
+}
+
+function findWallpaper(wallpaperId: string | null): Wallpaper | null {
+	return wallpapers.find((wallpaper) => wallpaper.id === wallpaperId) ?? null;
+}
+
+function applyWallpaper(wallpaper: Wallpaper | null) {
+	const rootStyle = document.documentElement.style;
+	if (wallpaper) rootStyle.setProperty('--wallpaper', `url('${wallpaper.image}')`);
+	else rootStyle.removeProperty('--wallpaper');
+}
+
+class WallpaperState {
+	currentId = $state<string | null>(null);
+
+	restore() {
+		const stored = findWallpaper(readStoredWallpaperId());
+		this.currentId = stored?.id ?? null;
+		applyWallpaper(stored);
+	}
+
+	set(wallpaperId: string | null) {
+		const wallpaper = findWallpaper(wallpaperId);
+		this.currentId = wallpaper?.id ?? null;
+		applyWallpaper(wallpaper);
+		storeWallpaperId(this.currentId);
+	}
+
+	shuffle() {
+		const choices = wallpapers.filter((wallpaper) => wallpaper.id !== this.currentId);
+		if (choices.length) this.set(choices[Math.floor(Math.random() * choices.length)].id);
+	}
+}
+
+export const wallpaperState = new WallpaperState();

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
 	import { desktop, profile } from '#lib/content';
 	import { buildThemeStylesheet } from '#lib/theme/stylesheet';
 	import { themeState } from '#lib/theme/theme.svelte';
+	import { wallpaperState } from '#lib/theme/wallpaper.svelte';
 	import { pageWindowId, windowManager } from '#lib/desktop/windows.svelte';
 	import { handleKeybind } from '#lib/desktop/keybinds';
 	import { handleImageClick } from '#lib/desktop/imageViewer';
@@ -27,6 +28,7 @@
 
 	onMount(() => {
 		themeState.restore();
+		wallpaperState.restore();
 		const isWideScreen = window.innerWidth >= 768;
 		if (!pageOpen && isWideScreen && desktop.startupCommand) windowManager.openTerminal(desktop.startupCommand, { floating: true });
 		window.addEventListener('click', handleImageClick, true);