Share md renderer, show Open details button on mobile

Author: WarningImHack3r

src/routes/[pullOrIssue=poi]/[org]/[repo]/[id=number]/MarkdownRenderer.svelte renamed to src/lib/components/MarkdownRenderer.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-	import Markdown from "svelte-exmarkdown";
+	/**
+	 * Markdown block using Marked.js under the hood, with custom renderers
+	 * for a cleaner look and using GitHub Flavored Markdown as an option
+	 *
+	 * @component
+	 */
+	import Markdown, { type Plugin } from "svelte-exmarkdown";
 	import { gfmPlugin } from "svelte-exmarkdown/gfm";
 	import { cn } from "$lib/utils";
 
 	export let markdown: string;
 	export let inline = false;
+	export let additionalPlugins: Plugin[] = [];
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
@@ -17,5 +24,5 @@
 		className
 	)}
 >
-	<Markdown md={markdown} plugins={[gfmPlugin()]} />
+	<Markdown md={markdown} plugins={[gfmPlugin(), ...additionalPlugins]} />
 </span>

src/lib/renderers/ListElementRenderer.svelte

@@ -37,14 +37,14 @@
 	bind:this={data}
 	class:dark:font-bold={data?.innerText.startsWith("breaking:")}
 	class:font-semibold={data?.innerText.startsWith("breaking:")}
-	class="group *:inline-block"
+	class="group *:inline"
 >
 	<slot />
 	{#if allLinks.length > 0}
 		<Button
 			href={ghLinkToHref(allLinks[0] ?? "")}
 			variant="link"
-			class="ml-4 hidden h-auto -translate-x-2 p-0 opacity-0 transition-[transform,_opacity] duration-300 group-hover:translate-x-0 group-hover:opacity-100 md:inline-flex lg:mr-8"
+			class="ml-2 !inline-flex h-auto p-0 transition-[transform,_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" />

src/routes/+page.svelte

@@ -4,9 +4,7 @@
 	import ArrowUpRight from "lucide-svelte/icons/arrow-up-right";
 	import LoaderCircle from "lucide-svelte/icons/loader-circle";
 	import { MetaTags } from "svelte-meta-tags";
-	import Markdown from "svelte-exmarkdown";
 	import semver from "semver";
-	import { gfmPlugin } from "svelte-exmarkdown/gfm";
 	import type { Tab } from "../types";
 	import { localStorageStore } from "$lib/localStorageStore";
 	import { tabState } from "$lib/tabState";
@@ -21,6 +19,7 @@
 	import * as Tooltip from "$lib/components/ui/tooltip";
 	import BlinkingBadge from "$lib/components/BlinkingBadge.svelte";
 	import ListElementRenderer from "$lib/renderers/ListElementRenderer.svelte";
+	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
 
 	export let data;
 
@@ -620,23 +619,11 @@
 								<!-- Accordion content with markdown body and a link to open it on GitHub -->
 								<Accordion.Content>
 									<div class="flex flex-col gap-4 sm:flex-row sm:justify-between sm:gap-0">
-										<div
-											class="prose prose-sm max-w-full dark:prose-invert prose-p:my-0 prose-a:no-underline prose-a:underline-offset-4 hover:prose-a:underline"
-										>
-											<!-- Markdown block using Marked.js under the hood, with custom renderers -->
-											<!-- for clean look and using GitHub Flavored Markdown as an option -->
-											<Markdown
-												md={releaseBody}
-												plugins={[
-													{
-														renderer: {
-															li: ListElementRenderer
-														}
-													},
-													gfmPlugin()
-												]}
-											/>
-										</div>
+										<MarkdownRenderer
+											markdown={releaseBody}
+											additionalPlugins={[{ renderer: { li: ListElementRenderer } }]}
+											class="prose-sm max-w-full prose-p:my-0"
+										/>
 										<!-- Open the release on GitHub in a new tab, with a nice hover animation -->
 										<Button
 											href={release.html_url}

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

@@ -12,10 +12,10 @@
 	import * as Avatar from "$lib/components/ui/avatar";
 	import * as Tooltip from "$lib/components/ui/tooltip";
 	import GHBadge from "$lib/components/GHBadge.svelte";
+	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
 	import Step from "$lib/components/Step.svelte";
 	import Steps from "$lib/components/Steps.svelte";
 	import BottomCollapsible from "./BottomCollapsible.svelte";
-	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 
 	// Utils
 	function formatToDateTime(date: string) {