66 lines
1.5 KiB
Svelte
66 lines
1.5 KiB
Svelte
<script>
|
|
import Navbar from "$components/navbar.svelte";
|
|
import Footer from "$components/footer.svelte";
|
|
import Header from "$components/header.svelte";
|
|
import Service from "$components/service.svelte";
|
|
import Head from "$components/head.svelte";
|
|
import Card from "$components/card.svelte";
|
|
|
|
import { locale, _ } from "$lib/locale.js";
|
|
import api from "$lib/api.js";
|
|
let { data } = $props();
|
|
|
|
// filtered list of services that have descriptions for the current locale
|
|
let services = $derived(
|
|
data.services.filter(
|
|
s =>
|
|
s.desc[$locale.code] !== "" &&
|
|
s.desc[$locale.code] !== null &&
|
|
s.desc[$locale.code] !== undefined
|
|
)
|
|
);
|
|
</script>
|
|
|
|
<Head title="services" desc="my self-hosted services and projects" />
|
|
<Navbar />
|
|
<Header picture="cool" title={$_("services.title")} />
|
|
<main>
|
|
<Card>
|
|
<p>{@html $_("services.desc")}</p>
|
|
<br />
|
|
<p>
|
|
{@html $_("services.feed", {
|
|
links: [api.join("/news/" + $locale.code)],
|
|
})}
|
|
</p>
|
|
</Card>
|
|
<div class="services">
|
|
{#if services.length === 0}
|
|
<h3>{$_("services.none")}</h3>
|
|
{:else}
|
|
{#each services as service}
|
|
<Service {service} />
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
|
|
<style>
|
|
main {
|
|
background: var(--black-1);
|
|
flex: 1;
|
|
padding: 40px;
|
|
}
|
|
|
|
main .services {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
gap: 28px;
|
|
color: var(--white-3);
|
|
}
|
|
</style>
|