chore: header-anchor rename to rp-header-anchor

SoonIter · SoonIter · commit d7f15312f777 · 2025-10-09T14:40:15.000+08:00
diff --git a/packages/core/src/node/mdx/rehypePlugins/__snapshots__/headerAnchor.test.ts.snap b/packages/core/src/node/mdx/rehypePlugins/__snapshots__/headerAnchor.test.ts.snap
@@ -5,6 +5,7 @@ exports[`rehypeHeadAnchor > basic 1`] = `
 /*prettier-ignore-end*/
 import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     a: "a",
@@ -20,47 +21,47 @@ function _createMdxContent(props) {
     children: [_jsxs(_components.h1, {
       id: "guide",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#guide",
         children: "#"
       }), "Guide"]
     }), "\\n", _jsxs(_components.h2, {
       id: "custom-id",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#custom-id",
         children: "#"
       }), "title 1"]
     }), "\\n", _jsxs(_components.h2, {
       id: "custom-id",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#custom-id",
         children: "#"
       }), "title 1"]
     }), "\\n", _jsxs(_components.h2, {
       id: "title-2",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#title-2",
         children: "#"
       }), "title 2"]
     }), "\\n", _jsxs(_components.h2, {
       id: "title-2-1",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#title-2-1",
         children: "#"
       }), "title 2"]
     }), "\\n", _jsxs(_components.h2, {
       id: "title-2-2",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#title-2-2",
         children: "#"
@@ -70,15 +71,15 @@ function _createMdxContent(props) {
     }), "\\n", _jsxs(_components.h2, {
       id: "title-2-3",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#title-2-3",
         children: "#"
       }), "Title 2"]
     }), "\\n", _jsxs(_components.h2, {
       id: "title-2-4",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#title-2-4",
         children: "#"
@@ -88,7 +89,7 @@ function _createMdxContent(props) {
     }), "\\n", "\\n", _jsxs(_components.h2, {
       id: "title-2-5",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#title-2-5",
         children: "#"
@@ -120,6 +121,7 @@ MDXContent.__RSPRESS_PAGE_META["index.mdx"] = {"toc":[{"id":"custom-id","text":"
 exports[`rehypeHeadAnchor > should render inline code in title 1`] = `
 "import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     a: "a",
@@ -131,7 +133,7 @@ function _createMdxContent(props) {
   return _jsxs(_components.h1, {
     id: "hello-world-inline-code",
     children: [_jsx(_components.a, {
-      className: "header-anchor",
+      className: "rp-header-anchor",
       "aria-hidden": "true",
       href: "#hello-world-inline-code",
       children: "#"
@@ -162,6 +164,7 @@ MDXContent.__RSPRESS_PAGE_META["inline-code.mdx"] = {"toc":[],"title":"Hello Wor
 exports[`rehypeHeadAnchor > should support custom id 1`] = `
 "import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     a: "a",
@@ -173,7 +176,7 @@ function _createMdxContent(props) {
   return _jsxs(_components.h1, {
     id: "custom-id",
     children: [_jsx(_components.a, {
-      className: "header-anchor",
+      className: "rp-header-anchor",
       "aria-hidden": "true",
       href: "#custom-id",
       children: "#"
@@ -204,6 +207,7 @@ MDXContent.__RSPRESS_PAGE_META["inline-code.mdx"] = {"toc":[],"title":"Hello Wor
 exports[`rehypeHeadAnchor > should support mdx component with trim 1`] = `
 "import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     a: "a",
@@ -215,7 +219,7 @@ function _createMdxContent(props) {
   return _jsxs(_components.h1, {
     id: "hello-world",
     children: [_jsx(_components.a, {
-      className: "header-anchor",
+      className: "rp-header-anchor",
       "aria-hidden": "true",
       href: "#hello-world",
       children: "#"
diff --git a/packages/core/src/node/mdx/rehypePlugins/headerAnchor.ts b/packages/core/src/node/mdx/rehypePlugins/headerAnchor.ts
@@ -62,7 +62,7 @@ function create(node: Element): Element {
     type: 'element',
     tagName: 'a',
     properties: {
-      class: 'header-anchor',
+      class: 'rp-header-anchor',
       ariaHidden: 'true',
       href: `#${node.properties!.id}`,
     },
diff --git a/packages/core/src/node/mdx/remarkPlugins/__snapshots__/containerSyntax.test.ts.snap b/packages/core/src/node/mdx/remarkPlugins/__snapshots__/containerSyntax.test.ts.snap
@@ -891,7 +891,7 @@ function _createMdxContent(props) {
     children: _jsxs(_components.h1, {
       id: "please-read-this-note",
       children: [_jsx(_components.a, {
-        className: "header-anchor",
+        className: "rp-header-anchor",
         "aria-hidden": "true",
         href: "#please-read-this-note",
         children: "#"
diff --git a/packages/core/src/node/mdx/remarkPlugins/__snapshots__/fileCodeBlock.test.ts.snap b/packages/core/src/node/mdx/remarkPlugins/__snapshots__/fileCodeBlock.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`remarkFileCodeBlock > basic 1`] = `
 "import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     code: "code",
diff --git a/packages/core/src/node/mdx/remarkPlugins/__snapshots__/image.test.ts.snap b/packages/core/src/node/mdx/remarkPlugins/__snapshots__/image.test.ts.snap
@@ -5,6 +5,7 @@ exports[`mdx > basic 1`] = `
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
 import image0 from "./test3.jpg";
 import image1 from "./test4.png";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     img: "img",
diff --git a/packages/core/src/node/mdx/remarkPlugins/__snapshots__/link.test.ts.snap b/packages/core/src/node/mdx/remarkPlugins/__snapshots__/link.test.ts.snap
@@ -4,6 +4,7 @@ exports[`mdx > basic 1`] = `
 "/*jsx link will not be transformed*/
 import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
 import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+import {Callout as $$$Callout$$$} from "@theme";
 function _createMdxContent(props) {
   const _components = {
     a: "a",
diff --git a/packages/plugin-api-docgen/static/global-components/API.tsx b/packages/plugin-api-docgen/static/global-components/API.tsx
@@ -60,7 +60,7 @@ function create(node: Element): Element {
     type: 'element',
     tagName: 'a',
     properties: {
-      class: 'header-anchor',
+      class: 'rp-header-anchor',
       ariaHidden: 'true',
       href: `#${node.properties!.id}`,
     },
diff --git a/packages/theme-default/src/components/Aside/index.tsx b/packages/theme-default/src/components/Aside/index.tsx
@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { scrollToTarget } from '../../logic/sideEffects';
 import { ReadPercent } from '../ReadPercent';
 import './index.scss';
+import { useDynamicToc } from '../Toc/useDynamicToc';
 import { ScrollToTop } from './ScrollToTop';
 
 export function Aside() {
@@ -18,7 +19,6 @@ export function Aside() {
 
   useEffect(() => {
     const decodedHash = decodeURIComponent(window.location.hash);
-    console.log('decodedHash', decodedHash);
     if (decodedHash.length === 0) {
       window.scrollTo(0, 0);
     } else {
@@ -30,6 +30,12 @@ export function Aside() {
     }
   }, [pathname]);
 
+  const headers = useDynamicToc();
+
+  if (headers.length === 0) {
+    return <></>;
+  }
+
   return (
     <div className="rp-aside">
       <div className="rp-aside__title">
diff --git a/packages/theme-default/src/components/Aside/processTitleElement.ts b/packages/theme-default/src/components/Aside/processTitleElement.ts
@@ -6,15 +6,17 @@
 export function processTitleElement(element: Element): Element {
   const elementClone = element.cloneNode(true) as Element;
 
-  // 1. remove .header-anchor
-  const anchorElement = elementClone.querySelector('.header-anchor');
+  // 1. remove .rp-header-anchor
+  const anchorElement = elementClone.querySelector('.rp-header-anchor');
 
   if (anchorElement) {
     elementClone.removeChild(anchorElement);
   }
 
   // 2. delete ".rspress-toc-exclude" element
-  const excludeElements = elementClone.querySelectorAll('.rspress-toc-exclude');
+  const excludeElements = elementClone.querySelectorAll(
+    '.rspress-toc-exclude,.rp-toc-exclude',
+  );
   excludeElements.forEach(excludeElement => {
     const parentElement = excludeElement.parentElement;
     if (parentElement) {
diff --git a/packages/theme-default/src/components/DocContent/FallbackHeading.tsx b/packages/theme-default/src/components/DocContent/FallbackHeading.tsx
@@ -34,7 +34,7 @@ export function FallbackHeading({
     titleSlug && (
       <Element id={titleSlug}>
         <span {...renderInlineMarkdown(title)}></span>
-        <A className="header-anchor" href={`#${titleSlug}`} aria-hidden>
+        <A className="rp-header-anchor" href={`#${titleSlug}`} aria-hidden>
           #
         </A>
       </Element>
diff --git a/packages/theme-default/src/components/DocContent/doc.scss b/packages/theme-default/src/components/DocContent/doc.scss
@@ -27,7 +27,7 @@
     /* link */
     /* #region */
     // we do not style all the <a> links, only the links with class "rp-link" because there are too many usages of <a> tag in user custom components
-    &:where(a.rp-link):not(:where(.header-anchor)) {
+    &:where(a.rp-link):not(:where(.rp-header-anchor)) {
       font-weight: 500;
       color: var(--rp-c-link);
       transition: color 0.25s;
@@ -64,7 +64,7 @@
     &:where(h1, h2, h3, h4, h5, h6) {
       font-weight: 600;
       outline: none;
-      & .header-anchor {
+      & .rp-header-anchor {
         float: left;
         margin-left: -0.8em;
         font-weight: 500;
@@ -79,15 +79,15 @@
         }
       }
       &:hover {
-        & .header-anchor {
+        & .rp-header-anchor {
           opacity: 1;
         }
-        & .header-anchor:focus {
+        & .rp-header-anchor:focus {
           opacity: 1;
         }
       }
     }
-    &:where(.header-anchor) {
+    &:where(.rp-header-anchor) {
       color: var(--rp-c-brand);
     }
     &:where(h1) {
diff --git a/packages/theme-default/src/components/SidebarMenu/index.tsx b/packages/theme-default/src/components/SidebarMenu/index.tsx
@@ -5,6 +5,8 @@ import { useUISwitch } from '../../layout/Layout/useUISwitch';
 import { ReadPercent } from '../ReadPercent';
 import { SvgWrapper } from '../SvgWrapper';
 import './index.scss';
+import { useActiveAnchor } from '../Toc/useActiveAnchor';
+import { useDynamicToc } from '../Toc/useDynamicToc';
 
 /* Top Menu, only displayed on <1280px screen width */
 export const SidebarMenu = forwardRef(
@@ -34,6 +36,9 @@ export const SidebarMenu = forwardRef(
 
     const { pathname, hash } = useLocation();
 
+    const headers = useDynamicToc();
+    const { lastAnchor } = useActiveAnchor(headers, false);
+
     function openSidebar() {
       onIsSidebarOpenChange(true);
     }
@@ -86,13 +91,14 @@ export const SidebarMenu = forwardRef(
           {uiSwitch?.showAside && (
             <button
               type="button"
-              onClickCapture={e => {
+              onClick={e => {
                 e.stopPropagation();
+                if (headers.length === 0) return;
                 openAside();
               }}
               className="rp-sidebar-menu__right"
             >
-              <span>{outlineTitle}</span>
+              <span>{lastAnchor?.text ?? outlineTitle}</span>
               <ReadPercent size={14} strokeWidth={2} />
               {/* TODO: discussion */}
               {/* <SvgWrapper
diff --git a/packages/theme-default/src/components/Toc/index.tsx b/packages/theme-default/src/components/Toc/index.tsx
@@ -4,9 +4,9 @@ import { useDynamicToc } from './useDynamicToc';
 
 const baseHeaderLevel = 2;
 
-export function Toc({ isBottom = false }: { isBottom?: boolean }) {
+export function Toc() {
   const headers = useDynamicToc();
-  const activeAnchorId = useActiveAnchor(headers, isBottom);
+  const { activeAnchorId } = useActiveAnchor(headers, false);
 
   return (
     <>
diff --git a/packages/theme-default/src/components/Toc/useActiveAnchor.ts b/packages/theme-default/src/components/Toc/useActiveAnchor.ts
@@ -14,7 +14,8 @@ const useVisibleAnchors = (headers: Header[]): string[] => {
       });
 
       const visibleIds = offsets
-        .filter(offset => offset.top >= 0 && offset.top < window.innerHeight)
+        // 110 = var(--rp-nav-height) + var(--rp-sidebar-menu-height)
+        .filter(offset => offset.top >= 110 && offset.top < window.innerHeight)
         .map(offset => offset.id);
 
       setVisibleAnchors(visibleIds);
@@ -36,7 +37,7 @@ export const useActiveAnchor = (headers: Header[], isBottom: boolean) => {
 
   const anchorDirty = useRef<string>(null);
 
-  const activeAnchor = useMemo(() => {
+  const activeAnchorId = useMemo(() => {
     // If there are no anchors on the entire screen, use the before value.
     if (anchors.length === 0) {
       return anchorDirty.current;
@@ -48,7 +49,14 @@ export const useActiveAnchor = (headers: Header[], isBottom: boolean) => {
     return anchors[0];
   }, [headers, anchors, isBottom]);
 
-  anchorDirty.current = activeAnchor;
+  anchorDirty.current = activeAnchorId;
 
-  return activeAnchor;
+  const lastAnchor = headers[
+    headers.findIndex(h => h.id === activeAnchorId) - 1
+  ] as Header | undefined;
+
+  return {
+    activeAnchorId,
+    lastAnchor,
+  };
 };

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export function FallbackHeading({`
`34`	`34`	`titleSlug && (`
`35`	`35`	`<Element id={titleSlug}>`
`36`	`36`	`<span {...renderInlineMarkdown(title)}></span>`
`37`		- <A className="header-anchor" href={`#${titleSlug}`} aria-hidden>
	`37`	+ <A className="rp-header-anchor" href={`#${titleSlug}`} aria-hidden>
`38`	`38`	`#`
`39`	`39`	`</A>`
`40`	`40`	`</Element>`