Showcased I18N

src/main/java/rest/Application.java

@@ -1,11 +1,10 @@
 package rest;
 
-import jakarta.ws.rs.Path;
-
 import io.quarkiverse.renarde.Controller;
 import io.quarkus.qute.CheckedTemplate;
 import io.quarkus.qute.TemplateInstance;
 import io.smallrye.common.annotation.Blocking;
+import jakarta.ws.rs.Path;
 
 @Blocking
 public class Application extends Controller {
@@ -25,4 +24,14 @@ public TemplateInstance index() {
     public TemplateInstance about() {
         return Templates.about();
     }
+
+    public void french() {
+        i18n.set("fr");
+        index();
+    }
+
+    public void english() {
+        i18n.set("en");
+        index();
+    }
 }

src/main/java/rest/Todos.java

@@ -46,7 +46,7 @@ public void delete(@RestPath Long id) {
         if(todo.owner != getUser())
             notFound();
         todo.delete();
-        flash("message", "Task deleted");
+        flash("message", i18n.formatMessage("todos.message.deleted", todo.task));
         index();
     }
 
@@ -59,7 +59,7 @@ public void done(@RestPath Long id) {
         todo.done = !todo.done;
         if(todo.done)
             todo.doneDate = new Date();
-        flash("message", "Task updated");
+        flash("message", i18n.formatMessage("todos.message.updated", todo.task));
         index();
     }
 
@@ -72,7 +72,7 @@ public void add(@NotBlank @RestForm String task) {
         todo.task = task;
         todo.owner = getUser();
         todo.persist();
-        flash("message", "Task added");
+        flash("message", i18n.formatMessage("todos.message.updated", todo.task));
         index();
     }
 }

src/main/resources/application.properties

@@ -54,3 +54,8 @@ quarkus.log.category."io.netty.handler.logging.LoggingHandler".level=DEBUG
 quarkus.log.category."io.quarkus.oidc.runtime".level=DEBUG
 
 quarkus.webauthn.login-page=/Login/login
+
+# This is the default locale for your application
+quarkus.default-locale=en
+# These are the supported locales (should include the default locale, but order is not important)
+quarkus.locales=en,fr

src/main/resources/messages.properties

@@ -0,0 +1,23 @@
+main.login=Login/Register
+main.help=Help
+main.about=About
+main.language=Language
+main.logout=Logout
+main.backoffice=Backoffice
+main.todos=Todos
+
+application.index.title=Welcome to Todos
+application.index.subtitle=Start adding todos today!
+
+todos.index.tasks=Tasks
+todos.index.new=New
+todos.index.action=Action
+todos.index.done=Mark as done
+todos.index.undone=Mark as not done
+todos.index.delete=Delete
+todos.index.placeholder=Type task and press ENTER
+todos.index.pdf=Download as PDF
+
+todos.message.deleted=Task deleted: %s
+todos.message.updated=Task updated: %s
+todos.message.added=Task added: %s

src/main/resources/messages_fr.properties

@@ -0,0 +1,23 @@
+main.login=Connexion/Enregistrement
+main.help=Aide
+main.about=À propos
+main.language=Langue
+main.logout=Déconnexion
+main.backoffice=Administration
+main.todos=Tâches
+
+application.index.title=Bienvenue sur Todo
+application.index.subtitle=Ajoutez des tâches dès maintenant!
+
+todos.index.tasks=Tâches
+todos.index.new=Nouvelle tâche
+todos.index.action=Action
+todos.index.done=Marquer comme fait
+todos.index.undone=Marquer à faire
+todos.index.delete=Supprimer
+todos.index.placeholder=Décrivez la tâche et appuyez sur ENTRÉE
+todos.index.pdf=Télécharger PDF
+
+todos.message.deleted=Tâche supprimée : %s
+todos.message.updated=Tâche mise à jour : %s
+todos.message.added=Tâche ajoutée : %s

src/main/resources/templates/Application/index.html

@@ -1,10 +1,10 @@
 {#include main.html }
-{#title}Welcome to Todos{/title}
+{#title}{m:application.index.title}{/title}
 
 <div class="p-5 mb-4 bg-light rounded-3">
     <div class="container-fluid py-5">
-        <h1 class="display-5 fw-bold">Welcome to Todos</h1>
-        <p class="col-md-8 fs-4">Start adding todos today!</p>
+        <h1 class="display-5 fw-bold">{m:application.index.title}</h1>
+        <p class="col-md-8 fs-4">{m:application.index.subtitle}</p>
     </div>
 </div>
 

src/main/resources/templates/Todos/index.html

@@ -5,8 +5,8 @@
   <thead class="table-dark">
     <tr>
       <th scope="col">#</th>
-      <th scope="col">Task</th>
-      <th scope="col">Action <a href="{uri:Todos.pdf}" title="Download as PDF" class="float-end text-reset"><i class="bi bi-filetype-pdf"></i></a></th>
+      <th scope="col">{m:todos.index.tasks}</th>
+      <th scope="col">{m:todos.index.action} <a href="{uri:Todos.pdf}" title="{m:todos.index.pdf}" class="float-end text-reset"><i class="bi bi-filetype-pdf"></i></a></th>
     </tr>
   </thead>
   <tbody>
@@ -23,22 +23,22 @@
       <td>
       {#form uri:Todos.done(todo.id) class="inline"}
         {#if todo.done}
-          <button type="submit" class="btn btn-warning" title="Mark as undone"><i class="bi-arrow-counterclockwise"></i></button>
+          <button type="submit" class="btn btn-warning" title="{m:todos.index.done}"><i class="bi-arrow-counterclockwise"></i></button>
         {#else}
-          <button type="submit" class="btn btn-success" title="Mark as done"><i class="bi-check"></i></button>
+          <button type="submit" class="btn btn-success" title="{m:todos.index.undone}"><i class="bi-check"></i></button>
         {/if}
       {/form}
       {#form uri:Todos.delete(todo.id) class="inline"}
-        <button type="submit" class="btn btn-danger" title="Delete"><i class="bi-trash"></i></button>
+        <button type="submit" class="btn btn-danger" title="{m:todos.index.delete}"><i class="bi-trash"></i></button>
       {/form}
       </td>
     </tr>
     {/for}
     <tr>
-      <th scope="row">New</th>
+      <th scope="row">{m:todos.index.new}</th>
       <td>
       {#form uri:Todos.add()}
-        {#input name="task" placeholder="Type task and press ENTER" autofocus=true/}
+        {#input name="task" placeholder=m:todos.index.placeholder autofocus=true/}
       {/form}
       </td>
       <td></td>

src/main/resources/templates/main.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{inject:i18n.get()}">
     <head>
         <title>{#insert title /}</title>
         <meta charset="UTF-8"/>
@@ -25,20 +25,29 @@
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <if class="navbar-nav me-auto mb-2 mb-lg-0">
                 {#if !inject:user}
-                    <li class="nav-item"><a class="nav-link" aria-current="page" href="{uri:Login.login()}">Login/Register</a></li>
+                    <li class="nav-item"><a class="nav-link" aria-current="page" href="{uri:Login.login()}">{m:main.login}</a></li>
                 {#else}
-                    <li class="nav-item"><a class="nav-link" aria-current="page" href="{uri:Todos.index()}">Todos</a></li>
+                    <li class="nav-item"><a class="nav-link" aria-current="page" href="{uri:Todos.index()}">{m:main.todos}</a></li>
                     {#if inject:user.isAdmin}
-                      <li class="nav-item"><a class="nav-link" aria-current="page" href="/_renarde/backoffice/index"><i class="bi bi-database"></i>Backoffice</a></li>
+                      <li class="nav-item"><a class="nav-link" aria-current="page" href="/_renarde/backoffice/index"><i class="bi bi-database"></i>{m:main.backoffice}</a></li>
                     {/if}
-                    <li class="nav-item"><a class="nav-link" aria-current="page" href="{uri:RenardeSecurityController.logout()}">Logout</a></li>
+                    <li class="nav-item"><a class="nav-link" aria-current="page" href="{uri:RenardeSecurityController.logout()}">{m:main.logout}</a></li>
                 {/if}
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    Help
+                    {m:main.help}
                   </a>
                   <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <li><a class="dropdown-item" href="{uri:Application.about()}">About</a></li>
+                    <li><a class="dropdown-item" href="{uri:Application.about()}">{m:main.about}</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    {m:main.language}
+                  </a>
+                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
+                    <li><a class="dropdown-item" href="{uri:Application.english()}">English</a></li>
+                    <li><a class="dropdown-item" href="{uri:Application.french()}">Français</a></li>
                   </ul>
                 </li>
               </ul>