feat: Delegate cookie management to frontend script

Refs: #2

package.json

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.3",
+    "@types/js-cookie": "^3.0.6",
     "esbuild": "^0.21.3",
     "typescript": "^5.4.5"
   },
@@ -19,5 +20,8 @@
   "license": "Apache-2.0",
   "volta": {
     "node": "20.13.1"
+  },
+  "dependencies": {
+    "js-cookie": "^3.0.5"
   }
 }

src/atsphinx/mini18n/templates/mini18n/snippets/select-lang.html

@@ -6,15 +6,22 @@
   </style>
   <div>
     <label for="atsphinx-mini18n-select-lang">{{ mini18n.select_lang_label }}</label>
-    <select name="lang" onchange="{
-                        const values = value.split('@@');
-                        document.cookie = `lang=${values[0]}; path=/; samesite=Strict; max-age=${60*60*24*400};`;
-                        location.href=values[1];
-                        }" id="atsphinx-mini18n-select-lang">
+    <select name="lang" id="atsphinx-mini18n-select-lang">
       {%- for code in mini18n.support_languages %}
-      <option value="{{ code }}@@{{ pathto('../' + code + '/', 1) }}{{ pathto(pagename, 0, '.') }}" {%- if code==language %}
-        selected {%- endif %}>{{ code }}</option>
+      <option
+        value="{{ code }}"
+        data-url="{{ pathto('../' + code + '/', 1) }}{{ pathto(pagename, 0, '.') }}"
+        {%- if code==language %}selected{%- endif %}
+      >
+        {{ code }}
+      </option>
       {%- endfor %}
     </select>
+    <script type="module">
+      import { Widget } from "./{{ pathto('_static/atsphinx-mini18n.js', 1) }}";
+      document.addEventListener("DOMContentLoaded", () => {
+        document.querySelector("#atsphinx-mini18n-select-component select").addEventListener("change", Widget.redirectBySelect);
+      })
+    </script>
   </div>
 </div>

src/frontend/main.ts

@@ -1,6 +1,36 @@
 /**
  * Module to manage cross-move into i18n sites.
  */
+import Cookies from "js-cookie";
 import * as packageJson from "../../package.json";
 
+const COOKIE_SELECTED_LANG = "lang";
+const COOKIE_MAX_AGE_DAYS = 400;
+
+/**
+ * Redirect page of selected language.
+ */
+const redirectWithRemember = (lang: string, url: string) => {
+  Cookies.set(COOKIE_SELECTED_LANG, lang, {
+    sameSite: "strict",
+    path: "/",
+    expires: new Date(
+      new Date().getTime() + 1000 * 60 * 60 * 24 * COOKIE_MAX_AGE_DAYS,
+    ),
+  });
+  location.href = url;
+};
+
+/**
+ * Handlers for HTML
+ */
+export namespace Widget {
+  export const redirectBySelect = (e: Event) => {
+    //
+    const langCode = e.target.value;
+    const langUrl = e.target.selectedOptions[0].dataset.url;
+    redirectWithRemember(langCode, langUrl);
+  };
+}
+
 console.debug(`Current version is ${packageJson.version}`);