diff --git a/sidebars-next.ts b/sidebars-next.ts index 43bc453f9e1b6..66c3a92934237 100644 --- a/sidebars-next.ts +++ b/sidebars-next.ts @@ -2,6 +2,12 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; const sidebars: SidebarsConfig = { docs: [ + { + type: 'category', + label: 'Get Started', + collapsible: false, + collapsed: false, + items: [ { type: 'category', label: 'Getting Started', @@ -174,7 +180,15 @@ const sidebars: SidebarsConfig = { ], }, ], + }, + ], }, + { + type: 'category', + label: 'Use Doris', + collapsible: false, + collapsed: false, + items: [ { type: 'category', label: 'Table Design', @@ -712,6 +726,41 @@ const sidebars: SidebarsConfig = { }, ], }, + ], + }, + { + type: 'category', + label: 'Solutions', + collapsible: false, + collapsed: false, + items: [ + { + type: 'category', + label: 'Doris for AI', + link: {type: 'doc', id: 'ai/ai-overview'}, + collapsed: true, + items: [ + 'ai/ai-function-overview', + ], + }, + { + type: 'category', + label: 'Observability with Doris', + link: {type: 'doc', id: 'observability/overview'}, + collapsed: true, + items: [ + 'observability/log', + 'observability/trace', + ], + }, + ], + }, + { + type: 'category', + label: 'Operate & Maintain', + collapsible: false, + collapsed: false, + items: [ { type: 'category', label: 'Administration', @@ -2598,23 +2647,6 @@ const sidebars: SidebarsConfig = { }, ], }, - { - type: 'category', - label: 'Doris for AI', - link: {type: 'doc', id: 'ai/ai-overview'}, - collapsed: true, - items: [ - 'ai/ai-function-overview', - ], - }, - { - type: 'category', - label: 'Observability with Doris', - link: {type: 'doc', id: 'observability/overview'}, - collapsed: true, - items: [ - 'observability/log', - 'observability/trace', ], }, ], diff --git a/src/components/home-next/NavbarNext.tsx b/src/components/home-next/NavbarNext.tsx index 1ee5471e9ecf0..0ff0e0c28839c 100644 --- a/src/components/home-next/NavbarNext.tsx +++ b/src/components/home-next/NavbarNext.tsx @@ -1,9 +1,7 @@ import React, { JSX, useState, useEffect } from 'react'; import Link from '@docusaurus/Link'; -import { useLocation } from '@docusaurus/router'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; -import { getLocalePrefix, isDocsNextPath, isReleasesPath, normalizePathname } from '@site/src/utils/locale'; +import { getLocalePrefix } from '@site/src/utils/locale'; import { STAR_COUNT } from '@site/src/constant/github.data'; import './NavbarNext.scss'; @@ -109,33 +107,15 @@ function MenuIcon({ open }: { open: boolean }): JSX.Element { export function NavbarNext(): JSX.Element { const { - i18n: { currentLocale, defaultLocale, localeConfigs }, + i18n: { currentLocale, defaultLocale }, } = useDocusaurusContext(); - const { pathname, search, hash } = useLocation(); const [mobileOpen, setMobileOpen] = useState(false); const localePrefix = getLocalePrefix(currentLocale, defaultLocale); const docsHref = `${localePrefix}/docs-next/dev/getting-started/what-is-apache-doris`; const releasesHref = `${localePrefix}/releases/all-release`; const navItems = buildNavItems(docsHref, releasesHref); const [expandedMobileItem, setExpandedMobileItem] = useState(navItems[0]?.label ?? ''); - const isDocsNextPage = isDocsNextPath(pathname, [defaultLocale, 'zh-CN']); - const isReleasesPage = isReleasesPath(pathname, [defaultLocale, 'zh-CN']); - const showLocaleSwitcher = isDocsNextPage || isReleasesPage; const homeHref = `${getLocalePrefix(currentLocale, defaultLocale)}/`; - const localeSwitchLabel = currentLocale === 'zh-CN' ? localeConfigs[defaultLocale]?.label ?? 'English' : '中文'; - const currentLocalizedPath = normalizePathname(pathname, [defaultLocale, 'zh-CN']); - const buildLocaleHref = (locale: string) => - `pathname://${locale === defaultLocale ? '' : `/${locale}`}${currentLocalizedPath}${search}${hash}`; - const localeItems = [defaultLocale, 'zh-CN'] - .filter((locale, index, arr) => arr.indexOf(locale) === index) - .map(locale => ({ - label: localeConfigs[locale]?.label ?? locale, - lang: localeConfigs[locale]?.htmlLang, - to: buildLocaleHref(locale), - target: '_self', - autoAddBaseUrl: false, - className: locale === currentLocale ? 'dropdown__link--active' : '', - })); useEffect(() => { if (!mobileOpen) return undefined; @@ -186,33 +166,6 @@ export function NavbarNext(): JSX.Element {
- {showLocaleSwitcher && ( - - - - } - items={localeItems} - position="right" - className="navbar-next__locale-dropdown" - aria-label={localeSwitchLabel} - /> - )}
- {showLocaleSwitcher && ( - - - - } - items={localeItems} - position="right" - className="navbar-next__locale-dropdown" - aria-label={localeSwitchLabel} - /> - )} { if (typeof window !== 'undefined') { - const docsPage = isDocsPath(location.pathname, locales); + const docsPage = isDocsPath(location.pathname, locales) || isDocsNextPath(location.pathname, locales); setIsDocsPage(docsPage); } }, [locales, typeof window !== 'undefined' && location.pathname]); diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx new file mode 100644 index 0000000000000..ffdc9a2f2d763 --- /dev/null +++ b/src/theme/DocBreadcrumbs/index.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import clsx from 'clsx'; +import { ThemeClassNames } from '@docusaurus/theme-common'; +import { useSidebarBreadcrumbs } from '@docusaurus/plugin-content-docs/client'; +import { useHomePageRoute } from '@docusaurus/theme-common/internal'; +import Link from '@docusaurus/Link'; +import { translate } from '@docusaurus/Translate'; +import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'; + +import styles from './styles.module.css'; + +function BreadcrumbsItemLink({ + children, + href, + isLast, +}: { + children: React.ReactNode; + href: string | undefined; + isLast: boolean; +}) { + const className = 'breadcrumbs__link'; + if (isLast) { + return ( + + {children} + + ); + } + return href ? ( + + {children} + + ) : ( + {children} + ); +} + +function BreadcrumbsItem({ + children, + active, + index, + addMicrodata, +}: { + children: React.ReactNode; + active: boolean; + index: number; + addMicrodata: boolean; +}) { + return ( +
  • + {children} + +
    • + ); +} + +export default function DocBreadcrumbs(): JSX.Element | null { + const breadcrumbs = useSidebarBreadcrumbs(); + const homePageRoute = useHomePageRoute(); + if (!breadcrumbs) { + return null; + } + // Drop the top-level sidebar section group (e.g. "Get Started"), + // since it's a visual grouping and has no destination page. + const visibleBreadcrumbs = breadcrumbs.length > 1 ? breadcrumbs.slice(1) : breadcrumbs; + return ( + + ); +} diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css new file mode 100644 index 0000000000000..72da4671a4557 --- /dev/null +++ b/src/theme/DocBreadcrumbs/styles.module.css @@ -0,0 +1,4 @@ +.breadcrumbsContainer { + --ifm-breadcrumb-size-multiplier: 0.8; + margin-bottom: 0.8rem; +} diff --git a/src/theme/DocItem/Layout/MobileSidebarDrawer.module.css b/src/theme/DocItem/Layout/MobileSidebarDrawer.module.css new file mode 100644 index 0000000000000..6aa5a2ffaf546 --- /dev/null +++ b/src/theme/DocItem/Layout/MobileSidebarDrawer.module.css @@ -0,0 +1,164 @@ +.toolbar { + display: none; +} + +@media (max-width: 996px) { + .toolbar { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; + } +} + +.toolbarSearch { + flex: 1 1 auto; + min-width: 0; +} + +.toolbarSearch :global(.navbar__search) { + margin-left: 0 !important; + width: 100%; +} + +.toolbarSearch :global(.navbar__search-input) { + width: 100% !important; + height: 2.25rem !important; +} + +.toolbarIconBtn { + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + padding: 0; + border: 1px solid #dfe5f0; + border-radius: 4px; + background-color: #fff; + color: var(--global-colors-text-primary); + cursor: pointer; +} + +.toolbarIconBtn:hover { + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.toolbarIcon { + width: 1rem; + height: 1rem; + flex: none; +} + +.toolbarLocale { + position: relative; + flex: none; +} + +.localeMenu { + position: absolute; + top: calc(100% + 4px); + right: 0; + min-width: 7rem; + margin: 0; + padding: 0.375rem 0; + list-style: none; + background: #fff; + border: 1px solid #edf2fa; + border-radius: 6px; + box-shadow: 0 6px 20px rgba(6, 128, 95, 0.12); + display: none; + z-index: 100; +} + +.toolbarLocaleOpen .localeMenu { + display: block; +} + +.localeMenuItem { + display: block; + padding: 0.5rem 0.875rem; + color: #1d1d1d; + font-size: 0.875rem; + line-height: 1.4; + text-decoration: none; + white-space: nowrap; +} + +.localeMenuItem:hover { + background-color: #f7fafc; + color: #1d1d1d; + text-decoration: none; +} + +.localeMenuItemActive, +.localeMenuItemActive:hover { + color: var(--ifm-color-primary); +} + +.backdrop { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.45); + opacity: 0; + pointer-events: none; + transition: opacity 0.25s ease; + z-index: 1000; +} + +.drawer { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: min(320px, 85vw); + background-color: var(--global-colors-background, #fff); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + transform: translateX(-100%); + transition: transform 0.25s ease; + z-index: 1001; + display: flex; + flex-direction: column; +} + +.open .backdrop { + opacity: 1; + pointer-events: auto; +} + +.open .drawer { + transform: translateX(0); +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-bottom: 1px solid #edf2fa; + font-weight: 600; + font-size: 0.9375rem; +} + +.close { + background: none; + border: none; + cursor: pointer; + padding: 0.25rem; + color: var(--global-colors-text-primary); + line-height: 0; +} + +.body { + flex: 1; + overflow-y: auto; + padding: 0.5rem 0; +} + +.menu { + list-style: none; + padding: 0; + margin: 0; +} diff --git a/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx new file mode 100644 index 0000000000000..6afb0acf14f1c --- /dev/null +++ b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx @@ -0,0 +1,178 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import clsx from 'clsx'; +import { useLocation } from '@docusaurus/router'; +import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client'; +import { ThemeClassNames } from '@docusaurus/theme-common'; +import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; +import DocSidebarItems from '@theme/DocSidebarItems'; +import SearchBar from '@theme/SearchBar'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +import styles from './MobileSidebarDrawer.module.css'; + +export default function MobileSidebarDrawer(): JSX.Element | null { + const sidebar = useDocsSidebar(); + const { pathname, search, hash } = useLocation(); + const { + i18n: { currentLocale, locales, localeConfigs }, + } = useDocusaurusContext(); + const alternatePageUtils = useAlternatePageUtils(); + const isZH = currentLocale === 'zh-CN'; + const [open, setOpen] = useState(false); + const [localeOpen, setLocaleOpen] = useState(false); + + const close = useCallback(() => setOpen(false), []); + + useEffect(() => { + if (!open) return undefined; + const { style } = document.body; + const previous = style.overflow; + style.overflow = 'hidden'; + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') setOpen(false); + }; + window.addEventListener('keydown', onKey); + return () => { + style.overflow = previous; + window.removeEventListener('keydown', onKey); + }; + }, [open]); + + useEffect(() => { + setOpen(false); + setLocaleOpen(false); + }, [pathname]); + + useEffect(() => { + if (!localeOpen) return undefined; + const onDocClick = () => setLocaleOpen(false); + document.addEventListener('mousedown', onDocClick); + return () => document.removeEventListener('mousedown', onDocClick); + }, [localeOpen]); + + if (!sidebar) return null; + + return ( + <> +
    +
    + +
    +
    e.stopPropagation()} + > + + +
    + +
    + +
    +
    + +
    + + ); +} diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx index f58dea3d67805..546ec86e70259 100644 --- a/src/theme/DocItem/Layout/index.tsx +++ b/src/theme/DocItem/Layout/index.tsx @@ -16,6 +16,7 @@ import DocBreadcrumbs from '@theme/DocBreadcrumbs'; import ContentVisibility from '@theme/ContentVisibility'; import type { Props } from '@theme/DocItem/Layout'; import { DocsEdit } from '../../../components/Icons/docs-edit'; +import MobileSidebarDrawer from './MobileSidebarDrawer'; import styles from './styles.module.css'; @@ -68,6 +69,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
    + {/* */} {docTOC.mobile} diff --git a/src/theme/DocSidebar/Desktop/index.tsx b/src/theme/DocSidebar/Desktop/index.tsx index 9446ba233453a..315004a57b405 100644 --- a/src/theme/DocSidebar/Desktop/index.tsx +++ b/src/theme/DocSidebar/Desktop/index.tsx @@ -2,6 +2,8 @@ import React from 'react'; import clsx from 'clsx'; import {useThemeConfig} from '@docusaurus/theme-common'; import Logo from '@theme/Logo'; +import SearchBar from '@theme/SearchBar'; +import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton'; import Content from '@theme/DocSidebar/Desktop/Content'; import type {Props} from '@theme/DocSidebar/Desktop'; @@ -24,6 +26,14 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) { isHidden && styles.sidebarHidden, )}> {hideOnScroll && } +
    +
    + +
    +
    + +
    +
    {hideable && }
    diff --git a/src/theme/DocSidebar/Desktop/styles.module.css b/src/theme/DocSidebar/Desktop/styles.module.css index c5d5e50e16fbb..23d0ada7b55a4 100644 --- a/src/theme/DocSidebar/Desktop/styles.module.css +++ b/src/theme/DocSidebar/Desktop/styles.module.css @@ -35,3 +35,53 @@ .sidebarLogo { display: none; } + +.sidebarHeader { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem 0.5rem; + border-bottom: 1px solid #edf2fa; +} + +.sidebarSearch { + flex: 1 1 auto; + min-width: 0; +} + +.sidebarSearch :global(.navbar__search) { + margin-left: 0 !important; + width: 100%; +} + +.sidebarSearch :global(.navbar__search-input) { + width: 100% !important; + height: 2.25rem !important; +} + +.sidebarLocale { + flex: 0 0 auto; + display: flex; + align-items: center; +} + +.sidebarLocale :global(.navbar__item.dropdown) { + padding: 0 !important; +} + +.sidebarLocale :global(.navbar__link) { + display: inline-flex; + align-items: center; + padding: 0.4rem 0.55rem; + border: 1px solid #dfe5f0; + border-radius: 4px; + line-height: 1; +} + +.sidebarLocale :global(.navbar__link):hover { + border-color: #8592a6; +} + +.sidebarLocale :global(.navbar__link)::after { + display: none; +} diff --git a/src/theme/DocSidebarItem/Category/index.tsx b/src/theme/DocSidebarItem/Category/index.tsx index 33390a4dd32c4..e0dcd6a93d464 100644 --- a/src/theme/DocSidebarItem/Category/index.tsx +++ b/src/theme/DocSidebarItem/Category/index.tsx @@ -164,7 +164,9 @@ export default function DocSidebarItemCategory({ })} > {level === 1 && isDocsPage ? ( -

    {label}

    +

    + {label} +

    ) : ( <> .menu__list-item > .menu__list-item-collapsible { + position: relative; + > .menu__link--sublist { + font-size: var(--global-font-size-medium, 14px); + font-weight: 400; + color: #1F1F26 !important; + } + /* Active state for a category whose descendant is the current page */ + > .menu__link--sublist.menu__link--active { + font-weight: 400 !important; + color: var(--ifm-color-primary) !important; + background-color: transparent !important; + &:hover { + background-color: #F2F4F7 !important; + } + } + } #menu__group:hover { background-color: white !important; } @@ -30,19 +50,23 @@ } .title_level_1 { - color: #00000a; - text-align: center; - font-size: 14px; + color: #0D0D12; + font-size: 15px; font-style: normal; font-weight: 600; line-height: 20px; - letter-spacing: 0.56px; - text-transform: capitalize; + letter-spacing: 0.4px; display: flex; - padding: 0px 10px 12px 10px; - align-items: center; - gap: 4px; + padding: 20px 10px 12px 10px; + align-items: baseline; + gap: 8px; align-self: stretch; + margin: 0; + } + + .title_level_1__label { + font-weight: 600; + color: #0D0D12; } @media (max-width: 996px) { @@ -64,8 +88,10 @@ .divider { width: calc(100% - 0.625rem); - border: 0.5px solid #DFE5F0; - margin: 1rem 0 1rem 0; + height: 1px; + border: 0; + background-color: #E5E8EE; + margin: 20px 0 4px 0; position: relative; left: 0.625rem; } diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx index 8d10f8762fa5d..2aa123c2558c7 100644 --- a/src/theme/Layout/index.tsx +++ b/src/theme/Layout/index.tsx @@ -18,7 +18,6 @@ import styles from './styles.module.css'; import { useHistory } from '@docusaurus/router'; import { NavbarNext } from '@site/src/components/home-next/NavbarNext'; import { PreviewBanner } from '@site/src/components/home-next/PreviewBanner'; -import { DocsSearchSection } from '@site/src/components/home-next/DocsSearchSection'; import { isDocsNextPath, isReleasesPath, isEventsPath } from '@site/src/utils/locale'; interface DataType { showSearchPageMobile: boolean; @@ -93,7 +92,6 @@ export default function Layout(props: Props): JSX.Element { {useNextNavbar && } {useNextNavbar ? : } - {isDocsNextPage && } {!useNextNavbar && showSearchPageMobile ? (
    diff --git a/src/theme/Navbar/Content/components/NavbarDocs.tsx b/src/theme/Navbar/Content/components/NavbarDocs.tsx index cef353f104545..e16ce398fd37a 100644 --- a/src/theme/Navbar/Content/components/NavbarDocs.tsx +++ b/src/theme/Navbar/Content/components/NavbarDocs.tsx @@ -46,11 +46,7 @@ export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) => { : currentLocale === 'ja' && themeConfig.docNavbarJA ? themeConfig.docNavbarJA.items : themeConfig.docNavbarEN.items; - let [leftDocItems] = splitNavbarItems(docItems); - if(location.pathname.includes(ARCHIVE_PATH)){ - leftDocItems = leftDocItems.filter((item)=>item.type !== 'search') - } - const searchItem = getNavItem(leftDocItems, 'search'); + const [leftDocItems] = splitNavbarItems(docItems); const leftDocItemsWithoutSearch = leftDocItems.filter((item) => item.type !== 'search'); const currentVersion = getDocsVersion(location.pathname, locales); const docsHomeHref = `${getLocalePrefix(currentLocale, defaultLocale)}/docs/${currentVersion}/gettingStarted/what-is-apache-doris`; @@ -63,18 +59,6 @@ export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) => {
    - {searchItem && ( -
    - - -
    - )}
    ); @@ -92,6 +76,7 @@ export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) => { ? themeConfig.docNavbarJA.items : themeConfig.docNavbarEN.items; const [, rightDocItems] = splitNavbarItems(docItems); + const rightDocItemsWithoutLocale = rightDocItems.filter(item => item.type !== 'localeDropdown'); const { showSearchPageMobile, setShowSearchPageMobile } = useContext(DataContext); const mobileSidebar = useNavbarMobileSidebar(); @@ -108,7 +93,7 @@ export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) => { ) : null} - + )} @@ -129,9 +114,6 @@ export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps) => { const [, rightDocItems] = splitNavbarItems(docItems); return (
    - {/* getNavItem? */} - - - {currentNavbar !== NavBar.DOCS && ( - - )} + {NavbarTypes[currentNavbar].right} {!mobileSidebar.disabled && !showSearchPageMobile && }