Catalogger.NET/Catalogger.Frontend/src/routes/Message.svelte

<script lang="ts">
	import type { NewsMessage } from "$lib/api";
	import {
		Card,
		CardBody,
		CardFooter,
		CardText,
	} from "@sveltestrap/sveltestrap";
	import { DateTime } from "luxon";
	import { marked } from "marked";

	export let message: NewsMessage;

	$: content = marked.parse(message.content, { breaks: true });

	$: 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>{@html content}</CardText>
	</CardBody>
	<CardFooter>
		From {message.author} &bull; Posted {postedAt}
		{#if editedAt}
			<p class="text-muted">(edited {editedAt})</p>
		{/if}
	</CardFooter>
</Card>