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

add projects and metrics routes

Browse Source
This commit is contained in:
ngn
2025-01-09 00:30:59 +03:00
parent dee3ef4d85
commit ac307de76c
32 changed files with 781 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,20 @@
import { init, register, waitLocale } from "svelte-i18n";
import { browser_lang } from "$lib/util.js";
import { services } from "$lib/api.js";
import { default_language, language, set_lang } from "$lib/util.js";
import { get_services, get_projects } from "$lib/api.js";
import languages from "$lib/lang.js";
import { init, register, waitLocale } from "svelte-i18n";
import { get } from "svelte/store";
// setup the locale
for (let i = 0; i < languages.length; i++)
register(languages[i].code, () => import(/* @vite-ignore */ languages[i].path));
// set the language
set_lang();
init({
fallbackLocale: languages[0].code,
initialLocale: browser_lang(),
fallbackLocale: default_language,
initialLocale: get(language),
});
// load locales & load data from the API
@ -18,7 +23,8 @@ export async function load({ fetch }) {
try {
return {
services: await services(fetch),
services: await get_services(fetch),
projects: await get_projects(fetch),
error: null,
};
} catch (err) {

92
app/src/routes/+page.svelte
View File

@ -4,8 +4,11 @@
import Card from "$lib/card.svelte";
import Link from "$lib/link.svelte";
import { color } from "$lib/util.js";
import { color, language } from "$lib/util.js";
import { _ } from "svelte-i18n";
const { data } = $props();
let projects = $state(data.projects);
</script>
<Head title="home" desc="home page of my personal website" />
@ -24,6 +27,7 @@
<span>{$_("home.work.desc")}</span>
<ul>
<li>⌨️ {$_("home.work.build")}</li>
<li>🤦 {$_("home.work.fix")}</li>
<li>🚩 {$_("home.work.ctf")}</li>
<li>👥 {$_("home.work.contribute")}</li>
<li>📑 {$_("home.work.wiki")}</li>
@ -37,44 +41,53 @@
PGP
</Link>
</li>
<li>
<Link icon="nf-md-email" link="mailto:ngn@ngn.tf">Email</Link>
</li>
<li>
<Link icon="nf-md-mastodon" link="https://defcon.social/@ngn">Mastodon</Link>
</li>
</ul>
<span>
{$_("home.links.prefer")}
</span>
</Card>
<Card title={$_("home.services.title")}>
<span>
{$_("home.services.desc")}
</span>
<ul>
<li>
<Link icon="nf-cod-github" link="https://github.com/ngn13">Github</Link>
<i style="color: var(--{color()});" class="nf nf-md-speedometer_slow"></i>
{$_("home.services.speed")}
</li>
<li>
<Link icon="nf-md-email" link="mailto:ngn@ngn.tf">Email</Link>
<span class="prefer">({$_("home.links.prefer")})</span>
<i style="color: var(--{color()});" class="nf nf-fa-lock"></i>
{$_("home.services.security")}
</li>
<li>
<i style="color: var(--{color()});" class="nf nf-fa-network_wired"></i>
{$_("home.services.privacy")}
</li>
<li>
<i style="color: var(--{color()});" class="nf nf-md-eye_off"></i>
{$_("home.services.bullshit")}
</li>
</ul>
<Link linK="/services">{$_("home.services.link")}</Link>
</Card>
<Card title={$_("home.info.title")}>
<div class="services">
<div class="info">
<span>
{$_("home.info.desc")}
</span>
<ul>
<li>
<i style="color: var(--{color()});" class="nf nf-md-speedometer_slow"></i>
{$_("home.info.speed")}
</li>
<li>
<i style="color: var(--{color()});" class="nf nf-fa-lock"></i>
{$_("home.info.security")}
</li>
<li>
<i style="color: var(--{color()});" class="nf nf-fa-network_wired"></i>
{$_("home.info.privacy")}
</li>
<li>
<i style="color: var(--{color()});" class="nf nf-md-eye_off"></i>
{$_("home.info.bullshit")}
</li>
</ul>
</div>
</div>
<Card title={$_("home.projects.title")}>
<span>
{$_("home.projects.desc")}:
</span>
<ul>
{#each projects as project}
<li>
<Link active={true} link={project.url}>{project.name}</Link>:
{project.desc[$language]}
</li>
{/each}
</ul>
</Card>
</main>
@ -89,25 +102,6 @@
gap: 28px;
}
.prefer {
color: var(--white-2);
font-style: italic;
}
.services {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 28px;
}
.services .info {
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 900px) {
main {
flex-direction: column;

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

@ -4,24 +4,25 @@
import Link from "$lib/link.svelte";
import Head from "$lib/head.svelte";
import { _, locale } from "svelte-i18n";
import { language } from "$lib/util.js";
import { api_url } from "$lib/api.js";
import { _ } from "svelte-i18n";
let { data } = $props();
let list = $state(data.services);
let services = $state(data.services);
function change(input) {
let value = input.target.value.toLowerCase();
list = [];
services = [];
if (value === "") {
list = data.services;
services = data.services;
return;
}
data.services.forEach((s) => {
if (s.name.toLowerCase().includes(value)) list.push(s);
else if (s.desc[$locale.slice(0, 2)].toLowerCase().includes(value)) list.push(s);
if (s.name.toLowerCase().includes(value)) services.push(s);
else if (s.desc[$language].toLowerCase().includes(value)) services.push(s);
});
}
</script>
@ -33,13 +34,11 @@
<div class="title">
<input oninput={change} type="text" placeholder={$_("services.search")} />
<div>
<Link icon="nf-fa-feed" link={api_url("/news/" + $locale.slice(0, 2))}
>{$_("services.feed")}</Link
>
<Link icon="nf-fa-feed" link={api_url("/news/" + $language)}>{$_("services.feed")}</Link>
</div>
</div>
<div class="services">
{#each list as service}
{#each services as service}
<Service {service} />
{/each}
</div>