frontpage-content/projects/homepage.adoc

87 lines
3.6 KiB
Plaintext
Raw Normal View History

2022-02-04 23:31:19 +01:00
:experimental:
2022-02-06 16:40:16 +01:00
:docdatetime: 2022-02-06T15:39:44.973Z
2022-02-04 23:31:19 +01:00
= c0ntroller.de
Hello and welcome to my website.
== 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.
==== 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.
==== 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
== Shortcuts
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.
|kbd:[Strg+L]
|Clears the history. +
Similar to `clear`.
|kbd:[Strg+D]
|Exits the page. Don't work in (most?) cases because of a https://developer.mozilla.org/en-US/docs/Web/API/Window/close[JavaScript restriction]. +
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
- Every line in the history window is parsed in a custom format.
* `%{command}` is parsed to a clickable command
* `#{link text|url}` is parsed to a link
2022-07-30 18:15:35 +02:00
- Project logs are loaded dynamicly. They can be updated at any time.
- There are lots of eastereggs. Some are for specfic people, some for me and some for fun.