Very first version of pantosite-astro

This commit is contained in:
Anton Pogrebnjak
2024-12-27 22:05:12 +01:00
parent f82a00b1da
commit f83c6af99b
62 changed files with 1237 additions and 654 deletions

View File

@@ -1,16 +0,0 @@
---
title: 'First post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 08 2022'
heroImage: '/blog-placeholder-3.jpg'
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

View File

@@ -1,214 +0,0 @@
---
title: 'Markdown Style Guide'
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
pubDate: 'Jun 19 2024'
heroImage: '/blog-placeholder-1.jpg'
---
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
## Headings
The following HTML `<h1>``<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
# H1
## H2
### H3
#### H4
##### H5
###### H6
## Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
## Images
### Syntax
```markdown
![Alt text](./full/or/relative/path/of/image)
```
### Output
![blog placeholder](/blog-placeholder-about.jpg)
## Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
### Blockquote without attribution
#### Syntax
```markdown
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.
```
#### Output
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.
### Blockquote with attribution
#### Syntax
```markdown
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
```
#### Output
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
## Tables
### Syntax
```markdown
| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
```
### Output
| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
## Code Blocks
### Syntax
we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash
````markdown
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
````
### Output
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
```
## List Types
### Ordered List
#### Syntax
```markdown
1. First item
2. Second item
3. Third item
```
#### Output
1. First item
2. Second item
3. Third item
### Unordered List
#### Syntax
```markdown
- List item
- Another item
- And another item
```
#### Output
- List item
- Another item
- And another item
### Nested list
#### Syntax
```markdown
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
```
#### Output
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
## Other Elements — abbr, sub, sup, kbd, mark
### Syntax
```markdown
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
```
### Output
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

View File

@@ -1,16 +0,0 @@
---
title: 'Second post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 15 2022'
heroImage: '/blog-placeholder-4.jpg'
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

View File

@@ -1,16 +0,0 @@
---
title: 'Third post'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 22 2022'
heroImage: '/blog-placeholder-2.jpg'
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi.
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi.
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

View File

@@ -1,31 +0,0 @@
---
title: 'Using MDX'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jun 01 2024'
heroImage: '/blog-placeholder-5.jpg'
---
This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.
## Why MDX?
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts.
If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
## Example
Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.
import HeaderLink from '../../components/HeaderLink.astro';
<HeaderLink href="#" onclick="alert('clicked!')">
Embedded component in MDX
</HeaderLink>
## More Links
- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx)
- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages)
- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.

View File

@@ -0,0 +1,78 @@
---
title: Bluelock - Bluetooth Screen Locker
pubDate: 2023-02-15T15:00:00Z
description: A little tool to automatically lock your screen when you leave your desk.
---
[Bluelock](https://github.com/Pantonius/Bluelock) is a little bash script I wrote that automatically locks your linux desktop when you leave your desk and conveniently unlocks it as soon as you get back. It accomplishes this with the bluetooth signal strength to your smartphone, smartwatch or any other device.
## But how does it work?
Bluelock uses bluez and bluez-utils, particularly the 'bluetoothctl' tool to read the *receiver signal strength indicator* (RSSI) of your connection. It is important to point out the last part of that name: **indicator**. It is not an actual metric for the signal strength and varies greatly between chip manufacturarers. But in general, the higher the RSSI, the better the signal strength, with 0 being the optimal value and -100 being the worst.
The script then uses a simple if statement to check if the RSSI is above or below a certain threshold. If it is above, it will lock the screen, if it is below, it will unlock it. If, for any reason, the script is unable to read the RSSI or the bluetooth connection is lost, it will simply do nothing. This is a precaution to prevent the script from perpetually locking your screen if push comes to shove (though it remembers that it locked your screen and will not lock it again until the bluetooth connection is re-established and below the rssi threshold).
Anyhow: To be perfectly honest, this method is not very reliable when it comes to detecting when you are actually moving away from your desk. It is very easy to get a false positive when a lot of bluetooth devices are in the vicinity and/or the bluetooth connection gets flakey.
In later versions I'd like to look into other ways of detecting when you leave your desk.
Even then the goal would still be to keep the whole experience as seemless and accessible as possible. While solutions like using the accelerometer in your smart device would be more reliable, they would also add a level of complexity that would render the whole thing undesirable for most users.
## Setup and Usage
### Setup
First install bluez. On Ubuntu this can be done with the following command:
```bash
sudo apt-get install bluez
```
Then clone the repository and make the script executable:
```bash
git clone www.github.com/Pantonius/Bluelock
cd Bluelock
chmod +x bluelock.sh
```
### Usage
While in the directory, you can also run the script to check if everything is working as expected:
```bash
./bluelock.sh
```
The script helps you out quite a bit here. If you run it without any arguments, it will check if any bluetooth devices are currently connected and if so, it will offer you to use one of those. You may choose one by entering the associated number. Should you decide against it and want to run a search for all available bluetooth devices, you can simply press the <kbd>Enter</kbd> key.
The script will now proceed to search for about two seconds before displaying a list of all available devices. After which you may select one of them by entering its number or press <kbd>Enter</kbd> to search again.
Alternatively, you can just pass the bluetooth address of your device and the RSSI threshold as arguments.
```bash
./bluelock.sh <bluetooth address> <rssi threshold>
```
This way you can automate the process and have it run without any additional input.
## Automating the process
### Run it from anywhere
If you want to be able to run bluelock from anywhere you may do so in a number of ways.
The best one in my humble opinion is making a script directory in which you have symlinks to all of your favourite scripts.
Let's create one in your home directory:
```bash
mkdir ~/scripts
```
Now we can create a symlink to the bluelock script like so, assuming you are in the directory of the cloned repository:
```bash
sudo ln bluelock.sh ~/scripts/bluelock
```
You'll find a file called "bluelock" in the scripts directory which really only is a redirection to the script in the cloned repository. If you were to edit this "bluelock" file, you'd change the original script as well. How neat!
However, what we really wanted to achieve is being able to run the script from anywhere on your system, which this solution doesn't do yet! The last step towards that goal is adding the path of the scripts directory to the [`$PATH` environment variable](/Nice%20To%20Know/PATH%20Environment%20Variable%20on%20Linux).
To do so you can simply edit the `.bashrc` file located in your home directory:
```bash
nano ~/.bashrc
```
And add this line, with your username instead of "pantonius", to the very end of the file:
```bash
$PATH=/home/pantonius/scripts/:$PATH
```
You should now be able to run the `bluelock` command from anywhere on your system!
You are now in a pretty good position to include the `bluelock` command in your own scripts or to automatically run it on startup with a set bluetooth address and rssi threshold.

View File

@@ -0,0 +1,74 @@
---
title: Engagement Wegweiser
pubDate: 2024-12-26T22:00:00Z
description: Engagement Wegweiser
heroImage: /images/posts/engagement-wegweiser/homepage.png
---
The [Engagement Wegweiser](https://engagement.stuve-uni-kn.de) was originally a tool for students to find committees and university groups that best suit their particular interests. Since then it has become a centrepiece of the Student Representation's campaign to encourage more involvement from the student body at the University of Konstanz.
Moreover, it was the first IT project that the Student Representation took on to aid the everyday life of students at its university.
## Current State
In the beginning there was the [student council website](/projects/fachschaft-website) and I saw that it was good -- so I copied it, threw any unnecessary code out and started work on the actual tool. I changed the header to be more in line with the design of the [University Website](https://www.uni )
Currently the user simply clicks through a predefined question hierarchy until a list of relevant committees and university groups is presented.
You can imagine this hierarchy as a simple tree, where each internal node is a question and each leaf is a list of committees and groups:
```
Root
├── Art
│ ├── Music
│ ├── Theatre
│ ├── Literature & Journalism
│ └── Other
├── Social
│ ├── General
│ │ ├── Education
│ │ ├── Helping & Meeting
│ │ ├── Mental Health
│ │ └── LGBTQIA+
│ ├── Committees
│ │ ├── Student
│ │ └── University
│ │ ├── General
│ │ └── Specialized
│ └── Groups
│ ├── International & Politics
│ ├── Law
│ ├── Science & Economy
│ └── Sports
├── Religion
└── Nature & Sustainability
```
Each leaf holds a list of committees or groups that I will not list here.
### The Application
Behind the scenes extensive information about each committee / group is held in a CSV file, including but not limited to their website, social media accounts, email adress and ofcourse a short description. Thus every committee and group has their own little information page in the tool, though it might not be linked anywhere, as can be seen with the computer science student council:
- if you navigate to [Start > Soziales & Politik > Ja, Studi-Themen! > studentische Selbstverwaltung > Fach](https://engagement.stuve-uni-kn.de/app?path=Root,Social,Gremien,GremienStud&answer=0) and click on "Fachschaft Informatik", you'll end up on the [student council website](https://fachschaft.inf.uni-konstanz.de)
- if you instead simply use the path [/hsg/FSInformatik](https://engagement.stuve-uni-kn.de/hsg/FSInformatik), you'll end up on the special information page as generated from the extensive information that has been stored in the tool.
### Editors
At a later stage I additionally created an editor for the underlying structure of the question hierarchy as well as a form to create, edit and delete committees / groups from the tool.
#### Structure Editor
![Editor for the question hierarchy](/images/posts/engagement-wegweiser/editor-structure.png)
#### Group / Committee Editor
![Editor for the committees and groups](/images/posts/engagement-wegweiser/editor-hsg.png)
## To the Stars
I am currently working on a new version of the Engagement Wegweiser with [Astro](https://astro.build/) as its backbone and Vue for any interactive islands. The hope is to make the tool more robust, reduce loading times and improve the documentation of the tool.
Additionally we have decided to update the core mechanic with which committees and groups are recommended to the user: Instead of navigating through the afore mentioned question hierarchy down to a list of handpicked recommendations, the system will pivot to a questionaire with a number of category scores associated with every answer. Possible categories could be:
- How much `responsibility` is the user ready to carry
- How comfortable is the user to be in the `spotlight`
- Is the user more interested to engage within their own `domain`, meaning their course of study, or on a university wide level
- How interested is the user in `paperwork` meaning their readiness to read through statutes and regulations of various committees at the university
- How interested is the user to be part of a `creative` process meaning their readiness to create posters, flyers, social-media posts or maintain a website and create tools
- How important is the `social impact` of their work to the user
The details of the system still have to be thought out and discussed, but I imagine it will be fairly close to the principle of the [Frag Wahltraut](/projects/frag-wahltraut) system, which in turn basically works the same as the [Wahl-O-Mat](https://www.bpb.de/themen/wahl-o-mat/) that the [Federal Agency for Civic Education](https://www.bpb.de/die-bpb/ueber-uns/federal-agency-for-civic-education/) hosts for national and state elections as well as the elections for the european parliament.
A catalogue of questions will be assembled and given to student representatives of university committees and university groups such that they can give their personal scores. All the Engagement Wegweiser will then do is: compute the similarity between the users answers with the committees and groups to give a sorted listed of all areas of student participation within the university.

View File

@@ -0,0 +1,105 @@
---
title: Student Council Website
pubDate: 2024-03-12T03:15:00Z
description: The story of how I created the Website for the student council of the computer science department
heroImage: /images/posts/student-council-website/homepage.png
---
## Humble Beginnings
![](/images/posts/student-council-website/homepage.png)
When I started out in university I didn't pay much attention to the student council's website. At first, I didn't even know that there existed one. Not that that would have made a difference...
Yet a year later I found myself taking a closer look at the website to deliver a pleasant experience for the incoming freshmen.
I find that pleasant visuals are integral for any audience to have a positive experience. Even if the ultimate goal isn't to make them stay on your website, but to enable the audience to retrieve the information they need from you and nothing more, it's important to offer a positive experience. Maybe that was the reason that I always disliked the old website.
It wasn't kind to the eyes; It was messy and disorganized by the constant change of hands it has gone through over time. There were remnants of long gone battles; Fingerprints of all kinds of problem solvers manhandling the software -- Man vs. Machine -- to various degrees of success.
When it was my time to update the website for the incoming freshmen, I got the full dose. At times I only changed a few details in a Markdown document, only to see that the order of the navigation buttons changed for a reason that was beyond me or the homepage giving way to a 404 error.
In the first student council meeting of the incoming semester, I did it again. The website broke and I had to fix it via my smartphone because I left my laptop at home. That's when I joked I should just code the whole damn thing myself. Maybe then those problems would go away.
## A Day's Work
Well... there I was. I was about to do it. I opened my laptop and started copying the code from my own website (this website) and adapting it to the student council.
Sometimes that sort of thing just works without a problem; You copy something over and it fits in like it was always meant to be there. Not this time...
I noticed a lot of problems about the code, that I had to get resolved, if I was serious about this. And so I resolved them. And I had new ideas. New inspirations. Which in turn lead to the improvement of my own website too.
As the youngest member of the student council, both in terms of age and of time spent in the student council, I wanted to touch the content and structure of the website as little as possible. So I carried over all the Markdown code and started work on binding the structure of the website to the folder/file hierarchy of the content directory. Somehow I decided against a proper Markdown to HTML package in favor of my own hack via [pandoc](https://pandoc.org/). I believe one of the reasons was being able to define ids for headings, such that they are linkable -- I learned later, that [marked](https://www.npmjs.com/package/marked) would have done the job.
Some time was spent styling the website in rough accordance with the university website, though a lot of liberties were taken.
And yet more time was spent reworking the old Markdown code to take advantage of hyperlinks, to make the information clearer or just easier to navigate through. There were even some new additions, like a page dedicated to the university and the overarching structure of student participation within it -- which was quite helpful when we had new additions to the student council and I had to explain the whole system in the easiest terms possible (it's debatable whether or not I achieved those ends).
## Further Improvements
### Dark Mode
As soon as I showed my demo of the new website for the student council, the wish for a dark mode surfaced -- I half expected that to be honest; What would a computer nerd be without their dark mode. I quite liked the light mode that I had stitched together, but I liked the challenge of hacking a color mode switch into existence.
![](/filehost/images/student-council-website/homepage-dark.png)
The addition of the dark mode was fairly simple. I already got into the habit of working with CSS variables; possibly due to the emergence of [Juxtopposed](https://www.youtube.com/@juxtopposed) which gave the world the nifty little toy of [Realtime Colors](https://www.realtimecolors.com).
So the `style.css` looked something like this:
```css
:root {
--text: #05151a;
--background: #ffffff;
--primary: #59C7EB;
--secondary: #A6E1F4;
--accent: #00A9E0;
--standard-box-shadow: 0 0 182px 0px rgba(0, 0, 0, .2);
}
/* other stuff... */
```
All I had to do was to change those CSS variables via some simple JavaScript á la:
```javascript
colorModeSwitch.addEventListener('click', () => {
if(darkMode)
// switch to light mode
else
// switch to dark mode
});
```
The solution I went for in the end, was putting those CSS variables into separate files called `root.css` and `root-dark.css` (which should really just be called `light.css` and `dark.css`, but I digress). Now the head of every page had the additional tags of:
```html
<link id="color-mode" rel="stylesheet" href="/filehost/css/root.css">
<script defer="" src="/filehost/js/color-mode.js"></script>
```
Where `color-mode.js` holds, among other things, the aforementioned function `toggleColorMode`:
```javascript
const colorModeLink = document.querySelector("#color-mode");
function toggleColorMode() {
if(colorModeLink.getAttribute("href").endsWith("root.css")) {
localStorage.setItem("colorMode", "dark"); // set a cookie
colorModeLink.href = colorModeLink.href.replace("root.css", "root-dark.css");
} else {
localStorage.setItem("colorMode", "light"); // set a cookie
colorModeLink.href = colorModeLink.href.replace("root-dark.css", "root.css");
}
}
// set the initial colorMode according to the cookie
if(localStorage.getItem("colorMode") !== "light") { // dark-mode is standard
colorModeLink.href = colorModeLink.href.replace("root.css", "root-dark.css");
} else {
colorModeLink.href = colorModeLink.href.replace("root-dark.css", "root.css");
}
```
The mode switch became a cute [little magic hat by fontawesome](https://fontawesome.com/icons/hat-wizard?f=classic&s=solid). Initially just to give it some sort of icon, but after finishing the UI integration of the theme switch, I decided to keep it as a little gag -- though many people have communicated their wish for a more intuitive icon, to signify the theme switch.
### Email Obfuscation
Tough beans. I played around with [pandoc's capabilities to obfuscate email addresses in HTML code](https://pandoc.org/MANUAL.html#option--email-obfuscation), but that meant an additional conversion from (non-obfuscated) HTML to (obfuscated) HTML.
For now there is no meaningful email obfuscation -- but the student council hasn't gotten any more spam because of it.
## Outlook
After some time, another student council member that already has a lot of real world experience with building websites, went through my code and improved it significantly. Replacing my haphazard conversion from Markdown to HTML via [pandoc](https://pandoc.org/), with [marked](https://www.npmjs.com/package/marked). And even adding a templating capability.
Suffice it to say: I was very pleased that my go at a new website, inspired at least one council member with actual expertise to sit down and make the dream of a nicer website reality.
Something that is still missing, but I'd love to add, is a language switch. The solution may be a bit hacky again, though I suppose that's fine as long as it works and allows our English speaking students to gain access to the same information that their German-speaking friends do, without having to consult a translator like [DeepL](https://www.deepl.com/).

View File

@@ -0,0 +1,54 @@
---
title: Frag Wahltraut
pubDate: 2024-12-26T22:00:00Z
description: Frag Wahltraut
heroImage: /images/posts/frag-wahltraut/homepage.png
---
Towards the end of the summer semester two elections take place at the University of Kosntanz; One for university committees and another for student committees. Historically the voter turnout has been low, mostly because as a student, you rarely get to know much about what is decided in the committees and how those decisions may or may not affect your own studies -- that's a problem to be tackled by the university, the student representation and, perhaps best, the student councils.
However, another factor is, that most students don't know the people and parties running for various committees and the student parlament.
In national and state elections as well as the election for the european parliament the [Federal Agency for Civic Education](https://www.bpb.de/die-bpb/ueber-uns/federal-agency-for-civic-education/) here in germany prepares and hosts a tool called the [Wahl-O-Mat](https://www.wahl-o-mat.de), which presents somewhere around 35 political theses that a user can answer with "agree", "neutral" and "don't agree" or skip to get an overview of political parties that might best represent the users own political views. The Student Representation of the University of Konstanz decided to develop and host their very own version of that Wahl-O-Mat called [Frag Wahltraut](https://wahl.stuve-uni-kn.de).
## Copy Paste
It seems to be a central theme with my websites that they are all descendants of one another. In this case Frag Wahltraut already kindof existed eight months before it got that name. It was the very first proof of concept for the [Engagement Wegweiser](https://engagement.stuve-uni-kn.de) -- and it shows.
![Engagement Wegweiser](/images/posts/engagement-wegweiser/homepage.png)
## Core Mechanic
However, the core mechanic (currently) differs. There are three stages to the tool:
- [1. Theses](#1-theses)
- [2. Weighting](#2-weighting)
- [3. Result](#3-result)
Which roughly corresponds to the original [Wahl-O-Mat](https://www.wahl-o-mat.de) as described in the article ["Wie funktioniert der Wahl-O-Mat?"](https://www.bpb.de/themen/wahl-o-mat/294576/wie-funktioniert-der-wahl-o-mat/) by the [Federal Agency for Civic Education](https://www.bpb.de/die-bpb/ueber-uns/federal-agency-for-civic-education/). The [computational model](https://www.bpb.de/system/files/dokument_pdf/Rechenmodell_des_Wahl-O-Mat.pdf) can easily found in said article.
### 1. Theses
In this first stage the user simply answers the theses presented by the tool with `agree`, `neutral` or `don't agree` or skips the thesis, which will take it out of the overall scoring entirely.
![Theses page of Frag Wahltraut](/images/posts/frag-wahltraut/theses.png)
- `Agree` corresponds to `0`
- `Neutral` corresponds to `1`
- `Don't Agree` corresponds to `2`
### 2. Weighting
In the second stage the user can take a look at the decisions taken and give any number of them double the weight in the computation of the overall result.
![Weighting page of Frag Wahltraut](/images/posts/frag-wahltraut/weighting.png)
They may also navigate back to a particular question and change their answer.
### 3. Result
In the final stage the result is presented to the user.
![Result page of Frag Wahltraut](/images/posts/frag-wahltraut/result.png)
Clicking on the parties reveals their stances on the theses as well as a short(-ish) explaination of their view.
![Result page of Frag Wahltraut with more information to the stances of a party](/images/posts/frag-wahltraut/result-accordion.png)
## To the Stars
As described in my article about the [Engagement Wegweiser](/projects/engagement-wegweiser) I am currently working on a revamp of the tools that are provided by the Student Representation of the University Konstanz. Once the new version of the Engagement Wegweiser is done, Frag Wahltraut will once again become a descendant of that newer version. Thankfully, at its core, the future Engagement Wegweiser will function as a generalized version of Frag Wahltraut, making it extremely easy to reuse the system for the coming elections in 2025.

View File

@@ -0,0 +1,118 @@
---
title: Pretty Proto
pubDate: 2024-03-12T04:00:00Z
lastUpdate: 2024-12-27T19:00:00Z
description: pretty-proto is a neat little script designed to simplify and standardize the creation of pretty protocols
heroImage: /images/posts/pretty-proto/hero.png
---
Once again a project that heralds from my deep desire to make things pretty that are currently ugly. And once again a project that started (surprise surprise) in the student council of the computer science department.
Initially it was only meant to be a neat little script that converts a Markdown file into a pretty little PDF file via [pandoc](https://pandoc.org) that roughly matches some sort of corporate design of the student council and the University of Konstanz.
## Pretty Please
Pandoc **does** allow a lot of customization along its pipeline as showcased in ["Customizing pandoc to generate beautiful pdf and epub from markdown"](https://learnbyexample.github.io/customizing-pandoc/) by [learnbyexample](https://learnbyexample.github.io/).
So the core command of pretty proto looks like this:
```shell
pandoc "$tmpdir/sed-pad-top-numbers" \
-f markdown \
--template="$scriptpath/tex/template.tex" \
--include-in-header="$scriptpath/tex/style.tex" \
-V logo:"$logo" \
-V header:"$(echo $name | sed -E 's/[_]/\\_/g')" \
-V mainfont="$font" \
-V colorlinks:true \
-V linkcolor:darkbluk \
-V urlcolor:darkbluk \
-V toccolor:black \
-V toc-title:"$tocTitle" \
-V toc-subtitle:"$tocSubtitle" \
-V toc-depth:1 \
-V lang:de \
-V csquotes:true \
-t pdf \
--pdf-engine=xelatex \
-o "$pdf"
```
Let's walk through that:
- `-f markdown` tells pandoc to convert from markdown
- `--template` specifies the LaTeX template to use for the compilation of the markdown file; in this case a custom template (`template.tex`) that comes with pretty proto
- `--include-in-header` allows to include some additional content at the end of the header; in this case for some styling specifications given by `style.tex`
- `-V KEY[=VAL]` sets a template variable `KEY` to the string value `VAL`
- `logo` will be the logo that is rendered in the top-right corner of each page
- `header` will be some text that is rendered in the top-left corner of each page
- `maintfont` sets the font for the PDF document
- `colorlinks` controls whether hrefs are colored
- `linkcolor` sets the color of internal links
- `urlcolor` sets the color of linked URLs
- `toccolor` sets the color of links in the table of contents
- `toc-title` sets the title of the table of contents
- `toc-subtitle` sets the subtitle of the table of contents
- `toc-depth` sets the depth to which the table of contents should list headings
- `lang` sets the language of the document
- `csquotes` controls whether the [csquotes tex package](https://ctan.org/pkg/csquotes) will be used for typography
- `-t pdf` tells pandoc to convert to a PDF document
- `--pdf-engine=xelatex` specifies that the [XeLaTeX](https://www.overleaf.com/learn/latex/XeLaTeX) typesetting engine should be used, which allows for different fonts and colors in the PDF document
- `-o` specifies where the output should be piped into
As I got more serious about aligning the script with its predecessor in the student council (which really only was a fancy downloader for a self-hosted instance of [Sharelatex](https://www.sharelatex.com/)), the script grew in complexity.
The wish to make the usage of the script as easy as possible increased that complexity -- pretty-proto has a lot of default assumptions baked into it, to ease the use.
## Basics
Before diving into the intricacies of pretty-proto let's look at two basic use cases of the tool.
### Markdown File
So you have a markdown file in your folder and now you want to compile it to a pretty little PDF document -- easy:
```shell
pretty file.md
```
That's all you need to compile a simple transcript of a student council meeting.
### stdin
If you ate a clown for breakfast and for some reason decide to try to pipe some markdown into pretty-proto, that's fine too:
```shell
cat file.md | pretty
```
## Downloader
Over time two kinds of remote sources for markdown files have emerged in the student council, which led to two downloaders as part of pretty-proto.
In both cases the `-k, --keep` flag can be used to keep the downloaded markdown file, otherwise only a compiled PDF document will be saved to the current working directory.
### Sharelatex
Initially all transcripts of the student council were written on a self-hosted instance of
[Sharelatex](https://www.sharelatex.com/) -- seemingly because it was the only collaborative online editor available to the student council at the time, or atleast the easiest to establish as the standard in the student council. Ofcourse the transcripts were mostly written in markdown, with some LaTeX macros sprinkled here and there for the table of contents or some fancy typesetting.
Therefore pretty-proto had to accommodate the ability to automagically download the current transcript and compile it to a PDF document. So the following flags were added:
- `-S, --sharelatex` signals pretty-proto to download the markdown file from a Sharelatex instance
- `-D, --domain` sets the domain of the Sharelatex instance
- `-e, --email` sets the email of the user to access the Sharelatex instance
- `-p, --password` sets the password of the user to access the Sharelatex instance
- `-P, --project` sets the project id of the Sharelatex project
- `-f, --filename` sets the name of the markdown file within the Sharelatex project
### HedgeDoc
After some time, and after taking over the chairmanship of the student council meetings, I switched to a [HedgeDoc](https://hedgedoc.org/) instance for the transcripts. Which ofcourse lead to me having to accommodate the ability to automagically download and compile the current transcript from HedgeDoc as well.
- `-H, --hedgedoc` signals pretty-proto to download the markdown file from a HedgeDoc instance
- `-D, --domain` now sets the domain of the HedgeDoc instance
- `-I, --id` sets the id of the HedgeDoc document, which should be downloaded
In all respects so much easier than Sharelatex, if I do say so myself.
## Pretty Config
To allow for different sets of default values depending on the kind of PDF document one might want to generate via pretty-proto, the conecpt of a `pretty.conf` emerged.
Pretty-proto will look for a `pretty.conf` file in the current working directory and source it, if possible, which overrides the default values of pretty-proto.
This is very rudimentary and I hope to expand that idea as I go, but for now it suffices to achieve good looking PDF documents for almost any situation.
## Frontmatter
This is more of an experiment -- more so than the `pretty.conf` idea -- but it works for some things that might appear in the frontmatter of a markdown document.
Pretty-proto will look for frontmatter in a given markdown document and change it's output accordingly.