feat(details): shorten GitHub links, use attachments

Author: WarningImHack3r

src/lib/components/renderers/AnchorRenderer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import { page } from "$app/state";
+
+	type Props = {
+		children?: Snippet;
+		[k: string]: unknown;
+	};
+	let { children, ...rest }: Props = $props();
+
+	const shorten: Attachment = node => {
+		const originalText = node.innerText;
+		const shorteningCandidates = originalText
+			.trim()
+			.match(/https:\/\/github.com\/(\S+)\/(\S+)\/\S+\/(\d+)/);
+		if (!shorteningCandidates || shorteningCandidates.length < 4) return;
+		const [wholeMatch, org, repo, number] = shorteningCandidates;
+		node.innerText =
+			org === page.data.itemMetadata.org && repo === page.data.itemMetadata.repo
+				? originalText.replace(wholeMatch, `#${number}`)
+				: originalText.replace(wholeMatch, `${org}/${repo}#${number}`);
+	};
+</script>
+
+<a {...rest} {@attach shorten}>
+	{@render children?.()}
+</a>

src/lib/components/renderers/BodyRenderer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import type { Action } from "svelte/action";
+	import type { Attachment } from "svelte/attachments";
 	import { page } from "$app/state";
 
 	type Props = {
@@ -9,7 +9,7 @@
 
 	let { children }: Props = $props();
 
-	const linkify: Action = node => {
+	const linkify: Attachment = node => {
 		let replaced = node.innerHTML;
 		const issuesCandidates = replaced.matchAll(/ #(\d+)/g) || [];
 		for (let [wholeMatch, matchedGroup] of issuesCandidates) {
@@ -23,6 +23,6 @@
 	};
 </script>
 
-<p use:linkify>
+<p {@attach linkify}>
 	{@render children?.()}
 </p>

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

@@ -46,6 +46,7 @@
 	import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
 	import Step from "$lib/components/Step.svelte";
 	import Steps from "$lib/components/Steps.svelte";
+	import AnchorRenderer from "$lib/components/renderers/AnchorRenderer.svelte";
 	import BodyRenderer from "$lib/components/renderers/BodyRenderer.svelte";
 	import BottomCollapsible from "./BottomCollapsible.svelte";
 
@@ -256,7 +257,10 @@
 							markdown={entity.body || "_No description provided_"}
 							parseRawHtml
 							class="max-w-full text-base"
-							additionalPlugins={[{ renderer: { p: BodyRenderer } }, shikiPlugin]}
+							additionalPlugins={[
+								{ renderer: { p: BodyRenderer, a: AnchorRenderer } },
+								shikiPlugin
+							]}
 						/>
 					</Accordion.Content>
 				</Accordion.Item>
@@ -332,7 +336,7 @@
 						markdown={info.body || "_No description provided_"}
 						parseRawHtml
 						class="max-w-full"
-						additionalPlugins={[{ renderer: { p: BodyRenderer } }, shikiPlugin]}
+						additionalPlugins={[{ renderer: { p: BodyRenderer, a: AnchorRenderer } }, shikiPlugin]}
 					/>
 				</div>
 			</div>