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"; "cyperpunk.de" = "user";
"@dergrumpf:cyperpunk.de" = "admin"; "@dergrumpf:cyperpunk.de" = "admin";
}; };
backfill = {
limits = {
initial = {
channel = 10000;
thread = 500;
};
missed = {
channel = 500;
};
};
};
}; };
discord = { discord = {
client_id = "$DISCORD_CLIENT_ID"; 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"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matrix Guide - cyperpunk.de</title> <title>Matrix Guide - cyperpunk.de</title>
<!-- Favicon Integration -->
<link <link
rel="icon" rel="icon"
type="image/png" 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" /> <link rel="stylesheet" href="style.css" />
@@ -31,10 +30,10 @@
</head> </head>
<body> <body>
<a href="#main-content" class="skip-link">Zum Inhalt springen</a> <a href="#main-content" class="skip-link">Zum Inhalt springen</a>
<!-- Matrix Code-Regen Hintergrund -->
<canvas id="matrix-bg" aria-hidden="true"></canvas> <canvas id="matrix-bg" aria-hidden="true"></canvas>
<main class="container" id="main-content"> <main class="container" id="main-content">
<!-- Header --> <!-- Header -->
<header> <header>
<h1>Matrix Guide</h1> <h1>Matrix Guide</h1>
@@ -42,52 +41,66 @@
<p class="admin-tag">Grid-Operator: @dergrumpf:cyperpunk.de</p> <p class="admin-tag">Grid-Operator: @dergrumpf:cyperpunk.de</p>
</header> </header>
<!-- Sektion 1: Registrierungs-Widget --> <!-- Abstract -->
<section id="registration" aria-labelledby="heading-registration"> <div class="abstract" role="note" aria-label="Was ist Matrix?">
<h2 id="heading-registration">
1. Identitäts-Allokation (Registrierung)
</h2>
<p> <p>
Zugangsdaten für diesen Server werden exklusiv durch die <strong>Was ist Matrix?</strong> Matrix ist ein offenes,
Administration autorisiert. Nutze das untenstehende Interface, um eine verschlüsseltes Kommunikationsnetzwerk – wie WhatsApp oder Discord,
Verbindung anzufordern. Die Übertragung erfolgt direkt in unseren aber ohne zentrales Unternehmen dahinter. Jeder Nutzer hat eine eigene
gesicherten internen Koordinationskanal. 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> </p>
<!-- REGISTRIERUNGS-WIDGET --> <form class="reg-form" id="reg-form" novalidate aria-label="Registrierungsanfrage">
<div class="reg-form">
<label for="reg-username">Gewünschter Benutzername</label> <label for="reg-username">Gewünschter Benutzername</label>
<input <input
type="text" type="text"
id="reg-username" id="reg-username"
name="username"
placeholder="z.B. neo" placeholder="z.B. neo"
autocomplete="off" autocomplete="off"
spellcheck="false" spellcheck="false"
required
aria-required="true"
/> />
<label for="reg-email">E-Mail-Adresse (für Login-Daten)</label> <label for="reg-email">E-Mail-Adresse (für Login-Daten)</label>
<input <input
type="email" type="email"
id="reg-email" id="reg-email"
name="email"
placeholder="z.B. neo@example.com" placeholder="z.B. neo@example.com"
autocomplete="off" autocomplete="off"
required
aria-required="true"
/> />
<!-- Honeypot: muss leer bleiben --> <!-- Honeypot: muss leer bleiben -->
<label for="reg-website" style="display: none" aria-hidden="true" <label for="reg-website" class="honeypot" aria-hidden="true">Website</label>
>Website</label
>
<input <input
type="text" type="text"
id="reg-website" id="reg-website"
name="website" name="website"
class="honeypot"
tabindex="-1" tabindex="-1"
autocomplete="off" autocomplete="off"
style="display: none"
aria-hidden="true" aria-hidden="true"
/> />
<button <button
type="button"
class="reg-submit" class="reg-submit"
id="reg-btn" id="reg-btn"
onclick="submitRegistration()" onclick="submitRegistration()"
@@ -102,103 +115,51 @@
aria-live="polite" aria-live="polite"
aria-atomic="true" aria-atomic="true"
></div> ></div>
</div> </form>
</section> </section>
<!-- Sektion 2: Erster Login & Sicherheit --> <!-- Sektion 2: App oder Browser wählen -->
<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) -->
<section id="clients" aria-labelledby="heading-clients"> <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> <p>
Kopple dein System über eine unserer drei gehosteten Du kannst Matrix entweder direkt im Browser nutzen oder eine App auf
Web-Schnittstellen. Sobald dein Login-Protokoll abgeschlossen ist, deinem Smartphone installieren. Sobald dein Login abgeschlossen ist,
findest du den übergeordneten Hauptbereich (Community Space) im Grid findest du den Homeserver unter
unter der Adresse <code>#cyperpunk:cyperpunk.de</code>. <code class="code--white">#cyperpunk:cyperpunk.de</code>.
</p> </p>
<h3>Im Browser starten</h3>
<p>Wähle eine der drei gehosteten Web-Schnittstellen:</p>
<div class="linktree-container"> <div class="linktree-container">
<a <a
href="https://element.cyperpunk.de/" href="https://element.cyperpunk.de/"
target="_blank" target="_blank"
rel="noopener"
aria-label="Element starten (öffnet neuen Tab)" aria-label="Element starten (öffnet neuen Tab)"
class="linktree-btn" class="linktree-btn"
> >
<img <img src="https://img.icons8.com/keek-line/96/physics.png" alt="" aria-hidden="true" />
src="https://img.icons8.com/keek-line/96/physics.png"
alt="Element Icon"
/>
Terminal: Element starten Terminal: Element starten
</a> </a>
<a <a
href="https://cinny.cyperpunk.de/" href="https://cinny.cyperpunk.de/"
target="_blank" target="_blank"
rel="noopener"
aria-label="Cinny starten (öffnet neuen Tab)" aria-label="Cinny starten (öffnet neuen Tab)"
class="linktree-btn" class="linktree-btn"
> >
<img <img src="https://img.icons8.com/ios/100/bird--v1.png" alt="" aria-hidden="true" />
src="https://img.icons8.com/ios/100/bird--v1.png"
alt="Cinny Icon"
/>
Terminal: Cinny starten Terminal: Cinny starten
</a> </a>
<a <a
href="https://fluffy.cyperpunk.de/" href="https://fluffy.cyperpunk.de/"
target="_blank" target="_blank"
rel="noopener"
aria-label="FluffyChat starten (öffnet neuen Tab)" aria-label="FluffyChat starten (öffnet neuen Tab)"
class="linktree-btn" class="linktree-btn"
> >
<img <img src="https://img.icons8.com/pastel-glyph/64/cat--v3.png" alt="" aria-hidden="true" />
src="https://img.icons8.com/pastel-glyph/64/cat--v3.png"
alt="FluffyChat Icon"
/>
Terminal: FluffyChat starten Terminal: FluffyChat starten
</a> </a>
</div> </div>
@@ -206,130 +167,204 @@
<h3>Welches Programm soll ich wählen?</h3> <h3>Welches Programm soll ich wählen?</h3>
<div class="cards-grid"> <div class="cards-grid">
<div class="card"> <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"> <p class="card-text">
Der mächtige <strong>Allrounder</strong>. Sieht klassisch aus und Der mächtige <strong>Allrounder</strong>. Klassisches Interface mit
bietet absolut jede Funktion, die Matrix kann. Perfekt, wenn du vollem Funktionsumfang. Geeignet für alle, die Räume selbst
Räume selbst verwalten willst. verwalten möchten.
<strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im <strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im
Browser. Browser.
</p> </p>
</div> </div>
<div class="card"> <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"> <p class="card-text">
Der <strong>moderne Chat</strong>. Ist extrem schnell, Der <strong>moderne Chat</strong>. Schnell, übersichtlich, am
übersichtlich und orientiert sich vom Design an Discord oder Design von Discord und Slack orientiert. Empfohlen für alle, die
Slack. Ideal, wenn du einfach nur bequem schreiben willst. einfach schreiben möchten.
<strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im <strong>Unterstützt Sprach- und Videoanrufe</strong> direkt im
Browser. Browser.
</p> </p>
</div> </div>
<div class="card" style="border-color: #00aa41"> <div class="card card--highlight">
<h3 class="card-title" style="color: #00aa41">FluffyChat</h3> <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"> <p class="card-text">
Der <strong>einfache Messenger</strong>. Bunt, super unkompliziert Der <strong>einfache Messenger</strong>. Bunt und unkompliziert,
und perfekt für Einsteiger, die den Look von WhatsApp oder Signal vergleichbar mit WhatsApp oder Signal.
bevorzugen. <strong class="text--danger">Achtung:</strong>
<strong style="color: #ff3333; text-shadow: none" Diese Web-Version unterstützt <strong>keinen Sprach-Chat</strong>.
>Achtung:</strong
>
Diese Web-Version hat <strong>keinen Sprach-Chat</strong>.
</p> </p>
</div> </div>
</div> </div>
</section>
<!-- Sektion 4: Mobiler Zugang --> <h3>Auf dem Smartphone nutzen</h3>
<section id="mobile" aria-labelledby="heading-mobile">
<h2 id="heading-mobile">4. Mobile App-Konfiguration</h2>
<p> <p>
Möchtest du von unterwegs aus auf das Grid zugreifen? Lade dir einfach Möchtest du von unterwegs auf Matrix zugreifen? Lade dir eine
eine passende App für dein Smartphone herunter: passende App herunter:
</p> </p>
<div class="app-download-box"> <div class="app-download-box">
<!-- FluffyChat Download Zeile -->
<div class="app-row"> <div class="app-row">
<div class="app-info"> <div class="app-info">
<span class="app-name">FluffyChat</span> <span class="app-name">FluffyChat</span>
<p style="margin: 5px 0 0 0; font-size: 0.85rem; color: #a3ffa3"> <p>Bunt, einsteigerfreundlich und ideal für das Smartphone.</p>
Bunt, einsteigerfreundlich und ideal für das Smartphone.
</p>
</div> </div>
<div class="app-buttons"> <div class="app-buttons">
<a <a
href="https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat&hl=de_DE" href="https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat&hl=de_DE"
target="_blank" 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" 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 <a
href="https://apps.apple.com/us/app/fluffychat/id1551469600" href="https://apps.apple.com/us/app/fluffychat/id1551469600"
target="_blank" 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" 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> </div>
<!-- Element X Download Zeile -->
<div class="app-row"> <div class="app-row">
<div class="app-info"> <div class="app-info">
<span class="app-name">Element X</span> <span class="app-name">Element X</span>
<p style="margin: 5px 0 0 0; font-size: 0.85rem; color: #a3ffa3"> <p>Die App der nächsten Generation: Extrem schnell, modern und sicher.</p>
Die App der nächsten Generation: Extrem schnell, modern und
sicher.
</p>
</div> </div>
<div class="app-buttons"> <div class="app-buttons">
<a <a
href="https://play.google.com/store/apps/details?id=io.element.android.x&hl=de_DE" href="https://play.google.com/store/apps/details?id=io.element.android.x&hl=de_DE"
target="_blank" 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" 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 <a
href="https://apps.apple.com/us/app/element-x-secure-chat-call/id1631335820" href="https://apps.apple.com/us/app/element-x-secure-chat-call/id1631335820"
target="_blank" 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" 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> </div>
</div> </div>
<p style="margin-top: 20px"> <p class="mt-28"><strong>Wichtig beim ersten App-Start:</strong></p>
<strong>Wichtig beim ersten App-Start:</strong>
</p>
<ul> <ul>
<li>Überspringe die automatische Registrierung in der App.</li> <li>Überspringe die automatische Registrierung in der App.</li>
<li> <li>
Suche nach der Option <strong>"Heimserver ändern"</strong> (oder Suche nach der Option <strong>„Heimserver ändern"</strong>
Homeserver wechseln). (oder Homeserver wechseln).
</li> </li>
<li> <li>
Trage dort manuell unsere Server-Adresse ein: Trage dort die Server-Adresse ein:
<code style="color: #fff">cyperpunk.de</code> <code class="code--white">cyperpunk.de</code>
</li> </li>
<li> <li>
Logge dich erst danach wie gewohnt mit deinen Zugangsdaten oder per Logge dich erst danach wie gewohnt mit deinen Zugangsdaten oder
SSO ein. per SSO ein.
</li> </li>
</ul> </ul>
</section> </section>
<!-- Sektion 5: Telefonie & Serverlimits --> <!-- Sektion 3: Erster Login & Sicherheit -->
<section id="infrastructure" aria-labelledby="heading-infrastructure"> <section id="first-login" aria-labelledby="heading-first-login">
<h2 id="heading-infrastructure"> <h2 id="heading-first-login">3. Erster Login &amp; Sicherheitsschlüssel</h2>
5. Sprachkanäle &amp; Speicherplatz limits
</h2> <div class="matrix-alert" role="alert" aria-label="Sicherheitswarnung">
<h3>⚠️ WARNUNG: Kryptografische Schlüssel sichern</h3>
<p>
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> <p>
Unser Server stellt Kanäle bereit, mit denen du direkt über das 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 Internet mit anderen Mitgliedern sprechen oder Dateien austauschen
kannst. kannst.
</p> </p>
@@ -338,244 +373,34 @@
<div class="card"> <div class="card">
<h3 class="card-title">Anrufe in Gruppen</h3> <h3 class="card-title">Anrufe in Gruppen</h3>
<p class="card-text"> <p class="card-text">
Wenn du mit mehreren Personen in einem Raum telefonierst, sorgt Bei Gruppengesprächen in einem Raum übernimmt der Server im
unser Server im Hintergrund automatisch für eine flüssige, stabile Hintergrund automatisch die Audio- und Bildübertragung für eine
Audio- und Bildübertragung. stabile Verbindung.
</p> </p>
</div> </div>
<div class="card"> <div class="card">
<h3 class="card-title">Direktanrufe (1:1)</h3> <h3 class="card-title">Direktanrufe (1:1)</h3>
<p class="card-text"> <p class="card-text">
Telefonate mit nur einer Person werden sicher und direkt 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. Verbindung auch durch Firewalls hinweg klappt.
</p> </p>
</div> </div>
<!-- Volle Breite für die Speicherplatzwarnung --> <div class="card full-width-card card--warning">
<div <h3 class="card-title card-title--warning">Dateigröße &amp; faires Teilen</h3>
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>
<p class="card-text"> <p class="card-text">
Das Hochladen von Bildern, Videos oder Dokumenten ist auf maximal Das Hochladen von Bildern, Videos oder Dokumenten ist auf maximal
<strong>50 MB pro Datei</strong> begrenzt. Da unser <strong>50 MB pro Datei</strong> begrenzt. Der verfügbare
Festplattenplatz auf dem Server nicht unendlich ist, gehe bitte Festplattenplatz ist begrenzt – ein sparsamer Umgang mit großen
sparsam mit großen Dateien um. Dateien wird empfohlen.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<!-- Sektion 6: Server-Strukturen --> <!-- Sektion 6: FAQ -->
<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 -->
<section id="faq" aria-labelledby="heading-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> <h3>Was ist Matrix?</h3>
<p> <p>
@@ -594,14 +419,14 @@
<h3>Kann ich meinen bestehenden Matrix-Account verwenden?</h3> <h3>Kann ich meinen bestehenden Matrix-Account verwenden?</h3>
<p> <p>
Ja. Du kannst von jedem Matrix-Server aus unseren Räumen beitreten – Ja. Von jedem Matrix-Server aus lässt sich dem Raum
einfach die Adresse <code>@deinname:deinserver.de</code> verwenden und <code class="code--white">#cyperpunk:cyperpunk.de</code> beitreten – einfach die eigene
den Raum <code>#cyperpunk:cyperpunk.de</code> suchen. Adresse <code class="code--white">@deinname:deinserver.de</code> verwenden.
</p> </p>
<h3>Wie bekomme ich einen Account auf diesem Server?</h3> <h3>Wie bekomme ich einen Account auf diesem Server?</h3>
<p> <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. deine Anfrage und schickt dir die Zugangsdaten per E-Mail.
</p> </p>
@@ -613,16 +438,179 @@
</p> </p>
<h3>Was kostet das?</h3> <h3>Was kostet das?</h3>
<p> <p>Nichts. Der Server wird privat betrieben und ist kostenlos nutzbar.</p>
Nichts. Der Server wird privat betrieben und ist kostenlos nutzbar.
</p>
</section> </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> </main>
<!-- Footer --> <!-- Footer -->
<footer> <footer>
[SYSTEM MESSAGE] // This site was autonomously generated by Gemini // <p class="footer-line">[ EOF ] /////// TRANSMISSION COMPLETE ///////</p>
[EOF] <p class="footer-credit">GENERATED BY <span>CLAUDE</span> // ANTHROPIC &middot; <span>claude-sonnet-4-6</span></p>
</footer> </footer>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
nixos/roles/matrix/maubot.nix
+1 -1
View File
@@ -12,8 +12,8 @@
rss rss
reminder reminder
urban urban
llm
wolframalpha wolframalpha
dice
]; ];
settings = { settings = {
database = "postgresql:///maubot?host=/run/postgresql"; 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); background: rgba(0, 5, 0, 0.85);
border: 1px solid #00ff41; border: 1px solid #00ff41;
border-radius: 6px; border-radius: 6px;
padding: 30px; padding: 20px 30px 30px;
box-shadow: 0 0 15px rgba(0, 255, 65, 0.1); box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
} }
@@ -291,6 +291,7 @@ a:hover {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
/* Card title icons */
.card-title { .card-title {
font-size: 1.15rem; font-size: 1.15rem;
color: #fff; color: #fff;
@@ -299,6 +300,20 @@ a:hover {
letter-spacing: 1px; letter-spacing: 1px;
border-bottom: 1px dashed #00ff41; border-bottom: 1px dashed #00ff41;
padding-bottom: 5px; 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 { .card-text {
@@ -434,18 +449,7 @@ a:hover {
} }
/* --- Footer --- */ /* --- Footer --- */
footer { /* (styles moved to end of file) */
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;
}
/* Fokus-Styles für Tastaturnavigation */ /* Fokus-Styles für Tastaturnavigation */
a:focus-visible, a:focus-visible,
@@ -497,20 +501,43 @@ input:focus-visible {
} }
} }
@media (max-width: 600px) { @media (max-width: 768px) {
.container {
padding: 20px 14px;
}
h1 { h1 {
font-size: 2.2rem; font-size: 2rem;
letter-spacing: 2px;
} }
h2 { h2 {
font-size: 1.3rem; font-size: 1.2rem;
letter-spacing: 1px;
}
h3 {
font-size: 1rem;
} }
section { 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 th,
.codex-table td { .codex-table td {
padding: 8px; padding: 8px 10px;
font-size: 0.85rem; white-space: nowrap;
} }
.app-row { .app-row {
flex-direction: column; flex-direction: column;
@@ -523,4 +550,127 @@ input:focus-visible {
flex: 1; flex: 1;
justify-content: center; 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;
} }