Skip to content

Commit 7867ca7

Browse files
authored
[opt] update search bar (#3650)
1 parent 59102c5 commit 7867ca7

15 files changed

Lines changed: 612 additions & 139 deletions

File tree

sidebars-next.ts

Lines changed: 49 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
22

33
const sidebars: SidebarsConfig = {
44
docs: [
5+
{
6+
type: 'category',
7+
label: 'Get Started',
8+
collapsible: false,
9+
collapsed: false,
10+
items: [
511
{
612
type: 'category',
713
label: 'Getting Started',
@@ -174,7 +180,15 @@ const sidebars: SidebarsConfig = {
174180
],
175181
},
176182
],
183+
},
184+
],
177185
},
186+
{
187+
type: 'category',
188+
label: 'Use Doris',
189+
collapsible: false,
190+
collapsed: false,
191+
items: [
178192
{
179193
type: 'category',
180194
label: 'Table Design',
@@ -712,6 +726,41 @@ const sidebars: SidebarsConfig = {
712726
},
713727
],
714728
},
729+
],
730+
},
731+
{
732+
type: 'category',
733+
label: 'Solutions',
734+
collapsible: false,
735+
collapsed: false,
736+
items: [
737+
{
738+
type: 'category',
739+
label: 'Doris for AI',
740+
link: {type: 'doc', id: 'ai/ai-overview'},
741+
collapsed: true,
742+
items: [
743+
'ai/ai-function-overview',
744+
],
745+
},
746+
{
747+
type: 'category',
748+
label: 'Observability with Doris',
749+
link: {type: 'doc', id: 'observability/overview'},
750+
collapsed: true,
751+
items: [
752+
'observability/log',
753+
'observability/trace',
754+
],
755+
},
756+
],
757+
},
758+
{
759+
type: 'category',
760+
label: 'Operate & Maintain',
761+
collapsible: false,
762+
collapsed: false,
763+
items: [
715764
{
716765
type: 'category',
717766
label: 'Administration',
@@ -2598,23 +2647,6 @@ const sidebars: SidebarsConfig = {
25982647
},
25992648
],
26002649
},
2601-
{
2602-
type: 'category',
2603-
label: 'Doris for AI',
2604-
link: {type: 'doc', id: 'ai/ai-overview'},
2605-
collapsed: true,
2606-
items: [
2607-
'ai/ai-function-overview',
2608-
],
2609-
},
2610-
{
2611-
type: 'category',
2612-
label: 'Observability with Doris',
2613-
link: {type: 'doc', id: 'observability/overview'},
2614-
collapsed: true,
2615-
items: [
2616-
'observability/log',
2617-
'observability/trace',
26182650
],
26192651
},
26202652
],

src/components/home-next/NavbarNext.tsx

Lines changed: 2 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { JSX, useState, useEffect } from 'react';
22
import Link from '@docusaurus/Link';
3-
import { useLocation } from '@docusaurus/router';
43
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5-
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
6-
import { getLocalePrefix, isDocsNextPath, isReleasesPath, normalizePathname } from '@site/src/utils/locale';
4+
import { getLocalePrefix } from '@site/src/utils/locale';
75
import { STAR_COUNT } from '@site/src/constant/github.data';
86
import './NavbarNext.scss';
97

@@ -109,33 +107,15 @@ function MenuIcon({ open }: { open: boolean }): JSX.Element {
109107

110108
export function NavbarNext(): JSX.Element {
111109
const {
112-
i18n: { currentLocale, defaultLocale, localeConfigs },
110+
i18n: { currentLocale, defaultLocale },
113111
} = useDocusaurusContext();
114-
const { pathname, search, hash } = useLocation();
115112
const [mobileOpen, setMobileOpen] = useState(false);
116113
const localePrefix = getLocalePrefix(currentLocale, defaultLocale);
117114
const docsHref = `${localePrefix}/docs-next/dev/getting-started/what-is-apache-doris`;
118115
const releasesHref = `${localePrefix}/releases/all-release`;
119116
const navItems = buildNavItems(docsHref, releasesHref);
120117
const [expandedMobileItem, setExpandedMobileItem] = useState(navItems[0]?.label ?? '');
121-
const isDocsNextPage = isDocsNextPath(pathname, [defaultLocale, 'zh-CN']);
122-
const isReleasesPage = isReleasesPath(pathname, [defaultLocale, 'zh-CN']);
123-
const showLocaleSwitcher = isDocsNextPage || isReleasesPage;
124118
const homeHref = `${getLocalePrefix(currentLocale, defaultLocale)}/`;
125-
const localeSwitchLabel = currentLocale === 'zh-CN' ? localeConfigs[defaultLocale]?.label ?? 'English' : '中文';
126-
const currentLocalizedPath = normalizePathname(pathname, [defaultLocale, 'zh-CN']);
127-
const buildLocaleHref = (locale: string) =>
128-
`pathname://${locale === defaultLocale ? '' : `/${locale}`}${currentLocalizedPath}${search}${hash}`;
129-
const localeItems = [defaultLocale, 'zh-CN']
130-
.filter((locale, index, arr) => arr.indexOf(locale) === index)
131-
.map(locale => ({
132-
label: localeConfigs[locale]?.label ?? locale,
133-
lang: localeConfigs[locale]?.htmlLang,
134-
to: buildLocaleHref(locale),
135-
target: '_self',
136-
autoAddBaseUrl: false,
137-
className: locale === currentLocale ? 'dropdown__link--active' : '',
138-
}));
139119

140120
useEffect(() => {
141121
if (!mobileOpen) return undefined;
@@ -186,33 +166,6 @@ export function NavbarNext(): JSX.Element {
186166
</div>
187167

188168
<div className="navbar-next__actions">
189-
{showLocaleSwitcher && (
190-
<DropdownNavbarItem
191-
mobile={false}
192-
label={
193-
<>
194-
<svg
195-
className="icon-language navbar-next__locale-icon"
196-
xmlns="http://www.w3.org/2000/svg"
197-
width="16"
198-
height="16"
199-
viewBox="0 0 16 16"
200-
fill="none"
201-
aria-hidden="true"
202-
>
203-
<path
204-
d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7 14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109 11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498 11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165 6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711 5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778 6.81621 6.62511 7.11879 6.10867C7.42137 5.59178 7.67352 5.03889 7.87523 4.45H1V3.23333H5.33694V2H6.58087V3.23333H10.9178V4.45H9.11916C8.89503 5.18333 8.59805 5.89155 8.22824 6.57467C7.85842 7.25822 7.39895 7.90555 6.84983 8.51667L8.3459 10.0167L7.87523 11.2833L5.95891 9.38333L2.84908 12.45Z"
205-
fill="currentColor"
206-
/>
207-
</svg>
208-
</>
209-
}
210-
items={localeItems}
211-
position="right"
212-
className="navbar-next__locale-dropdown"
213-
aria-label={localeSwitchLabel}
214-
/>
215-
)}
216169
<a
217170
href={`https://github.com/${GITHUB_REPO}`}
218171
target="_blank"
@@ -281,33 +234,6 @@ export function NavbarNext(): JSX.Element {
281234
</div>
282235

283236
<div className="navbar-next__mobile-actions">
284-
{showLocaleSwitcher && (
285-
<DropdownNavbarItem
286-
mobile={false}
287-
label={
288-
<>
289-
<svg
290-
className="icon-language navbar-next__locale-icon"
291-
xmlns="http://www.w3.org/2000/svg"
292-
width="16"
293-
height="16"
294-
viewBox="0 0 16 16"
295-
fill="none"
296-
aria-hidden="true"
297-
>
298-
<path
299-
d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7 14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109 11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498 11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165 6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711 5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778 6.81621 6.62511 7.11879 6.10867C7.42137 5.59178 7.67352 5.03889 7.87523 4.45H1V3.23333H5.33694V2H6.58087V3.23333H10.9178V4.45H9.11916C8.89503 5.18333 8.59805 5.89155 8.22824 6.57467C7.85842 7.25822 7.39895 7.90555 6.84983 8.51667L8.3459 10.0167L7.87523 11.2833L5.95891 9.38333L2.84908 12.45Z"
300-
fill="currentColor"
301-
/>
302-
</svg>
303-
</>
304-
}
305-
items={localeItems}
306-
position="right"
307-
className="navbar-next__locale-dropdown"
308-
aria-label={localeSwitchLabel}
309-
/>
310-
)}
311237
<a
312238
href={`https://github.com/${GITHUB_REPO}`}
313239
target="_blank"

src/hooks/use-is-doc.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from 'react';
22
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3-
import { isDocsPath } from '@site/src/utils/locale';
3+
import { isDocsPath, isDocsNextPath } from '@site/src/utils/locale';
44

55
export default function useIsDocPage(defaultValue: boolean) {
66
const [isDocsPage, setIsDocsPage] = useState(defaultValue);
@@ -9,7 +9,7 @@ export default function useIsDocPage(defaultValue: boolean) {
99
} = useDocusaurusContext();
1010
useEffect(() => {
1111
if (typeof window !== 'undefined') {
12-
const docsPage = isDocsPath(location.pathname, locales);
12+
const docsPage = isDocsPath(location.pathname, locales) || isDocsNextPath(location.pathname, locales);
1313
setIsDocsPage(docsPage);
1414
}
1515
}, [locales, typeof window !== 'undefined' && location.pathname]);

src/theme/DocBreadcrumbs/index.tsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import { ThemeClassNames } from '@docusaurus/theme-common';
4+
import { useSidebarBreadcrumbs } from '@docusaurus/plugin-content-docs/client';
5+
import { useHomePageRoute } from '@docusaurus/theme-common/internal';
6+
import Link from '@docusaurus/Link';
7+
import { translate } from '@docusaurus/Translate';
8+
import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
9+
10+
import styles from './styles.module.css';
11+
12+
function BreadcrumbsItemLink({
13+
children,
14+
href,
15+
isLast,
16+
}: {
17+
children: React.ReactNode;
18+
href: string | undefined;
19+
isLast: boolean;
20+
}) {
21+
const className = 'breadcrumbs__link';
22+
if (isLast) {
23+
return (
24+
<span className={className} itemProp="name">
25+
{children}
26+
</span>
27+
);
28+
}
29+
return href ? (
30+
<Link className={className} href={href} itemProp="item">
31+
<span itemProp="name">{children}</span>
32+
</Link>
33+
) : (
34+
<span className={className}>{children}</span>
35+
);
36+
}
37+
38+
function BreadcrumbsItem({
39+
children,
40+
active,
41+
index,
42+
addMicrodata,
43+
}: {
44+
children: React.ReactNode;
45+
active: boolean;
46+
index: number;
47+
addMicrodata: boolean;
48+
}) {
49+
return (
50+
<li
51+
{...(addMicrodata && {
52+
itemScope: true,
53+
itemProp: 'itemListElement',
54+
itemType: 'https://schema.org/ListItem',
55+
})}
56+
className={clsx('breadcrumbs__item', {
57+
'breadcrumbs__item--active': active,
58+
})}
59+
>
60+
{children}
61+
<meta itemProp="position" content={String(index + 1)} />
62+
</li>
63+
);
64+
}
65+
66+
export default function DocBreadcrumbs(): JSX.Element | null {
67+
const breadcrumbs = useSidebarBreadcrumbs();
68+
const homePageRoute = useHomePageRoute();
69+
if (!breadcrumbs) {
70+
return null;
71+
}
72+
// Drop the top-level sidebar section group (e.g. "Get Started"),
73+
// since it's a visual grouping and has no destination page.
74+
const visibleBreadcrumbs = breadcrumbs.length > 1 ? breadcrumbs.slice(1) : breadcrumbs;
75+
return (
76+
<nav
77+
className={clsx(ThemeClassNames.docs.docBreadcrumbs, styles.breadcrumbsContainer)}
78+
aria-label={translate({
79+
id: 'theme.docs.breadcrumbs.navAriaLabel',
80+
message: 'Breadcrumbs',
81+
description: 'The ARIA label for the breadcrumbs',
82+
})}
83+
>
84+
<ul className="breadcrumbs" itemScope itemType="https://schema.org/BreadcrumbList">
85+
{homePageRoute && <HomeBreadcrumbItem />}
86+
{visibleBreadcrumbs.map((item, idx) => {
87+
const isLast = idx === visibleBreadcrumbs.length - 1;
88+
const href =
89+
item.type === 'category' && (item as any).linkUnlisted ? undefined : (item as any).href;
90+
return (
91+
<BreadcrumbsItem key={idx} active={isLast} index={idx} addMicrodata={!!href}>
92+
<BreadcrumbsItemLink href={href} isLast={isLast}>
93+
{item.label}
94+
</BreadcrumbsItemLink>
95+
</BreadcrumbsItem>
96+
);
97+
})}
98+
</ul>
99+
</nav>
100+
);
101+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.breadcrumbsContainer {
2+
--ifm-breadcrumb-size-multiplier: 0.8;
3+
margin-bottom: 0.8rem;
4+
}

0 commit comments

Comments
 (0)