add language switcher example to homepage

docs/examples/i18n.md

@@ -1,7 +1,7 @@
 %%% React, Svelte, Solid
 
 ```jsx caption=components/Index.jsx
-import t from "@primate/i18n/react";
+import { default as t, locale } from "@primate/i18n/react";
 
 export default function ({ username }) {
   return <>
@@ -10,13 +10,17 @@ export default function ({ username }) {
     <p>{t("message")}</p>
 
     {t("bye")}~
+
+    <h3>{t("switch-language")}</h3>
+    <div><a onClick={() => locale.set("en-US")}>{t("English")}</a></div>
+    <div><a onClick={() => locale.set("de-DE")}>{t("German")}</a></div>
   </>;
 }
 ```
 
 ```html caption=components/Index.svelte
 <script>
-  import t from "@primate/i18n/svelte";
+  import { default as t, locale } from "@primate/i18n/svelte";
 
   export let username;
 </script>
@@ -25,10 +29,14 @@ export default function ({ username }) {
 <p>{$t("message")}</p>
 
 {$t("bye")}~
+
+<h3>{$t("switch-language")}</h3>
+<div><a on:click={() => locale.set("en-US")}>{$t("English")}</a></div>
+<div><a on:click={() => locale.set("de-DE")}>{$t("German")}</a></div>
 ```
 
 ```jsx caption=components/Index.jsx
-import t from "@primate/i18n/solid";
+import { default as t, locale } from "@primate/i18n/solid";
 
 export default function ({ username }) {
   return <>
@@ -37,6 +45,10 @@ export default function ({ username }) {
     <p>{t("message")}</p>
 
     {t("bye")}~
+
+    <h3>{t("switch-language")}</h3>
+    <div><a onClick={() => locale.set("en-US")}>{t("English")}</a></div>
+    <div><a onClick={() => locale.set("de-DE")}>{t("German")}</a></div>
   </>;
 }
 ```

docs/modules/i18n.md

@@ -23,7 +23,7 @@ export default {
 ## Prepare
 
 This module exposes methods for internationalizing strings, optionally with
-placeholders, as well a locale switcher. It currently supports Svelte, React
+placeholders, as well a language switcher. It currently supports Svelte, React
 and Solid.
 
 Start by creating a locales directory, the default is `locales`. In this

packages/website/components/Homepage.svelte

@@ -89,7 +89,7 @@
       <p>
         Write backend code in your language of choice, leveraging the power of
         Wasm. Mix routes of <a href="/modules/binding">different backend
-          languages</a>, allowing sections of your app to be written by different teams.
+          languages</a>, allowing your application to be written by different teams.
       </p>
       {@html examples.backend}
     </div>
@@ -104,7 +104,8 @@
       <p>
         Seamlessly switch between <a href="/modules/frontend">frontend
           frameworks</a>, with support for SSR, hydration and layouts across 
-        the board. You can even combine more than one framework in your app.
+        the board. You can even combine more than one framework in your
+        application.
       </p>
       {@html examples.frontend}
     </div>
@@ -116,7 +117,7 @@
         <img src="/logos/bun.png" title="Bun" />
       </div>
       <p>
-        Compare the performance of your app across different JavaScript
+        Compare the performance of your application across different JavaScript
         runtimes. Use the comfort of one runtime during development and the
         speed gains of another in production.
       </p>
@@ -149,8 +150,9 @@
         <img src="/logos/svelte.svg" title="Svelte" />
         <img src="/logos/solid.svg" title="Solid" />
       </div>
-      <p>Easily make your app international, using a unified API across 
-      different frontends.</p>
+      <p>Easily make your application international, using a unified API across 
+      different frontends with placeholder support and a built-in language
+      switcher.</p>
       {@html examples.i18n}
     </div>
     <div>

packages/website/static/master.css

@@ -151,7 +151,7 @@ header {
   height: var(--height);
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 2;
   display: flex;
   padding: 0 var(--prs-page-padding-side);
   box-sizing: border-box;