Setup leptop_i18n

Cargo.toml

@@ -20,9 +20,15 @@ wasm-bindgen = "=0.2.93"
 thiserror = "1"
 tracing = { version = "0.1", optional = true }
 http = "1"
+leptos_i18n = { version = "0.4.1", default-features = false, features = ["yaml_files"] }
 
 [features]
-hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
+hydrate = [
+    "leptos/hydrate",
+    "leptos_meta/hydrate",
+    "leptos_router/hydrate",
+    "leptos_i18n/hydrate",
+]
 ssr = [
     "dep:axum",
     "dep:tokio",
@@ -33,8 +39,13 @@ ssr = [
     "leptos_meta/ssr",
     "leptos_router/ssr",
     "dep:tracing",
+    "leptos_i18n/axum",
 ]
 
+[package.metadata.leptos-i18n]
+default = "en"
+locales = ["en", "fr", "fi", "et", "sv", "eo", "jbo"]
+
 # Defines a size-optimized profile for the WASM bundle in release mode
 [profile.wasm-release]
 inherits = "release"

locales/en.yaml

@@ -0,0 +1,6 @@
+home: Home
+available_in: "Available in:"
+partial_translations: (partial translations)
+
+
+tanguy_gerome: Tanguy Gérôme

locales/eo.yaml

@@ -0,0 +1,6 @@
+home: Hejmo
+available_in: "Havebla en:"
+partial_translations:
+
+
+tanguy_gerome:

locales/et.yaml

@@ -0,0 +1,6 @@
+home: Kodu
+available_in: "Saadaval keeles:"
+partial_translations:
+
+
+tanguy_gerome:

locales/fi.yaml

@@ -0,0 +1,6 @@
+home: Koti
+available_in: "Saatavilla kielillä:"
+partial_translations: (keskeneräisiä käännöksiä)
+
+
+tanguy_gerome:

locales/fr.yaml

@@ -0,0 +1,6 @@
+home: Accueil
+available_in: "Disponible en:"
+partial_translations: (traductions partielles)
+
+
+tanguy_gerome:

locales/jbo.yaml

@@ -0,0 +1,6 @@
+home: zdani
+available_in: "fanva fi "
+partial_translations: (nalmu'o puvyfanva)
+
+
+tanguy_gerome: .tangis.jerom.

locales/sv.yaml

@@ -0,0 +1,6 @@
+home: Hem
+available_in: "Finns på:"
+partial_translations:
+
+
+tanguy_gerome:

src/app.rs

@@ -1,15 +1,18 @@
-use crate::error_template::{AppError, ErrorTemplate};
+leptos_i18n::load_locales!();
+use i18n::*;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
 
+use crate::error_template::{AppError, ErrorTemplate};
+
 #[component]
 pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
     provide_meta_context();
 
     view! {
-
+        <I18nContextProvider>
             <link rel="preconnect" href="https://fonts.googleapis.com"/>
             <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
             <Stylesheet href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"/>
@@ -29,20 +32,46 @@ pub fn App() -> impl IntoView {
             }>
                 <Header/>
                 <Routes>
+                    <I18nRoute view=|| view! { <Outlet /> }>
                         <Route path="" view=HomePage/>
+                    </I18nRoute>
                 </Routes>
                 <Footer/>
             </Router>
+        </I18nContextProvider>
+    }
+}
+
+#[component]
+pub fn LanguageSwitcher() -> impl IntoView {
+    let i18n = use_i18n();
+
+    view! {
+        <div class="language-switcher main-width">
+            <p>{t!(i18n, available_in)}</p>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::en)>english</button>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::fr)>français</button>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::fi)>suomi</button>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::et)>eesti</button>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::sv)>svenska</button>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::eo)>esperanto</button>
+            <button class="link" on:click=move |_| i18n.set_locale(Locale::jbo)>lojban</button>
+            <p>{t!(i18n, partial_translations)}</p>
+        </div>
     }
 }
 
 #[component]
 fn Header() -> impl IntoView {
+    let i18n = use_i18n();
+
     view! {
         <header>
+            <div class="title-links-and-banner">
                 <div class="text">
                     <h1><span>tanguy</span><wbr/><span>.gerome</span><span>.fi</span></h1>
                     <div class="links">
+                    <A href="/">{t!(i18n, home)}</A>
                     </div>
                 </div>
                 <img
@@ -50,16 +79,21 @@ fn Header() -> impl IntoView {
                     src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=2000&q=90&fm=avif"
                     alt=""
                 />
+            </div>
+
+            <LanguageSwitcher/>
         </header>
     }
 }
 
 #[component]
 fn Footer() -> impl IntoView {
+    let i18n = use_i18n();
+
     view! {
         <footer>
             <div class="name-and-links main-width">
-                <span class="name">Tanguy Gérôme</span>
+                <span class="name">{t!(i18n, tanguy_gerome)}</span>
                 <div class="links">
                     <a href="https://www.instagram.com/kapno.cc/" target="_blank" rel="noopener noreferrer">instagram @kapno.cc</a>
                     <a href="https://github.com/kapnoc" target="_blank" rel="noopener noreferrer">github @kapnoc</a>

style/main.scss

@@ -1,4 +1,4 @@
-$mainGreen: #2E7D32;
+$mainGreen: darken(#2E7D32, 10);
 $mainGrey: #0F0F0F;
 
 @mixin top-level-padding {
@@ -12,6 +12,19 @@ $mainGrey: #0F0F0F;
   box-sizing: border-box;
 }
 
+button {
+  &.link {
+    all: unset;
+    text-decoration: underline;
+    color: $mainGreen!important;
+    cursor: pointer;
+  }
+}
+
+a {
+  color: $mainGreen!important;
+}
+
 body {
   font-family: 'Ubuntu', sans-serif;
 	text-align: left;
@@ -44,10 +57,17 @@ body {
   h4 { font-size: 18px; }
 
   header {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .title-links-and-banner {
       background: $mainGrey;
       color: white;
-
       width: 100%;
+
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -84,6 +104,10 @@ body {
           display: flex;
           flex-direction: column;
           align-items: flex-end;
+
+          a {
+            color: white!important;
+          }
         }
       }
 
@@ -98,8 +122,26 @@ body {
       }
     }
 
+    .language-switcher {
+      @include top-level-padding;
+      margin: 16px 0;
+
+      gap: 8px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
   main {
     @include top-level-padding;
+    margin-bottom: 32px;
   }
 
   footer {
@@ -145,7 +187,6 @@ body {
 
         a {
           color: white!important;
-          text-decoration: unset;
         }
       }
     }