frontpage-content/projects/terminal.adoc

103 lines
4.3 KiB
Plaintext
Raw Normal View History

2022-02-04 23:31:19 +01:00
:experimental:
2022-10-18 17:56:26 +02:00
:docdatetime: 2022-10-18T17:56:27+02:00
2022-02-04 23:31:19 +01:00
2022-10-18 17:56:26 +02:00
= Terminal
2022-02-04 23:31:19 +01:00
2022-11-15 15:25:42 +01:00
Hello and welcome to my website. This documentation is for the https://c0ntroller.de/terminal[cli on my website] so check it out if you haven't!
2022-02-04 23:31:19 +01:00
== 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
2022-02-04 23:56:09 +01:00
This website is entirely built in https://nextjs.org/[Next.js], which is a JavaScript framework.
2022-02-04 23:31:19 +01:00
So the entire backend is in https://nodejs.org/[Node.js].
The project files are written in https://projects.eclipse.org/projects/asciidoc.asciidoc-lang[AsciiDoc].
Hosting the webserver is done in a https://www.docker.com/[Docker] container on my personal server.
=== The Process
==== Thinking About a Website
2022-02-04 23:56:09 +01:00
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.
2022-02-04 23:31:19 +01:00
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.
2022-11-15 15:25:42 +01:00
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.
2022-02-04 23:31:19 +01:00
==== 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. +
2022-11-15 15:25:42 +01:00
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.
2022-02-04 23:31:19 +01:00
==== Autodeployment
I like automatization, so I use a CI/CD pipeline.
I use https://www.drone.io/[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.
2022-07-30 18:02:13 +02:00
The project files are first built with https://asciidoctor.org/[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.
2022-02-04 23:31:19 +01:00
== 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.
2022-07-30 18:02:13 +02:00
[.line-through]#Probably I should start by adding a https://json-schema.org/[JSON schema] for the project list.# Thats done!
2022-02-04 23:31:19 +01:00
2022-11-15 15:25:42 +01:00
== CLI Shortcuts
2022-02-04 23:31:19 +01:00
I talked about shortcuts before, but here's a list of which shortcuts are possible:
[cols="1,4"]
|===
|Key |Effect
|kbd:[Tab]
|Inserts the current suggestions from autocompletion.
|kbd:[▲] / kbd:[▼]
|Scroll through last commands.
2022-10-18 17:56:26 +02:00
|kbd:[Ctrl+L]
2022-02-04 23:31:19 +01:00
|Clears the history. +
Similar to `clear`.
2022-10-18 17:56:26 +02:00
|kbd:[Ctrl+D]
2022-10-29 22:23:38 +02:00
|Exits the page. If that doesn't work (https://developer.mozilla.org/en-US/docs/Web/API/Window/close[JavaScript restriction]) it goes back in page history. +
2022-02-04 23:31:19 +01:00
Similar to `exit`.
|kbd:[Ctrl+U]/ +
kbd:[Ctrl+C]
|Removes the current input.
2022-02-05 23:48:46 +01:00
|kbd:[Esc]
|Close the modal (this text window).
2022-02-04 23:31:19 +01:00
|===
2022-02-06 16:40:16 +01:00
== Some Stuff I'm Proud of
2022-11-15 15:25:42 +01:00
- Every line in the cli history window is parsed in a custom format.
2022-02-06 16:40:16 +01:00
* `%{command}` is parsed to a clickable command
* `#{link text|url}` is parsed to a link
2022-10-18 17:56:26 +02:00
- Project logs are loaded dynamically. They can be updated at any time.
2022-11-15 15:25:42 +01:00
* But they are rendered in the backend. For the main site no JS is necessary!
2022-10-18 17:56:26 +02:00
- There are lots of eastereggs. Some are for specific people, some for me and some for fun.
2022-08-10 17:09:32 +02:00
- I made some custom annotations for code blocks show faulty code (wrong syntax/will not compile/etc.).
[source.notCompiling, rust]
----
// This is how a faulty code block looks like
fn main() {
let x = 5;
x = 6;
}
----