feat(details): add links to internal refs by hovering over hashes

Author: WarningImHack3r

src/lib/components/renderers/LinkRenderer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import { dev } from "$app/environment";
 
 	type Props = {
 		attributes: HTMLAnchorAttributes;
+		linkChildren?: Snippet<[Snippet]>;
 	};
 
-	let { attributes }: Props = $props();
+	let { attributes, linkChildren }: Props = $props();
 	let { children, ...rest } = $derived(attributes);
 	let { href } = $derived(rest);
 
@@ -44,9 +46,16 @@
 
 <!-- Renders -->
 {#snippet link()}
-	<a {...rest}>
-		{@render children?.()}
-	</a>
+	{#snippet original()}
+		<a {...rest}>
+			{@render children?.()}
+		</a>
+	{/snippet}
+	{#if linkChildren}
+		{@render linkChildren(original)}
+	{:else}
+		{@render original()}
+	{/if}
 {/snippet}
 
 {#snippet image(alt?: string)}

src/lib/components/ui/hover-card/hover-card-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: HoverCardPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-hidden z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPrimitive.Portal>

src/lib/components/ui/hover-card/hover-card-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />

src/lib/components/ui/hover-card/index.ts

@@ -0,0 +1,14 @@
+import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+
+const Root = HoverCardPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+};

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

@@ -41,6 +41,7 @@
 	import {
 		ArrowUpRight,
 		ChevronLeft,
+		ChevronRight,
 		FileDiff,
 		GitCommitVertical,
 		GitMerge,
@@ -66,6 +67,7 @@
 	import * as Avatar from "$lib/components/ui/avatar";
 	import { Badge } from "$lib/components/ui/badge";
 	import { Button } from "$lib/components/ui/button";
+	import * as HoverCard from "$lib/components/ui/hover-card";
 	import { Separator } from "$lib/components/ui/separator";
 	import * as Tooltip from "$lib/components/ui/tooltip";
 	import AnimatedButton from "$lib/components/AnimatedButton.svelte";
@@ -490,7 +492,43 @@
 						{@render headingRenderer("h6", props)}
 					{/snippet}
 					{#snippet a(props)}
-						<LinkRenderer attributes={props} />
+						{@const { href, children, ...rest } = props}
+						<LinkRenderer attributes={props}>
+							{#snippet linkChildren(original)}
+								{@const match = (href ?? "").match(
+									/^https:\/\/github.com\/(\S+)\/(\S+)\/(\S+)\/(\d+)(#[a-z]+-\d+)?$/
+								)}
+								{#if href && match}
+									{@const [, org, repo, pid, id] = [...match]}
+									<HoverCard.Root openDelay={300}>
+										<HoverCard.Content class="flex w-fit items-center justify-center px-6">
+											<Button
+												variant="link"
+												href={resolve("/[pid=pid]/[org]/[repo]/[id=number]", {
+													pid: pid ?? "",
+													org: org ?? "",
+													repo: repo ?? "",
+													id: id ?? ""
+												})}
+												class="group h-auto p-0! text-base"
+											>
+												Open in Svelte Changelog
+												<ChevronRight class="transition-transform group-hover:translate-x-1" />
+											</Button>
+										</HoverCard.Content>
+										<HoverCard.Trigger>
+											{#snippet child({ props: cardProps })}
+												<a {...cardProps} {...rest} {href}>
+													{@render children?.()}
+												</a>
+											{/snippet}
+										</HoverCard.Trigger>
+									</HoverCard.Root>
+								{:else}
+									{@render original()}
+								{/if}
+							{/snippet}
+						</LinkRenderer>
 					{/snippet}
 				</MarkdownRenderer>
 				{#if "reactions" in info}