diff --git a/docusaurus.config.js b/docusaurus.config.js index dbdd4fdbf1ef5..40b950580ad4b 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -195,7 +195,7 @@ const config = { explicitSearchResultPath: true, searchBarShortcut: true, searchBarShortcutHint: true, - searchResultLimits: 100 + searchResultLimits: 100, }, ], ], @@ -293,61 +293,6 @@ const config = { type: 'docsVersionDropdown', position: 'right', }, - // { - // label: '快速开始', - // position: 'left', - // // to: '/docs/gettingStarted/what-is-new', - // type: 'doc', - // docId: 'gettingStarted/what-is-new', - // activeBaseRegex: 'what-is-new|what-is-apache-doris|quick-start|tutorials', - // }, - // { - // label: '使用指南', - // position: 'left', - // // to: '/docs/install/source-install/compilation-with-docker', - // type: 'doc', - // docId: 'install/source-install/compilation-with-docker', - // activeBaseRegex: - // 'summary|install/cluster-deployment|install/source-install|db-connect|table-design|data-operate|query|lakehouse|compute-storage-decoupled|admin-manual|practical-guide|sql-manual', - // }, - // { - // label: '性能测试', - // position: 'left', - // // to: '/docs/benchmark/ssb', - // type: 'doc', - // docId: 'benchmark/ssb', - // activeBaseRegex: 'benchmark', - // }, - // { - // label: '生态工具', - // position: 'left', - // // to: '/docs/ecosystem/spark-doris-connector', - // type: 'doc', - // docId: 'ecosystem/spark-doris-connector', - // activeBaseRegex: 'ecosystem', - // }, - // { - // label: '常见问题', - // position: 'left', - // // to: '/docs/faq/install-faq', - // type: 'doc', - // docId: 'faq/install-faq', - // activeBaseRegex: 'faq', - // }, - // { - // label: '版本发布', - // position: 'left', - // // to: '/docs/releasenotes/all-release', - // type: 'doc', - // docId: 'releasenotes/all-release', - // activeBaseRegex: 'releasenotes', - // }, - // { - // type: 'html', - // position: 'left', - // value: `技术论坛 - // `, - // }, ], }, docNavbarEN: { @@ -370,61 +315,48 @@ const config = { type: 'docsVersionDropdown', position: 'right', }, - // { - // label: 'Getting Started', - // position: 'left', - // // to: '/docs/gettingStarted/what-is-new', - // type: 'doc', - // docId: 'gettingStarted/what-is-new', - // activeBaseRegex: 'what-is-new|what-is-apache-doris|quick-start|tutorials', - // }, - // { - // label: 'Guides', - // position: 'left', - // // to: '/docs/install/source-install/compilation-with-docker', - // type: 'doc', - // docId: 'install/source-install/compilation-with-docker', - // activeBaseRegex: - // 'summary|install/cluster-deployment|install/source-install|db-connect|table-design|data-operate|query|lakehouse|compute-storage-decoupled|admin-manual|practical-guide|sql-manual', - // }, - // { - // label: 'Benchmark', - // position: 'left', - // // to: '/docs/benchmark/ssb', - // type: 'doc', - // docId: 'benchmark/ssb', - // activeBaseRegex: 'benchmark', - // }, - // { - // label: 'Ecosystem', - // position: 'left', - // // to: '/docs/ecosystem/spark-doris-connector', - // type: 'doc', - // docId: 'ecosystem/spark-doris-connector', - // activeBaseRegex: 'ecosystem', - // }, - // { - // label: 'FAQ', - // position: 'left', - // // to: '/docs/faq/install-faq', - // type: 'doc', - // docId: 'faq/install-faq', - // activeBaseRegex: 'faq', - // }, - // { - // label: 'Releases', - // position: 'left', - // // to: '/docs/releasenotes/all-release', - // type: 'doc', - // docId: 'releasenotes/all-release', - // activeBaseRegex: 'releasenotes', - // }, - // { - // type: 'html', - // position: 'left', - // value: `Forum - // `, - // }, + ], + }, + communityNavbar: { + title: '', + logo: { + alt: 'Apache Doris', + src: logoImg, + }, + items: [ + { + position: 'left', + label: 'Docs', + to: '/docs/gettingStarted/what-is-new', + target: '_blank', + }, + { to: '/blog', label: 'Blog', position: 'left' }, + { to: '/users', label: 'Users', position: 'left' }, + { + label: 'Discussions', + to: 'https://github.com/apache/doris/discussions', + position: 'left', + }, + { + label: 'Ecosystem', + to: '/ecosystem/cluster-management', + position: 'left', + }, + { + label: 'Community', + to: '/community/join-community', + position: 'left', + }, + { + href: '/download', + className: 'header-right-button-primary navbar-download-mobile', + label: 'Download', + position: 'right', + }, + { + type: 'localeDropdown', + position: 'right', + }, ], }, footer: { diff --git a/src/scss/common.scss b/src/scss/common.scss index 1c02f03e8d116..d675602913f51 100644 --- a/src/scss/common.scss +++ b/src/scss/common.scss @@ -1,17 +1,3 @@ -.docs-wrapper { - .navbar__inner { - .navbar__items--right { - .header-right-button-github, - .header-right-button-slack { - display: none; - } - } - } - .navbar__bottom { - display: none; - } -} - @media screen and (max-width: 996px) { .docs-wrapper { .navbar__inner { diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index b2bb9dd8309b3..8fdbac914572a 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -29,9 +29,12 @@ export default function Layout(props: Props): JSX.Element { if ( history.location.pathname?.length > 1 && history.location.pathname[history.location.pathname.length - 1] === '/' - ) - history.replace(history.location.pathname.slice(0, -1)); - }, []); + ){ + const params = location.href.split(history.location.pathname)[1]; + history.replace(history.location.pathname.slice(0, -1) + params); + } + + }, [history.location]); return ( diff --git a/src/theme/Navbar/Content/components/NavbarCommon.tsx b/src/theme/Navbar/Content/components/NavbarCommon.tsx new file mode 100644 index 0000000000000..1016d9d5bafb8 --- /dev/null +++ b/src/theme/Navbar/Content/components/NavbarCommon.tsx @@ -0,0 +1,57 @@ +import React, { useEffect, useState } from 'react'; +import { useThemeConfig } from '@docusaurus/theme-common'; +import { splitNavbarItems } from '@docusaurus/theme-common/internal'; +import NavbarLogo from '@theme/Navbar/Logo'; +import Link from '@docusaurus/Link'; +import Translate from '@docusaurus/Translate'; +import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem'; + +import { NavbarItems } from '..'; +import styles from '../styles.module.css'; + +function useNavbarItems() { + return useThemeConfig().navbar.items as NavbarItemConfig[]; +} + +export const NavbarCommonLeft = () => { + const items = useNavbarItems(); + const [leftItems] = splitNavbarItems(items); + + return ( +
+
+ +
+
+ +
+
+ ); +}; + +interface NavbarCommonRightProps { + star: string; +} + +export const NavbarCommonRight = ({ star }: NavbarCommonRightProps) => { + const items = useNavbarItems(); + const [, rightItems] = splitNavbarItems(items); + + return ( + <> + + + {star &&
{star}k
} + + + + ); +}; diff --git a/src/theme/Navbar/Content/components/NavbarCommunity.tsx b/src/theme/Navbar/Content/components/NavbarCommunity.tsx new file mode 100644 index 0000000000000..097254b226bad --- /dev/null +++ b/src/theme/Navbar/Content/components/NavbarCommunity.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { useThemeConfig } from '@docusaurus/theme-common'; +import { splitNavbarItems } from '@docusaurus/theme-common/internal'; +import NavbarLogo from '@theme/Navbar/Logo'; +import { type Props as NavbarItemConfig } from '@theme/NavbarItem'; + +import { getNavItem } from '..'; +import { NavbarItems } from '..'; +import LocaleDropdownNavbarItem from '../../../NavbarItem/LocaleDropdownNavbarItem'; +import styles from '../styles.module.css'; + +function useNavbarItems() { + return useThemeConfig().communityNavbar.items as NavbarItemConfig[]; +} + +export const NavbarCommunityLeft = () => { + const items = useNavbarItems(); + const [leftItems] = splitNavbarItems(items); + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export const NavbarCommunityRight = () => { + const items = useNavbarItems(); + const [, rightItems] = splitNavbarItems(items); + return ; +}; + +export const NavbarCommunityBottom = () => { + const items = useNavbarItems(); + return ( +
+ +
+ ); +}; diff --git a/src/theme/Navbar/Content/components/NavbarDocs.tsx b/src/theme/Navbar/Content/components/NavbarDocs.tsx new file mode 100644 index 0000000000000..d2f42b2e549b3 --- /dev/null +++ b/src/theme/Navbar/Content/components/NavbarDocs.tsx @@ -0,0 +1,72 @@ +import styles from '../styles.module.css'; +import React, { useState, useEffect } from 'react'; +import { useLocation } from '@docusaurus/router'; +import { useThemeConfig } from '@docusaurus/theme-common'; +import { splitNavbarItems } from '@docusaurus/theme-common/internal'; +import DocsLogoNew from '@site/static/images/doc-logo-new.svg'; +import DocsLogoZH from '@site/static/images/doc-logo-zh.svg'; +import LocaleDropdownNavbarItem from '../../../NavbarItem/LocaleDropdownNavbarItem'; +import DocsVersionDropdownNavbarItem from '../../../NavbarItem/DocsVersionDropdownNavbarItem'; +import { NavbarItems,getNavItem } from '..'; + +interface NavbarDocsProps { + isEN: boolean; +} + +export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) => { + const [currentVersion, setCurrentVersion] = useState(''); + const location = useLocation(); + const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; + const [leftDocItems] = splitNavbarItems(docItems); + useEffect(() => { + const secPath = location.pathname.includes('zh-CN/docs') + ? location.pathname.split('/')[3] + : location.pathname.split('/')[2]; + if (location.pathname.includes('docs') && ['dev', '2.1', '2.0', '1.2'].includes(secPath)) { + setCurrentVersion(secPath); + } else { + setCurrentVersion(''); + } + }, [typeof window !== 'undefined' && location.pathname]); + return ( +
+
+
{ + window.location.href = `${isEN ? '' : '/zh-CN'}/docs${ + currentVersion === '' ? '' : `/${currentVersion}` + }/gettingStarted/what-is-new`; + }} + > + {isEN ? : } +
+
+
+ +
+
+ ); +}; + +export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) => { + const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; + const [, rightDocItems] = splitNavbarItems(docItems); + return ; +}; + +export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps) => { + const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; + const [, rightDocItems] = splitNavbarItems(docItems); + return ( +
+ {/* getNavItem? */} + + +
+ ); +}; diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx index 0243b53757aee..1bd2761396e34 100644 --- a/src/theme/Navbar/Content/index.tsx +++ b/src/theme/Navbar/Content/index.tsx @@ -1,27 +1,29 @@ import React, { useState, useEffect, type ReactNode } from 'react'; -import { useThemeConfig, ErrorCauseBoundary } from '@docusaurus/theme-common'; -import { splitNavbarItems, useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; +import { ErrorCauseBoundary } from '@docusaurus/theme-common'; +import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem'; -import DocsLogoNew from '@site/static/images/doc-logo-new.svg'; -import DocsLogoZH from '@site/static/images/doc-logo-zh.svg'; import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'; -import SearchBar from '@theme/SearchBar'; import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; +import { useLocation } from '@docusaurus/router'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; -import LocaleDropdownNavbarItem from '../../NavbarItem/LocaleDropdownNavbarItem'; -import DocsVersionDropdownNavbarItem from '../../NavbarItem/DocsVersionDropdownNavbarItem'; -import NavbarLogo from '@theme/Navbar/Logo'; -import NavbarSearch from '@theme/Navbar/Search'; +import { NavbarDocsLeft, NavbarDocsRight, NavbarDocsBottom } from './components/NavbarDocs'; +import { NavbarCommunityLeft, NavbarCommunityBottom, NavbarCommunityRight } from './components/NavbarCommunity'; +import { NavbarCommonLeft, NavbarCommonRight } from './components/NavbarCommon'; import styles from './styles.module.css'; -function useNavbarItems() { - // TODO temporary casting until ThemeConfig type is improved - return useThemeConfig().navbar.items as NavbarItemConfig[]; +enum NavBar { + DOCS = 'docs', + COMMUNITY = 'community', + COMMON = 'common', } -function NavbarItems({ items, isDocsPage }: { items: NavbarItemConfig[]; isDocsPage?: boolean }): JSX.Element { +export function getNavItem(items: NavbarItemConfig[], type: string) { + return items.find(item => item.type === type); +} + +export function NavbarItems({ items, isDocsPage }: { items: NavbarItemConfig[]; isDocsPage?: boolean }): JSX.Element { return ( <> {items.map((item, i) => ( @@ -66,56 +68,17 @@ function NavbarContentLayout({
{left}
{right}
- {/*
-
- -
-
*/}
{bottom}
); } export default function NavbarContent(): JSX.Element { + const [currentNavbar, setCurrentNavbar] = useState(NavBar.DOCS); const mobileSidebar = useNavbarMobileSidebar(); - const [star, setStar] = useState(); - const items = useNavbarItems(); + const location = useLocation(); const [isEN, setIsEN] = useState(true); - const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items; - const [leftItems, rightItems] = splitNavbarItems(items); - const [leftDocItems, rightDocItems] = splitNavbarItems(docItems); - const [isDocsPage, setIsDocsPage] = useState( - typeof window !== 'undefined' ? location.pathname.includes('docs') : false, - ); - const [isCommunity, setIsCommunity] = useState(false); - const searchBarItem = items.find(item => item.type === 'search'); - - const [currentVersion, setCurrentVersion] = useState(''); - useEffect(() => { - getGithubStar(); - if (typeof window !== 'undefined') { - const tempPath = ['gettingStarted', 'benchmark', 'ecosystems', 'faq', 'docs', 'releasenotes']; - - const secPath = location.pathname.includes('zh-CN/docs') - ? location.pathname.split('/')[3] - : location.pathname.split('/')[2]; - if (location.pathname.includes('docs') && ['dev', '2.1', '2.0', '1.2'].includes(secPath)) { - setCurrentVersion(secPath); - } else { - setCurrentVersion(''); - } - - const pathname = location.pathname.split('/')[1]; - location.pathname.includes('zh-CN') ? setIsEN(false) : setIsEN(true); - const docsPage = location.pathname.includes('docs'); - const communityPage = pathname === 'community' || location.pathname.includes('zh-CN/community'); - setIsCommunity(communityPage); - setIsDocsPage(docsPage); - } - }, [typeof window !== 'undefined' && location.pathname]); + const [star, setStar] = useState(); async function getGithubStar() { try { @@ -138,66 +101,51 @@ export default function NavbarContent(): JSX.Element { return (index % 3 ? next : next + '.') + prev; }); } - function getNavItem(type: string) { - return items.find(item => item.type === type); - } + + const NavbarTypes = { + [NavBar.DOCS]: { + left: , + right: , + bottom: , + }, + [NavBar.COMMUNITY]: { + left: , + right: , + bottom: , + }, + [NavBar.COMMON]: { + left: , + right: , + bottom: null, + }, + }; + useEffect(() => { + if (typeof window !== 'undefined') { + const pathname = location.pathname.split('/')[1]; + location.pathname.includes('zh-CN') ? setIsEN(false) : setIsEN(true); + if (location.pathname.includes(NavBar.DOCS)) { + setCurrentNavbar(NavBar.DOCS); + } else if (pathname === NavBar.COMMUNITY || location.pathname.includes('zh-CN/community')) { + setCurrentNavbar(NavBar.COMMUNITY); + } else { + setCurrentNavbar(NavBar.COMMON); + } + } + }, [typeof window !== 'undefined' && location.pathname]); + + useEffect(() => { + getGithubStar(); + }, []); return ( -
- {isDocsPage ? ( -
{ - window.location.href = `${isEN ? '' : '/zh-CN'}/docs${ - currentVersion === '' ? '' : `/${currentVersion}` - }/gettingStarted/what-is-new`; - }} - > - {isEN ? : } -
- ) : ( - - )} -
-
- {!isDocsPage ? ( - - ) : ( - - )} -
- {/* */} - - } - isDocsPage={isDocsPage} + left={NavbarTypes[currentNavbar].left} + isDocsPage={currentNavbar === NavBar.DOCS} right={ - // TODO stop hardcoding items? - // Ask the user to add the respective navbar items => more flexible <> {!mobileSidebar.disabled && } - + {NavbarTypes[currentNavbar].right} - {/* {!searchBarItem && ( - - - - )} */} - - {star &&
{star}k
} - - {typeof window !== 'undefined' && location.pathname.includes('zh-CN/docs') @@ -207,22 +155,7 @@ export default function NavbarContent(): JSX.Element { } - bottom={ - isDocsPage || isCommunity ? ( -
- - {isDocsPage && ( //startWithDoc - - )} -
- ) : ( - <> - ) - } + bottom={NavbarTypes[currentNavbar].bottom} /> ); } diff --git a/src/theme/TOC/index.tsx b/src/theme/TOC/index.tsx index 5571d8e1fa79a..95ce72ca563b5 100644 --- a/src/theme/TOC/index.tsx +++ b/src/theme/TOC/index.tsx @@ -97,13 +97,13 @@ export default function TOC({ className, ...props }: Props): JSX.Element { handleMouseEnter('toc-icon-github')} onMouseLeave={() => handleMouseLeave('toc-icon-github')} > - {isCN ? : } - {isCN ? '技术论坛' : 'Ask Questions on Discussion'} + + Ask Questions on Discussion