Add keybinds page and set Cerberus as default theme

src/lib/components/ui/KeybindTable.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { KeybindEntry } from '#lib/desktop/keybindGuide';
+
+	let { entries }: { entries: KeybindEntry[] } = $props();
+</script>
+
+<dl class="keybinds">
+	{#each entries as entry (entry.keys.join('+'))}
+		<dt>
+			{#each entry.keys as key, index (key)}
+				{#if index > 0}<span class="plus">+</span>{/if}<kbd>{key}</kbd>
+			{/each}
+		</dt>
+		<dd>{entry.action}</dd>
+	{/each}
+</dl>
+
+<style>
+	.keybinds {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		gap: 0.5rem 1.25rem;
+		align-items: center;
+		margin: 0;
+	}
+
+	dt {
+		display: flex;
+		align-items: center;
+		gap: 0.3rem;
+	}
+
+	dd {
+		margin: 0;
+	}
+
+	kbd {
+		padding: 0 0.45rem;
+		border: 1px solid color-mix(in srgb, var(--foreground) 30%, transparent);
+		border-bottom-width: 2px;
+		color: var(--accent);
+		font-family: inherit;
+		font-size: 0.85rem;
+	}
+
+	.plus {
+		color: var(--muted);
+	}
+</style>

src/lib/desktop/keybindGuide.ts

@@ -0,0 +1,55 @@
+import { desktop } from '#lib/content';
+
+export interface KeybindEntry {
+	keys: string[];
+	action: string;
+}
+
+export interface NavigationTip {
+	icon: string;
+	title: string;
+	description: string;
+}
+
+export const desktopKeybinds: KeybindEntry[] = [
+	{ keys: ['Alt', 'Enter'], action: 'Open a terminal' },
+	{ keys: ['Alt', 'Space'], action: 'Open the app launcher' },
+	{ keys: ['Alt', 'Q'], action: 'Close the focused window' },
+	{ keys: ['Alt', 'F'], action: 'Toggle fullscreen for the page window' },
+	{ keys: ['Alt', 'J'], action: 'Focus the next window' },
+	{ keys: ['Alt', 'K'], action: 'Focus the previous window' },
+	{ keys: ['Alt', 'T'], action: 'Switch to the next theme' }
+];
+
+export const workspaceKeybinds: KeybindEntry[] = desktop.workspaces.map((workspace) => ({
+	keys: ['Alt', `${workspace.number}`],
+	action: `Go to ${workspace.name}`
+}));
+
+export const imageViewerKeybinds: KeybindEntry[] = [
+	{ keys: ['Left'], action: 'Previous image' },
+	{ keys: ['Right'], action: 'Next image' },
+	{ keys: ['+'], action: 'Zoom in' },
+	{ keys: ['-'], action: 'Zoom out' },
+	{ keys: ['0'], action: 'Fit to window' },
+	{ keys: ['R'], action: 'Rotate right' },
+	{ keys: ['Shift', 'R'], action: 'Rotate left' },
+	{ keys: ['Esc'], action: 'Close the viewer' }
+];
+
+export const terminalKeybinds: KeybindEntry[] = [
+	{ keys: ['Tab'], action: 'Complete a command or page name' },
+	{ keys: ['Up'], action: 'Previous command in history' },
+	{ keys: ['Down'], action: 'Next command in history' },
+	{ keys: ['Ctrl', 'L'], action: 'Clear the screen' }
+];
+
+export const navigationTips: NavigationTip[] = [
+	{ icon: 'ph:squares-four-duotone', title: 'Desktop icons', description: 'Click an icon to open a page, run a script in a terminal or visit a social link.' },
+	{ icon: 'ph:rows-duotone', title: 'Workspaces', description: 'The numbers in the top left of the bar switch between pages, just like Hyprland workspaces.' },
+	{ icon: 'ph:magnifying-glass-duotone', title: 'Launcher', description: 'The icon in the top left of the bar, or Alt + Space, searches every page.' },
+	{ icon: 'ph:terminal-window-duotone', title: 'Terminal', description: 'Click the clock or press Alt + Enter. Type help to see every command, or cd <page> to open one.' },
+	{ icon: 'ph:music-notes-duotone', title: 'Bar widgets', description: 'The music, Discord, battery and theme widgets on the right of the bar open more details when clicked.' },
+	{ icon: 'ph:image-duotone', title: 'Images', description: 'Click any image to open it in the image viewer. Scroll or pinch to zoom and drag to pan.' },
+	{ icon: 'ph:device-mobile-duotone', title: 'Mobile', description: 'Windows open fullscreen. Use the tabs above the window to switch between them.' }
+];

src/lib/site/pages.ts

@@ -27,7 +27,8 @@ export const sitePages: SitePage[] = [
 		}))
 	},
 	{ name: 'blog', path: '/blog', title: 'Blog', description: 'Notes and write-ups from my projects.', icon: 'ph:notebook-duotone' },
-	{ name: 'links', path: '/links', title: 'Links', description: 'All my links with scannable QR codes.', icon: 'ph:qr-code-duotone' }
+	{ name: 'links', path: '/links', title: 'Links', description: 'All my links with scannable QR codes.', icon: 'ph:qr-code-duotone' },
+	{ name: 'keybinds', path: '/keybinds', title: 'Keybinds', description: 'Keyboard shortcuts and how to get around the desktop.', icon: 'ph:keyboard-duotone' }
 ];
 
 export const allSitePages: SitePage[] = sitePages.flatMap((page) => [page, ...(page.children ?? [])]);