From b63d3ac0a78ef5c4843b25c45b280b00538dc7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 17 Mar 2026 13:50:14 +0100
Subject: [PATCH 1/4] Implement component 'DemoLogin.vue'

---
 docs/.vuepress/client.js                |  2 +
 docs/.vuepress/components/DemoLogin.vue | 50 +++++++++++++++++++++++
 docs/de/README.md                       | 52 +++++-------------------
 docs/de/get-started/README.md           | 22 +++++-----
 docs/en/README.md                       | 52 +++++-------------------
 docs/en/get-started/README.md           | 22 +++++-----
 docs/es/README.md                       | 54 +++++--------------------
 docs/es/get-started/README.md           | 22 +++++-----
 docs/fr/README.md                       | 52 +++++-------------------
 docs/fr/get-started/README.md           | 22 +++++-----
 10 files changed, 144 insertions(+), 206 deletions(-)
 create mode 100644 docs/.vuepress/components/DemoLogin.vue

diff --git a/docs/.vuepress/client.js b/docs/.vuepress/client.js
index 97e36a8..d804fc7 100644
--- a/docs/.vuepress/client.js
+++ b/docs/.vuepress/client.js
@@ -1,4 +1,5 @@
 import { defineClientConfig } from "vuepress/client";
+import DemoLogin from "./components/DemoLogin.vue";
 import DonationBar from "./components/DonationBar.vue";
 import MiniBlog from "./components/MiniBlog.vue";
 import RoadmapProgress from "./components/RoadmapProgress.vue";
@@ -6,6 +7,7 @@ import RedirectHome from "./components/RedirectHome.vue";
 
 export default defineClientConfig({
   enhance({ app }) {
+    app.component("DemoLogin", DemoLogin);
     app.component("DonationBar", DonationBar);
     app.component("MiniBlog", MiniBlog);
     app.component("RoadmapProgress", RoadmapProgress);
diff --git a/docs/.vuepress/components/DemoLogin.vue b/docs/.vuepress/components/DemoLogin.vue
new file mode 100644
index 0000000..4dd3c04
--- /dev/null
+++ b/docs/.vuepress/components/DemoLogin.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="{ center: centered }">
+    <p>
+      {{ labelIntroBefore }}
+      <a href="https://stage.ocelot.social" target="_blank" rel="noopener noreferrer">https://stage.ocelot.social</a>
+      {{ labelIntroAfter }}
+    </p>
+
+    <table>
+      <thead>
+        <tr>
+          <th style="text-align:left;">{{ labelEmail }}</th>
+          <th style="text-align:left;">{{ labelPassword }}</th>
+          <th style="text-align:left;">{{ labelRole }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td style="text-align:left;"><code>user@example.org</code></td>
+          <td style="text-align:left;">1234</td>
+          <td style="text-align:left;">{{ labelUserRole }}</td>
+        </tr>
+        <tr>
+          <td style="text-align:left;"><code>moderator@example.org</code></td>
+          <td style="text-align:left;">1234</td>
+          <td style="text-align:left;">{{ labelModeratorRole }}</td>
+        </tr>
+        <tr>
+          <td style="text-align:left;"><code>admin@example.org</code></td>
+          <td style="text-align:left;">1234</td>
+          <td style="text-align:left;">{{ labelAdminRole }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  labelIntroBefore: { type: String, required: true },
+  labelIntroAfter: { type: String, required: true },
+  labelEmail: { type: String, required: true },
+  labelPassword: { type: String, required: true },
+  labelRole: { type: String, required: true },
+  labelUserRole: { type: String, required: true },
+  labelModeratorRole: { type: String, required: true },
+  labelAdminRole: { type: String, required: true },
+  centered: { type: Boolean, default: true },
+})
+</script>
diff --git a/docs/de/README.md b/docs/de/README.md
index ffcbb79..8ae22f7 100644
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -232,48 +232,16 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
 
 <h2 class="large-header">Probier es aus</h2>
 
-<!--
-| E-Mail                  | Passwort | Benutzerrolle   |
-| :---                    | :---     | :---            |
-| `user@example.org`      | 1234     | normaler Nutzer |
-| `moderator@example.org` | 1234     | Moderator       |
-| `admin@example.org`     | 1234     | Administrator   |
--->
-
-<div class="center">
-  <p>
-    Teste die Live-Demo auf
-    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
-    mit den folgenden Zugangsdaten:
-  </p>
-
-  <table>
-    <thead>
-      <tr>
-        <th style="text-align:left;">E-Mail</th>
-        <th style="text-align:left;">Passwort</th>
-        <th style="text-align:left;">Benutzerrolle</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td style="text-align:left;"><code>user@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">normaler Nutzer</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>moderator@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">Moderator</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>admin@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">Administrator</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<DemoLogin
+  label-intro-before="Teste die Live-Demo auf"
+  label-intro-after="mit den folgenden Zugangsdaten:"
+  label-email="E-Mail"
+  label-password="Passwort"
+  label-role="Benutzerrolle"
+  label-user-role="normaler Nutzer"
+  label-moderator-role="Moderator"
+  label-admin-role="Administrator"
+/>
 
 <h2 class="large-header">Loslegen</h2>
 
diff --git a/docs/de/get-started/README.md b/docs/de/get-started/README.md
index 8452618..4de255e 100644
--- a/docs/de/get-started/README.md
+++ b/docs/de/get-started/README.md
@@ -9,15 +9,19 @@ description: Bereit für dein eigenes soziales Netzwerk? Erfahre, wie du die oce
 
 ## Ausprobieren, dann installieren
 
-Teste die Live-Demo auf
-[https://stage.ocelot.social](https://stage.ocelot.social)
-mit den folgenden Zugangsdaten:
-
-| E-Mail                  | Passwort | Benutzerrolle   |
-| :---                    | :---     | :---            |
-| `user@example.org`      | 1234     | normaler Nutzer |
-| `moderator@example.org` | 1234     | Moderator       |
-| `admin@example.org`     | 1234     | Administrator   |
+<!-- markdownlint-disable MD033 -->
+<DemoLogin
+  :centered="false"
+  label-intro-before="Teste die Live-Demo auf"
+  label-intro-after="mit den folgenden Zugangsdaten:"
+  label-email="E-Mail"
+  label-password="Passwort"
+  label-role="Benutzerrolle"
+  label-user-role="normaler Nutzer"
+  label-moderator-role="Moderator"
+  label-admin-role="Administrator"
+/>
+<!-- markdownlint-enable MD033 -->
 
 ## Hosting auf einem Server
 
diff --git a/docs/en/README.md b/docs/en/README.md
index 5b98d5f..473c30d 100644
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -233,48 +233,16 @@ description: A free and open source software with which you can operate a social
 
 <h2 class="large-header">Try it out</h2>
 
-<!--
-| E-Mail                  | Passwort | Benutzerrolle   |
-| :---                    | :---     | :---            |
-| `user@example.org`      | 1234     | normaler Nutzer |
-| `moderator@example.org` | 1234     | Moderator       |
-| `admin@example.org`     | 1234     | Administrator   |
--->
-
-<div class="center">
-  <p>
-    Test the live demo on
-    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
-    with the following access data:
-  </p>
-
-  <table>
-    <thead>
-      <tr>
-        <th style="text-align:left;">E-mail</th>
-        <th style="text-align:left;">Password</th>
-        <th style="text-align:left;">User role</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td style="text-align:left;"><code>user@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">normal user</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>moderator@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">moderator</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>admin@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">administrator</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<DemoLogin
+  label-intro-before="Test the live demo at"
+  label-intro-after="with the following access data:"
+  label-email="E-mail"
+  label-password="Password"
+  label-role="User role"
+  label-user-role="normal user"
+  label-moderator-role="moderator"
+  label-admin-role="administrator"
+/>
 
 <h2 class="large-header">Get started</h2>
 
diff --git a/docs/en/get-started/README.md b/docs/en/get-started/README.md
index 942ebc6..1f3e461 100644
--- a/docs/en/get-started/README.md
+++ b/docs/en/get-started/README.md
@@ -9,15 +9,19 @@ description: Ready to get started with your own social network? Learn how to ins
 
 ## Try it out, then install it
 
-Test the live demo at
-[https://stage.ocelot.social](https://stage.ocelot.social)
-with the following access data:
-
-| E-mail                  | Password | User role     |
-| :---                    | :---     | :---          |
-| `user@example.org`      | 1234     | normal user   |
-| `moderator@example.org` | 1234     | moderator     |
-| `admin@example.org`     | 1234     | administrator |
+<!-- markdownlint-disable MD033 -->
+<DemoLogin
+  :centered="false"
+  label-intro-before="Test the live demo at"
+  label-intro-after="with the following access data:"
+  label-email="E-mail"
+  label-password="Password"
+  label-role="User role"
+  label-user-role="normal user"
+  label-moderator-role="moderator"
+  label-admin-role="administrator"
+/>
+<!-- markdownlint-enable MD033 -->
 
 ## Hosting on a server
 
diff --git a/docs/es/README.md b/docs/es/README.md
index a8dcc09..4081f78 100644
--- a/docs/es/README.md
+++ b/docs/es/README.md
@@ -199,50 +199,16 @@ description: "Un software libre y de código abierto con el que puedes gestionar
 
 <h2 class="large-header">Pruébalo</h2>
 
-<!--
-| E-Mail                  | Passwort | Benutzerrolle   |
-| :---                    | :---     | :---            |
-| `user@example.org`      | 1234     | normaler Nutzer |
-| `moderator@example.org` | 1234     | Moderator       |
-| `admin@example.org`     | 1234     | Administrator   |
--->
-
-<div class="center">
-  <p>
-    Prueba la demostración en vivo en
-    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
-    con los siguientes datos de acceso:
-  </p>
-
-  <table>
-    <thead>
-      <tr>
-        <th style="text-align:left;">E-mail</th>
-        <th style="text-align:left;">Contraseña</th>
-        <th style="text-align:left;">Rol de usuario</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td style="text-align:left;"><code>user@example.org</code></td>
-        <td style="text-align:left;">1234
-
-</td>
-        <td style="text-align:left;">usuario normal</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>moderator@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">moderador</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>admin@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">administrador</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<DemoLogin
+  label-intro-before="Prueba la demo en vivo en"
+  label-intro-after="con los siguientes datos de acceso:"
+  label-email="E-mail"
+  label-password="Contraseña"
+  label-role="Rol de usuario"
+  label-user-role="usuario normal"
+  label-moderator-role="moderador"
+  label-admin-role="administrador"
+/>
 
 <h2 class="large-header">Comienza</h2>
 
diff --git a/docs/es/get-started/README.md b/docs/es/get-started/README.md
index 9fe261d..8f3756d 100644
--- a/docs/es/get-started/README.md
+++ b/docs/es/get-started/README.md
@@ -9,15 +9,19 @@ description: ¿Listo para crear tu propia red social? Descubre cómo instalar el
 
 ## Pruébalo, luego instálalo
 
-Prueba la demo en vivo en
-[https://stage.ocelot.social](https://stage.ocelot.social)
-con los siguientes datos de acceso:
-
-| Correo electrónico      | Contraseña | Rol de usuario |
-| :---                    | :---       | :---           |
-| `user@example.org`      | 1234       | usuario normal |
-| `moderator@example.org` | 1234       | moderador      |
-| `admin@example.org`     | 1234       | administrador  |
+<!-- markdownlint-disable MD033 -->
+<DemoLogin
+  :centered="false"
+  label-intro-before="Prueba la demo en vivo en"
+  label-intro-after="con los siguientes datos de acceso:"
+  label-email="Correo electrónico"
+  label-password="Contraseña"
+  label-role="Rol de usuario"
+  label-user-role="usuario normal"
+  label-moderator-role="moderador"
+  label-admin-role="administrador"
+/>
+<!-- markdownlint-enable MD033 -->
 
 ## Hospedaje en un servidor
 
diff --git a/docs/fr/README.md b/docs/fr/README.md
index 5f1e794..ce536a9 100644
--- a/docs/fr/README.md
+++ b/docs/fr/README.md
@@ -233,48 +233,16 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
 
 <h2 class="large-header">Essayes-le</h2>
 
-<!--
-| E-Mail                  | Passwort | Benutzerrolle   |
-| :---                    | :---     | :---            |
-| `user@example.org`      | 1234     | normaler Nutzer |
-| `moderator@example.org` | 1234     | Moderator       |
-| `admin@example.org`     | 1234     | Administrator   |
--->
-
-<div class="center">
-  <p>
-    Testes la démo en direct sur
-    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
-    avec les données d’accès suivantes :
-  </p>
-
-  <table>
-    <thead>
-      <tr>
-        <th style="text-align:left;">Courriel</th>
-        <th style="text-align:left;">Mot de passe</th>
-        <th style="text-align:left;">Rôle de l’utilisateur</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td style="text-align:left;"><code>user@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">utilisateur normal</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>moderator@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">modérateur</td>
-      </tr>
-      <tr>
-        <td style="text-align:left;"><code>admin@example.org</code></td>
-        <td style="text-align:left;">1234</td>
-        <td style="text-align:left;">administrateur</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<DemoLogin
+  label-intro-before="Testes la démo en direct sur"
+  label-intro-after="avec les données d’accès suivantes :"
+  label-email="Courriel"
+  label-password="Mot de passe"
+  label-role="Rôle de l’utilisateur"
+  label-user-role="utilisateur normal"
+  label-moderator-role="modérateur"
+  label-admin-role="administrateur"
+/>
 
 <h2 class="large-header">Commence</h2>
 
diff --git a/docs/fr/get-started/README.md b/docs/fr/get-started/README.md
index acfe4e0..5c42c6a 100644
--- a/docs/fr/get-started/README.md
+++ b/docs/fr/get-started/README.md
@@ -9,15 +9,19 @@ description: Prêt à démarrer ton propre réseau social ? Apprends à installe
 
 ## Essaies-le, puis installes-le
 
-Testes la démo en direct à l’adresse
-[https://stage.ocelot.social](https://stage.ocelot.social)
-avec les données d’accès suivantes :
-
-| Courriel                | Mot de passe | Rôle de l’utilisateur |
-| :---                    | :---         | :---                  |
-| `user@example.org`      | 1234         | utilisateur normal    |
-| `moderator@example.org` | 1234         | modérateur            |
-| `admin@example.org`     | 1234         | administrateur        |
+<!-- markdownlint-disable MD033 -->
+<DemoLogin
+  :centered="false"
+  label-intro-before="Testes la démo en direct sur"
+  label-intro-after="avec les données d’accès suivantes :"
+  label-email="Courriel"
+  label-password="Mot de passe"
+  label-role="Rôle de l’utilisateur"
+  label-user-role="utilisateur normal"
+  label-moderator-role="modérateur"
+  label-admin-role="administrateur"
+/>
+<!-- markdownlint-enable MD033 -->
 
 ## Hébergement sur un serveur
 

From b24bad5e0a7f42c81a88ed802ae0e24e0843947f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 17 Mar 2026 13:57:54 +0100
Subject: [PATCH 2/4] Refactor 'DemoLogin.vue' to have the locales inside

---
 docs/.vuepress/components/DemoLogin.vue | 73 +++++++++++++++++++------
 docs/de/README.md                       | 11 +---
 docs/de/get-started/README.md           | 12 +---
 docs/en/README.md                       | 11 +---
 docs/en/get-started/README.md           | 12 +---
 docs/es/README.md                       | 11 +---
 docs/es/get-started/README.md           | 12 +---
 docs/fr/README.md                       | 11 +---
 docs/fr/get-started/README.md           | 12 +---
 9 files changed, 65 insertions(+), 100 deletions(-)

diff --git a/docs/.vuepress/components/DemoLogin.vue b/docs/.vuepress/components/DemoLogin.vue
index 4dd3c04..7b8cabf 100644
--- a/docs/.vuepress/components/DemoLogin.vue
+++ b/docs/.vuepress/components/DemoLogin.vue
@@ -1,34 +1,34 @@
 <template>
   <div :class="{ center: centered }">
     <p>
-      {{ labelIntroBefore }}
+      {{ t.introBefore }}
       <a href="https://stage.ocelot.social" target="_blank" rel="noopener noreferrer">https://stage.ocelot.social</a>
-      {{ labelIntroAfter }}
+      {{ t.introAfter }}
     </p>
 
     <table>
       <thead>
         <tr>
-          <th style="text-align:left;">{{ labelEmail }}</th>
-          <th style="text-align:left;">{{ labelPassword }}</th>
-          <th style="text-align:left;">{{ labelRole }}</th>
+          <th style="text-align:left;">{{ t.email }}</th>
+          <th style="text-align:left;">{{ t.password }}</th>
+          <th style="text-align:left;">{{ t.role }}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td style="text-align:left;"><code>user@example.org</code></td>
           <td style="text-align:left;">1234</td>
-          <td style="text-align:left;">{{ labelUserRole }}</td>
+          <td style="text-align:left;">{{ t.userRole }}</td>
         </tr>
         <tr>
           <td style="text-align:left;"><code>moderator@example.org</code></td>
           <td style="text-align:left;">1234</td>
-          <td style="text-align:left;">{{ labelModeratorRole }}</td>
+          <td style="text-align:left;">{{ t.moderatorRole }}</td>
         </tr>
         <tr>
           <td style="text-align:left;"><code>admin@example.org</code></td>
           <td style="text-align:left;">1234</td>
-          <td style="text-align:left;">{{ labelAdminRole }}</td>
+          <td style="text-align:left;">{{ t.adminRole }}</td>
         </tr>
       </tbody>
     </table>
@@ -36,15 +36,56 @@
 </template>
 
 <script setup>
+import { computed } from "vue"
+import { useRouteLocale } from "vuepress/client"
+
 defineProps({
-  labelIntroBefore: { type: String, required: true },
-  labelIntroAfter: { type: String, required: true },
-  labelEmail: { type: String, required: true },
-  labelPassword: { type: String, required: true },
-  labelRole: { type: String, required: true },
-  labelUserRole: { type: String, required: true },
-  labelModeratorRole: { type: String, required: true },
-  labelAdminRole: { type: String, required: true },
   centered: { type: Boolean, default: true },
 })
+
+const i18n = {
+  "/de/": {
+    introBefore: "Teste die Live-Demo auf",
+    introAfter: "mit den folgenden Zugangsdaten:",
+    email: "E-Mail",
+    password: "Passwort",
+    role: "Benutzerrolle",
+    userRole: "normaler Nutzer",
+    moderatorRole: "Moderator",
+    adminRole: "Administrator",
+  },
+  "/en/": {
+    introBefore: "Test the live demo at",
+    introAfter: "with the following access data:",
+    email: "E-mail",
+    password: "Password",
+    role: "User role",
+    userRole: "normal user",
+    moderatorRole: "moderator",
+    adminRole: "administrator",
+  },
+  "/es/": {
+    introBefore: "Prueba la demo en vivo en",
+    introAfter: "con los siguientes datos de acceso:",
+    email: "E-mail",
+    password: "Contraseña",
+    role: "Rol de usuario",
+    userRole: "usuario normal",
+    moderatorRole: "moderador",
+    adminRole: "administrador",
+  },
+  "/fr/": {
+    introBefore: "Testes la démo en direct sur",
+    introAfter: "avec les données d\u0027accès suivantes :",
+    email: "Courriel",
+    password: "Mot de passe",
+    role: "Rôle de l\u0027utilisateur",
+    userRole: "utilisateur normal",
+    moderatorRole: "modérateur",
+    adminRole: "administrateur",
+  },
+}
+
+const locale = useRouteLocale()
+const t = computed(() => i18n[locale.value] ?? i18n["/en/"])
 </script>
diff --git a/docs/de/README.md b/docs/de/README.md
index 8ae22f7..2480b44 100644
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -232,16 +232,7 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
 
 <h2 class="large-header">Probier es aus</h2>
 
-<DemoLogin
-  label-intro-before="Teste die Live-Demo auf"
-  label-intro-after="mit den folgenden Zugangsdaten:"
-  label-email="E-Mail"
-  label-password="Passwort"
-  label-role="Benutzerrolle"
-  label-user-role="normaler Nutzer"
-  label-moderator-role="Moderator"
-  label-admin-role="Administrator"
-/>
+<DemoLogin />
 
 <h2 class="large-header">Loslegen</h2>
 
diff --git a/docs/de/get-started/README.md b/docs/de/get-started/README.md
index 4de255e..8070e75 100644
--- a/docs/de/get-started/README.md
+++ b/docs/de/get-started/README.md
@@ -10,17 +10,7 @@ description: Bereit für dein eigenes soziales Netzwerk? Erfahre, wie du die oce
 ## Ausprobieren, dann installieren
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin
-  :centered="false"
-  label-intro-before="Teste die Live-Demo auf"
-  label-intro-after="mit den folgenden Zugangsdaten:"
-  label-email="E-Mail"
-  label-password="Passwort"
-  label-role="Benutzerrolle"
-  label-user-role="normaler Nutzer"
-  label-moderator-role="Moderator"
-  label-admin-role="Administrator"
-/>
+<DemoLogin :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hosting auf einem Server
diff --git a/docs/en/README.md b/docs/en/README.md
index 473c30d..7017cfa 100644
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -233,16 +233,7 @@ description: A free and open source software with which you can operate a social
 
 <h2 class="large-header">Try it out</h2>
 
-<DemoLogin
-  label-intro-before="Test the live demo at"
-  label-intro-after="with the following access data:"
-  label-email="E-mail"
-  label-password="Password"
-  label-role="User role"
-  label-user-role="normal user"
-  label-moderator-role="moderator"
-  label-admin-role="administrator"
-/>
+<DemoLogin />
 
 <h2 class="large-header">Get started</h2>
 
diff --git a/docs/en/get-started/README.md b/docs/en/get-started/README.md
index 1f3e461..9c8d815 100644
--- a/docs/en/get-started/README.md
+++ b/docs/en/get-started/README.md
@@ -10,17 +10,7 @@ description: Ready to get started with your own social network? Learn how to ins
 ## Try it out, then install it
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin
-  :centered="false"
-  label-intro-before="Test the live demo at"
-  label-intro-after="with the following access data:"
-  label-email="E-mail"
-  label-password="Password"
-  label-role="User role"
-  label-user-role="normal user"
-  label-moderator-role="moderator"
-  label-admin-role="administrator"
-/>
+<DemoLogin :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hosting on a server
diff --git a/docs/es/README.md b/docs/es/README.md
index 4081f78..c3778c0 100644
--- a/docs/es/README.md
+++ b/docs/es/README.md
@@ -199,16 +199,7 @@ description: "Un software libre y de código abierto con el que puedes gestionar
 
 <h2 class="large-header">Pruébalo</h2>
 
-<DemoLogin
-  label-intro-before="Prueba la demo en vivo en"
-  label-intro-after="con los siguientes datos de acceso:"
-  label-email="E-mail"
-  label-password="Contraseña"
-  label-role="Rol de usuario"
-  label-user-role="usuario normal"
-  label-moderator-role="moderador"
-  label-admin-role="administrador"
-/>
+<DemoLogin />
 
 <h2 class="large-header">Comienza</h2>
 
diff --git a/docs/es/get-started/README.md b/docs/es/get-started/README.md
index 8f3756d..dc527eb 100644
--- a/docs/es/get-started/README.md
+++ b/docs/es/get-started/README.md
@@ -10,17 +10,7 @@ description: ¿Listo para crear tu propia red social? Descubre cómo instalar el
 ## Pruébalo, luego instálalo
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin
-  :centered="false"
-  label-intro-before="Prueba la demo en vivo en"
-  label-intro-after="con los siguientes datos de acceso:"
-  label-email="Correo electrónico"
-  label-password="Contraseña"
-  label-role="Rol de usuario"
-  label-user-role="usuario normal"
-  label-moderator-role="moderador"
-  label-admin-role="administrador"
-/>
+<DemoLogin :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hospedaje en un servidor
diff --git a/docs/fr/README.md b/docs/fr/README.md
index ce536a9..ccb46b7 100644
--- a/docs/fr/README.md
+++ b/docs/fr/README.md
@@ -233,16 +233,7 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
 
 <h2 class="large-header">Essayes-le</h2>
 
-<DemoLogin
-  label-intro-before="Testes la démo en direct sur"
-  label-intro-after="avec les données d’accès suivantes :"
-  label-email="Courriel"
-  label-password="Mot de passe"
-  label-role="Rôle de l’utilisateur"
-  label-user-role="utilisateur normal"
-  label-moderator-role="modérateur"
-  label-admin-role="administrateur"
-/>
+<DemoLogin />
 
 <h2 class="large-header">Commence</h2>
 
diff --git a/docs/fr/get-started/README.md b/docs/fr/get-started/README.md
index 5c42c6a..839f8d8 100644
--- a/docs/fr/get-started/README.md
+++ b/docs/fr/get-started/README.md
@@ -10,17 +10,7 @@ description: Prêt à démarrer ton propre réseau social ? Apprends à installe
 ## Essaies-le, puis installes-le
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin
-  :centered="false"
-  label-intro-before="Testes la démo en direct sur"
-  label-intro-after="avec les données d’accès suivantes :"
-  label-email="Courriel"
-  label-password="Mot de passe"
-  label-role="Rôle de l’utilisateur"
-  label-user-role="utilisateur normal"
-  label-moderator-role="modérateur"
-  label-admin-role="administrateur"
-/>
+<DemoLogin :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hébergement sur un serveur

From 68a6213707f7dc655c29e85fcc2c823344bd0559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 17 Mar 2026 14:02:44 +0100
Subject: [PATCH 3/4] Rename 'DemoLogin.vue' to 'DemoLoginLocalized.vue' to
 signal that locales are inside

---
 docs/.vuepress/client.js                                      | 4 ++--
 .../components/{DemoLogin.vue => DemoLoginLocalized.vue}      | 0
 docs/de/README.md                                             | 2 +-
 docs/de/get-started/README.md                                 | 2 +-
 docs/en/README.md                                             | 2 +-
 docs/en/get-started/README.md                                 | 2 +-
 docs/es/README.md                                             | 2 +-
 docs/es/get-started/README.md                                 | 2 +-
 docs/fr/README.md                                             | 2 +-
 docs/fr/get-started/README.md                                 | 2 +-
 10 files changed, 10 insertions(+), 10 deletions(-)
 rename docs/.vuepress/components/{DemoLogin.vue => DemoLoginLocalized.vue} (100%)

diff --git a/docs/.vuepress/client.js b/docs/.vuepress/client.js
index d804fc7..9f30ec2 100644
--- a/docs/.vuepress/client.js
+++ b/docs/.vuepress/client.js
@@ -1,5 +1,5 @@
 import { defineClientConfig } from "vuepress/client";
-import DemoLogin from "./components/DemoLogin.vue";
+import DemoLoginLocalized from "./components/DemoLoginLocalized.vue";
 import DonationBar from "./components/DonationBar.vue";
 import MiniBlog from "./components/MiniBlog.vue";
 import RoadmapProgress from "./components/RoadmapProgress.vue";
@@ -7,7 +7,7 @@ import RedirectHome from "./components/RedirectHome.vue";
 
 export default defineClientConfig({
   enhance({ app }) {
-    app.component("DemoLogin", DemoLogin);
+    app.component("DemoLoginLocalized", DemoLoginLocalized);
     app.component("DonationBar", DonationBar);
     app.component("MiniBlog", MiniBlog);
     app.component("RoadmapProgress", RoadmapProgress);
diff --git a/docs/.vuepress/components/DemoLogin.vue b/docs/.vuepress/components/DemoLoginLocalized.vue
similarity index 100%
rename from docs/.vuepress/components/DemoLogin.vue
rename to docs/.vuepress/components/DemoLoginLocalized.vue
diff --git a/docs/de/README.md b/docs/de/README.md
index 2480b44..62f1757 100644
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -232,7 +232,7 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
 
 <h2 class="large-header">Probier es aus</h2>
 
-<DemoLogin />
+<DemoLoginLocalized />
 
 <h2 class="large-header">Loslegen</h2>
 
diff --git a/docs/de/get-started/README.md b/docs/de/get-started/README.md
index 8070e75..2d0169f 100644
--- a/docs/de/get-started/README.md
+++ b/docs/de/get-started/README.md
@@ -10,7 +10,7 @@ description: Bereit für dein eigenes soziales Netzwerk? Erfahre, wie du die oce
 ## Ausprobieren, dann installieren
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin :centered="false" />
+<DemoLoginLocalized :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hosting auf einem Server
diff --git a/docs/en/README.md b/docs/en/README.md
index 7017cfa..6d03fea 100644
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -233,7 +233,7 @@ description: A free and open source software with which you can operate a social
 
 <h2 class="large-header">Try it out</h2>
 
-<DemoLogin />
+<DemoLoginLocalized />
 
 <h2 class="large-header">Get started</h2>
 
diff --git a/docs/en/get-started/README.md b/docs/en/get-started/README.md
index 9c8d815..ca2f004 100644
--- a/docs/en/get-started/README.md
+++ b/docs/en/get-started/README.md
@@ -10,7 +10,7 @@ description: Ready to get started with your own social network? Learn how to ins
 ## Try it out, then install it
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin :centered="false" />
+<DemoLoginLocalized :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hosting on a server
diff --git a/docs/es/README.md b/docs/es/README.md
index c3778c0..a83df3c 100644
--- a/docs/es/README.md
+++ b/docs/es/README.md
@@ -199,7 +199,7 @@ description: "Un software libre y de código abierto con el que puedes gestionar
 
 <h2 class="large-header">Pruébalo</h2>
 
-<DemoLogin />
+<DemoLoginLocalized />
 
 <h2 class="large-header">Comienza</h2>
 
diff --git a/docs/es/get-started/README.md b/docs/es/get-started/README.md
index dc527eb..39776b5 100644
--- a/docs/es/get-started/README.md
+++ b/docs/es/get-started/README.md
@@ -10,7 +10,7 @@ description: ¿Listo para crear tu propia red social? Descubre cómo instalar el
 ## Pruébalo, luego instálalo
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin :centered="false" />
+<DemoLoginLocalized :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hospedaje en un servidor
diff --git a/docs/fr/README.md b/docs/fr/README.md
index ccb46b7..cb5cfc2 100644
--- a/docs/fr/README.md
+++ b/docs/fr/README.md
@@ -233,7 +233,7 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
 
 <h2 class="large-header">Essayes-le</h2>
 
-<DemoLogin />
+<DemoLoginLocalized />
 
 <h2 class="large-header">Commence</h2>
 
diff --git a/docs/fr/get-started/README.md b/docs/fr/get-started/README.md
index 839f8d8..0c447e8 100644
--- a/docs/fr/get-started/README.md
+++ b/docs/fr/get-started/README.md
@@ -10,7 +10,7 @@ description: Prêt à démarrer ton propre réseau social ? Apprends à installe
 ## Essaies-le, puis installes-le
 
 <!-- markdownlint-disable MD033 -->
-<DemoLogin :centered="false" />
+<DemoLoginLocalized :centered="false" />
 <!-- markdownlint-enable MD033 -->
 
 ## Hébergement sur un serveur

From 02c3e33cafa63aa04e0f92ef06a4da396216fd1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 17 Mar 2026 14:23:16 +0100
Subject: [PATCH 4/4] Make table in 'DemoLoginLocalized.vue' scrollable on
 mobile

---
 docs/.vuepress/components/DemoLoginLocalized.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/.vuepress/components/DemoLoginLocalized.vue b/docs/.vuepress/components/DemoLoginLocalized.vue
index 7b8cabf..02ba77f 100644
--- a/docs/.vuepress/components/DemoLoginLocalized.vue
+++ b/docs/.vuepress/components/DemoLoginLocalized.vue
@@ -6,6 +6,7 @@
       {{ t.introAfter }}
     </p>
 
+    <div class="table-scroll">
     <table>
       <thead>
         <tr>
@@ -32,6 +33,7 @@
         </tr>
       </tbody>
     </table>
+    </div>
   </div>
 </template>
 
@@ -89,3 +91,9 @@ const i18n = {
 const locale = useRouteLocale()
 const t = computed(() => i18n[locale.value] ?? i18n["/en/"])
 </script>
+
+<style scoped>
+.table-scroll {
+  overflow-x: auto;
+}
+</style>