Skip to content

Commit fe75658

Browse files
yang1666204liyang
yang1666204
and
liyang
authored
[Enhancement]:Optimize navbar (apache#1497)
1. Optimize navbar 2. Fixed the issue that the Community Page language switching function is lost. 3. Remove `技术论坛` 4. Fix the problem of missing url parameters. --------- Co-authored-by: liyang <[email protected]>
1 parent 5f78d78 commit fe75658

File tree

8 files changed

+282
-255
lines changed

8 files changed

+282
-255
lines changed

‎docusaurus.config.js

+43-111
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ const config = {
195195
explicitSearchResultPath: true,
196196
searchBarShortcut: true,
197197
searchBarShortcutHint: true,
198-
searchResultLimits: 100
198+
searchResultLimits: 100,
199199
},
200200
],
201201
],
@@ -293,61 +293,6 @@ const config = {
293293
type: 'docsVersionDropdown',
294294
position: 'right',
295295
},
296-
// {
297-
// label: '快速开始',
298-
// position: 'left',
299-
// // to: '/docs/gettingStarted/what-is-new',
300-
// type: 'doc',
301-
// docId: 'gettingStarted/what-is-new',
302-
// activeBaseRegex: 'what-is-new|what-is-apache-doris|quick-start|tutorials',
303-
// },
304-
// {
305-
// label: '使用指南',
306-
// position: 'left',
307-
// // to: '/docs/install/source-install/compilation-with-docker',
308-
// type: 'doc',
309-
// docId: 'install/source-install/compilation-with-docker',
310-
// activeBaseRegex:
311-
// 'summary|install/cluster-deployment|install/source-install|db-connect|table-design|data-operate|query|lakehouse|compute-storage-decoupled|admin-manual|practical-guide|sql-manual',
312-
// },
313-
// {
314-
// label: '性能测试',
315-
// position: 'left',
316-
// // to: '/docs/benchmark/ssb',
317-
// type: 'doc',
318-
// docId: 'benchmark/ssb',
319-
// activeBaseRegex: 'benchmark',
320-
// },
321-
// {
322-
// label: '生态工具',
323-
// position: 'left',
324-
// // to: '/docs/ecosystem/spark-doris-connector',
325-
// type: 'doc',
326-
// docId: 'ecosystem/spark-doris-connector',
327-
// activeBaseRegex: 'ecosystem',
328-
// },
329-
// {
330-
// label: '常见问题',
331-
// position: 'left',
332-
// // to: '/docs/faq/install-faq',
333-
// type: 'doc',
334-
// docId: 'faq/install-faq',
335-
// activeBaseRegex: 'faq',
336-
// },
337-
// {
338-
// label: '版本发布',
339-
// position: 'left',
340-
// // to: '/docs/releasenotes/all-release',
341-
// type: 'doc',
342-
// docId: 'releasenotes/all-release',
343-
// activeBaseRegex: 'releasenotes',
344-
// },
345-
// {
346-
// type: 'html',
347-
// position: 'left',
348-
// value: `<a href="https://ask.selectdb.com/" target="_blank" style="display: flex; align-items: center; justify-content: center; text-decoration: none">技术论坛<img style="width: 1.2rem; height: 1.2rem; margin-left: 0.2rem;font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;" src="/images/forum-logo.svg">
349-
// </a>`,
350-
// },
351296
],
352297
},
353298
docNavbarEN: {
@@ -370,61 +315,48 @@ const config = {
370315
type: 'docsVersionDropdown',
371316
position: 'right',
372317
},
373-
// {
374-
// label: 'Getting Started',
375-
// position: 'left',
376-
// // to: '/docs/gettingStarted/what-is-new',
377-
// type: 'doc',
378-
// docId: 'gettingStarted/what-is-new',
379-
// activeBaseRegex: 'what-is-new|what-is-apache-doris|quick-start|tutorials',
380-
// },
381-
// {
382-
// label: 'Guides',
383-
// position: 'left',
384-
// // to: '/docs/install/source-install/compilation-with-docker',
385-
// type: 'doc',
386-
// docId: 'install/source-install/compilation-with-docker',
387-
// activeBaseRegex:
388-
// 'summary|install/cluster-deployment|install/source-install|db-connect|table-design|data-operate|query|lakehouse|compute-storage-decoupled|admin-manual|practical-guide|sql-manual',
389-
// },
390-
// {
391-
// label: 'Benchmark',
392-
// position: 'left',
393-
// // to: '/docs/benchmark/ssb',
394-
// type: 'doc',
395-
// docId: 'benchmark/ssb',
396-
// activeBaseRegex: 'benchmark',
397-
// },
398-
// {
399-
// label: 'Ecosystem',
400-
// position: 'left',
401-
// // to: '/docs/ecosystem/spark-doris-connector',
402-
// type: 'doc',
403-
// docId: 'ecosystem/spark-doris-connector',
404-
// activeBaseRegex: 'ecosystem',
405-
// },
406-
// {
407-
// label: 'FAQ',
408-
// position: 'left',
409-
// // to: '/docs/faq/install-faq',
410-
// type: 'doc',
411-
// docId: 'faq/install-faq',
412-
// activeBaseRegex: 'faq',
413-
// },
414-
// {
415-
// label: 'Releases',
416-
// position: 'left',
417-
// // to: '/docs/releasenotes/all-release',
418-
// type: 'doc',
419-
// docId: 'releasenotes/all-release',
420-
// activeBaseRegex: 'releasenotes',
421-
// },
422-
// {
423-
// type: 'html',
424-
// position: 'left',
425-
// value: `<a href="https://github.com/apache/doris/discussions" target="_blank" style="display: flex; align-items: center; justify-content: center; text-decoration: none;">Forum<img style="width: 1.2rem; height: 1.2rem; margin-left: 0.2rem;" src="/images/forum-logo.svg">
426-
// </a>`,
427-
// },
318+
],
319+
},
320+
communityNavbar: {
321+
title: '',
322+
logo: {
323+
alt: 'Apache Doris',
324+
src: logoImg,
325+
},
326+
items: [
327+
{
328+
position: 'left',
329+
label: 'Docs',
330+
to: '/docs/gettingStarted/what-is-new',
331+
target: '_blank',
332+
},
333+
{ to: '/blog', label: 'Blog', position: 'left' },
334+
{ to: '/users', label: 'Users', position: 'left' },
335+
{
336+
label: 'Discussions',
337+
to: 'https://github.com/apache/doris/discussions',
338+
position: 'left',
339+
},
340+
{
341+
label: 'Ecosystem',
342+
to: '/ecosystem/cluster-management',
343+
position: 'left',
344+
},
345+
{
346+
label: 'Community',
347+
to: '/community/join-community',
348+
position: 'left',
349+
},
350+
{
351+
href: '/download',
352+
className: 'header-right-button-primary navbar-download-mobile',
353+
label: 'Download',
354+
position: 'right',
355+
},
356+
{
357+
type: 'localeDropdown',
358+
position: 'right',
359+
},
428360
],
429361
},
430362
footer: {

‎src/scss/common.scss

-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
.docs-wrapper {
2-
.navbar__inner {
3-
.navbar__items--right {
4-
.header-right-button-github,
5-
.header-right-button-slack {
6-
display: none;
7-
}
8-
}
9-
}
10-
.navbar__bottom {
11-
display: none;
12-
}
13-
}
14-
151
@media screen and (max-width: 996px) {
162
.docs-wrapper {
173
.navbar__inner {

‎src/theme/Layout/index.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,12 @@ export default function Layout(props: Props): JSX.Element {
2929
if (
3030
history.location.pathname?.length > 1 &&
3131
history.location.pathname[history.location.pathname.length - 1] === '/'
32-
)
33-
history.replace(history.location.pathname.slice(0, -1));
34-
}, []);
32+
){
33+
const params = location.href.split(history.location.pathname)[1];
34+
history.replace(history.location.pathname.slice(0, -1) + params);
35+
}
36+
37+
}, [history.location]);
3538

3639
return (
3740
<LayoutProvider>

‎src/theme/Navbar/Content/components/NavbarCommon.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useEffect, useState } from 'react';
2+
import { useThemeConfig } from '@docusaurus/theme-common';
3+
import { splitNavbarItems } from '@docusaurus/theme-common/internal';
4+
import NavbarLogo from '@theme/Navbar/Logo';
5+
import Link from '@docusaurus/Link';
6+
import Translate from '@docusaurus/Translate';
7+
import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem';
8+
9+
import { NavbarItems } from '..';
10+
import styles from '../styles.module.css';
11+
12+
function useNavbarItems() {
13+
return useThemeConfig().navbar.items as NavbarItemConfig[];
14+
}
15+
16+
export const NavbarCommonLeft = () => {
17+
const items = useNavbarItems();
18+
const [leftItems] = splitNavbarItems(items);
19+
20+
return (
21+
<div className={`navbar-left `}>
22+
<div className="navbar-logo-wrapper flex items-center">
23+
<NavbarLogo />
24+
</div>
25+
<div className={`${styles.navbarLeftToc}`}>
26+
<NavbarItems items={leftItems} />
27+
</div>
28+
</div>
29+
);
30+
};
31+
32+
interface NavbarCommonRightProps {
33+
star: string;
34+
}
35+
36+
export const NavbarCommonRight = ({ star }: NavbarCommonRightProps) => {
37+
const items = useNavbarItems();
38+
const [, rightItems] = splitNavbarItems(items);
39+
40+
return (
41+
<>
42+
<NavbarItems items={rightItems} />
43+
<Link
44+
className="github-btn desktop header-right-button-github"
45+
href="https://github.com/apache/doris"
46+
target="_blank"
47+
>
48+
{star && <div className="gh-count">{star}k</div>}
49+
</Link>
50+
<Link
51+
className="slack-btn desktop header-right-button-slack"
52+
href="https://join.slack.com/t/apachedoriscommunity/shared_invite/zt-2unfw3a3q-MtjGX4pAd8bCGC1UV0sKcw"
53+
target="_blank"
54+
></Link>
55+
</>
56+
);
57+
};

‎src/theme/Navbar/Content/components/NavbarCommunity.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { useThemeConfig } from '@docusaurus/theme-common';
3+
import { splitNavbarItems } from '@docusaurus/theme-common/internal';
4+
import NavbarLogo from '@theme/Navbar/Logo';
5+
import { type Props as NavbarItemConfig } from '@theme/NavbarItem';
6+
7+
import { getNavItem } from '..';
8+
import { NavbarItems } from '..';
9+
import LocaleDropdownNavbarItem from '../../../NavbarItem/LocaleDropdownNavbarItem';
10+
import styles from '../styles.module.css';
11+
12+
function useNavbarItems() {
13+
return useThemeConfig().communityNavbar.items as NavbarItemConfig[];
14+
}
15+
16+
export const NavbarCommunityLeft = () => {
17+
const items = useNavbarItems();
18+
const [leftItems] = splitNavbarItems(items);
19+
return (
20+
<div className={`navbar-left `}>
21+
<div className="navbar-logo-wrapper flex items-center">
22+
<NavbarLogo />
23+
</div>
24+
<div className={`${styles.navbarLeftToc}`}>
25+
<NavbarItems items={leftItems} />
26+
</div>
27+
</div>
28+
);
29+
};
30+
31+
export const NavbarCommunityRight = () => {
32+
const items = useNavbarItems();
33+
const [, rightItems] = splitNavbarItems(items);
34+
return <NavbarItems items={rightItems} />;
35+
};
36+
37+
export const NavbarCommunityBottom = () => {
38+
const items = useNavbarItems();
39+
return (
40+
<div className="docs-nav-version-locale">
41+
<LocaleDropdownNavbarItem mobile={false} {...getNavItem(items, 'localeDropdown')} />
42+
</div>
43+
);
44+
};

‎src/theme/Navbar/Content/components/NavbarDocs.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import styles from '../styles.module.css';
2+
import React, { useState, useEffect } from 'react';
3+
import { useLocation } from '@docusaurus/router';
4+
import { useThemeConfig } from '@docusaurus/theme-common';
5+
import { splitNavbarItems } from '@docusaurus/theme-common/internal';
6+
import DocsLogoNew from '@site/static/images/doc-logo-new.svg';
7+
import DocsLogoZH from '@site/static/images/doc-logo-zh.svg';
8+
import LocaleDropdownNavbarItem from '../../../NavbarItem/LocaleDropdownNavbarItem';
9+
import DocsVersionDropdownNavbarItem from '../../../NavbarItem/DocsVersionDropdownNavbarItem';
10+
import { NavbarItems,getNavItem } from '..';
11+
12+
interface NavbarDocsProps {
13+
isEN: boolean;
14+
}
15+
16+
export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) => {
17+
const [currentVersion, setCurrentVersion] = useState('');
18+
const location = useLocation();
19+
const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items;
20+
const [leftDocItems] = splitNavbarItems(docItems);
21+
useEffect(() => {
22+
const secPath = location.pathname.includes('zh-CN/docs')
23+
? location.pathname.split('/')[3]
24+
: location.pathname.split('/')[2];
25+
if (location.pathname.includes('docs') && ['dev', '2.1', '2.0', '1.2'].includes(secPath)) {
26+
setCurrentVersion(secPath);
27+
} else {
28+
setCurrentVersion('');
29+
}
30+
}, [typeof window !== 'undefined' && location.pathname]);
31+
return (
32+
<div className={`navbar-left `}>
33+
<div className="navbar-logo-wrapper flex items-center">
34+
<div
35+
className="cursor-pointer docs"
36+
onClick={() => {
37+
window.location.href = `${isEN ? '' : '/zh-CN'}/docs${
38+
currentVersion === '' ? '' : `/${currentVersion}`
39+
}/gettingStarted/what-is-new`;
40+
}}
41+
>
42+
{isEN ? <DocsLogoNew /> : <DocsLogoZH />}
43+
</div>
44+
</div>
45+
<div className={`${styles.navbarLeftToc}`}>
46+
<NavbarItems items={leftDocItems} isDocsPage={true} />
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) => {
53+
const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items;
54+
const [, rightDocItems] = splitNavbarItems(docItems);
55+
return <NavbarItems items={rightDocItems} />;
56+
};
57+
58+
export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps) => {
59+
const docItems = isEN ? useThemeConfig().docNavbarEN.items : useThemeConfig().docNavbarZH.items;
60+
const [, rightDocItems] = splitNavbarItems(docItems);
61+
return (
62+
<div className="docs-nav-version-locale">
63+
{/* getNavItem? */}
64+
<LocaleDropdownNavbarItem mobile={false} {...(getNavItem(rightDocItems,'localeDropdown') as any)} />
65+
<DocsVersionDropdownNavbarItem
66+
mobile={false}
67+
docsPluginId="default"
68+
{...(getNavItem(rightDocItems,'docsVersionDropdown') as any)}
69+
/>
70+
</div>
71+
);
72+
};

0 commit comments

Comments
 (0)