protium

Posted on May 25, 2022 • Edited on May 31, 2022

My profile website is now a terminal

#blogging #javascript #terminal #xtermjs

When I was younger I used to think that my profile website would be a really cool, fully featured website, with shiny colors and animations; built with the latest cutting edge frontend technology...
Turns out that the older I get, the more I prefer a simple terminal. No UI, just text and commands.

The last time I updated my profile website, it looked like this:

It was already pretty minimalistic, right? But not enough. Now my profile website is just a terminal:

Let's see how this was possible.

A pragmatic approach

A few days ago I was shaping this idea on my head and found this cool library: xterms. It's been used by a lot of apps, VS Code being among them. I decided to give it a try to see how complex could it be, so I headed to the docs and started adding the code to my website. As you can see the docs are pretty good, they are surely autogenerated from TS docs but this is good because it means the code itself is well documented.

Before starting coding I set a few requirements:

I don't want to use npm modules. I want my website source to be simple and minimal
I want to make use of javascript modules which are supported by all (relevant) browsers
The terminal commands should be abstract to allow me to remove or add commands at will with a few changes

Then, how do I install xtermjs without using npm? The solution is simple, I host the files. I extracted the files from the npm packages with this command



npm v xterm dist.tarball | xargs curl | tar -xz

and moved package/lib/xterm.js into app/

To use javascript modules, I just needed to import the main.js file as module



<script type="module" src="/app/main.js"></script>

Terminal Commands

Although not using typescript let's say that the terminal commands implement the following interface



interface Command {
  id: string;
  description: string;
  usage: string;
  args: number;
  run: (terminal: Terminal) => Promise<void>;
}

Then we need a command runner that will parse the user input



interface CommandRunner {
    (term: Terminal, userInput: string) => Promise<boolean>;
}

The runner will return false if a command was not found.
Let's now define 1 command:



const lsCommand =   {
  id: "ls",
  description: 'list files',
  usage: '[usage]: ls filename'
  args: 0,
  async run(term, args) {
    for (const file of files) {
      term.write(file.name + '\t\t');
    }
  },
};

Now that we shaped the command, we can think of handling user input.

Terminal basic functionality

The terminal should support:

It should show a prompt
ctrl + l: should clear the terminal
ctrl + c: should send a SIGINT
enter: should run a command from the current user input

The terminal should also handle common errors:

command not found
command with wrong arguments

With this in mind we can start handling the user input.

xterm provides a onKey event which receives a handler function ({ key, domEvent }) => void, so we receive an event per each key press done by the user. This means that we need to track the user input and add each key as a char. When the user presses enter we should evaluate the input we have so far. Pretty straigt forward



let userInput = '';
if (ev.keyCode == 13) {
  await runCommand(term, userInput);
  userInput = '';
  prompt(term);
} else {
  term.write(key);
  userInput += key;
}

NOTE: xterm doesn't render the user input, so we need to do it when it makes sense (not enter, not an arrow key, etc)

Handling the clear-screen can be implemented as



if (ev.ctrlKey && ev.key === 'l') {
  term.clear();
  return;
}

and the SIGINT



if (ev.ctrlKey && ev.key === 'c') {
  prompt(term);
  userInput = '';
  return;
}

At this point we have a pretty basic working terminal, so let's add some more commands

Basic commands

What are the most known commands? For my terminal I want to be able to use cat, ls, rm, exit. But remember that this terminal is actually my profile website, so they should make sense in that context. So I decided the terminal should have a file system, where files are shaped like



interface File {
  name: string;
  content: string;
}

Example



const files = [{ name: "about.md", content: "once upon a time"}];

With this in mind, cat will print the file content, ls will print each file's name and rm will delete the file from the array.

For the exit command we can just close the window from javascript: window.close().

Going further

I have decided that I wanted to have a file named blog.md which should contain my last 5 posts.
To fetch this info, I used the RSS feed xml file generated by hugo for my blog. All I need to do is to fetch the file, parse the xml document and get the title and links of each post:



export async function fecthLastPosts() {
  const res = await fetch('/blog/index.xml');
  const text = await res.text();
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(text,"text/xml");
  const posts = xmlDoc.getElementsByTagName('item');
  const lastPosts = [];
  for (let i = 0; i < 5; i++) {
    const title = posts[i].getElementsByTagName('title')[0].childNodes[0].nodeValue;
    const link = posts[i].getElementsByTagName('link')[0].childNodes[0].nodeValue;
    lastPosts.push(title + `\r\n${link}\r\n`);
  }

  files[0].content = lastPosts.join('\n');
}

Now cat blog.md prints my last 5 posts, and thanks to the web link addon of xterm each link is clickeable. Noice.
But why stopping here? Every hackerman terminal should have a whoami command. So this command will just print information about my self.

Also, cool web apps contain photos of cats, so I decided to write a randc command what will open a random photo of a cat.
For this I found this amazing rest API



  {
    id: "randc",
    description: 'get a random cat photo',
    args: 0,
    async run(term, args) {
      term.writeln('getting a cato...');
      const res = await fetch('https://cataas.com/cat?json=true');
      if (!res.ok) {
        term.writeln(`[error] no catos today :( -- ${res.statusText}`));
      }  else {
        const { url } = await res.json();
        term.writeln(colorize(TermColors.Green, 'opening cato...'));
        await sleep(1000);
        window.open('https://cataas.com' + url);
      }
    },
  },

The result:

I think this should do it for a profile terminal. I'm very satisfied with the simplicity of it and the commands I have implemented.
I'll problaly add more commands in the future and also implement streams , just for fun.

What command would you add to your profile terminal?
Go have some fun with it: https://protiumx.dev

Update:

I have refactored the project structure to improve readability and make it more generic.
It also loads your command history from the local storage. All the changes can be seen here: https://github.com/protiumx/protiumx.github.io/pull/1

Update 2:

rm supports glob pattern

Update 3:

added man command
added uname command

Top comments (59)

Peter Benjamin (they/them) • May 25 '22

What command would you add to your profile terminal?

First thing I tried was vim .

Then I tried sudo apt update && sudo apt install -y vim.

Therefore, I am requesting these features so I can do remote development on your website 😅

protium • May 25 '22

well, it is possible to use the cloud9 editor with vim bindings 🤔
ace.c9.io/build/kitchen-sink.html

Real AI • Sep 27 '22

sudo emerge vim

Rajesh Royal • May 26 '22

🤣

oatw • May 26 '22 • Edited

Nice!

What command would you add to your profile terminal?

rm -rf /*

😅

protium • May 26 '22 • Edited

Now it supports glob patterns (without flags) 💪🏼
github.com/protiumx/protiumx.githu...

jzombie • May 26 '22

Hey, nice looking terminal. I did something similar recently, and happened to notice on your terminal the backspace doesn't work if you've gone beyond one line. I accomplished that with using a span tag for the line text, with the blinking cursor concatenated on the end. The actual input being hidden.

You can check out the version I built at: reshell.org/dr-reshell

protium • May 26 '22

Nice catch!
I fixed it here github.com/protiumx/protiumx.githu...

Also reshell looks really cool!

jzombie • May 26 '22

Thanks!

Mario Sanchez Carrion • May 31 '22

Awesome idea! My personal website is pretty minimal, but this is definitely taking things to the next level.

Intuitively, my first command was "ls", and it worked. Then I tried "nano" to open the files. When that didn't work I tried "cat" and it worked fine (also pretty intuitive).

Where I had more trouble is trying to open the resume.pdf file, since cat doesn't recognize the pdf format. I then tried "open" just for the sake of it and it gave me a list of arguments, including resume (without the extension), so "open resume" did work. To make it more intuitive perhaps one upgrade could be allowing the opening of files using the extension (.md or .pdf).

Really great project!

protium • May 31 '22

That's a good idea actually, I added it, it should be live now
Thank you for your comment!

Ethan Azariah • Jun 3 '22

You could make randc display the images in-line as the w3m browser used to do with X11 xterm in the early 00s. :)

As someone who started using Linux in 1998 and has used a variety of command-line systems before and since, I find your command set interesting. :) If I hadn't known about the help command, it would have been the second thing I tried after repeated attempts at tab completion and maybe ls /bin too. (I'm sure even older Unix users would have been slightly disturbed by my use of tab completion. :p ) But help is a good command. I had to laugh when you declared your command list to be intuitive when the command to list file contents is called cat! ;) It certainly is intuitive for people familiar with the Unix command line and I can understand wanting to exclude others for certain purposes, but I lived through the era where everyone was talking about intuitive interfaces and so I had to laugh. :D

On a practical note, I see you mention glob patterns but cat doesn't support them. I used DOS heavily in the 90s and I use PowerShell a bit now, and I can tell you that inconsistencies in how different commands parse their command lines can be really uncomfortable. Unix systems have the shell handle pattern expansion, so it's always consistent. After years of DOS, I found that to be a relief. But why do I want cat to take patterns? I find typing unfamiliar words accurately to be hard, so whenever I'm stuck without tab completion, I use patterns. It's become a habit because sometimes, patterns are quicker.

This might be a bug:
In Firefox, open blog.md opens a complicated XML file with no style information. Browser info; (thanks for the handy command):
anonymous@protiumx.dev:~$ uname
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Outside the terminal, I'm sorry to say I find the blog pages hard to read. My eyes don't adjust well to low contrast, and when I try to read it anyway, I get unpleasantly dazzled by brighter bits. I had the same problem with DOS in the 90s; it's a good thing I never had to use it for work. In Linux, when I had too little disk space for both Emacs and X Windows, I chose X Windows because it had a configurable xterm. In both DOS and Linux, there were a lot of programs I just didn't use because I couldn't make their displays comfortable. But on the web in recent years, I used to use a contrast enhancer but the only good one of those turned out to include some really nasty spyware. I should look again to see if others have got good.

protium • Jun 4 '22

Thank you for the insightful comment!
My bad, I forgot that the blog.md file is actually “virtual”, parsed from the RSS feed. I will add a fix later.

Tab autocomplete shouldn’t be difficult to implement, I might take a look as well.
Cheers!

Rajesh Royal • May 26 '22

tip: - if you are using ad blockers you may not see the terminal text. You may need to open it in incognito.

protium • May 26 '22

which add blocker? I didn’t experience the same

Rajesh Royal • May 26 '22

Ghostry, Popup blocker, YouTube ad blocker, and Ad Blocker [hand sign logo] these three.

protium • May 26 '22

Interesting. I only use uBlock. I guess the popup blocker will block the command randc or open since it opens a new tab/window

Christian Kozalla • May 26 '22

I experienced this differently. I'm using brave both on my phone and laptop. On my laptop everything was working fine, but on mobile I could see my own text input and command output

PhyberApex • May 27 '22 • Edited

First of all great work. Looks really nice! What I don't like is your advocating for throwing away npm. While I do get the appeal of simplicity you should not forget the features you get from using a packet manager for third party libraries. One being handling of updates. As it is right now you will have to "know" that there is an update for the library you are using. Any updates (even security related ones) you are in danger of missing and thus maybe allowing malicious actors to attack your site. While I think the actual risk here is minimal I really don't want this not to be mentioned as third party libraries and dependency management are one of the top security issues we face today in applications security.

Nonetheless awesome idea :D

~Cheers

protium • May 27 '22

That's is a fair point!
I based my decision on:

locking the version of xterm I'm using
no CI/CD planned
simplicity also means less maintenance
the script doesn't interact with external services (checked the source) so I'm not risking visitors to be tracked

I'll surely setup typescript and yarn if the project grows. For now it has been super fun to do it, just vanilla js and html

Gonzalo HQ063 • May 28 '22

Nice idea, however non tech people might never even realize they can write help to get a list of available commands and might quit without being able to do any interaction.
I would add some legend on terminal welcome message.

Also, open resume opens a 404 page on protiumx.dev/resume.pdf

protium • May 29 '22 • Edited

I actually made it for tech people and recruiters only, since it has mostly data about my work experience or blog posts.
Thanks for the catch! I moved that file and forgot to update the url