From 2434e3eeea154f2b8b239f3bc13ec80bf56da67a Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 22 Nov 2024 17:54:42 +0200
Subject: [PATCH] docs: fix base path not added to hash links

---
 .../src/components/Heading/H2/index.tsx       | 18 +++--------
 .../src/components/Heading/H3/index.tsx       | 20 ++----------
 www/packages/docs-ui/src/hooks/index.ts       |  1 +
 .../src/hooks/use-heading-url/index.tsx       | 32 +++++++++++++++++++
 4 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 www/packages/docs-ui/src/hooks/use-heading-url/index.tsx

diff --git a/www/packages/docs-ui/src/components/Heading/H2/index.tsx b/www/packages/docs-ui/src/components/Heading/H2/index.tsx
index f4c856072614f..92b28a8aafbad 100644
--- a/www/packages/docs-ui/src/components/Heading/H2/index.tsx
+++ b/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(
diff --git a/www/packages/docs-ui/src/components/Heading/H3/index.tsx b/www/packages/docs-ui/src/components/Heading/H3/index.tsx
index 36b3e005ca140..14deed617cea6 100644
--- a/www/packages/docs-ui/src/components/Heading/H3/index.tsx
+++ b/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(
diff --git a/www/packages/docs-ui/src/hooks/index.ts b/www/packages/docs-ui/src/hooks/index.ts
index 386d5632a88fb..cca8f31263877 100644
--- a/www/packages/docs-ui/src/hooks/index.ts
+++ b/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"
diff --git a/www/packages/docs-ui/src/hooks/use-heading-url/index.tsx b/www/packages/docs-ui/src/hooks/use-heading-url/index.tsx
new file mode 100644
index 0000000000000..819c329e1cd84
--- /dev/null
+++ b/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
+}