versia-pub/docs
2
0
Fork 0
mirror of https://github.com/versia-pub/docs.git synced 2025-12-06 06:18:19 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Add ability to copy href of any property

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-24 14:15:32 +01:00
parent 9db7cfccda
commit 90e360d713
No known key found for this signature in database
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Heading.tsx
View file

@ -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"

17
components/Property.tsx
View file

@ -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>