src/features/docs/article-links.tsx

Linked repository file from this build.

"use client";

import { useRouter } from "next/navigation";
import type { ReactNode } from "react";

/** Keep compiled article links as ordinary accessible anchors, with client navigation on click. */
export function ArticleLinks({ children }: { children: ReactNode }) {
  const router = useRouter();
  return (
    <div
      onClick={(event) => {
        if (
          event.defaultPrevented ||
          event.button !== 0 ||
          event.metaKey ||
          event.ctrlKey ||
          event.shiftKey ||
          event.altKey
        )
          return;
        const anchor = (event.target as Element).closest<HTMLAnchorElement>("a[href]");
        if (!anchor || anchor.target || anchor.hasAttribute("download")) return;
        const url = new URL(anchor.href);
        if (url.origin !== location.origin || !/^\/docs(?:\/|$)/.test(url.pathname)) return;
        if (url.pathname === location.pathname && url.hash) return;
        event.preventDefault();
        router.push(url.pathname + url.search + url.hash);
      }}
    >
      {children}
    </div>
  );
}