diff --git a/content/desktop.json b/content/desktop.json index 89e919b..75e426e 100644 --- a/content/desktop.json +++ b/content/desktop.json @@ -1,5 +1,5 @@ { - "defaultTheme": "flats", + "defaultTheme": "cerberus", "workspaces": [ { "number": 1, "name": "home", "path": "/" }, { "number": 2, "name": "about", "path": "/about" }, @@ -18,7 +18,8 @@ { "label": "hackathons", "icon": "ph:trophy-duotone", "open": { "page": "/projects/hackathons" } }, { "label": "research", "icon": "ph:microscope-duotone", "open": { "page": "/projects/research" } }, { "label": "blog", "icon": "ph:notebook-duotone", "open": { "page": "/blog" } }, - { "label": "links", "icon": "ph:qr-code-duotone", "open": { "page": "/links" } } + { "label": "links", "icon": "ph:qr-code-duotone", "open": { "page": "/links" } }, + { "label": "keybinds", "icon": "ph:keyboard-duotone", "open": { "page": "/keybinds" } } ] }, { diff --git a/src/lib/components/ui/KeybindTable.svelte b/src/lib/components/ui/KeybindTable.svelte new file mode 100644 index 0000000..f7e2d1b --- /dev/null +++ b/src/lib/components/ui/KeybindTable.svelte @@ -0,0 +1,49 @@ + + +
+ {#each entries as entry (entry.keys.join('+'))} +
+ {#each entry.keys as key, index (key)} + {#if index > 0}+{/if}{key} + {/each} +
+
{entry.action}
+ {/each} +
+ + diff --git a/src/lib/desktop/keybindGuide.ts b/src/lib/desktop/keybindGuide.ts new file mode 100644 index 0000000..afdbe4e --- /dev/null +++ b/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 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.' } +]; diff --git a/src/lib/site/pages.ts b/src/lib/site/pages.ts index 87fbef8..37bac6b 100644 --- a/src/lib/site/pages.ts +++ b/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 ?? [])]); diff --git a/src/routes/keybinds/+page.svelte b/src/routes/keybinds/+page.svelte new file mode 100644 index 0000000..2b3892b --- /dev/null +++ b/src/routes/keybinds/+page.svelte @@ -0,0 +1,139 @@ + + +
+ +

Alt stands in for Super, since browsers can't use it.

+ + + + +
+
+
+

Windows

+ +
+
+

Workspaces

+ +
+
+
+ +
+
+
+

Keys

+ +
+
+

Commands

+
+ {#each visibleCommands as command (command.name)} +
{command.usage ?? command.name}
+
{command.description}
+ {/each} +
+
+
+
+ +
+ +

Scroll or pinch to zoom, drag to pan and swipe to change images.

+
+
+ +