Align texts at the top of a page

.gitea/workflows/create-presentation.yml

@@ -6,8 +6,9 @@ on:
 
 jobs:
   build:
-    name: Build the debian package
+    name: Convert to PDF
     runs-on: ubuntu-latest
+
     steps:
       - name: "Git clone"
         run: git clone ${{ gitea.server_url }}/${{ gitea.repository }}.git .
@@ -15,14 +16,30 @@ jobs:
         run: git checkout "${{ gitea.sha }}"
       - name: "Submodules auschecken"
         run: git submodule update --init
-      
+      - name: "Debug"
-      - name: "Install dependencies"
+        run: ls -la ./Defensio
-        run: sudo apt-get install pandoc
+      - uses: docker://git.kocoder.xyz/docker/ga-pandoc:d2995fb914e313703da2c7754763e7fa01dae88f
-
+        name: Pandoc
-      - name: "Build .deb"
+        with:
-        run: cd ./Defensio && ./pandoc.sh
+          env: TEXINPUTS=./Defensio:./Defensio/libs/awesome-beamer/:./Defensio/libs/smile/
+          command: pandoc
+          args: >-
+            /workspace/Diplomarbeit-Absolventenverein/pm/Defensio/01_Praesentation_Allgemein.md
+            /workspace/Diplomarbeit-Absolventenverein/pm/Defensio/02_Praesentation_Konstantin_Hintermayer.md
+            /workspace/Diplomarbeit-Absolventenverein/pm/Defensio/03_Praesentation_Florian_Edlmayer.md
+            /workspace/Diplomarbeit-Absolventenverein/pm/Defensio/04_Praesentation_Adam_Gaiswinkler.md
+            -t beamer
+            --template /workspace/Diplomarbeit-Absolventenverein/pm/Defensio/00_preamble.tex
+            --pdf-engine=pdflatex
+            --slide-level=2
+            --number-sections
+            --lua-filter /workspace/Diplomarbeit-Absolventenverein/pm/_extensions/diagram/diagram.lua
+            --syntax-definition /workspace/Diplomarbeit-Absolventenverein/pm/_extensions/razor/razor.xml
+            --syntax-definition /workspace/Diplomarbeit-Absolventenverein/pm/_extensions/nginx/nginx.xml
+            -o defensio.pdf
       - name: "Create release"
         uses: akkuman/gitea-release-action@v1
         with:
           files: |-
             ./Defensio/defensio.pdf
+            ./Defensio/Images/*

.gitea/workflows/word-count.yml

@@ -1,8 +1,6 @@
 name: Word Count
 
 on:
-  push:
-    branches: [ "main", "master" ]
   pull_request:
     branches: [ "main", "master" ]
 

.gitignore

@@ -1 +1,2 @@
 diplomarbeitsbuch.pdf
+defensio.pdf

Defensio/00_preamble.tex

@@ -1,4 +1,4 @@
-\documentclass[aspectratio=169]{beamer}
+\documentclass[aspectratio=169,t]{beamer}
 
 \providecommand{\tightlist}{%
   \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
@@ -67,7 +67,7 @@
 
 \title[AlumniHub]{AlumniHub}
 \subtitle{Web-Entwicklung für den Absolventenverein}
-\author{Konstantin Hintermayer \\ Adam Gaiswinkler \\ Florian Edlmayer}
+\author{Konstantin Hintermayer \\ Florian Edlmayer \\ Adam Gaiswinkler}
 \email{}
 \institute{Schulzentrum HTL HAK Ungargasse}
 \uni{Schulzentrum HTL HAK Ungargasse}
@@ -81,7 +81,7 @@
 {
   \begingroup
   \nonumberson
-  \begin{frame}[noframenumbering,plain]{Agenda}
+  \begin{frame}[c,noframenumbering,plain]{Agenda}
     \tableofcontents[currentsection]
   \end{frame}
   \endgroup
@@ -93,7 +93,7 @@
   
   \begingroup
   \nonumberson
-  \begin{frame}[noframenumbering,plain]{Agenda}
+  \begin{frame}[c,noframenumbering,plain]{Agenda}
     \tableofcontents
   \end{frame}
   \endgroup

Defensio/03_Praesentation_Adam_Gaiswinkler.md

@@ -1,92 +0,0 @@
-# Adam Gaiswinkler
-
-## Individueller Teil: Adam Gaiswinkler
-**Entwicklung von CMS-Modulen & Frontend-Design**
-
----
-
-## Ausgangslage & Motivation
-- **Ausgangssituation**: Bedarf an einer modernen Plattform für den Absolventenverein der HTL Ungargasse.
-- **Persönliche Motivation**:
-  - Steigende Verantwortung durch Teamverkleinerung (von 6 auf 3 Personen).
-  - Identifikation mit dem Projekt wuchs deutlich.
-  - Praktische Anwendung von Blazor & ASP.NET in einem realen Umfeld.
-- **Individuelle Ziele**:
-  - Entwicklung von Oqtane-Modulen (Anmeldetool & Hall of Fame).
-  - Web-Entwicklung mit Fokus auf responsives und nutzerfreundliches UI/UX.
-
----
-
-## Eingesetzte Technologien
-
-- **Styling**: Bootstrap & Custom CSS
-- **Spezielle Tools**: QuestPDF (PDF-Generierung), Gitea (Versionskontrolle)
-- **Entwicklungsumgebung**: Visual Studio 2022 & Visual Studio Code (macOS)
-
----
-
-## Umsetzung: Oqtane Theme
-- **Ziel**: Modernes, schlichtes Design im Stil der HTL Ungargasse (szu.at).
-- **Technische Highlights**:
-  - Vollständige Eigenentwicklung der Navigationslogik (über `PageState.Pages`).
-  - **Dynamisches Ausblenden von Systemseiten via LINQ**.
-  - **Responsive Design**: Einsatz von CSS Media Queries und einer komplett CSS-basierten Burger-Menü-Lösung.
-  - Integration eines `ControlPanels` und Cookie-Consent.
-
----
-
-## Umsetzung: Hall of Fame (1)
-- **Zweck**: Sichtbarmachung von erfolgreichen Absolventinnen und Absolventen.
-- **UI & UX**:
-  - Responsive Kartenübersicht der Personen mit Such- und Sortierfunktion (Echtzeit).
-  - Detailseite im modernen "Glasmorphismus"-Design.
-- **Datenerfassung & Workflow**:
-  - Rich-Text-Editor zur Eingabe des Werdegangs.
-  - Bild-Upload-System (Live-Vorschau, max. 5 MB) statt manueller URLs.
-  - Statusverwaltung ("Entwurf" vs. "Veröffentlicht") inkl. Eigentümerprüfung.
-
----
-
-## Umsetzung: Hall of Fame (2)
-- **PDF-Export**: Dynamische Generierung eines ansprechenden Profil-PDFs mittels *QuestPDF*.
-- **Moderation**:
-  - Integriertes Meldesystem (Reporting) direkt über ein separates Interfaces-Paket angesteuert.
-
-
----
-
-## Umsetzung: Anmeldetool für Treffen
-- **Zweck**: Vereinfachung der Planung und Teilnehmerverwaltung.
-- **Funktion**:
-  - Klare, farblich getrennte Zusage- und Absage-Buttons.
-  - Live-Rückmeldung bei Statusänderung dank Blazor.
-  - Saubere Trennung von UI-Komponente und Backend-API.
-- **UX-Optimierung**:
-  - Fokus auf Overlay-Darstellung und Mobile-Clipping-Vermeidung.
-
----
-
-## Herausforderungen & Lösungen
-- **Plattformwechsel (Windows zu macOS)**: Oqtane ist stark an Windows gekoppelt; gelöst durch Einsatz von JetBrains Rider.
-- **Zeitdruck & Infrastruktur-Ausfälle**: 
-  - Probleme mit Hosting (Hetzner).
-  - **Lösung**: Entwicklung einer schlanken "Übergangslösung" (Node.js/HTML) im Sommer 2025 zur zeitgerechten Event-Abwicklung.
-
-
----
-
-## Learnings
-- **Technisch**: Tieferes Verständnis von Version Control (Git), CSS/Flexbox (Responsiveness) und C#/Blazor-Tiefen.
-- **Methodisch**: Eine klare Aufgabenaufteilung sowie regelmäßige Team-Meetings sind unerlässlich für den Projekterfolg.
-- **Persönlich**: Bedeutsamkeit von Eigeninitiative und Verantwortungsübernahme, gerade in schwierigen Projektphasen.
-
----
-
-## Fazit & Mögliche Erweiterungen
-- **Erreichtes**:
-  - Theme ist final in Oqtane integriert und mobil optimiert.
-  - Hall of Fame und Anmeldetool sind voll funktionstüchtig.
-- **Mögliche Erweiterungen**: 
-  - Integration einer umfassenden Teilnehmerlisten-Auswertung (Datenbank).
-  - Limit-Funktion für maximale Anmeldungen bei Veranstaltungen.
-  - Automatische E-Mail-Erinnerungen für Events.

Defensio/03_Praesentation_Florian_Edlmayer.md

@@ -39,29 +39,12 @@
 - **Problem**: Datenverlust (Hardware, Software, Cyberangriffe).
 - **Lösung**: Vollautomatisiertes Backup-Skript.
 
-```mermaid
+**Automatischer Ablauf (täglich 02:30 Uhr):**
-graph LR
+1. Cronjob startet → Konfiguration wird geladen
-    Start((Start: Cronjob 02:30)) --> Init[Initialisierung]
+2. Datenbank-Backup wird erstellt
-    Init --> Vars[Konfiguration laden]
+3. Restliches Dateisystem wird komprimiert
-
+4. Fehlerüberprüfung → bei Fehler: Log-Eintrag & Abbruch
-    subgraph Sicherungsphase
+5. Rotation: Nur die letzten 30 Backups bleiben erhalten, ältere werden automatisch gelöscht
-        Dir[Erstelle Backup-Ordner] --> DB[Datenbank-Backup]
-        DB --> Files[Dateisystem sichern]
-    end
-
-    Files --> Check{Fehler?}
-    Check -- Ja --> Mail[Log Error & Abbruch]
-    Check -- Nein --> Rotate[Lade Backups-Liste]
-
-    subgraph Speicherverwaltung
-        Rotate --> Count{Anzahl > 30?}
-        Count -- Ja --> Delete[Älteste löschen]
-        Count -- Nein --> Finish[Abschluss]
-        Delete --> Finish
-    end
-
-    Finish --> Ende((Ende))
-```
 
 ---
 
@@ -97,22 +80,10 @@ graph LR
 
 ## Der Premium-Bereich (2)
 **Architektur des Premium-Bereich-Moduls:**
-```mermaid
+**Technische Architektur:**
-graph LR
+- **Frontend**: Blazor WebAssembly (Oqtane) → ruft API auf
-    subgraph Client [WebAssembly]
+- **Backend**: ASP.NET Core Controller → Service-Schicht mit Rechteverwaltung
-        UI[Benutzeroberfläche] --> SvcC[Service Client]
+- **Datenbank**: EF Core → PostgreSQL mit Audit-Trail (jede Premium-Vergabe nachvollziehbar)
-    end
-
-    subgraph Server [ASP.NET Core]
-        SvcC --> Ctrl[API Controller]
-        Ctrl --> SvcS[Service Schicht]
-    end
-
-    subgraph Data [Datenbank]
-        SvcS --> EF[EF Core]
-        EF --> DB[(PostgreSQL)]
-    end
-```
 
 **Datensparsame Mitgliedersuche & Kontaktfunktion:**
 ![Mitgliedersuche und Kontaktfunktion für Premium-Mitglieder](../Diplomarbeitsbuch/images/04-Florian/premium-mitglieder-suche.png)

Defensio/04_Praesentation_Adam_Gaiswinkler.md

@@ -0,0 +1,160 @@
+# Adam Gaiswinkler
+
+## Individueller Teil: Adam Gaiswinkler
+**Entwicklung von CMS‑Modulen & Frontend-Design**
+
+- **Schwerpunkt**:
+  - Oqtane-Theme
+  - Hall-of-Fame-Modul
+  - Anmeldetool
+- **Ziel**: Moderne, responsive Website für den HTL-Absolventenverein
+
+---
+
+## Ausgangslage & Motivation
+- **Ausgangssituation**: Moderne Frontend‑Plattform für den Absolventenverein (responsive, neue Features).
+- **Persönliche Motivation**:
+  - Team‑Verkleinerung (6 → 3) → mehr Verantwortung.
+  - Projektidentifikation & Praxis‑Blazor/ASP.NET.
+- **Ziele**:
+  - Oqtane‑Module (Anmeldetool, Hall‑of‑Fame).
+  - Responsives UI/UX.
+
+---
+
+## Eingesetzte Technologien
+
+::: columns
+
+:::: column
+- **Tech‑Stack**: 
+  - Bootstrap 
+  - Custom‑CSS
+  - QuestPDF
+  - Gitea
+  - Visual Studio 2022 → Visual Studio Code (macOS).
+::::
+
+:::: column
+\begin{tikzpicture}
+\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.8\columnwidth]{Images/Technologien.png}};
+\end{tikzpicture}
+::::
+
+:::
+
+---
+
+## Oqtane Theme
+
+::: columns
+
+:::: column
+- Eigen‑Navigation (bootstrap Komponenten haben nicht gepasst ).
+- Systemseiten per LINQ ausblenden.
+- Responsive CSS‑Media‑Queries + reines CSS‑Burger‑Menu.
+- Cookie‑Consent (erforderlich für dsgvo konformität und gesamtheit der website ).
+::::
+
+:::: column
+\begin{tikzpicture}
+\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/BurgerMenuLiveDesign.png}};
+\end{tikzpicture}
+::::
+
+:::
+
+---
+
+## Hall of Fame
+
+::: columns
+
+:::: column
+- **Karten‑Grid**: Responsive Übersicht, Live‑Suche & Sortierung **in Echtzeit – kein Seitenreload** (Blazor).
+- **Detail‑Seite**: Glasmorphismus‑Design (halbtransparente Karten mit Blur-Effekt).
+::::
+
+:::: column
+\begin{tikzpicture}
+\node[inner sep=0pt, rounded corners=5pt, clip] {\includegraphics[width=0.55\columnwidth]{Images/HallOfFameBeispiel.png}};
+\end{tikzpicture}
+::::
+
+:::
+
+---
+
+## Hall of Fame – Workflow & Export
+
+::: columns
+
+:::: column
+- **Workflow**: Rich‑Text‑Editor, Bild‑Upload mit **Live-Vorschau** (max 5 MB), Status (Entwurf/Veröffentlicht) inkl. Eigentümer‑Check.
+- **PDF‑Export**: Professionelle Profil-PDFs server-seitig mit QuestPDF.
+- **Moderation**: Meldesystem über separates Interfaces‑Paket → saubere Logik-Trennung.
+::::
+
+:::: column
+\begin{tikzpicture}[
+  node distance=12mm,
+  every node/.style={font=\small},
+  state/.style={rectangle, rounded corners=3pt, draw=accent, fill=accent!10, minimum width=2.4cm, minimum height=8mm, align=center, font=\small\bfseries},
+  arr/.style={->,>=stealth,thick,accent}
+]
+\node[coordinate] (start) {};
+\node[state, right=10mm of start] (draft) {Entwurf};
+\node[state, below=18mm of draft] (pub) {Veröffentlicht};
+\draw[arr] (start) -- node[above] {\scriptsize Erstellen} (draft);
+\draw[arr] (draft) to[out=135, in=45, looseness=4] node[above] {\scriptsize Speichern} (draft);
+\draw[arr, bend left=25] (draft) to node[right] {\scriptsize Veröffentlichen} (pub);
+\draw[arr, bend left=25] (pub) to node[left] {\scriptsize Zurückziehen} (draft);
+\end{tikzpicture}
+::::
+
+:::
+
+---
+
+## Anmeldetool
+- **UI**: Ja/Nein‑Buttons (grün/rot)
+- **Live‑Feedback**: Sofortige Statusänderung via Blazor
+- **Mobile**: Sauberes Touch-Handling
+- **Architektur**: UI & Backend-API getrennt
+
+---
+
+## Herausforderungen & Lösungen
+- **Plattformwechsel** Windows → macOS
+  - Oqtane stark an Windows gebunden
+  - → **Visual Studio Code** als plattformübergreifende Lösung
+- **Keine funktionsfähige Website** (Sommer 2025)
+  - Kurz vor einem Event, kein funktionierendes CMS
+  - → Schnelle **Node.js/HTML-Übergangslösung** sicherte Event-Anmeldung
+
+---
+
+## Learnings
+
+\vspace{1cm}
+\begin{tikzpicture}[remember picture, overlay]
+\node at (current page.center) {
+\renewcommand{\arraystretch}{1.5}
+\begin{tabular}{c c c}
+\textbf{Technisch} & \textbf{Methodisch} & \textbf{Persönlich} \\
+\hline
+Git & Aufgabenverteilung & Eigeninitiative \\
+CSS-Flexbox & Regelmäßige Meetings & Verantwortung \\
+Blazor & & \\
+\end{tabular}
+};
+\end{tikzpicture}
+
+---
+
+## Fazit & Ausblick
+- **Ergebnis**:
+  - Theme final & mobil-optimiert
+  - Hall of Fame funktionsfähig
+  - Anmeldetool einsatzbereit
+

Defensio/pandoc.sh

@@ -3,8 +3,8 @@ export TEXINPUTS=".:./libs/awesome-beamer/:./libs/smile/:$TEXINPUTS"
 pandoc \
   01_Praesentation_Allgemein.md \
   02_Praesentation_Konstantin_Hintermayer.md \
-  03_Praesentation_Adam_Gaiswinkler.md \
+  03_Praesentation_Florian_Edlmayer.md \
-  04_Praesentation_Florian_Edlmayer.md \
+  04_Praesentation_Adam_Gaiswinkler.md \
   -t beamer \
   --template 00_preamble.tex \
   --pdf-engine=pdflatex \

Defensio/puppeteer-config.json

@@ -0,0 +1,3 @@
+{
+  "args": ["--no-sandbox"]
+}

Video_Text_Skript.md

@@ -1,11 +1,9 @@
 # Video Text Skript
 
-Anfang: Willkommen zu unserem Video über den AlumniHub. Wir sind Konstantin Hintermayer, Florian Edlmayer und Adam Gaiswinkler und wir haben im Rahmen unserer Diplomarbeit an der HTL SZU Ungargasse eine moderne Webanwendung für den Absolventenverein entwickelt.
+Anfang: Vernetzung, die wirklich funktioniert – willkommen beim AlumniHub. Wir haben im Rahmen unserer Diplomarbeit an unserer HTL eine moderne Webanwendung für den Absolventenverein entwickelt.
 Zu beginn unseres Projekts sind wir auf viele Probleme gestoßen. Im Sommer beschäftigten wir uns mit einer Übergangslösung um das kommende Treffen der Absolventen im Jahr 2025 zu ermöglichen. Ein weiteres Problem war unser Team Downsizing von 6 auf 3 Mitglieder. Dadurch mussten wir unsere ursprünglichen Pläne stark überdenken und uns auf das Wesentliche konzentrieren.
 Außerdem sind wir immer wieder auf Probleme mit unserer Serverinfrastruktur gestoßen.
 
-Ein zentraler Teil unserer Arbeit ist die kontinuierliche Integration unserer Software. Wir haben uns für Git als Versionsverwaltungssystem entschieden und hosten eine Gitea Instanz. Bei veröffentlichen eines tags wird automatisch ein neues Debian Paket gebaut und in unsererem Debian Package Registry bereitgestellt.Durch diese automatisierung ist die veröffentlichung von neuen Softwareversionen stark vereinfacht worden.
-
 Das Hauptziel des Projektes war es eine moderne Webanwendung für den Absolvenntenverein zu kreieren. Die es ermöglicht einfach Events und treffen zu organisieren mithilfe unseres EventRegistration Moduls. Weiter Funktionen sind die Hall of Fame, wo Absolventen ihre Erfolge präsentieren können, das Schwarze Brett für Neuigkeiten und Jobangebote und der Premiumbereich für exklusive Inhalte. Diese sind im Laufe der Entwicklung hinzugekommen.
 
 Nun wollen wir Ihnen unsere Webanwendung genauer vorstellen.
@@ -20,3 +18,6 @@ Schwarzes Brett Modul:
 
 
 Premiumbereich Modul:
+
+
+Ein zentraler Teil unserer Arbeit ist die kontinuierliche Integration unserer Software. Wir haben uns für Git als Versionsverwaltungssystem entschieden und hosten eine Gitea Instanz. Bei veröffentlichen eines tags wird automatisch ein neues Debian Paket gebaut und in unsererem Debian Package Registry bereitgestellt.Durch diese automatisierung ist die veröffentlichung von neuen Softwareversionen stark vereinfacht worden.

_extensions/diagram/diagram.lua

@@ -151,6 +151,11 @@ local mermaid = {
   compile = function (self, code)
     local mime_type = self.mime_type or 'image/svg+xml'
     local file_extension = extension_for_mimetype[mime_type]
+
+    -- Resolve puppeteer config path
+    local puppeteer_config = pandoc.path.join({pandoc.system.get_working_directory(), 'puppeteer-config.json'})
+
+
     return with_temporary_directory("diagram", function (tmpdir)
       return with_working_directory(tmpdir, function ()
         local infile = 'diagram.mmd'
@@ -158,7 +163,7 @@ local mermaid = {
         write_file(infile, code)
         pipe(
           self.execpath or 'mmdc',
-          {"--pdfFit", "--iconPacksNamesAndUrls", "mdi#https://unpkg.com/@iconify-json/mdi@1.2.3/icons.json", "--input", infile, "--output", outfile},
+          {"--pdfFit", "--iconPacksNamesAndUrls", "mdi#https://unpkg.com/@iconify-json/mdi@1.2.3/icons.json", "-p", puppeteer_config, "--input", infile, "--output", outfile},
           ''
         )
         return read_file(outfile), mime_type
@@ -167,6 +172,24 @@ local mermaid = {
   end,
 }
 
+-- Source - https://stackoverflow.com/a/27028488
+-- Posted by hookenz, modified by community. See post 'Timeline' for change history
+-- Retrieved 2026-04-18, License - CC BY-SA 4.0
+
+function dump(o)
+   if type(o) == 'table' then
+      local s = '{ '
+      for k,v in pairs(o) do
+         if type(k) ~= 'number' then k = '"'..k..'"' end
+         s = s .. '['..k..'] = ' .. dump(v) .. ','
+      end
+      return s .. '} '
+   else
+      return tostring(o)
+   end
+end
+
+
 --- TikZ
 --
 

defensio.md

@@ -1,31 +0,0 @@
-% Habits
-% John Doe
-% March 22, 2005
-
-# In the morning
-
-## Getting up
-
-- Turn off alarm
-- Get out of bed
-
-## Breakfast
-
-- Eat eggs
-- Drink coffee
-
-# In the evening
-
-## Dinner
-
-- Eat spaghetti
-- Drink wine
-
-------------------
-
-![picture of spaghetti](images/spaghetti.jpg)
-
-## Going to sleep
-
-- Get in bed
-- Count sheep

pandoc-tex.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-pandoc \
-  00-praemble.md \
-  01-toc.md \
-  02-Allgemein.md \
-  03-Diplomarbeitsbuch-individueller-teil-Adam-Gaiswinkler.md \
-  04-Diplomarbeitsbuch-individueller-teil-Florian-Edlmayer.md \
-  05-Diplomarbeitsbuch-individueller-teil-Konstantin-Hintermayer.md \
-  97-tabellenverzeichnis.md \
-  98-abbildungsverzeichnis.md \
-  99-bibliographie.md \
-  --number-sections \
-  --lua-filter _extensions/diagram/diagram.lua \
-  --syntax-definition _extensions/razor/razor.xml \
-  --syntax-definition _extensions/nginx/nginx.xml \
-  --citeproc \
-  --bibliography sources.bib \
-  --csl _extensions/sources/tgm.csl \
-  --include-before-body 00_preamble.tex \
-  -H _extensions/header/header.tex \
-  -V geometry:"top=2.5cm, bottom=2cm, left=3cm, right=2cm, a4paper" \
-  -V toc-title="Inhaltsverzeichnis" \
-  -V classoption=twoside \
-  -V fontsize=12pt \
-  -V linestretch=1.5 \
-  -o diplomarbeitsbuch.tex

puppeteer-config.json

@@ -0,0 +1,3 @@
+{
+  "args": ["--no-sandbox"]
+}