DEV Community

Cover image for An Old-school CRT terminal with Vitepress?!
Norman
Norman

Posted on

An Old-school CRT terminal with Vitepress?!

tl;dr

I created a vitepress theme inspired by crt.no for my new homepage. You can find it on my git server. The easiest way (for now) to use it is to clone the repository and overwrite the content.


My new homepage has a terminal interface! It is not complete, yet, but it boosts some nice features already:

ASCII Art

Page titles are generated with figlet-ts with fully configurable font. The theme comes with all fonts from xero/figlet-fonts, which are downloaded on the fly and can be configured globally or per page (or both!).

Automatic Page Discovery

The theme finds your markdown files and lists them as pages.

Terminal style interface

There are predefined commands like help (list of available commands), ls (list of pages) and go (go to page), but what is even more useful is that additional commands can be defined in the theme configuration! They can have aliases, links and text to show.

A configured command looks like this:

{
  command: 'about',
  aliases: ['info', 'whois'],
  help: 'Show information about the author',
  message: 'Norman Köhring is a programmer, hacker and open source enthusiast from Berlin, Germany.',
  uris: [{
    label: 'Berlin',
    uri: 'https://www.openstreetmap.org/#map=12/52.4595/13.5335',
  }, {
    label: 'Homepage',
    uri: 'https://koehr.ing',
  }]
}
Enter fullscreen mode Exit fullscreen mode

Its execution would look like:

$> about
Norman Köhring is a programmer, hacker and open source enthusiast from Berlin, Germany.
$> |
Enter fullscreen mode Exit fullscreen mode

With links to "Berlin" and "Homepage" showed in the bottom row, which brings us to...

Clickable links in the footer

Every page and command can change the links that are shown in the footer. Because the content is otherwise not interactive, no links are possible in the shown text. To not break the look-and-feel of old crt terminals, links are added to the footer bar.

More features are planned. You can find them and the complete readme on my forge: git.k0r.in/n/k0r.386 or on the github mirror.

Top comments (0)