chore: persist selected language

README.md

@@ -20,7 +20,7 @@ cargo install leptosfmt
 
 To develop the project, run
 ```sh
-trunk serve --port 3000 --open
+trunk serve --open
 ```
 which, will open the app in your default browser at `http://localhost:3000`.
 
@@ -30,7 +30,8 @@ To build the project for release, use the command
 ```sh
 trunk build --release
 ```
-This will output the files necessary to run your app into the `dist` folder; you can then use any static site host to serve these files.
+This will output the files necessary to run your app into the `dist` folder; you can
+then use any static site host to serve these files.
 
 [Leptos]: https://github.com/leptos-rs/leptos
 [Rustup]: https://rustup.rs/

locales/en/main.ftl

@@ -3,4 +3,4 @@ title = Hypergeometric Distribution Calculator
 population = Population Size
 successes = Successes in Population
 sample = Sample Size
-sample_successes = Successes in Sample
+sample-successes = Successes in Sample

locales/es/main.ftl

@@ -3,4 +3,4 @@ title = Calculadora Distribución Hipergeométrica
 population = Tamaño población
 successes =  Éxitos en la población
 sample = Tamaño de la muestra
-sample_successes = Éxitos en la muestra
+sample-successes = Éxitos en la muestra

src/components/calculator.rs

@@ -65,7 +65,7 @@ pub fn Calculator() -> impl IntoView {
                 />
             </p>
             <p>
-                <label for="sample_successes">{move_tr!("sample_successes")}</label>
+                <label for="sample_successes">{move_tr!("sample-successes")}</label>
                 <input
                     id="sample_successes"
                     type="number"

src/components/localization.rs

@@ -2,7 +2,9 @@
 
 use fluent_templates::static_loader;
 use leptos::html::ElementChild;
-use leptos::prelude::{Children, GlobalAttributes, OnAttribute, PropAttribute, Set};
+use leptos::prelude::{
+    AddAnyAttr, Children, Get, GlobalAttributes, IntoAttribute, OnAttribute, PropAttribute, Set,
+};
 use leptos::{IntoView, component, view};
 use leptos_fluent::{Language, expect_i18n, leptos_fluent};
 
@@ -21,6 +23,10 @@ pub fn I18n(children: Children) -> impl IntoView {
         translations: [TRANSLATIONS],
         locales: "./locales",
         check_translations: "./src/**/*.rs",
+        initial_language_from_localstorage: true,
+        initial_language_from_navigator_to_localstorage: true,
+        set_language_to_localstorage: true,
+        sync_html_tag_lang: true,
     }
 }
 #[component]
@@ -44,11 +50,11 @@ fn render_language(lang: &'static Language) -> impl IntoView {
     let i18n = expect_i18n();
     view! {
         <option
-                id=lang
-                value=lang
-                prop:selected=lang.is_active()
-                on:click=move |_| i18n.language.set(lang)
-            >
+            id=lang
+            value=lang
+            prop:selected=lang.is_active()
+            on:click=move |_| i18n.language.set(lang)
+        >
             {lang.name}
         </option>
     }