fix(docs): hyperlinks to sections were broken

2026-06-19 07:35:55 +00:00 · 2026-06-18 06:47:59 +05:30
parent bbd658fafe
commit 0cdfd5b7d9
2 changed files with 42 additions and 1 deletions
@@ -0,0 +1,40 @@
+import { Link as TanStackLink } from '@tanstack/react-router';
+import { forwardRef, type ComponentProps } from 'react';
+
+type DocsLinkProps = ComponentProps<'a'> & { prefetch?: boolean };
+
+export const DocsLink = forwardRef<HTMLAnchorElement, DocsLinkProps>(function DocsLink(
+  { href = '#', prefetch = true, children, ...props },
+  ref,
+) {
+  if (href.startsWith('#')) {
+    return (
+      <a ref={ref} href={href} {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  const hashIndex = href.indexOf('#');
+  if (hashIndex > 0) {
+    const pathname = href.slice(0, hashIndex);
+    const hash = href.slice(hashIndex + 1);
+    return (
+      <TanStackLink
+        ref={ref}
+        to={pathname}
+        hash={hash}
+        preload={prefetch ? 'intent' : false}
+        {...props}
+      >
+        {children}
+      </TanStackLink>
+    );
+  }
+
+  return (
+    <TanStackLink ref={ref} to={href} preload={prefetch ? 'intent' : false} {...props}>
+      {children}
+    </TanStackLink>
+  );
+});
@@ -1,6 +1,7 @@
 import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
 import { RootProvider } from 'fumadocs-ui/provider/tanstack';
 import * as React from 'react';
+import { DocsLink } from '@/components/docs-link';
 import SearchDialog from '@/components/search';
 import { absoluteUrl, publicAssetFallbackPath, site } from '@/lib/site';
 import '@/styles/app.css';
@@ -116,7 +117,7 @@ function RootComponent() {
        ) : null}
      </head>
      <body className="flex min-h-screen flex-col">
-        <RootProvider search={{ SearchDialog }}>
+        <RootProvider search={{ SearchDialog }} components={{ Link: DocsLink }}>
          <Outlet />
        </RootProvider>
        <Scripts />