webcompile/src/routes/index.svelte
2022-08-05 15:46:54 +03:00

150 lines
3.8 KiB
Svelte

<script lang="ts">
import SvelteSeo from "svelte-seo";
import Hero from "$lib/Hero.svelte";
let description: string = "7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack.";
import IconMoneyBill from "~icons/fa6-solid/money-bill";
let announcements: any = [];
async function fetchAnnouncements() {
const url = `https://segfautils.projectsegfau.lt/api/announcements`;
const response = await fetch(url);
announcements = await response.json();
return announcements;
}
const promise = fetchAnnouncements();
import IconCircleInfo from "~icons/fa6-solid/circle-info";
import IconTriangleExclamation from "~icons/fa6-solid/triangle-exclamation";
</script>
<SvelteSeo
title="Home"
description={description}
/>
<Hero title="Project Segfault" description="Open source development and hosted services" marginTop=7>
<div class="buttons">
<a href="https://instances.projectsegfau.lt/">Explore our services</a>
<a href="/projects">Explore our projects</a>
<a href="/donate"><IconMoneyBill /> Donate</a>
</div>
</Hero>
<div class="announcements">
{#await promise}
<span></span>
{:then}
<div class="announcement-container">
<div class="announcement">
<div class="general">
{#if (announcements.severity === "info") }
<IconCircleInfo />
{:else}
<IconTriangleExclamation />
{/if}
<span>
{announcements.created}
</span>
</div>
<div class="title">
<h1>{announcements.title}</h1>
</div>
<div class="read-more">
<a href={announcements.link}>Read more...</a>
</div>
</div>
</div>
{:catch}
<span></span>
{/await}
</div>
<style>
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 1rem;
}
@media screen and (max-width: 452px) {
.buttons {
flex-direction: column;
}
}
.buttons a {
text-decoration: none;
background-color: var(--accent-primary);
padding: 8px 1em 8px 1em;
color: var(--primary);
border-radius: 10px;
transition: filter .25s;
display: flex;
align-items: center;
gap: 4px;
}
.buttons a:hover {
filter: brightness(125%);
}
.announcement-container {
display: flex;
justify-content: center;
margin-top: 4rem;
}
.announcement {
color: var(--primary);
padding: 2rem 1rem;
border-radius: 10px;
width: fit-content;
display: flex;
flex-direction: column;
}
.announcement a {
color: var(--primary);
}
.announcement .general {
display: flex;
align-items: center;
gap: 8px;
}
</style>
{#if (announcements.severity === "info") }
<style>
.announcement {
background-color: #8caaee;
}
</style>
{:else if (announcements.severity === "low") }
<style>
.announcement {
background-color: #a6d189;
}
</style>
{:else if (announcements.severity === "medium") }
<style>
.announcement {
background-color: #e5c890;
}
</style>
{:else if (announcements.severity === "high") }
<style>
.announcement {
background-color: #e78284;
}
</style>
{/if}