Building a K Command Palette (and a Fake Terminal) for My Portfolio
Press ⌘K (or Ctrl+K) anywhere on my site and you get a search box that jumps to any page, case study, game, blog post or Dota 2 hero. Press ~ and you get a terminal. Neither is essential. Both are the kind of detail that makes a developer's site feel like it was made by a developer. Here's how they're built, and the few decisions that kept them simple. Logic first, UI second Both features are…
Pressing ⌘K or Ctrl+K on the site brings up a search box that can jump to a variety of pages, including case studies, games, blog posts, or Dota 2 heroes. Similarly, pressing ~ opens a terminal, although it's not a necessity. These features give the developer's site a more personal touch.
The functionality for both features relies mainly on logic, with React used sparingly. They are built using pure functions that take in lists like posts, heroes, and work, and output a flat list of objects containing information like group, label, URL, and keywords. The items are then filtered based on a user's query.
The terminal feature is built using a switch statement with a personality, where commands like help, ls projects, and play chess perform actual actions. Commands like sudo remind the user that simplicity is non-negotiable, and exit works as expected. The terminal also uses the site's dark theme tokens, ensuring it looks consistent without any out-of-place colors.
The terminal's history, tab completion, and clear command are functional, and it records anonymous usage events to track whether users are actually utilizing it. The recorded information includes the command word, unless it's something unknown, in which case it's marked as other. This way, even if someone types a sentence into the terminal, it remains within their browser.
To see these features in action, go to simplecode.ca, press ⌘K and type chess, or press ~ and type help. If you have any suggestions for additional commands, feel free to share.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
