Release 0.5.1

src/routes/heinzlive/[token]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { onMount, untrack } from 'svelte';
+	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -40,30 +41,18 @@
 </svelte:head>
 
 <main class="heinzlive-output">
-	<div class="output-connection" class:problem={connection === 'interrupted'} role="status">
+	<div class="output-connection sr-only" class:problem={connection === 'interrupted'} role="status">
 		<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
 	</div>
 	{#if view.content}
-		<article class="output-content">
-			<p class="output-kicker">heinzlive</p>
-			<h1>{view.content.title}</h1>
-			<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			<div class="output-copy">{@html view.content.html}</div>
-			{#if view.content.images.length}<div class="output-images">
-					{#each view.content.images as image (image.id)}
-						<img src={`/heinzlive/${page.params.token}/media/${image.id}`} alt={image.altText} />
-					{/each}
-				</div>{/if}
-			{#if view.content.sources.length}<footer class="output-sources">
-					<span>Quellen</span>
-					{#each view.content.sources as source, index (`${index}-${source.url}`)}
-						<!-- Source URLs are validated as absolute HTTP(S) URLs when the Piece is saved. -->
-						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-						<a href={source.url} target="_blank" rel="noopener noreferrer">{source.label}</a>
-					{/each}
-				</footer>{/if}
-		</article>
+		{#key view.revision}
+			<PresentationDisplay
+				content={view.content}
+				imageSrc={view.content.mode === 'text'
+					? `/heinzlive/${page.params.token}/media`
+					: `/heinzlive/${page.params.token}/preview-image`}
+			/>
+		{/key}
 	{:else}
 		<section class="output-idle">
 			<div class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></div>