feat(layout): add support for markdown in news banner, add v2 news

Author: WarningImHack3r

src/lib/components/MarkdownRenderer.svelte

@@ -5,6 +5,7 @@
 	 *
 	 * @component
 	 */
+	import type { ClassValue } from "svelte/elements";
 	import Markdown, { type Plugin } from "svelte-exmarkdown";
 	import { gfmPlugin } from "svelte-exmarkdown/gfm";
 	import rehypeRaw from "rehype-raw";
@@ -15,7 +16,7 @@
 		inline?: boolean;
 		parseRawHtml?: boolean;
 		additionalPlugins?: Plugin[];
-		class?: string | undefined | null;
+		class?: ClassValue;
 	};
 
 	let {

src/lib/news/news.json

@@ -20,6 +20,11 @@
 			"id": 3,
 			"content": "New! Improved engine brings support for svelte-preprocess, rollup-plugin-svelte and prettier-plugin-svelte",
 			"endDate": "2024-09-09"
+		},
+		{
+			"id": 4,
+			"content": "Svelte Changelog v2 is here. [Read the announcement](/blog/v2).",
+			"endDate": "2025-05-01"
 		}
 	]
 }

src/routes/+layout.svelte

@@ -10,6 +10,7 @@
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { news } from "$lib/news/news.json";
 	import { cn } from "$lib/utils";
+	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
 	import ScreenSize from "$lib/components/ScreenSize.svelte";
 	import { buttonVariants, Button } from "$lib/components/ui/button";
 	import { Toaster } from "$lib/components/ui/sonner";
@@ -193,7 +194,11 @@
 	</div>
 	{#if newsToDisplay}
 		<div class="flex items-center bg-primary/90">
-			<span class="mx-auto my-1 px-4 text-center">{newsToDisplay.content}</span>
+			<MarkdownRenderer
+				markdown={newsToDisplay.content}
+				inline
+				class="mx-auto my-1 px-4 text-center text-foreground prose-a:font-semibold prose-a:text-foreground prose-a:underline"
+			/>
 			<Button
 				variant="ghost"
 				class="mr-4 h-auto rounded-none px-3 py-2 transition-transform hover:scale-110 hover:rotate-90 hover:bg-background/0"