add env vars for configuring onion and I2P urls

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

app/src/lib/api.js

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

app/src/lib/doc.js

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

app/src/lib/footer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { urljoin, color, date_from_ts } from "$lib/util.js";
+  import { app_url, color, date_from_ts } from "$lib/util.js";
   import { api_get_metrics } from "$lib/api.js";
   import Link from "$lib/link.svelte";
 
@@ -20,15 +20,11 @@
     </span>
     <span>/</span>
     <span>
-      <Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/license")} bold={true}
-        >{$_("footer.license")}</Link
-      >
+      <Link link={app_url("/doc/license")} bold={true}>{$_("footer.license")}</Link>
     </span>
     <span>/</span>
     <span>
-      <Link link={urljoin(import.meta.env.WEBSITE_APP_URL, "doc/privacy")} bold={true}
-        >{$_("footer.privacy")}</Link
-      >
+      <Link link={app_url("/doc/privacy")} bold={true}>{$_("footer.privacy")}</Link>
     </span>
   </div>
   <span class="counter">

app/src/lib/util.js

@@ -1,4 +1,6 @@
 import { locale_from_browser } from "$lib/locale.js";
+import { browser } from "$app/environment";
+import { page } from "$app/state";
 
 const colors = [
   "yellow",
@@ -19,7 +21,7 @@ function color() {
 }
 
 function click() {
-  let audio = new Audio("/click.wav");
+  let audio = new Audio("/assets/click.wav");
   audio.play();
 }
 
@@ -39,8 +41,18 @@ function urljoin(url, path = null, query = {}) {
   return url.href;
 }
 
+function env_url(prefix) {
+  let host = "";
+
+  if (browser) host = window.location.hostname;
+
+  if (host.endsWith(".onion")) return import.meta.env["WEBSITE_" + prefix + "_URL_ONION"];
+  else if (host.endsWith(".i2p")) return import.meta.env["WEBSITE_" + prefix + "_URL_I2P"];
+  else return import.meta.env["WEBSITE_" + prefix + "_URL_CLEAR"];
+}
+
 function app_url(path = null, query = {}) {
-  return urljoin(import.meta.env.WEBSITE_APP_URL, path, query);
+  return urljoin(env_url("APP"), path, query);
 }
 
 function time_from_ts(ts) {
@@ -68,4 +80,4 @@ function date_from_ts(ts) {
   }).format(new Date(ts * 1000));
 }
 
-export { color, click, urljoin, app_url, time_from_ts, date_from_ts };
+export { color, click, urljoin, env_url, app_url, time_from_ts, date_from_ts };

app/src/routes/+layout.svelte

@@ -21,7 +21,7 @@
 </main>
 
 <style>
-  @import "/global.css";
+  @import "/css/global.css";
 
   main {
     display: flex;

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

@@ -37,7 +37,7 @@
 {/if}
 
 <style>
-  @import "/markdown.css";
+  @import "/css/markdown.css";
 
   main {
     padding: 50px;