Merge pull request #84 from ProjectSegfault/implement-api-state

Implement api state (closes #81)

src/lib/Announcements.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import fetchState from "$lib/fetchState";
+
+	const promise = fetchState("announcements");
+
+	import Note from "$lib/Form/Note.svelte";
+	import dayjs from "dayjs";
+
+	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;
+	}
+</script>
+
+{#await promise}
+	<span />
+{:then state}
+	{#if state.enabled === "true"}
+		<div class="announcements">
+			{#await fetchAnnouncements()}
+				<span />
+			{:then}
+				<div class="announcement-container">
+					<div class="announcement">
+						<div class="general">
+							{#if announcements.severity === "info"}
+								<div class="i-fa6-solid:circle-info" />
+							{:else}
+								<div class="i-fa6-solid:triangle-exclamation" />
+							{/if}
+							<span>
+								{dayjs
+									.unix(announcements.created)
+									.format("DD/MM/YYYY HH:mm")}
+							</span>
+						</div>
+						<div class="title">
+							<h1>{announcements.title}</h1>
+						</div>
+
+						{#if announcements.link}
+							<div class="read-more">
+								<a href={announcements.link}>Read more...</a>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{:catch}
+				<span />
+			{/await}
+		</div>
+
+		<noscript>
+			<div class="no-js">
+				<Note
+					content="Announcements do not work without JavaScript enabled."
+				/>
+			</div>
+			<style>
+				.announcements {
+					display: none;
+				}
+			</style>
+		</noscript>
+
+		{#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}
+
+		<style>
+			.announcement-container {
+				display: flex;
+				justify-content: center;
+				margin-top: 4rem;
+			}
+
+			.announcement {
+				color: #252525 !important;
+				padding: 2rem 1rem;
+				border-radius: 10px;
+				width: fit-content;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.announcement a {
+				color: #252525;
+			}
+
+			.announcement .general {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.no-js {
+				@apply flex justify-center text-center text-red;
+			}
+		</style>
+	{:else}
+		<div class="flex items-center gap-1 text-center justify-center mt-16">
+			<div class="i-fa6-solid:circle-info" />
+			<span>Announcements are currently disabled.</span>
+		</div>
+	{/if}
+{/await}

src/lib/ContactForm.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
+	import fetchState from "$lib/fetchState";
+
+	const promise = fetchState("form");
 </script>
 
+{#await promise}
+	<span />
+{:then state}
+	{#if state.enabled === "true"}
 		<Form
 			action="https://segfautils.projectsegfau.lt/api/form"
 			method="POST"
@@ -16,7 +23,9 @@
 				inputPlaceholder="Your email"
 				selectType="commentType"
 			>
-		<option value="" selected disabled>Select a type of comment</option>
+				<option value="" selected disabled
+					>Select a type of comment</option
+				>
 				<option value="Feedback">Feedback</option>
 				<option value="Suggestion">Suggestion</option>
 				<option value="Question">Question</option>
@@ -25,3 +34,10 @@
 			<TextArea id="comment" name="message" placeholder="Your message" />
 			<Captcha />
 		</Form>
+	{:else}
+		<div class="flex items-center gap-1">
+			<div class="i-fa6-solid:circle-info" />
+			<span>The contact form is currently disabled.</span>
+		</div>
+	{/if}
+{/await}

src/lib/Nav.svelte

@@ -38,7 +38,10 @@
 				href={url}>{name}</a
 			>
 		{/each}
-		<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/" class="icon">
+		<a
+			href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
+			class="icon"
+		>
 			<div class="i-simple-icons:matrix" />
 			<span>Matrix</span>
 		</a>

src/lib/ThemeToggle.svelte

@@ -15,8 +15,11 @@
 
 <DarkMode bind:theme />
 
-<button on:click={toggle} class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-[var(--font-primary)] color-[var(--text)]">
+<button
-	<div class="i-fa6-solid:{theme === "dark" ? "sun" : "moon"}" />
+	on:click={toggle}
+	class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-[var(--font-primary)] color-[var(--text)]"
+>
+	<div class="i-fa6-solid:{theme === 'dark' ? 'sun' : 'moon'}" />
 	<span class="ml-2">Toggle theme</span>
 </button>
 

src/lib/fetchState.ts

@@ -0,0 +1,7 @@
+let state: any = [];
+export default async function fetchState(module: "announcements" | "form") {
+	const url = `https://segfautils.projectsegfau.lt/api/set/${module}`;
+	const response = await fetch(url);
+	state = await response.json();
+	return state;
+}

src/routes/+page.svelte

@@ -2,20 +2,9 @@
 	import SvelteSeo from "svelte-seo";
 	import Hero from "$lib/Hero.svelte";
 	import LinkButton from "$lib/LinkButton.svelte";
-	import Note from "$lib/Form/Note.svelte";
+	import Announcements from "$lib/Announcements.svelte";
-	import dayjs from "dayjs";
 
 	let description: string = "Open source development and hosted services.";
-
-	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();
 </script>
 
 <SvelteSeo title="Home | Project Segfault" {description} />
@@ -41,76 +30,7 @@
 	</div>
 </Hero>
 
-<div class="announcements">
+<Announcements />
-	{#await promise}
-		<span />
-	{:then}
-		<div class="announcement-container">
-			<div class="announcement">
-				<div class="general">
-					{#if announcements.severity === "info"}
-						<div class="i-fa6-solid:circle-info" />
-					{:else}
-						<div class="i-fa6-solid:triangle-exclamation" />
-					{/if}
-					<span>
-						{dayjs
-							.unix(announcements.created)
-							.format("DD/MM/YYYY HH:mm")}
-					</span>
-				</div>
-				<div class="title">
-					<h1>{announcements.title}</h1>
-				</div>
-
-				{#if announcements.link}
-					<div class="read-more">
-						<a href={announcements.link}>Read more...</a>
-					</div>
-				{/if}
-			</div>
-		</div>
-	{:catch}
-		<span />
-	{/await}
-</div>
-
-<noscript>
-	<div class="no-js">
-		<Note content="Announcements do not work without JavaScript enabled." />
-	</div>
-	<style>
-		.announcements {
-			display: none;
-		}
-	</style>
-</noscript>
-
-{#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}
 
 <style>
 	.buttons {
@@ -127,33 +47,4 @@
 			flex-direction: column;
 		}
 	}
-
-	.announcement-container {
-		display: flex;
-		justify-content: center;
-		margin-top: 4rem;
-	}
-
-	.announcement {
-		color: #252525 !important;
-		padding: 2rem 1rem;
-		border-radius: 10px;
-		width: fit-content;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.announcement a {
-		color: #252525;
-	}
-
-	.announcement .general {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.no-js {
-		@apply flex justify-center text-center text-red;
-	}
 </style>

src/routes/legal/tos/+page.md

@@ -14,5 +14,6 @@ description: We're not anarchists, so we have some rules.
 5. While we do try to keep your data safe, you have to acknowledge that **we are not responsible** if anything **unintentional** happens (such as **data loss**, **inability to extract your data** due to the server being down.). It is also **your responsibility** to **keep a backup of your data** if it matters to you.
 
 ### Failure to comply will either end up **disabling** your account, and/or if it is illegal, **reporting** to the police.
-* Be aware that "**reporting** to the police" only happens if the individual is using our services to **post, promote, or encourage** actions that are **morally unnacceptable**. (Such as: pedophilia, murder, or CSAM.)
+
-* **No warnings will be issued if we find this out.**
+-   Be aware that "**reporting** to the police" only happens if the individual is using our services to **post, promote, or encourage** actions that are **morally unnacceptable**. (Such as: pedophilia, murder, or CSAM.)
+-   **No warnings will be issued if we find this out.**

src/routes/timeline/+page.svelte

@@ -232,11 +232,15 @@
 			<TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
-			<h3>
+			<h3>Resignation of members and the start of a new era.</h3>
-				Resignation of members and the start of a new era.
-			</h3>
 			<p>
-				Devnol, Odyssey and akisblack resigned from the team leading to a serious loss of manpower. To combat this, we decided to shut down some of our unused instances as well as the ones that were painful to deal with. You can read more over at <a href="https://blog.projectsegfau.lt/resignation-of-3-members-of-projectsegfault/">this blog post</a>.
+				Devnol, Odyssey and akisblack resigned from the team leading to
+				a serious loss of manpower. To combat this, we decided to shut
+				down some of our unused instances as well as the ones that were
+				painful to deal with. You can read more over at <a
+					href="https://blog.projectsegfau.lt/resignation-of-3-members-of-projectsegfault/"
+					>this blog post</a
+				>.
 			</p>
 		</TimelineContent>
 	</TimelineItem>