From 90e360d713cc65cee791b39d186cb82908de1783 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 24 Dec 2024 14:15:32 +0100
Subject: [PATCH] feat: :sparkles: Add ability to copy href of any property

---
 components/Heading.tsx  |  2 +-
 components/Property.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/Heading.tsx b/components/Heading.tsx
index d439a1c..c2c7082 100644
--- a/components/Heading.tsx
+++ b/components/Heading.tsx
@@ -14,7 +14,7 @@ import { remToPx } from "../lib/remToPx";
 import { useSectionStore } from "./SectionProvider";
 import { Tag } from "./Tag";
 
-function AnchorIcon(props: ComponentPropsWithoutRef<"svg">) {
+export function AnchorIcon(props: ComponentPropsWithoutRef<"svg">) {
     return (
         <svg
             viewBox="0 0 20 20"
diff --git a/components/Property.tsx b/components/Property.tsx
index 045bfb9..4b58da3 100644
--- a/components/Property.tsx
+++ b/components/Property.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { type ReactNode, createContext, useContext } from "react";
+import { AnchorIcon } from "./Heading";
 
 export const PropertyContext = createContext<{
     name: string;
@@ -54,11 +55,21 @@ export function Property({
             .replace(/-+/g, "-")
             .replace(/^-|-$/g, "");
 
+    const id = `${idFormat(contextName)}-${idFormat(name)}`;
+
     return (
-        <li className="m-0 px-0 py-4 first:pt-0 last:pb-0">
+        <li className="m-0 px-0 py-4 first:pt-0 last:pb-0 group">
+            <Link
+                href={`#${id}`}
+                className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]"
+            >
+                <div className="group/anchor block h-5 w-5 rounded bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
+                    <AnchorIcon className="h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" />
+                </div>
+            </Link>
             <dl
-                id={`${idFormat(contextName)}-${idFormat(name)}`}
-                className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2"
+                id={id}
+                className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2 scroll-mt-24 target:ring-2 ring-brand-500 ring-offset-8 dark:ring-offset-zinc-900"
             >
                 <dt className="sr-only">Name</dt>
                 <dd>