From 80ee877ae066505426b88863138f9d584c5ba3f3 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Thu, 4 Jun 2026 10:11:07 +0200
Subject: [PATCH] feat: render subheadlines as inline markdown

Subheadlines in page headers and post cards support inline markdown
(bold, italic, links) via marked.parseInline.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/components/PostCard.svelte  | 3 ++-
 src/routes/+page.svelte             | 3 ++-
 src/routes/[...slug]/+page.svelte   | 3 ++-
 src/routes/post/[slug]/+page.svelte | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte
index 78fef6e..9a35cca 100644
--- a/src/lib/components/PostCard.svelte
+++ b/src/lib/components/PostCard.svelte
@@ -8,6 +8,7 @@
   import Card from "./Card.svelte";
   import { getPostEventInfo } from "$lib/blog-utils";
   import { useTranslate, T } from "$lib/translations";
+  import { marked } from "$lib/markdown-safe";
 
   const t = useTranslate();
 
@@ -119,7 +120,7 @@
       </h5>
       {#if post.subheadline}
         <div class="text-xs line-clamp-2 mb-1">
-          {post.subheadline}
+          {@html marked.parseInline(post.subheadline)}
         </div>
       {/if}
       {#if post.excerpt}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5961621..714c855 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import ContentRows from '$lib/components/ContentRows.svelte';
+  import { marked } from '$lib/markdown-safe';
   import type { PageData } from './$types';
 
   let { data }: { data: PageData } = $props();
@@ -11,7 +12,7 @@
   {#if !data.topBanner && (page.headline || page.subheadline)}
     <div class="mb-6 pt-10 pageTitle">
       {#if page.headline}<h1>{page.headline}</h1>{/if}
-      {#if page.subheadline}<h2>{page.subheadline}</h2>{/if}
+      {#if page.subheadline}<h2>{@html marked.parseInline(page.subheadline)}</h2>{/if}
     </div>
   {/if}
   <article>
diff --git a/src/routes/[...slug]/+page.svelte b/src/routes/[...slug]/+page.svelte
index 54c0093..9768f1b 100644
--- a/src/routes/[...slug]/+page.svelte
+++ b/src/routes/[...slug]/+page.svelte
@@ -4,6 +4,7 @@
   import Comments from '$lib/components/Comments.svelte';
   import PostActions from '$lib/components/PostActions.svelte';
   import { page } from '$app/stores';
+  import { marked } from '$lib/markdown-safe';
   import type { PageData } from './$types';
 
   let { data }: { data: PageData } = $props();
@@ -12,7 +13,7 @@
 {#if !data.topBanner && (data.page.headline || data.page.subheadline)}
   <div class="mb-6 pt-10 pageTitle">
     {#if data.page.headline}<h1>{data.page.headline}</h1>{/if}
-    {#if data.page.subheadline}<h2>{data.page.subheadline}</h2>{/if}
+    {#if data.page.subheadline}<h2>{@html marked.parseInline(data.page.subheadline)}</h2>{/if}
   </div>
 {/if}
 
diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte
index ea0c6e0..2b5b42d 100644
--- a/src/routes/post/[slug]/+page.svelte
+++ b/src/routes/post/[slug]/+page.svelte
@@ -9,6 +9,7 @@
   import PostActions from "$lib/components/PostActions.svelte";
   import RustyImage from "$lib/components/RustyImage.svelte";
   import { t, T } from "$lib/translations";
+  import { marked } from "$lib/markdown-safe";
   import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
@@ -98,7 +99,7 @@
         <h1 class="p-name">{data.post.headline}</h1>
       {/if}
       {#if data.post.subheadline}
-        <p class="text-stein-600 lead p-summary">{data.post.subheadline}</p>
+        <p class="text-stein-600 lead p-summary">{@html marked.parseInline(data.post.subheadline)}</p>
       {/if}
     </header>
   {/if}