use runes mode, allow switching locale without js

Signed-off-by: ngn <ngn@ngn.tf>

app/src/components/card.svelte

@@ -1,14 +1,13 @@
 <script>
-  export let title = "";
+  let { title = "", id = "", children } = $props();
-  export let id = "";
 </script>
 
 <main {id}>
   {#if title === ""}
-    <div><slot></slot></div>
+    <div>{@render children()}</div>
   {:else}
     <h1>{title}</h1>
-    <div class="padded"><slot></slot></div>
+    <div class="padded">{@render children()}</div>
   {/if}
 </main>
 

app/src/components/footer.svelte

@@ -5,7 +5,7 @@
 
   import { onMount } from "svelte";
 
-  let data = null;
+  let data = $state(null);
 
   onMount(async () => {
     data = await api.metrics(fetch);

app/src/components/head.svelte

@@ -2,7 +2,7 @@
   import { locale } from "$lib/locale.js";
   import api from "$lib/api.js";
 
-  export let desc, title;
+  let { desc, title } = $props();
 </script>
 
 <svelte:head>

app/src/components/language.svelte

@@ -1,25 +1,22 @@
 <script>
   import { localizer, next } from "$lib/locale.js";
-  import { onMount } from "svelte";
 
-  // "show" is simply used to not display the locale button when javascript is
+  /* if we have javascript, no need to send the GET request to the server to
-  // not enabled, bc it does not function without javascript
+   * change the language, we can just switch it on the browser */
-  let show = false;
+  function onsubmit(e) {
-
+    e.preventDefault();
-  onMount(() => {
+    localizer.switch();
-    show = true;
+  }
-  });
 </script>
 
-{#if show}
+<form action="/" method="get" {onsubmit}>
-  <!-- TODO: make this work without javascript -->
+  <input type="hidden" name="l" value={$next.code} />
-  <button on:click={() => localizer.switch()}>
+  <button type="submit">{$next.icon}</button>
-    {$next.icon}
+</form>
-  </button>
-{/if}
 
 <style>
   button {
+    cursor: pointer;
     background: none;
     color: var(--white-1);
     font-size: var(--size-4);

app/src/components/page.svelte

@@ -2,16 +2,16 @@
   import { click } from "$lib/util.js";
   import { page } from "$app/stores";
 
-  export let link;
+  let { link, children } = $props();
 </script>
 
 <a
   class={$page.url.pathname === link ? "active" : "inactive"}
   data-sveltekit-preload-data
-  on:click={click}
+  onclick={click}
   href={link}
 >
-  <slot></slot>
+  {@render children()}
 </a>
 
 <style>

app/src/components/service.svelte

@@ -2,7 +2,7 @@
   import { time_from_ts } from "$lib/util.js";
   import { _, locale } from "$lib/locale.js";
 
-  export let service = {};
+  let { service } = $props();
 </script>
 
 <main>

app/src/lib/locale.js

@@ -181,7 +181,7 @@ class Localizer {
 
     // set next locale as the new current locale
     this.current.set(get(this.next));
-    document.cookie = `locale=${get(this.next).code}`;
+    document.cookie = `locale=${get(this.next).code};`;
 
     // get the next locale based on the index
     if (indx === this.list.length - 1) {

app/src/routes/+layout.server.js

@@ -1,14 +1,28 @@
+import { redirect } from "@sveltejs/kit";
 import { color } from "../lib/util.js";
 
-export async function load({ cookies, request }) {
+// set the locale cookie
+function set_locale(cookies, locale) {
+  cookies.set("locale", locale, { path: "/", secure: false, httpOnly: false });
+}
+
+export async function load({ cookies, request, url }) {
+  // if the locale param is specified, use the specified locale
+  let locale = url.searchParams.get("l");
+
+  if (locale) {
+    set_locale(cookies, locale);
+    return redirect(307, "/");
+  }
+
   // attempt get the preferred locale from cookies
-  let locale = cookies.get("locale");
+  locale = cookies.get("locale");
 
   /* if that doesn't work, try the accept-language header, and update the
    * cookies respectively */
   if (!locale) {
     locale = request.headers.get("accept-language")?.split(",")[0];
-    cookies.set("locale", locale, { path: "/" });
+    set_locale(cookies, locale);
   }
 
   return {

app/svelte.config.js

@@ -6,6 +6,9 @@ const config = {
     adapter: adapter(),
     alias: { $components: "src/components" },
   },
+  compilerOptions: {
+    runes: true,
+  },
 };
 
 export default config;