feat(dashboard): add news

Catalogger.Frontend/src/lib/api.ts

@@ -137,3 +137,17 @@ export type GuildChannelConfig = {
 	message_delete: string;
 	message_delete_bulk: string;
 };
+
+export type Meta = {
+	guilds: number;
+	invite_url: string;
+	news: NewsMessage[];
+};
+
+export type NewsMessage = {
+	author: string;
+	content: string;
+	attachment_urls: string[];
+	posted_at: string;
+	edited_at: string | null;
+};

Catalogger.Frontend/src/routes/+page.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-	import apiFetch from "$lib/api";
+	import apiFetch, { type Meta, type NewsMessage } from "$lib/api";
 	import { onMount } from "svelte";
 	import type { PageData } from "./$types";
 	import { Button, ButtonGroup } from "@sveltestrap/sveltestrap";
+	import Message from "./Message.svelte";
 
 	export let data: PageData;
 
 	let guildCount: number | null = null;
 	let inviteUrl: string | null = null;
-
-	type MetaResponse = { guilds: number; invite_url: string };
+	let news: NewsMessage[] = [];
 
 	onMount(async () => {
-		const meta = await apiFetch<MetaResponse>("GET", "/api/meta");
+		const meta = await apiFetch<Meta>("GET", "/api/meta");
 		guildCount = meta.guilds;
 		inviteUrl = meta.invite_url;
+		news = meta.news;
 	});
 </script>
 
@@ -59,3 +60,11 @@
 		</ButtonGroup>
 	</p>
 {/if}
+
+<h2>News</h2>
+
+{#each news as message (message.posted_at)}
+	<Message {message} />
+{:else}
+	<p>No news right now.</p>
+{/each}

Catalogger.Frontend/src/routes/Message.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { NewsMessage } from "$lib/api";
+	import {
+		Card,
+		CardBody,
+		CardFooter,
+		CardText,
+	} from "@sveltestrap/sveltestrap";
+	import { DateTime } from "luxon";
+
+	export let message: NewsMessage;
+
+	$: postedAt = DateTime.fromISO(message.posted_at).toLocaleString(
+		DateTime.DATETIME_MED,
+	);
+	$: editedAt = message.edited_at
+		? DateTime.fromISO(message.edited_at).toLocaleString(DateTime.DATETIME_MED)
+		: null;
+</script>
+
+<Card>
+	<CardBody>
+		<CardText>{message.content}</CardText>
+	</CardBody>
+	<CardFooter>
+		From {message.author} &bull; Posted {postedAt}
+		{#if editedAt}
+			<p class="text-muted">(edited {editedAt})</p>
+		{/if}
+	</CardFooter>
+</Card>