finish up the documentation page

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

app/package-lock.json

@@ -9,6 +9,7 @@
       "version": "6.0",
       "dependencies": {
         "@types/dompurify": "^3.2.0",
+        "dompurify": "^3.2.3",
         "marked": "^15.0.6",
         "svelte-i18n": "^4.0.1"
       },
@@ -1092,6 +1093,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
       "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }

app/package.json

@@ -22,6 +22,7 @@
   "type": "module",
   "dependencies": {
     "@types/dompurify": "^3.2.0",
+    "dompurify": "^3.2.3",
     "marked": "^15.0.6",
     "svelte-i18n": "^4.0.1"
   }

app/src/lib/doc.js

@@ -16,7 +16,7 @@ async function doc_http_get(fetch, url) {
 }
 
 async function doc_get_list(fetch) {
-  return (await doc_http_get(fetch, doc_urljoin("/list")))["list"];
+  return await doc_http_get(fetch, doc_urljoin("/list"));
 }
 
 async function doc_get(fetch, name) {

app/src/lib/footer.svelte

@@ -40,12 +40,12 @@
     <span>
       {$_("footer.number", {
         values: {
-          number: data.number,
+          total: data.total,
           since: date_from_ts(data.since),
         },
       })}
       {#if data.number % 1000 == 0}
-        <span style="color: var(--{color()})">({$_("footer.congrat")})</span>
+        <span style="color: var(--{color()})">({$_("footer.wow")})</span>
       {/if}
     </span>
     <span>

app/src/lib/util.js

@@ -23,20 +23,23 @@ function browser_lang() {
 
 function set_lang(lang) {
   language.set(default_language);
+  locale.set(default_language);
 
   if (lang === null || lang === undefined) {
-    if (browser) set_lang(browser_lang());
+    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) {
-      language.set(lang);
-      locale.set(lang);
-      return;
-    }
+    if (lang !== languages[i].code) continue;
+
+    language.set(lang);
+    locale.set(lang);
+
+    if (browser) localStorage.setItem("language", lang);
   }
 }
 

app/src/locales/en.json

@@ -76,8 +76,8 @@
     "license": "License",
     "privacy": "Privacy",
     "powered": "Powered by Svelte, Go, SQLite and donations",
-    "number": "You are the visitor number {number} since {since}",
-    "congrat": "congrats!!",
+    "number": "Visited {total} times since {since}",
+    "wow": "wow!!",
     "version": "Using API version {api_version}, frontend version {frontend_version}"
   }
 }

app/src/locales/tr.json

@@ -77,8 +77,8 @@
     "license": "Lisans",
     "privacy": "Gizlilik",
     "powered": "Svelte, Go, SQLite ve bağışlar tarafından destekleniyor",
-    "number": "{since} tarihinden beri {number}. ziyaretçisiniz",
-    "congrat": "tebrikler!!",
+    "number": "{since} tarihinden beri {total} kez ziyaret edildi",
+    "wow": "vay be!!",
     "version": "Kullan API versiyonu {api_version}, arayüz versiyonu {frontend_version}"
   }
 }

app/src/routes/+layout.js

@@ -31,7 +31,7 @@ export async function load({ fetch }) {
     };
   } catch (err) {
     return {
-      error: err,
+      error: err.toString(),
     };
   }
 }

app/src/routes/doc/[name]/+page.js

@@ -1,11 +0,0 @@
-import { goto } from "$app/navigation";
-import { doc_get } from "$lib/doc";
-
-export async function load({ fetch, params }) {
-  try {
-    return await doc_get(fetch, params.name);
-  } catch (err) {
-    if (err.toString().includes("not found")) return goto("/");
-    return { error: err };
-  }
-}

app/src/routes/doc/[name]/+page.server.js

@@ -0,0 +1,9 @@
+import { doc_get } from "$lib/doc";
+
+export async function load({ fetch, params }) {
+  try {
+    return { doc: await doc_get(fetch, params.name) };
+  } catch (err) {
+    return { error: err.toString() };
+  }
+}

app/src/routes/doc/[name]/+page.svelte

@@ -2,36 +2,48 @@
   import Header from "$lib/header.svelte";
   import Head from "$lib/head.svelte";
 
-  import { color } from "$lib/util.js";
+  import { language, color } from "$lib/util.js";
+  import { goto } from "$app/navigation";
+  import DOMPurify from "dompurify";
+  import { onMount } from "svelte";
   import { marked } from "marked";
   import { _ } from "svelte-i18n";
 
   let { data } = $props();
   marked.use({ breaks: true });
+
+  onMount(async () => {
+    if (data.error !== null) return await goto("/");
+
+    for (let key in data.doc)
+      data.doc[key]["content"] = DOMPurify.sanitize(data.doc[key]["content"]);
+  });
 </script>
 
 <Head title="documentation" desc="website and API documentation" />
 <Header picture="reader" title={$_("doc.title")} />
 
 <main>
-  <div class="markdown-body" style="--link-color: var(--{color()})">
-    {@html marked.parse(data.content)}
-  </div>
-  <div class="docs">
-    {#each data.docs as doc}
-      {#if doc.title == data.title}
-        <a href="/doc/{doc.name}" style="border-color: var(--{color()})">
-          <h1>{doc.title}</h1>
-          <h3>{doc.desc}</h3>
-        </a>
-      {:else}
-        <a href="/doc/{doc.name}" style="border-color: var(--white-3)">
-          <h1>{doc.title}</h1>
-          <h3>{doc.desc}</h3>
-        </a>
-      {/if}
-    {/each}
-  </div>
+  {#if data.doc !== undefined}
+    <div class="markdown-body" style="--link-color: var(--{color()})">
+      {@html marked.parse(data.doc[$language].content)}
+    </div>
+    <div class="docs">
+      {#each data.docs[$language] as doc}
+        {#if doc.title == data.doc[$language].title}
+          <a href="/doc/{doc.name}" style="border-color: var(--{color()})">
+            <h1>{doc.title}</h1>
+            <h3>{doc.desc}</h3>
+          </a>
+        {:else}
+          <a href="/doc/{doc.name}" style="border-color: var(--white-3)">
+            <h1>{doc.title}</h1>
+            <h3>{doc.desc}</h3>
+          </a>
+        {/if}
+      {/each}
+    </div>
+  {/if}
 </main>
 
 <style>