Files
website/app/src/routes/services/+page.svelte
ngn 2c5388bcce
All checks were successful
Build the docker image for the frontend application / build (push) Successful in 27s
add border to separate service list from paragraph
Signed-off-by: ngn <ngn@ngn.tf>
2025-07-24 17:49:11 +03:00

69 lines
1.6 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 {
border-top: solid 1px var(--white-3);
padding-top: 20px;
margin-top: 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
color: var(--white-3);
gap: 15px;
}
</style>