--- /** * Keyboard — a full Mac-style mechanical keypad. Every row and key cap is * server-rendered from the `ROWS` / `MODIFIER_ROW` data below (see * KeyboardKey.astro for the shared cap markup) — nothing is built * client-side. * * A single custom element (`nular-keyboard`) handles the interactive part: * it toggles a `.is-pressed` class on mouse press/release and on matching * physical keydown/keyup (gated to while the component is in view), plays a * synthesized mechanical click through WebAudio, and — when `showPreview` * is on — pops a label for the last key pressed above the keypad. * * No audio file is shipped or fetched. The original streamed sliced * samples from a hosted `/sounds/sound.ogg`; this port instead synthesizes * a short filtered noise burst per keystroke (see the client script). */ import KeyboardKey from './KeyboardKey.astro'; interface Props { /** Play a synthesized mechanical click on press/release. */ sound?: boolean; /** Show a pop-up label for the last key pressed above the keypad. */ showPreview?: boolean; /** Additional classes for the root element. */ class?: string; } const { sound = true, showPreview = false, class: className } = Astro.props; // Mirrors KeyboardKey.astro's exported `KeyContent`/`KeyIconName` shape // (duplicated, not imported, so this file's data literals typecheck without // relying on cross-`.astro`-file type imports). type KeyIconName = | 'brightness-down' | 'brightness-up' | 'grid' | 'search' | 'mic' | 'moon' | 'rewind' | 'skip-forward' | 'fast-forward' | 'volume-mute' | 'volume-low' | 'volume-high' | 'chevron-up' | 'globe' | 'command' | 'option' | 'caret-left' | 'caret-right' | 'caret-up' | 'caret-down'; type KeyContent = | { kind: 'text'; lines: string[] } | { kind: 'icon'; icon: KeyIconName; label: string } | { kind: 'icon-only'; icon: KeyIconName } | { kind: 'modifier'; icon?: KeyIconName; label: string; order?: 'icon-first' | 'label-first' } | { kind: 'led' } | { kind: 'blank' }; interface RowItem { code?: string; content: KeyContent; width?: string; height?: string; align?: 'start' | 'end'; corner?: 'tl' | 'tr' | 'bl' | 'br'; ariaLabel?: string; } const letterRow = (letters: string[]): RowItem[] => letters.map((letter) => ({ code: `Key${letter}`, content: { kind: 'text' as const, lines: [letter] }, })); const FUNCTION_ROW: RowItem[] = [ { code: 'Escape', content: { kind: 'text', lines: ['esc'] }, align: 'start', width: '2.5rem', corner: 'tl' }, { code: 'F1', content: { kind: 'icon', icon: 'brightness-down', label: 'F1' } }, { code: 'F2', content: { kind: 'icon', icon: 'brightness-up', label: 'F2' } }, { code: 'F3', content: { kind: 'icon', icon: 'grid', label: 'F3' } }, { code: 'F4', content: { kind: 'icon', icon: 'search', label: 'F4' } }, { code: 'F5', content: { kind: 'icon', icon: 'mic', label: 'F5' } }, { code: 'F6', content: { kind: 'icon', icon: 'moon', label: 'F6' } }, { code: 'F7', content: { kind: 'icon', icon: 'rewind', label: 'F7' } }, { code: 'F8', content: { kind: 'icon', icon: 'skip-forward', label: 'F8' } }, { code: 'F9', content: { kind: 'icon', icon: 'fast-forward', label: 'F9' } }, { code: 'F10', content: { kind: 'icon', icon: 'volume-mute', label: 'F10' } }, { code: 'F11', content: { kind: 'icon', icon: 'volume-low', label: 'F11' } }, { code: 'F12', content: { kind: 'icon', icon: 'volume-high', label: 'F12' } }, { content: { kind: 'led' }, corner: 'tr' }, ]; const NUMBER_ROW: RowItem[] = [ { code: 'Backquote', content: { kind: 'text', lines: ['~', '`'] } }, { code: 'Digit1', content: { kind: 'text', lines: ['!', '1'] } }, { code: 'Digit2', content: { kind: 'text', lines: ['@', '2'] } }, { code: 'Digit3', content: { kind: 'text', lines: ['#', '3'] } }, { code: 'Digit4', content: { kind: 'text', lines: ['$', '4'] } }, { code: 'Digit5', content: { kind: 'text', lines: ['%', '5'] } }, { code: 'Digit6', content: { kind: 'text', lines: ['^', '6'] } }, { code: 'Digit7', content: { kind: 'text', lines: ['&', '7'] } }, { code: 'Digit8', content: { kind: 'text', lines: ['*', '8'] } }, { code: 'Digit9', content: { kind: 'text', lines: ['(', '9'] } }, { code: 'Digit0', content: { kind: 'text', lines: [')', '0'] } }, { code: 'Minus', content: { kind: 'text', lines: ['—', '_'] } }, { code: 'Equal', content: { kind: 'text', lines: ['+', '='] } }, { code: 'Backspace', content: { kind: 'text', lines: ['delete'] }, align: 'end', width: '2.5rem' }, ]; const QWERTY_ROW: RowItem[] = [ { code: 'Tab', content: { kind: 'text', lines: ['tab'] }, align: 'start', width: '2.5rem' }, ...letterRow(['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P']), { code: 'BracketLeft', content: { kind: 'text', lines: ['{', '['] } }, { code: 'BracketRight', content: { kind: 'text', lines: ['}', ']'] } }, { code: 'Backslash', content: { kind: 'text', lines: ['|', '\\'] } }, ]; const HOME_ROW: RowItem[] = [ { code: 'CapsLock', content: { kind: 'text', lines: ['caps lock'] }, align: 'start', width: '2.8rem' }, ...letterRow(['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L']), { code: 'Semicolon', content: { kind: 'text', lines: [':', ';'] } }, { code: 'Quote', content: { kind: 'text', lines: ['"', "'"] } }, { code: 'Enter', content: { kind: 'text', lines: ['return'] }, align: 'end', width: '2.85rem' }, ]; const BOTTOM_ROW: RowItem[] = [ { code: 'ShiftLeft', content: { kind: 'text', lines: ['shift'] }, align: 'start', width: '3.65rem' }, ...letterRow(['Z', 'X', 'C', 'V', 'B', 'N', 'M']), { code: 'Comma', content: { kind: 'text', lines: ['<', ','] } }, { code: 'Period', content: { kind: 'text', lines: ['>', '.'] } }, { code: 'Slash', content: { kind: 'text', lines: ['?', '/'] } }, { code: 'ShiftRight', content: { kind: 'text', lines: ['shift'] }, align: 'end', width: '3.65rem' }, ]; const MODIFIER_ROW: RowItem[] = [ { code: 'Fn', content: { kind: 'modifier', icon: 'globe', label: 'fn', order: 'label-first' }, corner: 'bl' }, { code: 'ControlLeft', content: { kind: 'modifier', icon: 'chevron-up', label: 'control' } }, { code: 'AltLeft', content: { kind: 'modifier', icon: 'option', label: 'option' } }, { code: 'MetaLeft', content: { kind: 'modifier', icon: 'command', label: 'command' }, width: '2rem' }, { code: 'Space', content: { kind: 'blank' }, width: '8.2rem', ariaLabel: 'Space' }, { code: 'MetaRight', content: { kind: 'modifier', icon: 'command', label: 'command' }, width: '2rem' }, { code: 'AltRight', content: { kind: 'modifier', icon: 'option', label: 'option' } }, ]; const ARROW_LEFT: RowItem = { code: 'ArrowLeft', content: { kind: 'icon-only', icon: 'caret-left' }, width: '1.5rem', height: '1.5rem', ariaLabel: 'Left arrow', }; const ARROW_UP: RowItem = { code: 'ArrowUp', content: { kind: 'icon-only', icon: 'caret-up' }, width: '1.5rem', height: '0.75rem', ariaLabel: 'Up arrow', }; const ARROW_DOWN: RowItem = { code: 'ArrowDown', content: { kind: 'icon-only', icon: 'caret-down' }, width: '1.5rem', height: '0.75rem', ariaLabel: 'Down arrow', }; const ARROW_RIGHT: RowItem = { code: 'ArrowRight', content: { kind: 'icon-only', icon: 'caret-right' }, width: '1.5rem', height: '1.5rem', corner: 'br', ariaLabel: 'Right arrow', }; const ROWS: RowItem[][] = [FUNCTION_ROW, NUMBER_ROW, QWERTY_ROW, HOME_ROW, BOTTOM_ROW]; ---

{ showPreview && ( ) }

{ ROWS.map((row) => (

{row.map((item) => ( ))}

)) }

{ MODIFIER_ROW.map((item) => ( )) }

Installation

Install dependencies

Add these files

Configuration

Use it