DerGrumpf/cyper-nix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor Matrix Additions

Browse Source
This commit is contained in:
DerGrumpf
2026-05-22 22:11:33 +02:00
parent 49ca63c450
commit 3cf375ea00
4 changed files with 543 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nixos/roles/matrix/discord-bridge.nix
+13
View File
@@ -54,6 +54,19 @@
"cyperpunk.de" = "user";
"@dergrumpf:cyperpunk.de" = "admin";
};
backfill = {
limits = {
initial = {
channel = 10000;
thread = 500;
};
missed = {
channel = 500;
};
};
};
};
discord = {
client_id = "$DISCORD_CLIENT_ID";
nixos/roles/matrix/index.html
+360 -372
View File
@@ -1,14 +1,13 @@
<!doctype html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matrix Guide - cyperpunk.de</title>
<!-- Favicon Integration -->
<link
rel="icon"
type="image/png"
href="https://img.icons8.com/ios/100/matrix-logo.png"
href="https://img.icons8.com/glyph-neue/64/trinity.png"
/>
<link rel="stylesheet" href="style.css" />
@@ -31,10 +30,10 @@
</head>
<body>
<a href="#main-content" class="skip-link">Zum Inhalt springen</a>
<!-- Matrix Code-Regen Hintergrund -->
<canvas id="matrix-bg" aria-hidden="true"></canvas>
<main class="container" id="main-content">
<!-- Header -->
<header>
<h1>Matrix Guide</h1>
@@ -42,52 +41,66 @@
<p class="admin-tag">Grid-Operator: @dergrumpf:cyperpunk.de</p>
</header>
<!-- Sektion 1: Registrierungs-Widget -->
<section id="registration" aria-labelledby="heading-registration">
<h2 id="heading-registration">
1. Identitäts-Allokation (Registrierung)
</h2>
<!-- Abstract -->
<div class="abstract" role="note" aria-label="Was ist Matrix?">
<p>
Zugangsdaten für diesen Server werden exklusiv durch die
Administration autorisiert. Nutze das untenstehende Interface, um eine
Verbindung anzufordern. Die Übertragung erfolgt direkt in unseren
gesicherten internen Koordinationskanal.
<strong>Was ist Matrix?</strong> Matrix ist ein offenes,
verschlüsseltes Kommunikationsnetzwerk – wie WhatsApp oder Discord,
aber ohne zentrales Unternehmen dahinter. Jeder Nutzer hat eine eigene
Adresse (z.&nbsp;B. <code class="code--white">@name:cyperpunk.de</code>), Nachrichten
sind Ende-zu-Ende-verschlüsselt, und verschiedene Server können
miteinander kommunizieren. Dieser Server wird privat betrieben und
ist kostenlos nutzbar.
</p>
</div>
<!-- Sektion 1: Registrierung -->
<section id="registration" aria-labelledby="heading-registration">
<h2 id="heading-registration">1. Identitäts-Allokation (Registrierung)</h2>
<p>
Zugangsdaten für diesen Server werden exklusiv durch den
Administrator <code class="code--white">@dergrumpf:cyperpunk.de</code> vergeben. Das untenstehende Formular sendet eine
Anfrage direkt in den internen Koordinationskanal.
</p>
<!-- REGISTRIERUNGS-WIDGET -->
<div class="reg-form">
<form class="reg-form" id="reg-form" novalidate aria-label="Registrierungsanfrage">
<label for="reg-username">Gewünschter Benutzername</label>
<input
type="text"
id="reg-username"
name="username"
placeholder="z.B. neo"
autocomplete="off"
spellcheck="false"
required
aria-required="true"
/>
<label for="reg-email">E-Mail-Adresse (für Login-Daten)</label>
<input
type="email"
id="reg-email"
name="email"
placeholder="z.B. neo@example.com"
autocomplete="off"
required
aria-required="true"
/>
<!-- Honeypot: muss leer bleiben -->
<label for="reg-website" style="display: none" aria-hidden="true"
>Website</label
>
<label for="reg-website" class="honeypot" aria-hidden="true">Website</label>
<input
type="text"
id="reg-website"
name="website"
class="honeypot"
tabindex="-1"
autocomplete="off"
style="display: none"
aria-hidden="true"
/>
<button
type="button"
class="reg-submit"
id="reg-btn"
onclick="submitRegistration()"
@@ -102,103 +115,51 @@
aria-live="polite"
aria-atomic="true"
></div>
</div>
</form>
</section>
<!-- Sektion 2: Erster Login & Sicherheit -->
<section id="first-login" aria-labelledby="heading-first-login">
<h2 id="heading-first-login">
2. Protokoll für den initialen Verbindungsaufbau
</h2>
<div class="matrix-alert" role="alert" aria-label="Warnung">
<h3>⚠️ WARNUNG: Kryptografische Schlüssel sichern</h3>
<p>
Dieses Netzwerk erzwingt standardmäßig eine vollständige
Ende-zu-Ende-Verschlüsselung (E2EE). Bei der ersten Verbindung
generiert dein Terminal eine
<strong>Passphrase sowie einen Sicherheitsschlüssel</strong>.
Sichere dieses Krypto-Fragment extern! Solltest du dich abmelden
oder das Gerät wechseln und diesen Schlüssel verlieren, ist dein
dezentraler Datenstrom unwiderruflich verschlüsselt. Die
Administration hat keinerlei Backdoors, um deine Daten
wiederherzustellen.
</p>
</div>
<h3>Schritt-für-Schritt-Protokoll:</h3>
<ol>
<li>
Wähle ein Zugangs-Terminal (Client) aus dem folgenden Abschnitt.
</li>
<li>
Der Zugriff ist entweder über klassische
<strong>User-Credentials</strong> oder über das
<strong>Single-Sign-On-Protokoll (SSO)</strong> möglich.
</li>
<li>
Bei der Nutzung von SSO wirst du automatisch zum zentralen
Identitäts-Node unter
<a
href="https://auth.cyperpunk.de/"
target="_blank"
aria-label="auth.cyperpunk.de (öffnet neuen Tab)"
><strong>auth.cyperpunk.de</strong></a
>
(powered by Kanidm) umgeleitet.
</li>
<li>
Nach erfolgreicher Authentifizierung wird deine Session für das
Matrix-Grid freigeschaltet.
</li>
</ol>
</section>
<!-- Sektion 3: Web-Clients (Linktree) -->
<!-- Sektion 2: App oder Browser wählen -->
<section id="clients" aria-labelledby="heading-clients">
<h2 id="heading-clients">3. Zugangs-Terminals initialisieren</h2>
<h2 id="heading-clients">2. App oder Browser wählen</h2>
<p>
Kopple dein System über eine unserer drei gehosteten
Web-Schnittstellen. Sobald dein Login-Protokoll abgeschlossen ist,
findest du den übergeordneten Hauptbereich (Community Space) im Grid
unter der Adresse <code>#cyperpunk:cyperpunk.de</code>.
Du kannst Matrix entweder direkt im Browser nutzen oder eine App auf
deinem Smartphone installieren. Sobald dein Login abgeschlossen ist,
findest du den Homeserver unter
<code class="code--white">#cyperpunk:cyperpunk.de</code>.
</p>
<h3>Im Browser starten</h3>
<p>Wähle eine der drei gehosteten Web-Schnittstellen:</p>
<div class="linktree-container">
<a
href="https://element.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="Element starten (öffnet neuen Tab)"
class="linktree-btn"
>
<img
src="https://img.icons8.com/keek-line/96/physics.png"
alt="Element Icon"
/>
<img src="https://img.icons8.com/keek-line/96/physics.png" alt="" aria-hidden="true" />
Terminal: Element starten
</a>
<a
href="https://cinny.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="Cinny starten (öffnet neuen Tab)"
class="linktree-btn"
>
<img
src="https://img.icons8.com/ios/100/bird--v1.png"
alt="Cinny Icon"
/>
<img src="https://img.icons8.com/ios/100/bird--v1.png" alt="" aria-hidden="true" />
Terminal: Cinny starten
</a>
<a
href="https://fluffy.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="FluffyChat starten (öffnet neuen Tab)"
class="linktree-btn"
>
<img
src="https://img.icons8.com/pastel-glyph/64/cat--v3.png"
alt="FluffyChat Icon"
/>
<img src="https://img.icons8.com/pastel-glyph/64/cat--v3.png" alt="" aria-hidden="true" />
Terminal: FluffyChat starten
</a>
</div>
@@ -206,130 +167,204 @@
<h3>Welches Programm soll ich wählen?</h3>
<div class="cards-grid">
<div class="card">
<h3 class="card-title">Element</h3>
<h3 class="card-title">
<img src="https://img.icons8.com/keek-line/96/physics.png" alt="" aria-hidden="true" class="card-icon" />
Element
</h3>
<p class="card-text">
Der mächtige <strong>Allrounder</strong>. Sieht klassisch aus und
bietet absolut jede Funktion, die Matrix kann. Perfekt, wenn du
Räume selbst verwalten willst.
Der mächtige <strong>Allrounder</strong>. Klassisches Interface mit
vollem Funktionsumfang. Geeignet für alle, die Räume selbst
verwalten möchten.
<strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im
Browser.
</p>
</div>
<div class="card">
<h3 class="card-title">Cinny</h3>
<h3 class="card-title">
<img src="https://img.icons8.com/ios/100/bird--v1.png" alt="" aria-hidden="true" class="card-icon" />
Cinny
</h3>
<p class="card-text">
Der <strong>moderne Chat</strong>. Ist extrem schnell,
übersichtlich und orientiert sich vom Design an Discord oder
Slack. Ideal, wenn du einfach nur bequem schreiben willst.
Der <strong>moderne Chat</strong>. Schnell, übersichtlich, am
Design von Discord und Slack orientiert. Empfohlen für alle, die
einfach schreiben möchten.
<strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im
Browser.
</p>
</div>
<div class="card" style="border-color: #00aa41">
<h3 class="card-title" style="color: #00aa41">FluffyChat</h3>
<div class="card card--highlight">
<h3 class="card-title card-title--highlight">
<img src="https://img.icons8.com/pastel-glyph/64/cat--v3.png" alt="" aria-hidden="true" class="card-icon" />
FluffyChat
</h3>
<p class="card-text">
Der <strong>einfache Messenger</strong>. Bunt, super unkompliziert
und perfekt für Einsteiger, die den Look von WhatsApp oder Signal
bevorzugen.
<strong style="color: #ff3333; text-shadow: none"
>Achtung:</strong
>
Diese Web-Version hat <strong>keinen Sprach-Chat</strong>.
Der <strong>einfache Messenger</strong>. Bunt und unkompliziert,
vergleichbar mit WhatsApp oder Signal.
<strong class="text--danger">Achtung:</strong>
Diese Web-Version unterstützt <strong>keinen Sprach-Chat</strong>.
</p>
</div>
</div>
</section>
<!-- Sektion 4: Mobiler Zugang -->
<section id="mobile" aria-labelledby="heading-mobile">
<h2 id="heading-mobile">4. Mobile App-Konfiguration</h2>
<h3>Auf dem Smartphone nutzen</h3>
<p>
Möchtest du von unterwegs aus auf das Grid zugreifen? Lade dir einfach
eine passende App für dein Smartphone herunter:
Möchtest du von unterwegs auf Matrix zugreifen? Lade dir eine
passende App herunter:
</p>
<div class="app-download-box">
<!-- FluffyChat Download Zeile -->
<div class="app-row">
<div class="app-info">
<span class="app-name">FluffyChat</span>
<p style="margin: 5px 0 0 0; font-size: 0.85rem; color: #a3ffa3">
Bunt, einsteigerfreundlich und ideal für das Smartphone.
</p>
<p>Bunt, einsteigerfreundlich und ideal für das Smartphone.</p>
</div>
<div class="app-buttons">
<a
href="https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat&hl=de_DE"
target="_blank"
aria-label="FluffyChat im Google Play Store (öffnet neuen Tab)"
rel="noopener"
aria-label="FluffyChat im Google Play Store herunterladen (öffnet neuen Tab)"
class="app-btn"
>Google Play</a
><img src="https://img.icons8.com/ios/100/google-play--v1.png" alt="" aria-hidden="true" />Google Play</a
>
<a
href="https://apps.apple.com/us/app/fluffychat/id1551469600"
target="_blank"
aria-label="FluffyChat im App Store (öffnet neuen Tab)"
rel="noopener"
aria-label="FluffyChat im App Store herunterladen (öffnet neuen Tab)"
class="app-btn"
>App Store</a
><img src="https://img.icons8.com/ios/100/apple-app-store--v2.png" alt="" aria-hidden="true" />App Store</a
>
</div>
</div>
<!-- Element X Download Zeile -->
<div class="app-row">
<div class="app-info">
<span class="app-name">Element X</span>
<p style="margin: 5px 0 0 0; font-size: 0.85rem; color: #a3ffa3">
Die App der nächsten Generation: Extrem schnell, modern und
sicher.
</p>
<p>Die App der nächsten Generation: Extrem schnell, modern und sicher.</p>
</div>
<div class="app-buttons">
<a
href="https://play.google.com/store/apps/details?id=io.element.android.x&hl=de_DE"
target="_blank"
aria-label="Element X im Google Play Store (öffnet neuen Tab)"
rel="noopener"
aria-label="Element X im Google Play Store herunterladen (öffnet neuen Tab)"
class="app-btn"
>Google Play</a
><img src="https://img.icons8.com/ios/100/google-play--v1.png" alt="" aria-hidden="true" />Google Play</a
>
<a
href="https://apps.apple.com/us/app/element-x-secure-chat-call/id1631335820"
target="_blank"
aria-label="Element X im App Store (öffnet neuen Tab)"
rel="noopener"
aria-label="Element X im App Store herunterladen (öffnet neuen Tab)"
class="app-btn"
>App Store</a
><img src="https://img.icons8.com/ios/100/apple-app-store--v2.png" alt="" aria-hidden="true" />App Store</a
>
</div>
</div>
</div>
<p style="margin-top: 20px">
<strong>Wichtig beim ersten App-Start:</strong>
</p>
<p class="mt-28"><strong>Wichtig beim ersten App-Start:</strong></p>
<ul>
<li>Überspringe die automatische Registrierung in der App.</li>
<li>
Suche nach der Option <strong>"Heimserver ändern"</strong> (oder
Homeserver wechseln).
Suche nach der Option <strong>„Heimserver ändern"</strong>
(oder Homeserver wechseln).
</li>
<li>
Trage dort manuell unsere Server-Adresse ein:
<code style="color: #fff">cyperpunk.de</code>
Trage dort die Server-Adresse ein:
<code class="code--white">cyperpunk.de</code>
</li>
<li>
Logge dich erst danach wie gewohnt mit deinen Zugangsdaten oder per
SSO ein.
Logge dich erst danach wie gewohnt mit deinen Zugangsdaten oder
per SSO ein.
</li>
</ul>
</section>
<!-- Sektion 5: Telefonie & Serverlimits -->
<section id="infrastructure" aria-labelledby="heading-infrastructure">
<h2 id="heading-infrastructure">
5. Sprachkanäle &amp; Speicherplatz limits
</h2>
<!-- Sektion 3: Erster Login & Sicherheit -->
<section id="first-login" aria-labelledby="heading-first-login">
<h2 id="heading-first-login">3. Erster Login &amp; Sicherheitsschlüssel</h2>
<div class="matrix-alert" role="alert" aria-label="Sicherheitswarnung">
<h3>⚠️ WARNUNG: Kryptografische Schlüssel sichern</h3>
<p>
Unser Server stellt Kanäle bereit, mit denen du direkt über das
Diese Matrix Instanz erzwingt standardmäßig eine vollständige
Ende-zu-Ende-Verschlüsselung (E2EE). Bei der ersten Verbindung
generiert dein Client eine
<strong>Passphrase als Sicherheitsschlüssel</strong>.
Sichere diesen Schlüssel extern! Solltest du dich abmelden
oder das Gerät wechseln und diesen Schlüssel verlieren, sind deine
Daten unwiderruflich verschlüsselt. Die
Administration hat keinerlei Backdoors, um deine Daten
wiederherzustellen.
</p>
</div>
<h3>Schritt-für-Schritt-Protokoll:</h3>
<ol>
<li>Wähle einen Client aus dem vorherigen Abschnitt.</li>
<li>
Der Zugriff ist entweder über klassische
<strong>User-Credentials (Nutzername & Passwort)</strong> oder über das
<strong>Single-Sign-On-Protokoll (SSO)</strong> möglich.
</li>
<li>
Bei der Nutzung von SSO wirst du automatisch zum zentralen
Identitäts-Server unter
<a
href="https://auth.cyperpunk.de/"
target="_blank"
rel="noopener"
aria-label="auth.cyperpunk.de (öffnet neuen Tab)"
><strong>auth.cyperpunk.de</strong></a
>
(powered by Kanidm) umgeleitet.
</li>
<li>
Nach erfolgreicher Authentifizierung wird deine Session für Matrix freigeschaltet.
</li>
</ol>
</section>
<!-- Sektion 4: Wie ist Matrix aufgebaut? -->
<section id="server-structures" aria-labelledby="heading-server-structures">
<h2 id="heading-server-structures">4. Wie ist Matrix aufgebaut?</h2>
<p>
Damit alles ordentlich bleibt und du dich gut zurechtfindest, ist
Matrix logisch aufgeteilt. Es gibt im Grunde zwei Ebenen:
</p>
<ol>
<li>
<strong>Spaces (Bereiche / Ordner):</strong> Der übergeordnete
Bereich – wie ein kompletter Server bei Discord. Ein Space sammelt
verschiedene Rooms (Chats) an einem Ort.
</li>
<li>
<strong>Rooms (Räume / Chats):</strong> Die eigentlichen Text- oder
Sprachkanäle innerhalb eines Bereichs. Hier wird geschrieben,
telefoniert und Material geteilt.
</li>
</ol>
<p><strong>Tipps für Admins und Moderatoren:</strong></p>
<ul>
<li>
Erstelle zuerst einen <strong>Space (Bereich)</strong>, dann packst
du die einzelnen Chats geordnet dort hinein.
</li>
<li>
Verwende klare, einfache Namen für deine Räume – das erleichtert
allen die Übersicht in der Seitenleiste.
</li>
</ul>
</section>
<!-- Sektion 5: Sprachkanäle & Dateilimits -->
<section id="infrastructure" aria-labelledby="heading-infrastructure">
<h2 id="heading-infrastructure">5. Sprachkanäle &amp; Speicherplatzlimits</h2>
<p>
Der Server stellt Kanäle bereit, mit denen du direkt über das
Internet mit anderen Mitgliedern sprechen oder Dateien austauschen
kannst.
</p>
@@ -338,244 +373,34 @@
<div class="card">
<h3 class="card-title">Anrufe in Gruppen</h3>
<p class="card-text">
Wenn du mit mehreren Personen in einem Raum telefonierst, sorgt
unser Server im Hintergrund automatisch für eine flüssige, stabile
Audio- und Bildübertragung.
Bei Gruppengesprächen in einem Raum übernimmt der Server im
Hintergrund automatisch die Audio- und Bildübertragung für eine
stabile Verbindung.
</p>
</div>
<div class="card">
<h3 class="card-title">Direktanrufe (1:1)</h3>
<p class="card-text">
Telefonate mit nur einer Person werden sicher und direkt
aufgebaut. Ein integrierter Hilfsdienst sorgt dafür, dass die
aufgebaut. Ein integrierter Hilfsdienst (Coturn) sorgt dafür, dass die
Verbindung auch durch Firewalls hinweg klappt.
</p>
</div>
<!-- Volle Breite für die Speicherplatzwarnung -->
<div
class="card full-width-card"
style="border-color: #ff9900; background: rgba(20, 10, 0, 0.6)"
>
<h3 class="card-title" style="color: #ff9900">
Dateigröße &amp; faires Teilen
</h3>
<div class="card full-width-card card--warning">
<h3 class="card-title card-title--warning">Dateigröße &amp; faires Teilen</h3>
<p class="card-text">
Das Hochladen von Bildern, Videos oder Dokumenten ist auf maximal
<strong>50 MB pro Datei</strong> begrenzt. Da unser
Festplattenplatz auf dem Server nicht unendlich ist, gehe bitte
sparsam mit großen Dateien um.
<strong>50 MB pro Datei</strong> begrenzt. Der verfügbare
Festplattenplatz ist begrenzt – ein sparsamer Umgang mit großen
Dateien wird empfohlen.
</p>
</div>
</div>
</section>
<!-- Sektion 6: Server-Strukturen -->
<section
id="server-structures"
aria-labelledby="heading-server-structures"
>
<h2 id="heading-server-structures">
6. Server-Strukturen: Chats und Bereiche
</h2>
<p>
Damit alles ordentlich bleibt und du dich gut zurechtfindest, ist
Matrix logisch aufgeteilt. Es gibt im Grunde zwei Ebenen, um Gespräche
zu sortieren:
</p>
<ol>
<li>
<strong>Spaces (Bereiche / Ordner):</strong> Das ist die
übergeordnete Klammer – wie ein kompletter Server bei Discord. Ein
Space sammelt verschiedene Chats an einem Ort, damit es
übersichtlich bleibt.
</li>
<li>
<strong>Rooms (Räume / Chats):</strong> Das sind die eigentlichen
Text- oder Sprachkanäle innerhalb eines Bereichs. Hier wird
geschrieben, telefoniert und Material geteilt.
</li>
</ol>
<p><strong>Tipps für Admins und Moderatoren:</strong></p>
<ul>
<li>
Wenn du eine neue Gruppe gründest, erstelle am besten
<strong>zuerst einen Space (Bereich)</strong>. Danach packst du die
einzelnen Chats geordnet dort hinein.
</li>
<li>
Verwende klare, einfache Namen für deine Räume. Das macht es für
alle Nutzer leichter, die Übersicht in ihrer Seitenleiste zu
behalten.
</li>
</ul>
</section>
<!-- Sektion 7: Codex Tabelle -->
<section id="codex" aria-labelledby="heading-codex">
<h2 id="heading-codex">7. Discord-zu-Matrix Referenz-Codex</h2>
<p>
Verwende diese Referenztabelle, um gewohnte Discord-Strukturen auf den
offenen Matrix-Standard zu mappen:
</p>
<table
class="codex-table"
aria-label="Discord-zu-Matrix Vergleichstabelle"
>
<thead>
<tr>
<th scope="col">Discord-Konstrukt</th>
<th scope="col">Matrix-Spezifikation</th>
<th scope="col">Funktion im Netz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Server / Gilde</td>
<td><strong>Space (Bereich)</strong></td>
<td>
Ein virtueller Container, der Räume und Entitäten unter einem
Thema bündelt.
</td>
</tr>
<tr>
<td>Text- / Sprachkanal</td>
<td><strong>Room (Raum)</strong></td>
<td>
Der eigentliche Endpunkt für Textnachrichten, Bilddaten oder
Telefonie.
</td>
</tr>
<tr>
<td>Direktnachricht (DM)</td>
<td><strong>Direkt-Chat</strong></td>
<td>
Ein kryptografisch isolierter 1:1-Kanal zwischen zwei Accounts.
</td>
</tr>
<tr>
<td>Rollen &amp; Rechte</td>
<td><strong>Power Levels</strong></td>
<td>
Ein numerischer Berechtigungswert (0 bis 100) zur Steuerung von
Moderations-Rechten.
</td>
</tr>
<tr>
<td>Nitro Emojis</td>
<td><strong>Emote-Packs</strong></td>
<td>
Serverweite Sticker- und Emoji-Bibliotheken – dezentral und
kostenfrei.
</td>
</tr>
</tbody>
</table>
</section>
<!-- Sektion 8: System-Automatisierungen (Maubots) -->
<section id="maubots" aria-labelledby="heading-maubots">
<h2 id="heading-maubots">8. Aktive Automatisierungs-Bots (Maubot)</h2>
<p>
Das <strong>Maubot</strong>-Framework erlaubt das Einbinden von
automatisierten Skripten und Funktionen in das Raum-Netzwerk. Unsere
Kerninstanz operiert unter der ID:
<code style="color: #fff">@maubot:cyperpunk.de</code>.
</p>
<p>
<strong>Bedienung:</strong> Du kannst die Entität
<strong>in jeden beliebigen Raum einladen</strong>, um die geladenen
Module per Textbefehl zu aktivieren. Aktive Subroutinen:
</p>
<div class="cards-grid">
<!-- Bot 1 -->
<div class="card">
<h3 class="card-title">Urban Dictionary</h3>
<p class="card-text">
Analysiert Slang-Begriffe, Definitionen und sprachliche Variablen
direkt im Raum-Feed.<br /><a
href="https://github.com/dvdgsng/UrbanMaubot/blob/master/README.md"
target="_blank"
aria-label="Urban Dictionary Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<!-- Bot 2 -->
<div class="card">
<h3 class="card-title">RSS News-Feeds</h3>
<p class="card-text">
Abonniert externe Informations-Feeds und speist Updates
vollautomatisch in den Chat-Stream ein.<br /><a
href="https://github.com/maubot/rss/blob/master/README.md"
target="_blank"
aria-label="RSS Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<!-- Bot 3 -->
<div class="card">
<h3 class="card-title">Erinnerungs-Engine</h3>
<p class="card-text">
Ermöglicht das Setzen von Timern, Cron-Triggern und
zeitgesteuerten Alarmen im Raum.<br /><a
href="https://github.com/maubot/reminder/blob/master/README.md"
target="_blank"
aria-label="Reminder Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<!-- Bot 4 -->
<div class="card">
<h3 class="card-title">Wetter-Array</h3>
<p class="card-text">
Fragt aktuelle Klimadaten und meteorologische Berichte für globale
Koordinaten ab.<br /><a
href="https://github.com/kellya/maubot-weather/blob/main/README.md"
target="_blank"
aria-label="Weather Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
</div>
</section>
<!-- Sektion 9: Discord Bridge -->
<section id="discord-bridge" aria-labelledby="heading-discord-bridge">
<h2 id="heading-discord-bridge">9. Discord Bridge Link</h2>
<p>
Unsere Brücken-Module spiegeln Daten und Signalkanal-Nachrichten
nahtlos zwischen Matrix und externen Discord-Gilden.
</p>
<p>
<strong>Ident-ID der Discord-Bridge:</strong>
<code style="color: #fff">@discordbot:cyperpunk.de</code>
</p>
<h3>Befehlssatz:</h3>
<ul>
<li>
Öffne eine Direktverbindung (DM) mit dem Bridge-Bot, um Befehle
direkt einzuspeisen.
</li>
<li>
Im privaten Kommunikationskanal versteht der Bot Befehle direkt über
das Text-Kommando <code style="color: #fff">help</code>.
</li>
<li>
Innerhalb von geteilten Räumen muss das Präfix vorangestellt werden:
<code style="color: #fff">!discord help</code>.
</li>
</ul>
</section>
<!-- FAQ -->
<!-- Sektion 6: FAQ -->
<section id="faq" aria-labelledby="heading-faq">
<h2 id="heading-faq">FAQ – Häufige Fragen</h2>
<h2 id="heading-faq">6. FAQ – Häufige Fragen</h2>
<h3>Was ist Matrix?</h3>
<p>
@@ -594,14 +419,14 @@
<h3>Kann ich meinen bestehenden Matrix-Account verwenden?</h3>
<p>
Ja. Du kannst von jedem Matrix-Server aus unseren Räumen beitreten –
einfach die Adresse <code>@deinname:deinserver.de</code> verwenden und
den Raum <code>#cyperpunk:cyperpunk.de</code> suchen.
Ja. Von jedem Matrix-Server aus lässt sich dem Raum
<code class="code--white">#cyperpunk:cyperpunk.de</code> beitreten – einfach die eigene
Adresse <code class="code--white">@deinname:deinserver.de</code> verwenden.
</p>
<h3>Wie bekomme ich einen Account auf diesem Server?</h3>
<p>
Fülle das Registrierungsformular oben aus. Die Administration prüft
Fülle das Registrierungsformular oben aus. Der Administrator prüft
deine Anfrage und schickt dir die Zugangsdaten per E-Mail.
</p>
@@ -613,16 +438,179 @@
</p>
<h3>Was kostet das?</h3>
<p>
Nichts. Der Server wird privat betrieben und ist kostenlos nutzbar.
</p>
<p>Nichts. Der Server wird privat betrieben und ist kostenlos nutzbar.</p>
</section>
<!-- Trennbereich: Für Fortgeschrittene -->
<div
class="advanced-separator"
role="note"
aria-label="Beginn des Fortgeschrittenen-Bereichs"
>
<h2>Für Fortgeschrittene</h2>
<p>
Die folgenden Abschnitte richten sich an Nutzer, die den Server aktiv
mitgestalten oder erweitern möchten – z.&nbsp;B. Bots einbinden,
Discord-Kanäle verbinden oder Matrix-Begriffe mit Discord vergleichen.
Als normaler Nutzer brauchst du das nicht.
</p>
</div>
<!-- Sektion 7: Maubots -->
<section id="maubots" aria-labelledby="heading-maubots">
<h2 id="heading-maubots">7. Aktive Automatisierungs-Bots (Maubot)</h2>
<p>
Das <strong>Maubot</strong>-Framework ermöglicht die Integration
automatisierter Skripte in das Raum-Netzwerk. Die Instanz dieses
Servers ist erreichbar unter:
<code class="code--white">@maubot:cyperpunk.de</code>.
</p>
<p>
<strong>Bedienung:</strong> Die Entität kann
<strong>in jeden beliebigen Raum eingeladen</strong> werden, um die
geladenen Module per Textbefehl zu aktivieren. Aktive Subroutinen:
</p>
<div class="cards-grid">
<div class="card">
<h3 class="card-title">Urban Dictionary</h3>
<p class="card-text">
Analysiert Slang-Begriffe, Definitionen und sprachliche Variablen
direkt im Raum-Feed.<br />
<a
href="https://github.com/dvdgsng/UrbanMaubot/blob/master/README.md"
target="_blank"
rel="noopener"
aria-label="Urban Dictionary Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<div class="card">
<h3 class="card-title">RSS News-Feeds</h3>
<p class="card-text">
Abonniert externe Informations-Feeds und speist Updates
vollautomatisch in den Chat-Stream ein.<br />
<a
href="https://github.com/maubot/rss/blob/master/README.md"
target="_blank"
rel="noopener"
aria-label="RSS Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<div class="card">
<h3 class="card-title">Reminder</h3>
<p class="card-text">
Ermöglicht das Setzen von Timern, Cron-Triggern und
zeitgesteuerten Alarmen im Raum.<br />
<a
href="https://github.com/maubot/reminder/blob/master/README.md"
target="_blank"
rel="noopener"
aria-label="Reminder Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
<div class="card">
<h3 class="card-title">Wetter-Array</h3>
<p class="card-text">
Fragt aktuelle Klimadaten und meteorologische Berichte für globale
Koordinaten ab.<br />
<a
href="https://github.com/kellya/maubot-weather/blob/main/README.md"
target="_blank"
rel="noopener"
aria-label="Weather Maubot Dokumentation (öffnet neuen Tab)"
>Dokumentation</a
>
</p>
</div>
</div>
</section>
<!-- Sektion 8: Discord Bridge -->
<section id="discord-bridge" aria-labelledby="heading-discord-bridge">
<h2 id="heading-discord-bridge">8. Discord Bridge</h2>
<p>
Die Mautrix Discord Bridge spiegelt Nachrichten nahtlos zwischen Matrix
und externen Discord-Gilden.
</p>
<p>
<strong>Ident-ID der Discord-Bridge:</strong>
<code class="code--white">@discordbot:cyperpunk.de</code>
</p>
<h3>Befehlssatz:</h3>
<ul>
<li>
Öffne eine Direktnachricht (DM) mit dem Bridge-Bot, um Befehle
einzuspeisen.
</li>
<li>
Im DM-Kanal versteht der Bot das Kommando
<code class="code--white">help</code> direkt.
</li>
<li>
In geteilten Räumen muss das Präfix vorangestellt werden:
<code class="code--white">!discord help</code>.
</li>
</ul>
</section>
<!-- Sektion 9: Discord-zu-Matrix Referenz -->
<section id="codex" aria-labelledby="heading-codex">
<h2 id="heading-codex">9. Discord-zu-Matrix Referenz-Codex</h2>
<p>
Diese Tabelle zeigt, wie bekannte Discord-Konzepte in Matrix heißen:
</p>
<table class="codex-table" aria-label="Discord-zu-Matrix Vergleichstabelle">
<thead>
<tr>
<th scope="col">Discord-Konstrukt</th>
<th scope="col">Matrix-Spezifikation</th>
<th scope="col">Funktion im Netz</th>
</tr>
</thead>
<tbody>
<tr>
<td>Server / Gilde</td>
<td><strong>Space</strong></td>
<td>Ein virtueller Container, der Räume unter einem Thema bündelt.</td>
</tr>
<tr>
<td>Text- / Sprachkanal</td>
<td><strong>Room</strong></td>
<td>Der Endpunkt für Textnachrichten, Bilddaten oder Telefonie.</td>
</tr>
<tr>
<td>Direktnachricht (DM)</td>
<td><strong>Direkt-Chat</strong></td>
<td>Ein kryptografisch isolierter 1:1-Kanal zwischen zwei Accounts.</td>
</tr>
<tr>
<td>Rollen &amp; Rechte</td>
<td><strong>Power Levels</strong></td>
<td>Ein numerischer Berechtigungswert (0–100) zur Steuerung von Moderations-Rechten.</td>
</tr>
<tr>
<td>Nitro Emojis</td>
<td><strong>Emote-Packs</strong></td>
<td>Serverweite Sticker- und Emoji-Bibliotheken – dezentral und kostenfrei.</td>
</tr>
</tbody>
</table>
</section>
</main>
<!-- Footer -->
<footer>
[SYSTEM MESSAGE] // This site was autonomously generated by Gemini //
[EOF]
<p class="footer-line">[ EOF ] /////// TRANSMISSION COMPLETE ///////</p>
<p class="footer-credit">GENERATED BY <span>CLAUDE</span> // ANTHROPIC &middot; <span>claude-sonnet-4-6</span></p>
</footer>
<script src="app.js"></script>
</body>
nixos/roles/matrix/maubot.nix
+1 -1
View File
@@ -12,8 +12,8 @@
rss
reminder
urban
llm
wolframalpha
dice
];
settings = {
database = "postgresql:///maubot?host=/run/postgresql";
nixos/roles/matrix/style.css
+169 -19
View File
@@ -100,7 +100,7 @@ section {
background: rgba(0, 5, 0, 0.85);
border: 1px solid #00ff41;
border-radius: 6px;
padding: 30px;
padding: 20px 30px 30px;
box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
}
@@ -291,6 +291,7 @@ a:hover {
grid-column: 1 / -1;
}
/* Card title icons */
.card-title {
font-size: 1.15rem;
color: #fff;
@@ -299,6 +300,20 @@ a:hover {
letter-spacing: 1px;
border-bottom: 1px dashed #00ff41;
padding-bottom: 5px;
display: flex;
align-items: center;
gap: 8px;
}
.card-icon {
height: 20px;
width: auto;
object-fit: contain;
filter: invert(53%) sepia(93%) saturate(1353%) hue-rotate(87deg)
brightness(119%) contrast(119%);
flex-shrink: 0;
}
.card-title--highlight .card-icon {
filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(95deg) brightness(110%);
}
.card-text {
@@ -434,18 +449,7 @@ a:hover {
}
/* --- Footer --- */
footer {
text-align: center;
padding: 20px;
background: rgba(0, 5, 0, 0.9);
border-top: 1px dashed #00ff41;
font-size: 0.8rem;
color: #00ff41;
color: rgba(0, 255, 65, 0.7);
position: relative;
z-index: 1;
letter-spacing: 1px;
}
/* (styles moved to end of file) */
/* Fokus-Styles für Tastaturnavigation */
a:focus-visible,
@@ -497,20 +501,43 @@ input:focus-visible {
}
}
@media (max-width: 600px) {
@media (max-width: 768px) {
.container {
padding: 20px 14px;
}
h1 {
font-size: 2.2rem;
font-size: 2rem;
letter-spacing: 2px;
}
h2 {
font-size: 1.3rem;
font-size: 1.2rem;
letter-spacing: 1px;
}
h3 {
font-size: 1rem;
}
section {
padding: 15px;
padding: 14px 16px 20px;
margin-bottom: 30px;
}
.cards-grid {
grid-template-columns: 1fr;
}
.linktree-btn {
font-size: 0.95rem;
padding: 14px 16px;
letter-spacing: 1px;
}
.codex-table {
font-size: 0.82rem;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.codex-table th,
.codex-table td {
padding: 8px;
font-size: 0.85rem;
padding: 8px 10px;
white-space: nowrap;
}
.app-row {
flex-direction: column;
@@ -523,4 +550,127 @@ input:focus-visible {
flex: 1;
justify-content: center;
}
.advanced-separator {
margin: 30px 0 20px 0;
padding: 14px 16px;
}
.abstract {
padding: 12px 14px;
margin-bottom: 24px;
}
}
/* --- Abstract Block --- */
.abstract {
border-left: 3px solid #00aa41;
padding: 16px 20px;
margin: 0 0 40px 0;
background: rgba(0, 170, 65, 0.05);
border-radius: 0 4px 4px 0;
}
.abstract p {
margin: 0;
color: #a3ffa3;
line-height: 1.7;
}
/* --- Fortgeschrittenen-Trennbereich --- */
.advanced-separator {
border-left: 3px solid #5a7a5a;
border-radius: 0 4px 4px 0;
background: rgba(0, 170, 65, 0.03);
padding: 16px 20px;
margin: 48px 0 32px 0;
}
.advanced-separator h2 {
margin: 0 0 8px 0;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #5a7a5a;
border-bottom: none;
text-shadow: none;
padding-bottom: 0;
}
.advanced-separator p {
margin: 0;
color: #5a7a5a;
font-size: 0.9rem;
line-height: 1.6;
}
/* --- Hilfsklassen für inline-style Ersatz --- */
.card--highlight {
border-color: #00aa41;
}
.card-title--highlight {
color: #00aa41;
}
.card--warning {
border-color: #ff9900;
background: rgba(20, 10, 0, 0.6);
}
.card-title--warning {
color: #ff9900;
}
.text--danger {
color: #ff3333;
text-shadow: none;
}
.honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
visibility: hidden;
pointer-events: none;
}
.code--white {
color: #fff;
}
.mt-20 {
margin-top: 20px;
}
.mt-28 {
margin-top: 28px;
}
/* App store button icons */
.app-btn img {
height: 18px;
width: auto;
object-fit: contain;
filter: invert(53%) sepia(93%) saturate(1353%) hue-rotate(87deg)
brightness(119%) contrast(119%);
transition: filter 0.2s ease;
flex-shrink: 0;
}
.app-btn:hover img {
filter: invert(100%) brightness(200%);
}
/* Footer matrix style */
footer {
text-align: center;
padding: 20px;
background: rgba(0, 5, 0, 0.9);
border-top: 1px dashed #00ff41;
font-size: 0.8rem;
color: rgba(0, 255, 65, 0.7);
position: relative;
z-index: 1;
letter-spacing: 1px;
}
.footer-line {
color: rgba(0, 255, 65, 0.35);
margin-bottom: 4px;
}
.footer-credit {
color: rgba(0, 255, 65, 0.7);
letter-spacing: 0.15em;
}
.footer-credit span {
color: #00ff41;
text-shadow: 0 0 6px #00ff41;
}