ngn/website
1
0
Fork 0
Code Issues 1 Pull Requests 6 Actions Packages Activity

documentation server and /doc route

Browse Source 
Signed-off-by: ngn <ngn@ngn.tf>
This commit is contained in:
ngn
2025-01-16 07:46:27 +03:00
parent 5fb3c03e40
commit e87764a4c2
40 changed files with 1313 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/routes/+layout.js
View File

@ -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) {

11
app/src/routes/doc/[name]/+page.js Normal file
View File

@ -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 };
}
}

104
app/src/routes/doc/[name]/+page.svelte Normal file
View File

@ -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>

30
app/src/routes/services/+page.svelte
View File

@ -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;
}