2022-08-04 14:54:22 +05:30
|
|
|
<script lang="ts">
|
2022-08-05 19:31:15 +05:30
|
|
|
import SvelteSeo from "svelte-seo";
|
|
|
|
import Hero from "$lib/Hero.svelte";
|
2022-08-17 19:38:41 +05:30
|
|
|
import LinkButton from "$lib/LinkButton.svelte";
|
2022-08-24 21:55:27 +05:30
|
|
|
import Note from "$lib/Form/Note.svelte";
|
2022-08-07 15:12:09 +05:30
|
|
|
import dayjs from "dayjs";
|
2022-08-05 18:16:54 +05:30
|
|
|
|
2022-08-08 10:50:29 +05:30
|
|
|
let description: string = "Open source development and hosted services.";
|
2022-08-08 10:50:03 +05:30
|
|
|
|
2022-08-05 19:31:15 +05:30
|
|
|
let announcements: any = [];
|
2022-08-05 18:16:54 +05:30
|
|
|
async function fetchAnnouncements() {
|
|
|
|
const url = `https://segfautils.projectsegfau.lt/api/announcements`;
|
|
|
|
const response = await fetch(url);
|
|
|
|
announcements = await response.json();
|
2022-08-05 19:31:15 +05:30
|
|
|
return announcements;
|
2022-08-05 18:16:54 +05:30
|
|
|
}
|
|
|
|
|
2022-08-05 19:31:15 +05:30
|
|
|
const promise = fetchAnnouncements();
|
2022-08-04 14:54:22 +05:30
|
|
|
</script>
|
|
|
|
|
2022-08-07 15:12:09 +05:30
|
|
|
<SvelteSeo title="Home | Project Segfault" {description} />
|
2022-08-05 19:31:15 +05:30
|
|
|
|
|
|
|
<Hero
|
|
|
|
title="Project Segfault"
|
|
|
|
description="Open source development and hosted services"
|
|
|
|
marginTop="7"
|
|
|
|
>
|
|
|
|
<div class="buttons">
|
2022-08-31 16:46:12 +05:30
|
|
|
<LinkButton
|
|
|
|
url="/services"
|
|
|
|
title="Explore our services"
|
|
|
|
icon="i-fa6-solid:bell-concierge"
|
|
|
|
/>
|
|
|
|
<LinkButton
|
|
|
|
url="/projects"
|
|
|
|
title="Explore our projects"
|
|
|
|
icon="i-fa6-solid:tractor"
|
|
|
|
/>
|
2022-08-17 19:38:41 +05:30
|
|
|
<LinkButton
|
|
|
|
url="/donate"
|
|
|
|
icon="i-fa6-solid:money-bill"
|
|
|
|
title="Donate"
|
2022-08-24 22:25:39 +05:30
|
|
|
bg="#F6C915"
|
|
|
|
color="#151515"
|
2022-08-17 19:38:41 +05:30
|
|
|
/>
|
2022-08-05 19:31:15 +05:30
|
|
|
</div>
|
2022-08-05 18:16:54 +05:30
|
|
|
</Hero>
|
2022-08-04 14:54:22 +05:30
|
|
|
|
2022-08-05 18:16:54 +05:30
|
|
|
<div class="announcements">
|
2022-08-05 19:31:15 +05:30
|
|
|
{#await promise}
|
|
|
|
<span />
|
|
|
|
{:then}
|
|
|
|
<div class="announcement-container">
|
|
|
|
<div class="announcement">
|
|
|
|
<div class="general">
|
|
|
|
{#if announcements.severity === "info"}
|
2022-08-12 16:45:39 +05:30
|
|
|
<div class="i-fa6-solid:circle-info" />
|
2022-08-05 19:31:15 +05:30
|
|
|
{:else}
|
2022-08-12 16:45:39 +05:30
|
|
|
<div class="i-fa6-solid:triangle-exclamation" />
|
2022-08-05 19:31:15 +05:30
|
|
|
{/if}
|
|
|
|
<span>
|
2022-08-08 10:50:03 +05:30
|
|
|
{dayjs
|
|
|
|
.unix(announcements.created)
|
|
|
|
.format("DD/MM/YYYY HH:mm")}
|
2022-08-05 19:31:15 +05:30
|
|
|
</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 />
|
|
|
|
{/await}
|
2022-08-05 18:16:54 +05:30
|
|
|
</div>
|
2022-08-04 14:54:22 +05:30
|
|
|
|
2022-08-24 21:55:27 +05:30
|
|
|
<noscript>
|
2022-08-27 22:07:37 +05:30
|
|
|
<div class="no-js">
|
2022-08-24 21:55:27 +05:30
|
|
|
<Note content="Announcements do not work without JavaScript enabled." />
|
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.announcements {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</noscript>
|
|
|
|
|
2022-08-05 19:31:15 +05:30
|
|
|
{#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}
|
2022-08-05 18:16:54 +05:30
|
|
|
|
|
|
|
<style>
|
2022-08-05 19:31:15 +05:30
|
|
|
.buttons {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
gap: 1rem;
|
|
|
|
margin: 1rem;
|
|
|
|
}
|
2022-08-04 21:20:02 +05:30
|
|
|
|
2022-08-05 19:31:15 +05:30
|
|
|
@media screen and (max-width: 452px) {
|
|
|
|
.buttons {
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.announcement-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
margin-top: 4rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.announcement {
|
2022-08-06 18:34:03 +05:30
|
|
|
color: #252525 !important;
|
2022-08-05 19:31:15 +05:30
|
|
|
padding: 2rem 1rem;
|
|
|
|
border-radius: 10px;
|
|
|
|
width: fit-content;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
2022-08-05 18:16:54 +05:30
|
|
|
|
2022-08-05 19:31:15 +05:30
|
|
|
.announcement a {
|
2022-08-06 18:34:03 +05:30
|
|
|
color: #252525;
|
2022-08-05 19:31:15 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
.announcement .general {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
}
|
2022-08-27 22:07:37 +05:30
|
|
|
|
|
|
|
.no-js {
|
|
|
|
@apply flex justify-center text-center text-red;
|
|
|
|
}
|
2022-08-05 19:31:15 +05:30
|
|
|
</style>
|