Refactor 'DemoLogin.vue' to have the locales inside

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>

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>
 

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

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>
 

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

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>
 

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

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>
 

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