Merge branch 'main' into defhdzcb

web-infra-dev · Oct 21, 2024 · fe1727b · fe1727b
2 parents 2691c49 + 2028a38
commit fe1727b
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 7 deletions.
diff --git a/.changeset/pink-dryers-cross.md b/.changeset/pink-dryers-cross.md
@@ -0,0 +1,6 @@
+---
+'@rspress/theme-default': patch
+'@rspress/docs': patch
+---
+
+feat: support replacement nav title
diff --git a/packages/document/docs/en/guide/advanced/custom-theme.mdx b/packages/document/docs/en/guide/advanced/custom-theme.mdx
@@ -70,6 +70,8 @@ const Layout = () => (
     beforeNav={<div>beforeNav</div>}
     /* Before the title of the nav bar in the upper left corner */
     beforeNavTitle={<span>😄</span>}
+    /* Nav bar title */
+    navTitle={<div>Custom Nav Title</div>}
     /* After the title of the nav bar in the upper left corner */
     afterNavTitle={<div>afterNavTitle</div>}
     /* The right corner of the nav menu */

diff --git a/packages/document/docs/zh/guide/advanced/custom-theme.mdx b/packages/document/docs/zh/guide/advanced/custom-theme.mdx
@@ -70,6 +70,8 @@ const Layout = () => (
     beforeNav={<div>beforeNav</div>}
     /* 左上角导航栏标题之前 */
     beforeNavTitle={<span>😄</span>}
+    /* 导航栏标题 */
+    navTitle={<div>Custom Nav Title</div>}
     /* 左上角导航栏标题之后 */
     afterNavTitle={<div>afterNavTitle</div>}
     /* 导航栏右上角部分 */

diff --git a/packages/theme-default/src/components/LocalSideBar/index.tsx b/packages/theme-default/src/components/LocalSideBar/index.tsx
@@ -13,11 +13,13 @@ export function SideMenu({
   beforeSidebar,
   afterSidebar,
   uiSwitch,
+  navTitle,
 }: {
   outlineTitle: string;
   beforeSidebar?: React.ReactNode;
   afterSidebar?: React.ReactNode;
   uiSwitch?: UISwitchResult;
+  navTitle?: React.ReactNode;
 }) {
   const [isSidebarOpen, setSidebarIsOpen] = useState<boolean>(false);
   const [isTocOpen, setIsTocOpen] = useState<boolean>(false);
@@ -120,6 +122,7 @@ export function SideMenu({
             beforeSidebar={beforeSidebar}
             afterSidebar={afterSidebar}
             uiSwitch={uiSwitch}
+            navTitle={navTitle}
           />
           {isSidebarOpen ? (
             <div

diff --git a/packages/theme-default/src/components/Nav/index.tsx b/packages/theme-default/src/components/Nav/index.tsx
@@ -17,14 +17,16 @@ import { useNavData } from '../../logic/useNav';
 export interface NavProps {
   beforeNav?: React.ReactNode;
   beforeNavTitle?: React.ReactNode;
+  navTitle?: React.ReactNode;
   afterNavTitle?: React.ReactNode;
   afterNavMenu?: React.ReactNode;
 }
 
 const DEFAULT_NAV_POSTION = 'right';
 
 export function Nav(props: NavProps) {
-  const { beforeNavTitle, afterNavTitle, beforeNav, afterNavMenu } = props;
+  const { beforeNavTitle, afterNavTitle, beforeNav, afterNavMenu, navTitle } =
+    props;
   const { siteData } = usePageData();
   const { base } = siteData;
   const { pathname } = useLocation();
@@ -139,7 +141,7 @@ export function Nav(props: NavProps) {
           className={`${styles.container} flex justify-between items-center h-full`}
         >
           {beforeNavTitle}
-          <NavBarTitle />
+          {navTitle || <NavBarTitle />}
           {afterNavTitle}
           <div className="flex flex-1 justify-end items-center">
             {leftNav()}

diff --git a/packages/theme-default/src/components/Sidebar/index.tsx b/packages/theme-default/src/components/Sidebar/index.tsx
@@ -58,6 +58,7 @@ interface Props {
   beforeSidebar?: React.ReactNode;
   afterSidebar?: React.ReactNode;
   uiSwitch?: UISwitchResult;
+  navTitle?: React.ReactNode;
 }
 
 type SidebarData = (ISidebarDivider | ISidebarItem | NormalizedSidebarGroup)[];
@@ -78,7 +79,8 @@ export let matchCache: WeakMap<
 > = new WeakMap();
 
 export function Sidebar(props: Props) {
-  const { isSidebarOpen, beforeSidebar, afterSidebar, uiSwitch } = props;
+  const { isSidebarOpen, beforeSidebar, afterSidebar, uiSwitch, navTitle } =
+    props;
 
   const { pathname: rawPathname } = useLocation();
   const { items: rawSidebarData } = useSidebarData();
@@ -207,9 +209,7 @@ export function Sidebar(props: Props) {
       }`}
     >
       {!uiSwitch.showNavbar ? null : (
-        <div className={styles.navTitleMask}>
-          <NavBarTitle />
-        </div>
+        <div className={styles.navTitleMask}>{navTitle || <NavBarTitle />}</div>
       )}
       <div className={`rspress-scrollbar ${styles.sidebarContent}`}>
         <nav className="pb-2">

diff --git a/packages/theme-default/src/layout/DocLayout/index.tsx b/packages/theme-default/src/layout/DocLayout/index.tsx
@@ -22,6 +22,7 @@ export interface DocLayoutProps {
   beforeOutline?: React.ReactNode;
   afterOutline?: React.ReactNode;
   uiSwitch?: UISwitchResult;
+  navTitle?: React.ReactNode;
 }
 
 export function DocLayout(props: DocLayoutProps) {
@@ -37,6 +38,7 @@ export function DocLayout(props: DocLayoutProps) {
     beforeSidebar,
     afterSidebar,
     uiSwitch,
+    navTitle,
   } = props;
   const { siteData, page } = usePageData();
   const { toc = [], frontmatter } = page;
@@ -71,6 +73,7 @@ export function DocLayout(props: DocLayoutProps) {
         beforeSidebar={beforeSidebar}
         afterSidebar={afterSidebar}
         uiSwitch={uiSwitch}
+        navTitle={navTitle}
       />
       <div
         className={`${styles.content} rspress-doc-container flex flex-shrink-0 mx-auto`}

diff --git a/packages/theme-default/src/layout/Layout/index.tsx b/packages/theme-default/src/layout/Layout/index.tsx
@@ -53,6 +53,7 @@ export const Layout: React.FC<LayoutProps> = props => {
     afterOutline,
     beforeNavTitle,
     afterNavTitle,
+    navTitle,
     beforeNav,
     beforeHero,
     afterHero,
@@ -126,7 +127,9 @@ export const Layout: React.FC<LayoutProps> = props => {
       case 'home':
         return <Theme.HomeLayout {...homeProps} />;
       case 'doc':
-        return <DocLayout {...docProps} uiSwitch={uiSwitch} />;
+        return (
+          <DocLayout {...docProps} uiSwitch={uiSwitch} navTitle={navTitle} />
+        );
       case '404':
         return <Theme.NotFoundLayout />;
       // The custom pageType will have navbar while the blank pageType will not.
@@ -154,6 +157,7 @@ export const Layout: React.FC<LayoutProps> = props => {
         <Nav
           beforeNavTitle={beforeNavTitle}
           afterNavTitle={afterNavTitle}
+          navTitle={navTitle}
           beforeNav={beforeNav}
           afterNavMenu={afterNavMenu}
         />