fix: use hack way to reuse builtin nav (#231)

Author: JounQin

.changeset/twelve-spiders-listen.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+fix: use hack way to reuse builtin nav

packages/doom/src/runtime/components/Directive.tsx

@@ -19,11 +19,9 @@ export const Directive = ({
   open,
   onToggle,
 }: DirectiveProps) => {
-  const rootClassName = clsx('rspress-directive', type, className)
+  const rootClassName = clsx('rp-callout', `rp-callout--${type}`, className)
   const titleNode = title || upperCase(type)
-  const contentNode = (
-    <div className="rspress-directive-content">{children}</div>
-  )
+  const contentNode = <div className="rp-callout__content">{children}</div>
 
   const handleToggle: ReactEventHandler<HTMLDetailsElement> = useCallback(
     (ev) => {
@@ -35,15 +33,15 @@ export const Directive = ({
   if (type === 'details') {
     return (
       <details className={rootClassName} open={open} onToggle={handleToggle}>
-        <summary className="rspress-directive-title">{titleNode}</summary>
+        <summary className="rp-callout__title">{titleNode}</summary>
         {contentNode}
       </details>
     )
   }
 
   return (
     <div className={rootClassName}>
-      <div className="rspress-directive-title">{titleNode}</div>
+      <div className="rp-callout__title">{titleNode}</div>
       {contentNode}
     </div>
   )

packages/doom/src/runtime/components/ExternalSiteLink.tsx

@@ -11,7 +11,6 @@ import { clsx } from 'clsx'
 import virtual from 'doom-@global-virtual'
 import { type AnchorHTMLAttributes, type ReactNode, useMemo } from 'react'
 
-import classes from '../../../styles/link.module.scss'
 import { isUnversioned } from '../../shared/helpers.js'
 import { useIsPrint } from '../hooks/index.js'
 
@@ -76,7 +75,7 @@ const ExternalSiteLink_ = ({
       }
       target="_blank"
       rel="noopener noreferrer"
-      className={clsx(classes.link, 'rp-cursor-pointer', className)}
+      className={clsx('rp-link', className)}
       {...props}
     />
   )

packages/doom/src/shared/helpers.ts

@@ -12,7 +12,7 @@ export const removeBothEndsSlashes = (str?: string) =>
   str?.replace(/^\/|\/$/g, '') || ''
 
 export const getPdfName = (lang: string, userBase?: string, title?: string) =>
-  `${removeBothEndsSlashes(userBase) || title || 'exported'}-${lang}.pdf`
+  `/${removeBothEndsSlashes(userBase) || title || 'exported'}-${lang}.pdf`
 
 export const isExplicitlyUnversioned = (
   version?: string,

packages/doom/src/theme/Layout.tsx

@@ -1,13 +1,13 @@
-import { useLang, useSite, withBase } from '@rspress/core/runtime'
+import { useLang, useSite } from '@rspress/core/runtime'
 import {
+  Link,
   Layout as OriginalLayout,
   getCustomMDXComponent,
 } from '@rspress/core/theme-original'
 import virtual from 'doom-@global-virtual'
-import { useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useLocation } from 'react-router'
 
-import classes from '../../styles/link.module.scss'
 import type {
   DoomSidebar,
   DoomSidebarGroup,
@@ -16,6 +16,7 @@ import type {
 import { useTranslation } from '../runtime/index.ts'
 import type { ExportItem } from '../types.ts'
 
+import { ForceRenderContext } from './VersionsNav/context.tsx'
 import { VersionsNav } from './VersionsNav/index.tsx'
 
 const X = getCustomMDXComponent()
@@ -130,28 +131,34 @@ export const Layout = () => {
 
   const pdfLink = useMemo(
     () =>
-      found &&
-      withBase(`${found.exportItem.name ?? found.sidebar.text}-${lang}.pdf`),
+      found && `/${found.exportItem.name ?? found.sidebar.text}-${lang}.pdf`,
     [found, lang],
   )
 
+  const [render, setRender] = useState(false)
+  const forceRender = useCallback(() => {
+    setRender((v) => !v)
+  }, [])
+
   return (
-    <OriginalLayout
-      afterNavMenu={<VersionsNav />}
-      beforeOutline={
-        pdfLink && (
-          <X.p style={{ marginBottom: 16 }}>
-            <a
-              className={classes.link}
-              href={pdfLink}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t('view_docs_as_pdf')}
-            </a>
-          </X.p>
-        )
-      }
-    />
+    <ForceRenderContext
+      value={useMemo(
+        () => ({ value: render, setValue: forceRender }),
+        [forceRender, render],
+      )}
+    >
+      <VersionsNav />
+      <OriginalLayout
+        beforeOutline={
+          pdfLink && (
+            <X.p className="rp-doc" style={{ marginBottom: 16 }}>
+              <Link href={pdfLink} target="_blank" rel="noopener noreferrer">
+                {t('view_docs_as_pdf')}
+              </Link>
+            </X.p>
+          )
+        }
+      />
+    </ForceRenderContext>
   )
 }

packages/doom/src/theme/Link.tsx

@@ -0,0 +1,25 @@
+import {
+  Link as OriginalLink,
+  type LinkProps,
+} from '@rspress/core/theme-original'
+
+export const Link = (props: LinkProps) => {
+  if (
+    typeof location !== 'undefined' &&
+    props.href?.startsWith(`${location.protocol}//${location.host}`)
+  ) {
+    return <a {...props} />
+  }
+  return (
+    <OriginalLink
+      {...props}
+      download={
+        // type-coverage:ignore-next-line -- out of control
+        props.download == null
+          ? props.href?.endsWith('.pdf')
+          : // type-coverage:ignore-next-line -- out of control
+            (props.download as unknown)
+      }
+    />
+  )
+}