Repository

Terminal

Hello and welcome to my website. This documentation is for the cli on my website so check it out if you haven’t!

Why did I do this?

Mainly because of boredom and because I like to code. Also, a website is a fantastic way to show someone what you are capable of in programming skills.

Now I have my own space to try things out, present what I did and link all my socials.

How did I do this?

Frameworks

This website is entirely built in Next.js, which is a JavaScript framework. So the entire backend is in Node.js. The project files are written in AsciiDoc.

Hosting the webserver is done in a Docker container on my personal server.

The Process

Thinking About a Website

I always wanted my own website. One day, I thought about how cool a website would be, this is basically a console.
It seemed not too hard to make, as it consists of an input field and a log/history.

But I wanted more. I wanted the code to be as modular as possible, so it’s easy in the future to add commands, project logs, and components. Also, I wanted some appealing features like tab completion and shortcuts.

But as it is hard to show a CLI to friends who don’t know computer science or an employer, I decided a "normal" frontend should be added.

Implementing all the Stuff

As you can imagine, it was not easy to implement all the features I had imagined. But I’m pretty confident I’m on the right track now.
The commands are all contained in one file, and one can easily add or remove them, add flags and other attributes and change the function called when the command is requested.
The project files are contained in a separate repository and folder on my server, which is just used as a Docker volume. This means they can be updated without rebuilding the entire project.

After the CLI website was done, it was my main homepage for a few months. Then that I created the "normal" part which basically is a blog and my portfolio.

Autodeployment

I like automatization, so I use a CI/CD pipeline. I use Drone for this job which is self-hosted too. The Docker container is pushed and pulled in a self-hosted registry, so it should be safe if I ever want to include secrets and private data into the project.

The project files are first built with Asciidoctor to check their validity. Then a script pulls them on the server. As the projects git directory on the server is mounted in the docker container only a quick reload is necessary so the files are available on the server.

The Future

What future features do I want to implement?
I don’t know.

It will probably be like the rest of this website: One day I have a good thought (At least I think it’s good…​) and add an issue or implement it immediately.

Probably I should start by adding a JSON schema for the project list. Thats done!

CLI Shortcuts

I talked about shortcuts before, but here’s a list of which shortcuts are possible:

Key Effect

Tab

Inserts the current suggestions from autocompletion.

▲ / ▼

Scroll through last commands.

Ctrl+L

Clears the history.
Similar to clear.

Ctrl+D

Exits the page. If that doesn’t work (JavaScript restriction) it goes back in page history.
Similar to exit.

Ctrl+U/
Ctrl+C

Removes the current input.

Esc

Close the modal (this text window).

Some Stuff I’m Proud of

  • Every line in the cli history window is parsed in a custom format.

    • %{command} is parsed to a clickable command

    • #{link text|url} is parsed to a link

  • Project logs are loaded dynamically. They can be updated at any time.

    • But they are rendered in the backend. For the main site no JS is necessary!

  • There are lots of eastereggs. Some are for specific people, some for me and some for fun.

  • I made some custom annotations for code blocks show faulty code (wrong syntax/will not compile/etc.).

// This is how a faulty code block looks like
fn main() {
  let x = 5;
  x = 6;
}