fix: multiple fixes

- fix <svelte:*> elements being interpreted as links (even GH itself
  does this wrong lol
- fix too much spacing on the left of the Open Details arrow
- not a fix but use the display font for the details page sections
- fix the deprecation package details tooltip wrapping its text too
  early
- fix links not being GitHub-formatted on releases bodies (noticeable in
  `extensions`)

Author: WarningImHack3r

src/lib/components/MarkdownRenderer.svelte

@@ -25,13 +25,21 @@
 	} & MdSnippets;
 
 	let {
-		markdown: md,
+		markdown,
 		inline = false,
 		parseRawHtml = false,
 		additionalPlugins = [],
 		class: className = undefined,
 		...snippets
 	}: Props = $props();
+
+	// Markdown renders <thing:*> as a link (yeah I didn't know either).
+	// We don't want that to break Svelte's special elements, so we escape this.
+	//
+	// Refs:
+	// - https://www.markdownguide.org/basic-syntax/#urls-and-email-addresses
+	// - https://svelte.dev/docs/svelte/svelte-boundary (and others)
+	let md = $derived(markdown.replace(/<(svelte:\S+)>/g, "&lt;$1&gt;"));
 </script>
 
 <svelte:element

src/lib/components/renderers/ListElementRenderer.svelte

@@ -59,7 +59,7 @@
 			class="ml-2 !inline-flex h-auto !p-0 transition-[translate,_opacity] duration-300 group-hover:translate-x-0 group-hover:opacity-100 md:ml-4 md:-translate-x-2 md:opacity-0 lg:mr-8"
 		>
 			Open details
-			<ArrowRight class="ml-2 size-4" />
+			<ArrowRight class="size-4" />
 		</Button>
 	{/if}
 </li>

src/routes/[pid=pid]/[org]/[repo]/[id=number]/PageRenderer.svelte

@@ -278,7 +278,7 @@
 	</a>
 </h2>
 {#if linkedEntities.length > 0}
-	<h3 class="text-2xl font-semibold tracking-tight">
+	<h3 class="font-display text-2xl font-semibold tracking-tight">
 		{metadata.type === "pull" ? "Closing issue" : "Development PR"}{linkedEntities.length > 1
 			? "s"
 			: ""}
@@ -345,7 +345,7 @@
 	</Accordion.Root>
 {/if}
 <div class="flex items-center">
-	<h3 class="text-2xl font-semibold tracking-tight">
+	<h3 class="font-display text-2xl font-semibold tracking-tight">
 		{metadata.type === "pull" ? "Pull request" : metadata.type === "issue" ? "Issue" : "Discussion"}
 	</h3>
 	{#if info.locked}

src/routes/package/[...package]/+page.svelte

@@ -230,7 +230,7 @@
 							<MarkdownRenderer
 								markdown={data.currentPackage.pkg.deprecated}
 								inline
-								class="text-sm text-muted-foreground"
+								class="max-w-full text-sm text-muted-foreground"
 							>
 								{#snippet a({ style, children, class: className, title, href, hidden, type })}
 									<a {style} class={className} {title} {href} {hidden} {type} target="_blank">

src/routes/package/[...package]/ReleaseCard.svelte

@@ -3,6 +3,8 @@
 	import { page } from "$app/state";
 	import { ArrowUpRight } from "@lucide/svelte";
 	import { confetti } from "@neoconfetti/svelte";
+	import remarkGemoji from "remark-gemoji";
+	import remarkGithub from "remark-github";
 	import semver from "semver";
 	import type { GitHubRelease } from "$lib/server/github-cache";
 	import * as Accordion from "$lib/components/ui/accordion";
@@ -312,7 +314,11 @@
 		<div class="relative mt-4 flex flex-col gap-2">
 			<MarkdownRenderer
 				markdown={releaseBody}
-				additionalPlugins={[{ renderer: { li: ListElementRenderer } }]}
+				additionalPlugins={[
+					{ remarkPlugin: [remarkGithub, { repository: `${repo.owner}/${repo.name}` }] },
+					{ remarkPlugin: remarkGemoji },
+					{ renderer: { li: ListElementRenderer } }
+				]}
 				class="prose-sm max-w-full prose-p:my-0"
 			/>
 			<div class="flex items-end-safe justify-between gap-8">