cleanup for the docker setup

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

app/src/lib/api.js

@@ -1,7 +1,7 @@
 import { urljoin } from "$lib/util.js";
 
 const api_version = "v1";
-const api_url = urljoin(import.meta.env.APP_API_URL, api_version);
+const api_url = urljoin(import.meta.env.WEBSITE_API_URL, api_version);
 
 function api_urljoin(path = null, query = {}) {
   return urljoin(api_url, path, query);

app/src/lib/doc.js

@@ -1,7 +1,7 @@
 import { urljoin } from "$lib/util.js";
 
 function doc_urljoin(path = null, query = {}) {
-  return urljoin(import.meta.env.APP_DOC_URL, path, query);
+  return urljoin(import.meta.env.WEBSITE_DOC_URL, path, query);
 }
 
 function doc_check_err(json) {

app/src/lib/error.svelte

@@ -15,7 +15,7 @@
       {error}
     {/if}
   </code>
-  <Link link={import.meta.env.APP_REPORT_URL}>
+  <Link link={import.meta.env.WEBSITE_REPORT_URL}>
     {$_("error.report")}
   </Link>
   <img src="/profile/sad.png" alt="" />

app/src/lib/footer.svelte

@@ -17,17 +17,17 @@
   <div class="info">
     <div class="links">
       <span>
-        <Link link={import.meta.env.APP_SOURCE_URL} bold={true}>{$_("footer.source")}</Link>
+        <Link link={import.meta.env.WEBSITE_SOURCE_URL} bold={true}>{$_("footer.source")}</Link>
       </span>
       <span>/</span>
       <span>
-        <Link link={urljoin(import.meta.env.APP_URL, "doc/license")} bold={true}
+        <Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/license")} bold={true}
           >{$_("footer.license")}</Link
         >
       </span>
       <span>/</span>
       <span>
-        <Link link={urljoin(import.meta.env.APP_URL, "doc/privacy")} bold={true}
+        <Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/privacy")} bold={true}
           >{$_("footer.privacy")}</Link
         >
       </span>

app/src/lib/head.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { frontend_url } from "$lib/util.js";
   import { api_urljoin } from "$lib/api.js";
+  import { app_url } from "$lib/util.js";
 
   export let desc, title;
 </script>
@@ -10,7 +10,7 @@
 
   <meta content="[ngn.tf] | {title}" property="og:title" />
   <meta content={desc} property="og:description" />
-  <meta content={frontend_url()} property="og:url" />
+  <meta content={app_url()} property="og:url" />
   <meta content="#000000" data-react-helmet="true" name="theme-color" />
 
   <link

app/src/lib/lang.js

@@ -1,4 +0,0 @@
-export default [
-  { code: "en", name: "English", icon: "🇬🇧", path: "../locales/en.json" },
-  { code: "tr", name: "Turkish", icon: "🇹🇷", path: "../locales/tr.json" },
-];

app/src/lib/link.svelte

@@ -21,11 +21,11 @@
   <Icon {icon} />
 {/if}
 {#if highlight}
-  <a {style} href={link}>
+  <a data-sveltekit-preload-data {style} href={link}>
     <slot></slot>
   </a>
 {:else}
-  <a {style} class="no-highlight" href={link}>
+  <a data-sveltekit-preload-data {style} class="no-highlight" href={link}>
     <slot></slot>
   </a>
 {/if}

app/src/lib/locale.js

@@ -0,0 +1,66 @@
+import { init, locale, register, waitLocale } from "svelte-i18n";
+import { browser } from "$app/environment";
+import { get, writable } from "svelte/store";
+
+const locale_default = "en";
+let locale_index = writable(0);
+let locale_list = [];
+
+function locale_setup() {
+  // english
+  register("en", () => import("../locales/en.json"));
+  locale_list.push({ code: "en", name: "English", icon: "🇬🇧" });
+
+  // turkish
+  register("tr", () => import("../locales/tr.json"));
+  locale_list.push({ code: "tr", name: "Turkish", icon: "🇹🇷" });
+
+  init({
+    fallbackLocale: locale_default,
+    initialLocale: get(locale),
+  });
+}
+
+function locale_from_browser() {
+  if (browser) return window.navigator.language.slice(0, 2).toLowerCase();
+  else return locale_default;
+}
+
+function locale_select(l = null) {
+  if (l === null) {
+    if (browser && null !== (l = localStorage.getItem("locale"))) locale_select(l);
+    else locale_select(locale_from_browser());
+    return;
+  }
+
+  l = l.slice(0, 2);
+
+  for (let i = 0; i < locale_list.length; i++) {
+    if (l !== locale_list[i].code) continue;
+
+    if (browser) localStorage.setItem("locale", l);
+
+    locale.set(l);
+    locale_index.set(i);
+
+    return;
+  }
+
+  locale.set(locale_default);
+  locale_index.set(0);
+}
+
+async function locale_wait() {
+  await waitLocale();
+}
+
+export {
+  locale,
+  locale_list,
+  locale_index,
+  locale_default,
+  locale_setup,
+  locale_wait,
+  locale_select,
+  locale_from_browser,
+};

app/src/lib/navbar_switch.svelte

@@ -1,38 +1,24 @@
 <script>
-  import { language, set_lang } from "$lib/util.js";
-  import languages from "$lib/lang.js";
+  import { locale_list, locale_select, locale_index } from "$lib/locale.js";
 
-  let icon = null,
-    indx = 0,
-    len = languages.length;
+  let len = locale_list.length;
 
-  function next_indx() {
-    if (indx + 1 >= len) return 0;
-    return indx + 1;
-  }
+  function get_next(indx) {
+    let new_indx = 0;
 
-  function next_lang(inc) {
-    let new_indx = next_indx();
-    if (inc) indx = new_indx;
-    return languages[new_indx];
+    if (indx + 1 >= len) indx = 0;
+    else new_indx = indx + 1;
+
+    return locale_list[new_indx];
   }
 
   function next() {
-    set_lang(next_lang(true).code);
-    icon = next_lang(false).icon;
-  }
-
-  for (indx = 0; indx < len; indx++) {
-    if (languages[indx].code == $language) {
-      set_lang(languages[indx].code);
-      icon = next_lang(false).icon;
-      break;
-    }
+    locale_select(get_next($locale_index).code);
   }
 </script>
 
 <button on:click={next}>
-  {icon}
+  {get_next($locale_index).icon}
 </button>
 
 <style>

app/src/lib/service.svelte

@@ -2,8 +2,8 @@
   import Icon from "$lib/icon.svelte";
   import Link from "$lib/link.svelte";
 
-  import { color, time_from_ts, language } from "$lib/util.js";
-  import { _ } from "svelte-i18n";
+  import { color, time_from_ts } from "$lib/util.js";
+  import { locale, _ } from "svelte-i18n";
 
   export let service = {};
 </script>
@@ -12,7 +12,7 @@
   <div class="info">
     <div class="title">
       <h1>{service.name}</h1>
-      <p>{service.desc[$language]}</p>
+      <p>{service.desc[$locale]}</p>
     </div>
     <div class="links">
       <Link highlight={false} link={service.clear}><Icon icon="nf-oct-link" /></Link>

app/src/lib/util.js

@@ -1,9 +1,5 @@
-import { browser } from "$app/environment";
-import { locale } from "svelte-i18n";
-import languages from "$lib/lang.js";
-import { writable, get } from "svelte/store";
+import { locale_from_browser } from "$lib/locale.js";
 
-const default_language = languages[0].code;
 const colors = [
   "yellow",
   "cyan",
@@ -13,54 +9,8 @@ const colors = [
   //  "blue" (looks kinda ass)
 ];
 
-let language = writable(default_language);
 let colors_pos = -1;
 
-function browser_lang() {
-  if (browser) return window.navigator.language.slice(0, 2).toLowerCase();
-  else return get(language);
-}
-
-function set_lang(lang) {
-  language.set(default_language);
-  locale.set(default_language);
-
-  if (lang === null || lang === undefined) {
-    if (browser && null !== (lang = localStorage.getItem("language"))) set_lang(lang);
-    else if (browser) set_lang(browser_lang());
-    return;
-  }
-
-  lang = lang.slice(0, 2);
-
-  for (let i = 0; i < languages.length; i++) {
-    if (lang !== languages[i].code) continue;
-
-    language.set(lang);
-    locale.set(lang);
-
-    if (browser) localStorage.setItem("language", lang);
-  }
-}
-
-function urljoin(url, path = null, query = {}) {
-  let url_len = url.length;
-
-  if (url[url_len - 1] != "/") url += "/";
-
-  if (null === path || "" === path) url = new URL(url);
-  else if (path[0] === "/") url = new URL(path.slice(1), url);
-  else url = new URL(path, url);
-
-  for (let k in query) url.searchParams.append(k, query[k]);
-
-  return url.href;
-}
-
-function frontend_url(path = null, query = {}) {
-  return urljoin(import.meta.env.APP_URL, path, query);
-}
-
 function color() {
   if (colors_pos < 0) colors_pos = Math.floor(Math.random() * colors.length);
   else if (colors_pos >= colors.length) colors_pos = 0;
@@ -73,6 +23,26 @@ function click() {
   audio.play();
 }
 
+function urljoin(url, path = null, query = {}) {
+  if (undefined === url || null === url) return;
+
+  let url_len = url.length;
+
+  if (url[url_len - 1] != "/") url += "/";
+
+  if (null === path || "" === path) url = new URL(url);
+  else if (path[0] === "/") url = new URL(path.slice(1), url);
+  else url = new URL(path, url);
+
+  for (let k in query) url.searchParams.append(k, query[k]);
+
+  return url.href;
+}
+
+function app_url(path = null, query = {}) {
+  return urljoin(import.meta.env.WEBSITE_APP_URL, path, query);
+}
+
 function time_from_ts(ts) {
   if (ts === 0 || ts === undefined) return;
 
@@ -80,7 +50,7 @@ function time_from_ts(ts) {
   let ts_zone = ts_date.toString().match(/([A-Z]+[\+-][0-9]+)/)[1];
 
   return (
-    new Intl.DateTimeFormat(browser_lang(), {
+    new Intl.DateTimeFormat(locale_from_browser(), {
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit",
@@ -91,22 +61,11 @@ function time_from_ts(ts) {
 function date_from_ts(ts) {
   if (ts === 0 || ts === undefined) return;
 
-  return new Intl.DateTimeFormat(browser_lang(), {
+  return new Intl.DateTimeFormat(locale_from_browser(), {
     month: "2-digit",
     year: "2-digit",
     day: "2-digit",
   }).format(new Date(ts * 1000));
 }
 
-export {
-  default_language,
-  browser_lang,
-  language,
-  set_lang,
-  urljoin,
-  frontend_url,
-  click,
-  color,
-  time_from_ts,
-  date_from_ts,
-};
+export { color, click, urljoin, app_url, time_from_ts, date_from_ts };