refactor(details): replace home-made linkifiers with remark-github

Also fix incorrect bottom buttons links when referencing items from other repos

Author: WarningImHack3r

package.json

@@ -53,6 +53,7 @@
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.12",
 		"rehype-raw": "^7.0.0",
+		"remark-github": "^12.0.0",
 		"runed": "^0.28.0",
 		"semver": "^7.7.2",
 		"shiki": "^3.6.0",

pnpm-lock.yaml

@@ -113,6 +113,12 @@ export type DiscussionComment = {
 >;
 
 export type LinkedItem = {
+	repository: {
+		owner: {
+			login: string;
+		};
+		name: string;
+	};
 	number: number;
 	title: string;
 	author?: {
@@ -449,6 +455,12 @@ export class GitHubCache {
 									... on ConnectedEvent {
 										subject {
 											... on PullRequest {
+												repository {
+													owner {
+														login
+													}
+													name
+												}
 												number
 												title
 												author {
@@ -463,6 +475,12 @@ export class GitHubCache {
 									... on CrossReferencedEvent {
 										source {
 											... on PullRequest {
+												repository {
+													owner {
+														login
+													}
+													name
+												}
 												number
 												title
 												author {
@@ -524,6 +542,12 @@ export class GitHubCache {
 						pullRequest(number: $prNumber) {
 							closingIssuesReferences(first: 50) {
 								nodes {
+									repository {
+										owner {
+											login
+										}
+										name
+									}
 									number
 									title
 									author {

src/lib/components/renderers/AnchorRenderer.svelte

@@ -32,6 +32,7 @@
 	import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
 	import { transformerNotationDiff } from "@shikijs/transformers";
 	import posthog from "posthog-js";
+	import remarkGithub from "remark-github";
 	import type { SpecialLanguage } from "shiki";
 	import type { Plugin } from "svelte-exmarkdown";
 	import type {
@@ -51,8 +52,6 @@
 	import Reactions from "$lib/components/Reactions.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";
 
 	const shikiPlugin: Plugin = {
@@ -316,7 +315,15 @@
 						markdown={entity.body || "_No description provided_"}
 						parseRawHtml
 						class="max-w-full text-base"
-						additionalPlugins={[{ renderer: { p: BodyRenderer, a: AnchorRenderer } }, shikiPlugin]}
+						additionalPlugins={[
+							{
+								remarkPlugin: [
+									remarkGithub,
+									{ repository: `${entity.repository.owner.login}/${entity.repository.name}` }
+								]
+							},
+							shikiPlugin
+						]}
 					/>
 				</Accordion.Content>
 			</Accordion.Item>
@@ -388,7 +395,10 @@
 					markdown={info.body || "_No description provided_"}
 					parseRawHtml
 					class="max-w-full"
-					additionalPlugins={[{ renderer: { p: BodyRenderer, a: AnchorRenderer } }, shikiPlugin]}
+					additionalPlugins={[
+						{ remarkPlugin: [remarkGithub, { repository: `${metadata.org}/${metadata.repo}` }] },
+						shikiPlugin
+					]}
 				/>
 				{#if "reactions" in info}
 					<Reactions reactions={info.reactions} release_url={info.html_url} class="mt-4" />
@@ -597,7 +607,7 @@
 					<Button
 						href="/{metadata.type === 'pull'
 							? 'issues'
-							: 'pull'}/{metadata.org}/{metadata.repo}/{closingIssue.number}"
+							: 'pull'}/{closingIssue.repository.owner.login}/{closingIssue.repository.name}/{closingIssue.number}"
 						variant="secondary"
 					>
 						Open {metadata.type === "pull" ? "issue" : "pull request"} #{closingIssue.number}