Add keybinds page and set Cerberus as default theme
This commit is contained in:
SirBlob committed
1 parent
5d04df8d54
commit
490b3b87c5
5 files changed
+248
-3
No files matched your search
@@ -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>
|
||||
@@ -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.' }
|
||||
];
|
||||
@@ -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 ?? [])]);
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import { commands } from '#lib/terminal/commands';
|
||||
import {
|
||||
desktopKeybinds,
|
||||
imageViewerKeybinds,
|
||||
navigationTips,
|
||||
terminalKeybinds,
|
||||
workspaceKeybinds
|
||||
} from '#lib/desktop/keybindGuide';
|
||||
import PageHeader from '#lib/components/ui/PageHeader.svelte';
|
||||
import SectionNav from '#lib/components/ui/SectionNav.svelte';
|
||||
import Section from '#lib/components/ui/Section.svelte';
|
||||
import Panel from '#lib/components/ui/Panel.svelte';
|
||||
import KeybindTable from '#lib/components/ui/KeybindTable.svelte';
|
||||
|
||||
const visibleCommands = commands.filter((command) => !command.hidden);
|
||||
|
||||
const sections = [
|
||||
{ id: 'navigation', label: 'Navigation', color: 'blue' },
|
||||
{ id: 'desktop', label: 'Desktop', color: 'magenta' },
|
||||
{ id: 'terminal', label: 'Terminal', color: 'green' },
|
||||
{ id: 'viewer', label: 'Image viewer', color: 'orange' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<PageHeader command="cat ~/keybinds.md" title="Keybinds" />
|
||||
<p class="muted note">Alt stands in for Super, since browsers can't use it.</p>
|
||||
<SectionNav {sections} />
|
||||
|
||||
<Section title="Navigation" id="navigation">
|
||||
<div class="card-grid">
|
||||
{#each navigationTips as tip (tip.title)}
|
||||
<Panel title={tip.title} icon={tip.icon}>
|
||||
<p class="muted">{tip.description}</p>
|
||||
</Panel>
|
||||
{/each}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Desktop" id="desktop">
|
||||
<div class="columns">
|
||||
<div>
|
||||
<h3>Windows</h3>
|
||||
<KeybindTable entries={desktopKeybinds} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>Workspaces</h3>
|
||||
<KeybindTable entries={workspaceKeybinds} />
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Terminal" id="terminal">
|
||||
<div class="columns">
|
||||
<div>
|
||||
<h3>Keys</h3>
|
||||
<KeybindTable entries={terminalKeybinds} />
|
||||
</div>
|
||||
<div>
|
||||
<h3>Commands</h3>
|
||||
<dl class="commands">
|
||||
{#each visibleCommands as command (command.name)}
|
||||
<dt>{command.usage ?? command.name}</dt>
|
||||
<dd>{command.description}</dd>
|
||||
{/each}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Image viewer" id="viewer">
|
||||
<KeybindTable entries={imageViewerKeybinds} />
|
||||
<p class="muted hint"><Icon icon="mdi:gesture-pinch" width="16" /> Scroll or pinch to zoom, drag to pan and swipe to change images.</p>
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin: -0.75rem 0 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--orange);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.commands {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 0.4rem 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.commands dt {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.commands dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@container (max-width: 700px) {
|
||||
.columns {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.commands {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.commands dd {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user