documentation server and /doc route

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

app/Dockerfile

@@ -16,8 +16,7 @@ COPY --from=build /app/build ./build
 COPY --from=build /app/package.json ./package.json
 COPY --from=build /app/package-lock.json ./package-lock.json
 
-EXPOSE 4173
-
+EXPOSE 7001
 RUN bun install
 
 CMD ["bun", "build/index.js"]

app/package-lock.json

@@ -9,6 +9,7 @@
       "version": "6.0",
       "dependencies": {
         "@types/dompurify": "^3.2.0",
+        "marked": "^15.0.6",
         "svelte-i18n": "^4.0.1"
       },
       "devDependencies": {
@@ -1396,6 +1397,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/marked": {
+      "version": "15.0.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.6.tgz",
+      "integrity": "sha512-Y07CUOE+HQXbVDCGl3LXggqJDbXDP2pArc2C1N1RRMN0ONiShoSsIInMd5Gsxupe7fKLpgimTV+HOJ9r7bA+pg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/memoizee": {
       "version": "0.4.17",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",

app/package.json

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

app/src/lib/api.js

@@ -1,13 +1,13 @@
 import { urljoin } from "$lib/util.js";
 
-const version = "v1";
-const url = urljoin(import.meta.env.APP_API_URL, version);
+const api_version = "v1";
+const api_url = urljoin(import.meta.env.APP_API_URL, api_version);
 
-function api_url(path = null, query = {}) {
-  return urljoin(url, path, query);
+function api_urljoin(path = null, query = {}) {
+  return urljoin(api_url, path, query);
 }
 
-function check_err(json) {
+function api_check_err(json) {
   if (!("error" in json)) throw new Error('API response is missing the "error" key');
 
   if (json["error"] != "") throw new Error(`API returned an error: ${json["error"]}`);
@@ -15,23 +15,23 @@ function check_err(json) {
   if (!("result" in json)) throw new Error('API response is missing the "result" key');
 }
 
-async function GET(fetch, url) {
+async function api_http_get(fetch, url) {
   const res = await fetch(url);
   const json = await res.json();
-  check_err(json);
+  api_check_err(json);
   return json["result"];
 }
 
-async function get_metrics(fetch) {
-  return GET(fetch, api_url("/metrics"));
+async function api_get_metrics(fetch) {
+  return await api_http_get(fetch, api_urljoin("/metrics"));
 }
 
-async function get_services(fetch) {
-  return GET(fetch, api_url("/services"));
+async function api_get_services(fetch) {
+  return await api_http_get(fetch, api_urljoin("/services"));
 }
 
-async function get_projects(fetch) {
-  return GET(fetch, api_url("/projects"));
+async function api_get_projects(fetch) {
+  return await api_http_get(fetch, api_urljoin("/projects"));
 }
 
-export { version, api_url, get_metrics, get_services, get_projects };
+export { api_version, api_urljoin, api_get_metrics, api_get_services, api_get_projects };

app/src/lib/doc.js

@@ -0,0 +1,28 @@
+import { urljoin } from "$lib/util.js";
+
+function doc_urljoin(path = null, query = {}) {
+  return urljoin(import.meta.env.APP_DOC_URL, path, query);
+}
+
+function doc_check_err(json) {
+  if ("error" in json) throw new Error(`Documentation server returned an error: ${json["error"]}`);
+}
+
+async function doc_http_get(fetch, url) {
+  const res = await fetch(url);
+  const json = await res.json();
+  doc_check_err(json);
+  return json;
+}
+
+async function doc_get_list(fetch) {
+  return (await doc_http_get(fetch, doc_urljoin("/list")))["list"];
+}
+
+async function doc_get(fetch, name) {
+  let url = doc_urljoin("/get");
+  url = urljoin(url, name);
+  return await doc_http_get(fetch, url);
+}
+
+export { doc_urljoin, doc_get, doc_get_list };

app/src/lib/error.svelte

@@ -34,6 +34,7 @@
     display: flex;
     flex-direction: column;
     justify-content: end;
+    align-items: flex-start;
     gap: 10px;
 
     padding: 50px;

app/src/lib/footer.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { urljoin, color, date_from_ts, language } from "$lib/util.js";
-  import { get_metrics } from "$lib/api.js";
+  import { urljoin, color, date_from_ts } from "$lib/util.js";
+  import { api_get_metrics } from "$lib/api.js";
   import Link from "$lib/link.svelte";
 
   import { onMount } from "svelte";
@@ -9,7 +9,7 @@
   let data = {};
 
   onMount(async () => {
-    data = await get_metrics(fetch);
+    data = await api_get_metrics(fetch);
   });
 </script>
 
@@ -21,16 +21,14 @@
       </span>
       <span>/</span>
       <span>
-        <Link
-          link={urljoin(import.meta.env.APP_DOC_URL, "license", { lang: $language })}
-          bold={true}>{$_("footer.license")}</Link
+        <Link link={urljoin(import.meta.env.APP_URL, "doc/license")} bold={true}
+          >{$_("footer.license")}</Link
         >
       </span>
       <span>/</span>
       <span>
-        <Link
-          link={urljoin(import.meta.env.APP_DOC_URL, "privacy", { lang: $language })}
-          bold={true}>{$_("footer.privacy")}</Link
+        <Link link={urljoin(import.meta.env.APP_URL, "doc/privacy")} bold={true}
+          >{$_("footer.privacy")}</Link
         >
       </span>
     </div>

app/src/lib/head.svelte

@@ -1,6 +1,6 @@
 <script>
   import { frontend_url } from "$lib/util.js";
-  import { api_url } from "$lib/api.js";
+  import { api_urljoin } from "$lib/api.js";
 
   export let desc, title;
 </script>
@@ -13,5 +13,10 @@
   <meta content={frontend_url()} property="og:url" />
   <meta content="#000000" data-react-helmet="true" name="theme-color" />
 
-  <link rel="alternate" type="application/atom+xml" href={api_url("/news/en")} title="Atom Feed" />
+  <link
+    rel="alternate"
+    type="application/atom+xml"
+    href={api_urljoin("/news/en")}
+    title="Atom Feed"
+  />
 </svelte:head>

app/src/lib/header.svelte

@@ -8,9 +8,7 @@
 
 <header>
   <div>
-    <h1 class="title" style="color: var(--{color()})">
-      {title.toLowerCase()}
-    </h1>
+    <h1 class="title" style="color: var(--{color()})">{title.toLowerCase()}</h1>
     <h1 class="cursor" style="color: var(--{color()})">_</h1>
   </div>
   <img src="/profile/{picture}.png" alt="" />

app/src/lib/service.svelte

@@ -73,11 +73,13 @@
   main .info .title h1 {
     font-size: var(--size-5);
     margin-bottom: 8px;
+    font-weight: 900;
   }
 
   main .info .title p {
     font-size: var(--size-4);
     color: var(--white-2);
+    font-weight: 100;
   }
 
   main .info .links {

app/src/locales/en.json

@@ -43,6 +43,7 @@
   },
   "services": {
     "title": "Service Status",
+    "none": "No services found",
     "search": "Search for a service",
     "feed": "News and updates",
     "last": "Last checked at {time}",
@@ -63,6 +64,9 @@
       "address": "Adress/Link"
     }
   },
+  "doc": {
+    "title": "Documentation"
+  },
   "error": {
     "title": "Something went wrong!",
     "report": "Report this issue"

app/src/locales/tr.json

@@ -44,6 +44,7 @@
   },
   "services": {
     "title": "Servis Durumu",
+    "none": "Servis bulunamadı",
     "search": "Bir servisi ara",
     "feed": "Yenilikler ve güncellemeler",
     "last": "Son kontrol zamanı {time}",
@@ -64,6 +65,9 @@
       "address": "Adres/Bağlantı"
     }
   },
+  "doc": {
+    "title": "Dökümantasyon"
+  },
   "error": {
     "title": "Birşeyler yanlış gitti!",
     "report": "Bu sorunu raporlayın"

app/src/routes/+layout.js

@@ -1,5 +1,6 @@
 import { default_language, language, set_lang } from "$lib/util.js";
-import { get_services, get_projects } from "$lib/api.js";
+import { api_get_services, api_get_projects } from "$lib/api.js";
+import { doc_get_list } from "$lib/doc.js";
 import languages from "$lib/lang.js";
 
 import { init, register, waitLocale } from "svelte-i18n";
@@ -23,8 +24,9 @@ export async function load({ fetch }) {
 
   try {
     return {
-      services: await get_services(fetch),
-      projects: await get_projects(fetch),
+      services: await api_get_services(fetch),
+      projects: await api_get_projects(fetch),
+      docs: await doc_get_list(fetch),
       error: null,
     };
   } catch (err) {

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

@@ -0,0 +1,11 @@
+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.svelte

@@ -0,0 +1,104 @@
+<script>
+  import Header from "$lib/header.svelte";
+  import Head from "$lib/head.svelte";
+
+  import { color } from "$lib/util.js";
+  import { marked } from "marked";
+  import { _ } from "svelte-i18n";
+
+  let { data } = $props();
+  marked.use({ breaks: true });
+</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>
+</main>
+
+<style>
+  @import "/markdown.css";
+
+  main {
+    padding: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: start;
+    gap: 30px;
+  }
+
+  main .docs {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 5px;
+  }
+
+  main .docs a {
+    display: flex;
+    flex-direction: column;
+    background: var(--black-3);
+    text-decoration: none;
+    box-sizing: border-box;
+    border-right-style: solid;
+    padding: 15px;
+    width: 100%;
+    gap: 4px;
+  }
+
+  main .docs a:hover {
+    box-shadow: var(--box-shadow);
+  }
+
+  main .docs a h1 {
+    font-size: var(--size-3);
+    color: var(--white-1);
+    font-weight: 900;
+  }
+
+  main .docs a h3 {
+    font-size: var(--size-2);
+    color: var(--white-3);
+    font-weight: 100;
+    text-decoration: none;
+  }
+
+  main .markdown-body :global(a) {
+    color: var(--link-color);
+  }
+
+  @media only screen and (max-width: 900px) {
+    main {
+      flex-direction: column-reverse;
+    }
+
+    main .docs {
+      width: 100%;
+    }
+
+    main .docs a {
+      border-right-style: none;
+      border-left-style: solid;
+      width: 100%;
+    }
+  }
+</style>

app/src/routes/services/+page.svelte

@@ -4,8 +4,8 @@
   import Link from "$lib/link.svelte";
   import Head from "$lib/head.svelte";
 
+  import { api_urljoin } from "$lib/api.js";
   import { language } from "$lib/util.js";
-  import { api_url } from "$lib/api.js";
   import { _ } from "svelte-i18n";
 
   let { data } = $props();
@@ -25,6 +25,14 @@
       else if (s.desc[$language].toLowerCase().includes(value)) services.push(s);
     });
   }
+
+  function get_services() {
+    return services.filter((s) => {
+      return (
+        s.desc[$language] !== "" && s.desc[$language] !== null && s.desc[$language] !== undefined
+      );
+    });
+  }
 </script>
 
 <Head title="services" desc="my self-hosted services and projects" />
@@ -34,15 +42,17 @@
   <div class="title">
     <input oninput={change} type="text" placeholder={$_("services.search")} />
     <div>
-      <Link icon="nf-fa-feed" link={api_url("/news/" + $language)}>{$_("services.feed")}</Link>
+      <Link icon="nf-fa-feed" link={api_urljoin("/news/" + $language)}>{$_("services.feed")}</Link>
     </div>
   </div>
   <div class="services">
-    {#each services.filter((s) => {
-      return s.desc[$language] !== "" && s.desc[$language] !== null && s.desc[$language] !== undefined;
-    }) as service}
-      <Service {service} />
-    {/each}
+    {#if get_services().length == 0}
+      <h3 class="none">{$_("services.none")}</h3>
+    {:else}
+      {#each get_services() as service}
+        <Service {service} />
+      {/each}
+    {/if}
   </div>
 </main>
 
@@ -59,12 +69,16 @@
     align-items: center;
   }
 
+  main .none {
+    color: var(--white-3);
+  }
+
   main .services {
+    margin-top: 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    margin-top: 20px;
     gap: 28px;
   }
 

app/static/animations.css

@@ -19,83 +19,3 @@
     width: 100%;
   }
 }
-
-@keyframes colorAnimation {
-  100%,
-  0% {
-    color: rgb(255, 0, 0);
-  }
-  8% {
-    color: rgb(255, 127, 0);
-  }
-  16% {
-    color: rgb(255, 255, 0);
-  }
-  25% {
-    color: rgb(127, 255, 0);
-  }
-  33% {
-    color: rgb(0, 255, 0);
-  }
-  41% {
-    color: rgb(0, 255, 127);
-  }
-  50% {
-    color: rgb(0, 255, 255);
-  }
-  58% {
-    color: rgb(0, 127, 255);
-  }
-  66% {
-    color: rgb(0, 0, 255);
-  }
-  75% {
-    color: rgb(127, 0, 255);
-  }
-  83% {
-    color: rgb(255, 0, 255);
-  }
-  91% {
-    color: rgb(255, 0, 127);
-  }
-}
-
-@keyframes borderAnimation {
-  100%,
-  0% {
-    border-bottom-color: rgb(255, 0, 0);
-  }
-  8% {
-    border-bottom-color: rgb(255, 127, 0);
-  }
-  16% {
-    border-bottom-color: rgb(255, 255, 0);
-  }
-  25% {
-    border-bottom-color: rgb(127, 255, 0);
-  }
-  33% {
-    border-bottom-color: rgb(0, 255, 0);
-  }
-  41% {
-    border-bottom-color: rgb(0, 255, 127);
-  }
-  50% {
-    border-bottom-color: rgb(0, 255, 255);
-  }
-  58% {
-    border-bottom-color: rgb(0, 127, 255);
-  }
-  66% {
-    border-bottom-color: rgb(0, 0, 255);
-  }
-  75% {
-    border-bottom-color: rgb(127, 0, 255);
-  }
-  83% {
-    border-bottom-color: rgb(255, 0, 255);
-  }
-  91% {
-    border-bottom-color: rgb(255, 0, 127);
-  }
-}

app/static/global.css

@@ -26,7 +26,7 @@
   --size-5: 24px;
   --size-6: 30px;
 
-  --text-shadow: 0px 5px 20px rgba(90, 90, 90, 0.8);
+  --text-shadow: 3px 2px 8px rgba(50, 50, 50, 0.8);
   --box-shadow: rgba(20, 20, 20, 0.19) 0px 10px 20px, rgba(30, 30, 30, 0.23) 0px 6px 6px;
   --background: linear-gradient(rgba(11, 11, 11, 0.808), rgba(1, 1, 1, 0.96)), url("/banner.png");
   --profile-size: 220px;

app/static/markdown.css

@@ -61,11 +61,6 @@
 }
 
 .markdown-body a {
-  animation-name: colorAnimation;
-  animation-iteration-count: infinite;
-  animation-duration: 10s;
-  background-color: transparent;
-  color: #58a6ff;
   text-decoration: none;
 }
 
@@ -725,7 +720,7 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background: var(--dark-two);
+  background: var(--black-3);
   border-radius: 6px;
 }
 
@@ -770,7 +765,7 @@
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;
-  background-color: var(--dark-two);
+  background-color: var(--black-3);
   border-radius: 6px;
 }