Logo

dev-resources.site

for different kinds of informations.

An Old-school CRT terminal with Vitepress?!

Published at
12/11/2023
Categories
vitepress
vue
terminal
retro
Author
koehr
Categories
4 categories in total
vitepress
open
vue
open
terminal
open
retro
open
Author
5 person written this
koehr
open
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.

retro Article's
30 articles in total
Favicon
Cowboy Casino Major Update
Favicon
A Year of Adventuring: 2024 in Review
Favicon
Menu de Game Retrô com Godot4
Favicon
Cowboy Casino Major Update
Favicon
Smoke for pseudo 3d arcade
Favicon
¡BASIC cumple 60 años!
Favicon
Is Retro Bowl Still Worth Playing in 2024?
Favicon
Descansa en Paz, Z80
Favicon
Hackeando en 8 bits (y II)
Favicon
Making a program with Blipsy
Favicon
Exploring GOTO: A Journey into the Prehistory of Programming
Favicon
Hackeando en 8 bits
Favicon
The Best GameBoy Emulators: SameBoy, VisualBoy and More
Favicon
Build a Retro Calculator !!
Favicon
An Old-school CRT terminal with Vitepress?!
Favicon
Is MiniScript a dialect of BASIC?
Favicon
Programando en Turbo Assembler en los 90
Favicon
Cuando tenías un CRT de 17"
Favicon
Writing a NES game, day 8
Favicon
Writing a NES game day 7, chr files
Favicon
DIY Retro Gaming Console: Transform Your Old PC or Laptop Into an Arcade with Batocera Linux
Favicon
Decimal to binary and hexadecimal converter on the Apple ][ - Part 1
Favicon
Je veux des paillettes dans mes rétros ✨
Favicon
PICO-8 Game : Tomato Run
Favicon
Retro Computing is Fun
Favicon
A Brief Introduction to DurexForth for the Commodore 64
Favicon
How to get your Mallsoft .wav files to play for Winamp 🦙 2.9.5 in Windows 98SE
Favicon
Debugging GameBoy Advance (GBA) programs/games in Emacs
Favicon
#JulyOT 26: Let's get personal: Computing - Retro computing with Dave Glover and the Altair 8800
Favicon
Retro BSD Games and other text mode games.

Featured ones: