add the visitor API endpoint
This commit is contained in:
@ -1,19 +1,29 @@
|
||||
import { locale, waitLocale } from "svelte-i18n";
|
||||
import { init, register } from "svelte-i18n";
|
||||
import { browser } from "$app/environment";
|
||||
import { init, register, waitLocale } from "svelte-i18n";
|
||||
import { browser_lang } from "$lib/util.js";
|
||||
import { services } from "$lib/api.js";
|
||||
import languages from "$lib/lang.js";
|
||||
|
||||
const defaultLocale = languages[0].code;
|
||||
|
||||
// setup the locale
|
||||
for (let i = 0; i < languages.length; i++)
|
||||
register(languages[i].code, () => import(/* @vite-ignore */ languages[i].path));
|
||||
|
||||
init({
|
||||
fallbackLocale: defaultLocale,
|
||||
initialLocale: browser ? window.navigator.language.slice(0, 2).toLowerCase() : defaultLocale,
|
||||
fallbackLocale: languages[0].code,
|
||||
initialLocale: browser_lang(),
|
||||
});
|
||||
|
||||
export const load = async () => {
|
||||
if (browser) locale.set(window.navigator.language);
|
||||
// load locales & load data from the API
|
||||
export async function load({ fetch }) {
|
||||
await waitLocale();
|
||||
};
|
||||
|
||||
try {
|
||||
return {
|
||||
services: await services(fetch),
|
||||
error: null,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
error: err,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
<script>
|
||||
import Navbar from "$lib/navbar.svelte";
|
||||
import Footer from "$lib/footer.svelte";
|
||||
import Error from "$lib/error.svelte";
|
||||
|
||||
let { data, children } = $props();
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Navbar />
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<Footer />
|
||||
{#if data.error === null}
|
||||
<Navbar />
|
||||
<div class="content">
|
||||
{@render children()}
|
||||
</div>
|
||||
<Footer />
|
||||
{:else}
|
||||
<Error error={data.error} />>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import Header from "$lib/header.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
import Head from "$lib/head.svelte";
|
||||
import Card from "$lib/card.svelte";
|
||||
import Link from "$lib/link.svelte";
|
||||
@ -10,9 +9,9 @@
|
||||
</script>
|
||||
|
||||
<Head title="home" desc="home page of my personal website" />
|
||||
<Header title={$_("home.title")} picture="tired" />
|
||||
<Header picture="tired" title={$_("home.title")} />
|
||||
|
||||
<Content>
|
||||
<main>
|
||||
<Card title={$_("home.welcome.title")}>
|
||||
<span> 👋 {$_("home.welcome.desc")}</span>
|
||||
<ul>
|
||||
@ -77,9 +76,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Content>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
padding: 50px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.prefer {
|
||||
color: var(--white-2);
|
||||
font-style: italic;
|
||||
@ -98,4 +107,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<script>
|
||||
import Header from "$lib/header.svelte";
|
||||
import Head from "$lib/head.svelte";
|
||||
import Icon from "$lib/icon.svelte";
|
||||
|
||||
import { color } from "$lib/util.js";
|
||||
import { _ } from "svelte-i18n";
|
||||
</script>
|
||||
|
||||
<Head title="donate" desc="give me all of your life savings" />
|
||||
<Header title="donate money!" picture="money" />
|
||||
<Header picture="money" title={$_("donate.title")} />
|
||||
|
||||
<main>
|
||||
<span
|
||||
>I spend a lot of time working on different projects and maintaining different services.</span
|
||||
>
|
||||
<span
|
||||
>I also spend a lot of money, but unlike time, you don't usually get much of it for free.</span
|
||||
>
|
||||
<span
|
||||
>I mostly pay for hosting and electricity. Which when added up costs around 550₺ per month, that
|
||||
is Turkish Lira, equals to ~$15 at time of writing.</span
|
||||
>
|
||||
<span> </span>
|
||||
<span>
|
||||
{$_("donate.info")}
|
||||
{$_("donate.price")}
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<span
|
||||
>So even a small donation would be highly appreciated and it would help me keep everything up
|
||||
and running.</span
|
||||
>
|
||||
<span>
|
||||
{$_("donate.details")}
|
||||
</span>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="color: var(--{color()})">Platform</th>
|
||||
<th style="color: var(--{color()})">Address/Link</th>
|
||||
<th style="color: var(--{color()})">{$_("donate.table.platform")}</th>
|
||||
<th style="color: var(--{color()})">{$_("donate.table.address")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Monero (XMR)</td>
|
||||
<td>
|
||||
<Icon icon="nf-fa-monero" />
|
||||
Monero (XMR)
|
||||
</td>
|
||||
<td>
|
||||
<code>
|
||||
46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F
|
||||
@ -42,10 +42,9 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span
|
||||
>Also huge thanks to all of you who has donated so far, as I said, I highly appreciate it. Thank
|
||||
you!</span
|
||||
>
|
||||
<span>
|
||||
{$_("donate.thanks")}
|
||||
</span>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@ -77,6 +76,7 @@
|
||||
|
||||
td,
|
||||
th {
|
||||
font-size: var(--size-4);
|
||||
border: solid 1px var(--black-4);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import { services } from "$lib/api.js";
|
||||
|
||||
export async function load({ fetch }) {
|
||||
return {
|
||||
list: await services(fetch),
|
||||
};
|
||||
}
|
||||
@ -4,42 +4,42 @@
|
||||
import Link from "$lib/link.svelte";
|
||||
import Head from "$lib/head.svelte";
|
||||
|
||||
import { api_url } from "$lib/util.js";
|
||||
import { locale } from "svelte-i18n";
|
||||
import { _, locale } from "svelte-i18n";
|
||||
import { api_url } from "$lib/api.js";
|
||||
|
||||
export let data;
|
||||
|
||||
let list = data.list,
|
||||
services = list;
|
||||
let value = "";
|
||||
let { data } = $props();
|
||||
let list = $state(data.services);
|
||||
|
||||
function change(input) {
|
||||
value = input.target.value.toLowerCase();
|
||||
services = [];
|
||||
let value = input.target.value.toLowerCase();
|
||||
list = [];
|
||||
|
||||
if (value === "") {
|
||||
services = list;
|
||||
list = data.services;
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((s) => {
|
||||
if (s.name.toLowerCase().includes(value)) services.push(s);
|
||||
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);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Head title="services" desc="my self-hosted services and projects" />
|
||||
<Header title="service status" picture="cool" />
|
||||
<Header picture="cool" title={$_("services.title")} />
|
||||
|
||||
<main>
|
||||
<div class="title">
|
||||
<input on:input={change} type="text" placeholder="Search for a service" />
|
||||
<input oninput={change} type="text" placeholder={$_("services.search")} />
|
||||
<div>
|
||||
<Link icon="nf-fa-feed" link={api_url("/news/" + $locale.slice(0, 2))}>News and updates</Link>
|
||||
<Link icon="nf-fa-feed" link={api_url("/news/" + $locale.slice(0, 2))}
|
||||
>{$_("services.feed")}</Link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="services">
|
||||
{#each services as service}
|
||||
{#each list as service}
|
||||
<Service {service} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user