From a18c0a8cf73fd09409e9f308fe7a43041b3d236a Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sun, 19 Apr 2026 21:56:30 +0200
Subject: [PATCH] feat(post-page): separate headline and body content for
 improved rendering

- Extracted headline and body content from the post's HTML, allowing for distinct rendering of the headline and body in the post page.
- Updated the Svelte component to display the extracted headline and body content separately, enhancing the layout and readability of posts.
---
 src/routes/post/[slug]/+page.server.ts | 10 +++++++++
 src/routes/post/[slug]/+page.svelte    | 28 +++++++++++++++-----------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/routes/post/[slug]/+page.server.ts b/src/routes/post/[slug]/+page.server.ts
index c722c3b..de63baa 100644
--- a/src/routes/post/[slug]/+page.server.ts
+++ b/src/routes/post/[slug]/+page.server.ts
@@ -76,6 +76,14 @@ export const load: PageServerLoad = async ({ params, locals, url }) => {
     contentHtml = await processMarkdownHtmlImages(contentHtml);
   }
 
+  let contentHeadlineHtml = '';
+  let contentBodyHtml = contentHtml;
+  const h1Match = contentHtml.match(/^\s*(<h1\b[^>]*>[\s\S]*?<\/h1>)([\s\S]*)$/);
+  if (h1Match) {
+    contentHeadlineHtml = h1Match[1];
+    contentBodyHtml = h1Match[2];
+  }
+
   const hasRowContent =
     ((post as { row1Content?: unknown[] }).row1Content?.length ?? 0) > 0 ||
     ((post as { row2Content?: unknown[] }).row2Content?.length ?? 0) > 0 ||
@@ -199,6 +207,8 @@ export const load: PageServerLoad = async ({ params, locals, url }) => {
     postImageFocal: postImageField?.focal ?? null,
     postDate,
     contentHtml,
+    contentHeadlineHtml,
+    contentBodyHtml,
     hasRowContent,
     isEvent,
     eventDateRaw,
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index 9f35efc..a86426e 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -32,16 +32,6 @@
   {/if}
 </svelte:head>
 
-{#if data.isEvent && (data.eventDateLabel || data.eventLocationText)}
-  <div class="mb-6">
-    <EventBadges
-      eventDate={data.eventDateRaw}
-      locationText={data.eventLocationText}
-      locationHref={(data.mapEmbedUrl || data.mapLinkUrl) ? '#map-section' : null}
-    />
-  </div>
-{/if}
-
 <div class="md:flex gap-2 items-end">
   {#if data.rawPostImageUrl}
     <div class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg">
@@ -83,9 +73,23 @@
 </div>
 
 <article class="mt-8">
-  {#if data.contentHtml}
+  {#if data.contentHeadlineHtml}
     <div class="content markdown max-w-none prose prose-zinc">
-      {@html data.contentHtml}
+      {@html data.contentHeadlineHtml}
+    </div>
+  {/if}
+  {#if data.isEvent && (data.eventDateLabel || data.eventLocationText)}
+    <div class="mb-6">
+      <EventBadges
+        eventDate={data.eventDateRaw}
+        locationText={data.eventLocationText}
+        locationHref={(data.mapEmbedUrl || data.mapLinkUrl) ? '#map-section' : null}
+      />
+    </div>
+  {/if}
+  {#if data.contentBodyHtml}
+    <div class="content markdown max-w-none prose prose-zinc">
+      {@html data.contentBodyHtml}
     </div>
   {/if}
   {#if data.hasRowContent}