Initial astro commit

2023-12-11 23:41:48 +01:00
commit 4671378238
81 changed files with 18248 additions and 0 deletions
@@ -0,0 +1,104 @@
+---
+title: Infoscreen
+description: "I had a screen left over and hooked a Raspberry Pi to it. Then I created a webpage that fetches and shows various information. Currently it includes time, weather, calendar, departures and more."
+descriptionShort: Screen that shows various information.
+repository: "https://git.c0ntroller.de/c0ntroller/infoscreen"
+published: 2022-06-13T13:07:27.205Z
+---
+import { Image } from "astro:assets";
+import screenshot from "./data_infoscreen/screenshot.jpg";
+
+# Infoscreen
+
+This document is about a screen that shows information.
+Shocking, I know.
+
+## Screenshot
+
+<Image src={screenshot} alt="Screenshot of the Infoscreen" />
+
+I obfuscated a few things to protect my personal information.
+
+## How it Started
+
+A few years ago I bought a new monitor for my PC.
+That left me with a monitor I could use for anything I want.
+
+So I decided to hook a Raspberry Pi to it and show some useful information like weather, calendar, and news.
+The monitor then was placed in the kitchen.
+
+## History
+### The First Implementation
+
+The first implementation for this was using vanilla JS (and of course HTML and CSS).
+Even though I had not had too much experience in JS, I tried to use "good" software development practices, like class inheritance and [ES-Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).<br/>
+I hosted it, using the default [PHP HTTP-Server](https://www.php.net/manual/en/features.commandline.webserver.php) locally and opened a Chromium browser on localhost.
+
+If you are interested in the code, [here](https://github.com/C0ntroller/infoscreen-old) is the repository of the second version, which uses most of the code from version one.
+
+### Phase Two
+
+The second version of this project basically took all the code from the first version and bundle it as an Electron App.
+I hoped that the performance would be increased by not using _the whole_ Chromium bloat.
+It (well, who would have guessed) didn't.<br/>
+The old code is still up, so if you're interested you can find it [in this repository](https://github.com/C0ntroller/infoscreen-old).
+
+### Phase Three
+
+When I started to learn React more, I realized that what I tried to achieve in the prior versions are just React components.
+I rewrote what I had using React.
+But I also had already learned about frameworks for React that provide static site generation like [Next.JS](https://nextjs.org/) and [Gatsby](https://www.gatsbyjs.com/).<br/>
+Gatsby looked like a good choice so I just went for it.
+
+It gets hosted in a Docker container on my own home server and the Pi just opens up a Chromium again.
+
+This marks the end of the development history.
+
+## So what's on the Screen?
+
+Currently, the following info is shown:
+
+- Time
+- Weather and weather map
+- two RSS news feeds
+- a Google calendar
+- departures on the nearest tram station
+- Spotify or info from my plant sensors
+
+Also, the background image is cycled through 20-ish images.
+
+When it's getting late, a dark mode gets activated and the weather map is replaced by I cute gif of a sleeping Pikachu.
+
+### Weather
+
+For the weather, I used the [DarkSky API](https://darksky.net/).
+Because Apple bought it and (of course) shut down the public API I had to switch to [Pirate Weather](https://pirateweather.net/). +
+Sadly the data from Pirate Weather seems to not be accurate most times.
+In the future, I probably want to switch to another API.
+
+### RSS News
+
+For news, I use the RSS feed of the [Tagesschau](https://www.tagesschau.de/), one of the earliest and biggest news channels in Germany.
+I also put in a few topics from [Der Postillon](https://www.der-postillon.com/) a German satire news page. 
+It's available in [English too](https://www.the-postillon.com/).
+
+### Google Calendar
+
+It uses the [Google Calendar API](https://developers.google.com/calendar) and orders the event by a day.
+
+### Departures
+
+My local public transport company has an API available to fetch data for the stations.
+It's quite simple to use actually!
+
+### Spotify
+
+This part shows which song is currently playing in the kitchen.
+How it works is a project in itself.
+A write-up will follow later.
+
+If nothing is playing, information about a few plant sensors is shown.
+
+### Plants
+
+This just fetches and shows the current status of the plant sensors from my [Home Assistant](https://www.home-assistant.io/).
@@ -0,0 +1,79 @@
+---
+title: Overleaf Git Sync
+description: "Overleaf is a LaTeX editor for the web and honestly great to use. But there is no way to back up your project to a cloud drive or git without paying them money. Even the self-hosted community version has no such functionality. I decided that's BS and made my own script to sync a project to git."
+descriptionShort: "I created a script that pushes Overleaf projects to a git remote."
+repository: "https://git.c0ntroller.de/c0ntroller/overleaf-git-sync"
+published: 2022-10-18T17:56:27+02:00
+---
+
+# Overleaf Sync with Git
+
+## The Problem
+
+When I was writing some important stuff for uni I wanted as many backups as possible. 
+Because what would I do if a hard drive breaks?
+Or what if I lose my laptop?
+
+I wanted to use LaTeX for writing and I decided, the best way to have it in a central location where I have access from all my devices would be a self-hosted instance of [Overleaf](https://overleaf.com/).
+Because it is only an editor for the web and uses project directories and files means there should be an easy way to back it up, right?
+
+Wrong!
+Not only is there no way to sync your projects to any cloud storage or git in the self-hosted community version.
+But there _is_ a way for it in the central version hosted by them.
+But **only if you pay them**.
+
+And it's not like it's just a cheap little SaaS.
+Even for students, it's 70€/year!
+This is just major BS.
+
+There has to be a way to do this myself.
+
+## Where is my data?
+
+After setting up the container stack for Overleaf I just created a small default project.
+
+And now the files are somewhere stored on the disk so I can just copy them from there and work with them, right?
+
+Wrong again.
+Some files get stored on disk - but only images.
+I would suspect they just pipe all the TeX stuff into the MongoDB the service uses.
+
+Well, that didn't work.
+
+Do they have an API?
+If they do, it's not documented at all.
+But using the browser Dev-Tools it seems like they indeed have some API routes.
+Also [their repo includes a `router.js`](https://github.com/overleaf/overleaf/blob/main/services/web/app/src/router.js).
+But how to use them?
+
+## Access granted
+
+I noticed the front end uses session IDs for user authentication.
+You get an ID, you POST valid credentials (and a CSRF token) to `/login` and your session ID get's "verified".
+
+Using their repository, it was easy to find other routes that are useable.
+But I only needed one: downloading the whole project.
+
+That was easy because after login you can use the same route the browser uses: `/project/{id}/download/zip`
+
+Using a simple Python script I was able to make these calls with no problems.
+
+## What to do with the zip?
+
+Because I think it's unintuitive to run git commands in the Python `subprocess` library, I just wrote a bash script.
+Not only one but two.
+
+The first script prepares the git folder.
+It clones the repository where we want to put our stuff and switches to the branch we want to use.
+Then the zip file we downloaded earlier is unpacked in this folder.
+
+The second bash script creates a git commit and pushes the changes to remote. 
+
+## Improvements for the Future
+
+Everything was put together in a really short time, so I guess it's fairly flawed.
+A few flaws I will maybe fix someday:
+
+- Use environment variables or a `.env` file instead of a Python dictionary for settings
+- Include other sync methods, like just extracting the zip in any directory so you can put it in your Drive/Dropbox/whatever
+- (Probably never implemented) Implement login using OAuth
@@ -0,0 +1,42 @@
+---
+title: Photo Sync
+description: "Giving random apps access to your Google Photos can be bad. To still use an album as screensaver etc. I wrote this script. It syncs all your photos to your drive while giving you maximum privacy."
+descriptionShort: "A script that syncs a Google Photos album to your drive."
+repository: https://git.c0ntroller.de/c0ntroller/google-photo-album-sync
+published: 2022-08-08T12:19:20+02:00
+---
+
+# Google Photo Sync
+
+Why give up privacy for a screensaver?
+
+## Storytime
+
+I recently got a new NVidia Shield with Android TV and after setting everything up I wanted to add a screen saver.
+There are tons of them and some of them even can take a Google Photo album and make your TV a digital picture frame.
+
+I thought it would be great because I already use Google Photos for sharing albums with other people.
+
+So I tried to log in. 
+
+And I didn't do it.
+
+The screensaver app did not only need access to my photos.
+It also wanted my personal details, email address, contact list, and other details.
+This was unacceptable.
+
+Then I thought about it: These apps normally can use images stored on the device or a connected drive.
+My NAS is already connected to the Shield so...
+
+## The Solution
+
+I already had some experience with the Google API from projects like the [Infoscreen](/blog/projects/infoscreen) and the [Simple Callback Server](/blog/projects/simple-cb).
+
+I decided to make it easier for users who are not familiar with the API, so I created a CLI to set everything up.
+
+I think the `README` is pretty good so no need to explain the setup process.
+
+## What's left
+
+My detection for images with similar names is bad (but it works and I can only think of one edge case where it doesn't).
+I could use MD5s to make it better.
@@ -0,0 +1,31 @@
+---
+title: Simple Callback Server
+description: "Most times when using OAuth2 on an API like Google or Spotify I just need the refresh token on setup. To get the initial tokens and the refresh token it is necessary to have a server that prints the POST body. This application does this."
+descriptionShort: "A simple callback server for OAuth2 applications."
+repository: "https://git.c0ntroller.de/c0ntroller/simple-callback-server"
+published: 2022-10-18T17:56:27+02:00
+---
+
+# Simple Callback Server
+
+This is probably my simplest project.
+
+## What is this?
+
+It's the simplest thing you could imagine: An `express` server that prints out all headers and the body or all query parameters.
+Still, I needed it sometimes and I didn't want to rewrite it every time I use it.
+
+## What can it be used for?
+
+When creating a dev application on Google, Spotify, or other services you often have some heavy authentication flow to get access.
+But normally I want to use the API for private projects and it's _my_ account that gets authenticated every time.
+
+To make reauthentication easier these OAuth protocols often provide a "refresh token" which can be used to get a valid new token.
+
+To get the initial authentication token and to get such a refresh token you provide a callback address where you get redirected after the user logs in.
+The tokens and meta information normally are sent in a `POST` body.
+And this is where this small application is necessary.
+
+## This sounds overly complicated
+
+It is. But this is necessary for OAuth2 to be safe.
@@ -0,0 +1,91 @@
+---
+title: Terminal
+description: "This is part of my homepage. What you see on the page resembles an CLI. You just type in commands and some output is shown or it does something on the website. To find out which commands are available, you can just type help. Everything is always in development. So if you come back in a few days/weeks/months/years something could have been changed! You can also check out the dev version if you haven't already. Have fun!"
+descriptionShort: "The terminal on my website."
+repository: https://git.c0ntroller.de/c0ntroller/frontpage
+published: 2022-10-18T17:56:27+02:00
+---
+
+# Terminal
+
+Hello and welcome to my website. This documentation is for the [cli on my website](https://c0ntroller.de/terminal) 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](https://nextjs.org/), which is a JavaScript framework.
+So the entire backend is in [Node.js](https://nodejs.org/).
+The project files are written in ~~[AsciiDoc](https://projects.eclipse.org/projects/asciidoc.asciidoc-lang)~~ [MDX](https://mdxjs.com/).
+
+Hosting the webserver is done in a [Docker](https://www.docker.com/) 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](https://www.drone.io/) 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](https://asciidoctor.org/) 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](https://json-schema.org/) 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 |
+|-----|--------|
+| <kbd>Tab</kbd> | Inserts the current suggestions from autocompletion. |
+| <kbd>&#9650;</kbd> / <kbd>&#9660;</kbd> | Scroll through last commands. |
+| <kbd>Ctrl</kbd>+<kbd>L</kbd> | Clears the history. Similar to `clear`. |
+| <kbd>Ctrl</kbd>+<kbd>D</kbd> | Exits the page. If that doesn't work ([JavaScript restriction](https://developer.mozilla.org/en-US/docs/Web/API/Window/close)) it goes back in page history. Similar to `exit`. |
+| <kbd>Ctrl</kbd>+<kbd>U</kbd>/<kbd>Ctrl</kbd>+<kbd>C</kbd> | Removes the current input. |
+| <kbd>Esc</kbd> | Close the dialog modal. |
+
+## 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.).
+
+<div class="notCompiling">
+```rust
+// This is how a faulty code block looks like
+fn main() {
+  let x = 5;
+  x = 6;
+}
+```
+</div>
@@ -0,0 +1,29 @@
+---
+title: TUfast TUD
+description: "TUfast is a browser extension that is used by multiple thousand users of the TU Dresden. It provides autologin to the most used portals, shortcuts, redirects, and more. I'm one of the developers."
+descriptionShort: "TUfast is a browser extension that is used by multiple thousand users of the TU Dresden."
+repository: https://github.com/TUfast-TUD/TUfast_TUD
+relatedWebsite: https://tu-fast.de/
+published: 2022-06-23T12:53:07.207Z
+---
+
+# TUfast
+
+My work on a browser extension that is used by multiple thousand students.
+
+## What is TUfast?
+TUfast is a browser extension made by some students of the TU Dresden.
+The main feature is the injection of username and password on various login pages of portals of the TU. +
+Other features are shortcuts, redirects from search engines, enhancement and more. +
+It has multiple thousand users.
+
+The project is open source and [hosted on Github](https://github.com/TUfast-TUD/TUfast_TUD).
+
+## What did I do?
+I am one of the first and one of the main contributors of the project.
+At the time of writing this I rewrote the whole backend in TypeScript and prepared it to shift to the [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/).
+
+## More information
+
+- [Repository](https://github.com/TUfast-TUD/TUfast_TUD)
+- [Website](https://tu-fast.de/)