frontend: setup initial updates page

web/src/components/misc/ChangelogEntry.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    export let version: string;
+    export let title: string;
+    export let date: string;
+    export let banner: { file: string, alt: string } | undefined;
+</script>
+<style>
+    img {
+        max-width: 100%;
+    }
+
+    h1, h2 {
+        padding-top: 1em;
+    }
+
+    .contents :global(.text-backdrop) {
+        border-radius: 4px;
+        background-color: var(--button);
+        color: var(--background);
+        padding: 0.3rem;
+    }
+
+    .contents :global(.text-backdrop.link) {
+        text-decoration: underline;
+    }
+</style>
+<div>
+    <h1>{ version }: { title }</h1>
+    <h2>{ date }</h2>
+    {#if banner}
+        <img src={`/update-banners/${banner.file}`} alt={banner.alt} />
+    {/if}
+    <div class="contents">
+        <slot></slot>
+    </div>
+</div>

web/src/components/misc/ChangelogEntryWrapper.svelte

@@ -0,0 +1,11 @@
+<!-- Workaround for https://github.com/pngwn/MDsveX/issues/116 -->
+<script lang="ts">
+    import ChangelogEntry from "./ChangelogEntry.svelte";
+    export let version = '';
+    export let title = '';
+    export let date = '';
+    export let banner = undefined;
+</script>
+<ChangelogEntry {version} {title} {date} {banner}>
+    <slot></slot>
+</ChangelogEntry>