docs: fix base path not added to hash links (#10235)

www/packages/docs-ui/src/components/Heading/H2/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
 import clsx from "clsx"
-import React, { useMemo } from "react"
+import React from "react"
 import { CopyButton, Link } from "@/components"
-import { useIsBrowser } from "../../../providers"
-import { usePathname } from "next/navigation"
+import { useHeadingUrl } from "../../.."
 
 type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
@@ -12,16 +11,9 @@ type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
 }
 
 export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
-  const { isBrowser } = useIsBrowser()
-  const pathname = usePathname()
-  const copyText = useMemo(() => {
-    const hash = `#${props.id}`
-    if (!isBrowser) {
-      return hash
-    }
-
-    return `${window.location.origin}${pathname}${hash}`
-  }, [props.id, isBrowser, pathname])
+  const copyText = useHeadingUrl({
+    id: props.id || "",
+  })
   return (
     <h2
       className={clsx(

www/packages/docs-ui/src/components/Heading/H3/index.tsx

@@ -1,30 +1,16 @@
 "use client"
 
 import clsx from "clsx"
-import React, { useMemo } from "react"
+import React from "react"
 import { CopyButton, Link } from "@/components"
-import { useIsBrowser } from "../../../providers"
+import { useHeadingUrl } from "../../.."
 
 type H3Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
 }
 
 export const H3 = ({ className, children, ...props }: H3Props) => {
-  const { isBrowser } = useIsBrowser()
-  const copyText = useMemo(() => {
-    const url = `#${props.id}`
-    if (!isBrowser) {
-      return url
-    }
-
-    const hashIndex = window.location.href.indexOf("#")
-    return (
-      window.location.href.substring(
-        0,
-        hashIndex !== -1 ? hashIndex : window.location.href.length
-      ) + url
-    )
-  }, [props.id, isBrowser])
+  const copyText = useHeadingUrl({ id: props.id || "" })
   return (
     <h3
       className={clsx(

www/packages/docs-ui/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from "./use-click-outside"
 export * from "./use-collapsible"
 export * from "./use-collapsible-code-lines"
 export * from "./use-copy"
+export * from "./use-heading-url"
 export * from "./use-current-learning-path"
 export * from "./use-is-external-link"
 export * from "./use-keyboard-shortcut"

www/packages/docs-ui/src/hooks/use-heading-url/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useIsBrowser, useSiteConfig } from "../../providers"
+import { useMemo } from "react"
+
+type useHeadingUrlProps = {
+  id: string
+}
+
+export const useHeadingUrl = ({ id }: useHeadingUrlProps) => {
+  const { isBrowser } = useIsBrowser()
+  const {
+    config: { basePath },
+  } = useSiteConfig()
+  const pathname = usePathname()
+  const headingUrl = useMemo(() => {
+    const hash = `#${id}`
+    if (!isBrowser) {
+      return hash
+    }
+
+    const url = `${window.location.origin}${basePath}${pathname}`.replace(
+      /\/$/,
+      ""
+    )
+
+    return `${url}${hash}`
+  }, [id, isBrowser, pathname])
+
+  return headingUrl
+}