This is an automated email from the ASF dual-hosted git repository.
jeffreyh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new fcb4a82eb4 [feat]:searchbar in mobile (#1517)
fcb4a82eb4 is described below
commit fcb4a82eb4f09783e0c80380d9ff02ccd2e7d707
Author: yangon <2689991...@qq.com>
AuthorDate: Fri Dec 13 16:08:02 2024 +0800
[feat]:searchbar in mobile (#1517)
---------
Co-authored-by: liyang <liy...@selectdb.com>
---
src/scss/common.scss | 1 -
src/scss/components/navbar.scss | 2 +-
src/scss/components/search.scss | 3 -
src/theme/Layout/index.tsx | 64 +++--
src/theme/Navbar/Content/components/NavbarDocs.tsx | 35 ++-
src/theme/Navbar/Content/index.tsx | 19 +-
src/theme/Navbar/Layout/index.tsx | 5 +-
src/theme/Navbar/MobileSidebar/Layout/index.tsx | 40 +--
src/theme/Navbar/MobileSidebar/Layout/style.scss | 25 ++
src/theme/Navbar/Search/index.tsx | 2 +-
src/theme/Navbar/Search/styles.module.css | 9 +-
src/theme/SearchBar/SearchBar.jsx | 305 +++++++++++----------
src/theme/SearchBar/SearchBar.module.css | 17 +-
start-docs.sh | 65 -----
static/images/icon/close.svg | 6 +
worker.js | 7 -
16 files changed, 319 insertions(+), 286 deletions(-)
diff --git a/src/scss/common.scss b/src/scss/common.scss
index d675602913..bfa4a29cd0 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -2,7 +2,6 @@
.docs-wrapper {
.navbar__inner {
.navbar__items--right {
- .docs-search,
.custom-navbar-item {
display: none;
}
diff --git a/src/scss/components/navbar.scss b/src/scss/components/navbar.scss
index 0680fc9201..12588c4c46 100644
--- a/src/scss/components/navbar.scss
+++ b/src/scss/components/navbar.scss
@@ -328,7 +328,7 @@
height: 3.75rem;
&.docs,
&.community {
- height: 8.1rem;
+ height: 6.5rem;
flex-direction: column;
.navbar__inner {
height: 3.75rem;
diff --git a/src/scss/components/search.scss b/src/scss/components/search.scss
index d8a739112f..2864f134ba 100644
--- a/src/scss/components/search.scss
+++ b/src/scss/components/search.scss
@@ -56,9 +56,6 @@ p[class*='searchResultItemSummary'] {
}
@media screen and (max-width: 996px) {
- .docs-search {
- display: none;
- }
.docs-subnav-searchbar {
.navbar-search {
position: relative !important;
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index 8fdbac9145..a9c3a379a5 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, createContext, useContext, useState, useRef } from
'react';
import clsx from 'clsx';
import ErrorBoundary from '@docusaurus/ErrorBoundary';
import { PageMetadata, SkipToContentFallbackId, ThemeClassNames } from
'@docusaurus/theme-common';
@@ -9,10 +9,19 @@ import Navbar from '@theme/Navbar';
import Footer from '@theme/Footer';
import LayoutProvider from '@theme/Layout/Provider';
import ErrorPageContent from '@theme/ErrorPageContent';
+import NavbarSearch from '../Navbar/Search';
+import SearchBar from '@theme/SearchBar';
import type { Props } from '@theme/Layout';
import styles from './styles.module.css';
import { useHistory } from '@docusaurus/router';
+interface DataType {
+ showSearchPageMobile: boolean;
+ setShowSearchPageMobile: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const DataContext = createContext<DataType>(null);
+
export default function Layout(props: Props): JSX.Element {
const {
children,
@@ -23,37 +32,54 @@ export default function Layout(props: Props): JSX.Element {
description,
} = props;
const history = useHistory();
+ const [showSearchPageMobile, setShowSearchPageMobile] = useState(false);
+ const searchPageDom = useRef<HTMLDivElement>(null);
useKeyboardNavigation();
useEffect(() => {
if (
history.location.pathname?.length > 1 &&
history.location.pathname[history.location.pathname.length - 1]
=== '/'
- ){
+ ) {
const params = location.href.split(history.location.pathname)[1];
history.replace(history.location.pathname.slice(0, -1) + params);
}
-
}, [history.location]);
- return (
- <LayoutProvider>
- <PageMetadata title={title} description={description} />
-
- <SkipToContent />
-
- <AnnouncementBar />
+ useEffect(() => {
+ if (showSearchPageMobile) {
+ window.scroll(0, 0);
+ document.body.style.overflow = 'hidden';
+ searchPageDom.current.style.height = '100vh';
+ searchPageDom.current.style.display = 'block';
+ } else {
+ searchPageDom.current.style.display = 'none';
+ document.body.style.overflow = 'auto';
+ }
+ }, [showSearchPageMobile]);
- <Navbar />
+ return (
+ <DataContext.Provider value={{ showSearchPageMobile,
setShowSearchPageMobile }}>
+ <LayoutProvider>
+ <PageMetadata title={title} description={description} />
- <div
- id={SkipToContentFallbackId}
- className={clsx(ThemeClassNames.wrapper.main,
styles.mainWrapper, wrapperClassName)}
- >
- <ErrorBoundary fallback={params => <ErrorPageContent
{...params} />}>{children}</ErrorBoundary>
- </div>
+ <SkipToContent />
+ <AnnouncementBar />
+ <Navbar />
+ <div ref={searchPageDom}>
+ <NavbarSearch>
+ <SearchBar />
+ </NavbarSearch>
+ </div>
+ <div
+ id={SkipToContentFallbackId}
+ className={clsx(ThemeClassNames.wrapper.main,
styles.mainWrapper, wrapperClassName)}
+ >
+ <ErrorBoundary fallback={params => <ErrorPageContent
{...params} />}>{children}</ErrorBoundary>
+ </div>
- {!noFooter && <Footer />}
- </LayoutProvider>
+ {!noFooter && <Footer />}
+ </LayoutProvider>
+ </DataContext.Provider>
);
}
diff --git a/src/theme/Navbar/Content/components/NavbarDocs.tsx
b/src/theme/Navbar/Content/components/NavbarDocs.tsx
index d2f42b2e54..8bbf8e29a8 100644
--- a/src/theme/Navbar/Content/components/NavbarDocs.tsx
+++ b/src/theme/Navbar/Content/components/NavbarDocs.tsx
@@ -1,13 +1,17 @@
import styles from '../styles.module.css';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
import { useLocation } from '@docusaurus/router';
import { useThemeConfig } from '@docusaurus/theme-common';
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
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 '..';
+import { NavbarItems, getNavItem } from '..';
+import SearchIcon from '@site/static/images/search-icon.svg';
+import CloseIcon from '@site/static/images/icon/close.svg';
+import { DataContext } from '../../../Layout';
interface NavbarDocsProps {
isEN: boolean;
@@ -52,7 +56,27 @@ export const NavbarDocsLeft = ({ isEN }: NavbarDocsProps) =>
{
export const NavbarDocsRight = ({ isEN }: NavbarDocsProps) => {
const docItems = isEN ? useThemeConfig().docNavbarEN.items :
useThemeConfig().docNavbarZH.items;
const [, rightDocItems] = splitNavbarItems(docItems);
- return <NavbarItems items={rightDocItems} />;
+ const { showSearchPageMobile, setShowSearchPageMobile } =
useContext(DataContext);
+
+ const mobileSidebar = useNavbarMobileSidebar();
+ return (
+ <>
+ {showSearchPageMobile ? (
+ <span onClick={() => setShowSearchPageMobile(false)}>
+ <CloseIcon />
+ </span>
+ ) : (
+ <>
+ {mobileSidebar.shouldRender ? (
+ <span className='mr-2' onClick={() =>
setShowSearchPageMobile(true)}>
+ <SearchIcon />
+ </span>
+ ) : null}
+ <NavbarItems items={[...rightDocItems]} />
+ </>
+ )}
+ </>
+ );
};
export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps) => {
@@ -61,11 +85,12 @@ export const NavbarDocsBottom = ({ isEN }: NavbarDocsProps)
=> {
return (
<div className="docs-nav-version-locale">
{/* getNavItem? */}
- <LocaleDropdownNavbarItem mobile={false}
{...(getNavItem(rightDocItems,'localeDropdown') as any)} />
+
+ <LocaleDropdownNavbarItem mobile={false}
{...(getNavItem(rightDocItems, 'localeDropdown') as any)} />
<DocsVersionDropdownNavbarItem
mobile={false}
docsPluginId="default"
- {...(getNavItem(rightDocItems,'docsVersionDropdown') as any)}
+ {...(getNavItem(rightDocItems, 'docsVersionDropdown') as any)}
/>
</div>
);
diff --git a/src/theme/Navbar/Content/index.tsx
b/src/theme/Navbar/Content/index.tsx
index 1bd2761396..21dbba7cb8 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/src/theme/Navbar/Content/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, type ReactNode } from 'react';
+import React, { useState, useEffect, useContext, type ReactNode } from 'react';
import { ErrorCauseBoundary } from '@docusaurus/theme-common';
import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
import NavbarItem, { type Props as NavbarItemConfig } from '@theme/NavbarItem';
@@ -10,6 +10,7 @@ import Translate from '@docusaurus/Translate';
import { NavbarDocsLeft, NavbarDocsRight, NavbarDocsBottom } from
'./components/NavbarDocs';
import { NavbarCommunityLeft, NavbarCommunityBottom, NavbarCommunityRight }
from './components/NavbarCommunity';
import { NavbarCommonLeft, NavbarCommonRight } from
'./components/NavbarCommon';
+import { DataContext } from '../../Layout';
import styles from './styles.module.css';
@@ -49,12 +50,10 @@ function NavbarContentLayout({
left,
right,
bottom,
- isDocsPage = false,
}: {
left: ReactNode;
right: ReactNode;
bottom: ReactNode;
- isDocsPage: boolean;
}) {
const [isEN, setIsEN] = useState(true);
useEffect(() => {
@@ -68,17 +67,19 @@ function NavbarContentLayout({
<div className="navbar__items">{left}</div>
<div className="navbar__items
navbar__items--right">{right}</div>
</div>
- <div className="navbar__bottom">{bottom}</div>
+ {bottom && <div className="navbar__bottom">{bottom}</div>}
</>
);
}
-export default function NavbarContent(): JSX.Element {
+export default function NavbarContent(): ReactNode {
const [currentNavbar, setCurrentNavbar] = useState(NavBar.DOCS);
const mobileSidebar = useNavbarMobileSidebar();
+ const { showSearchPageMobile } = useContext(DataContext);
const location = useLocation();
+
const [isEN, setIsEN] = useState(true);
- const [star, setStar] = useState<string>();
+ const [star, setStar] = useState<string>('');
async function getGithubStar() {
try {
@@ -119,6 +120,7 @@ export default function NavbarContent(): JSX.Element {
bottom: null,
},
};
+
useEffect(() => {
if (typeof window !== 'undefined') {
const pathname = location.pathname.split('/')[1];
@@ -140,11 +142,10 @@ export default function NavbarContent(): JSX.Element {
return (
<NavbarContentLayout
left={NavbarTypes[currentNavbar].left}
- isDocsPage={currentNavbar === NavBar.DOCS}
right={
<>
- {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
{NavbarTypes[currentNavbar].right}
+ {!mobileSidebar.disabled && !showSearchPageMobile &&
<NavbarMobileSidebarToggle />}
<NavbarColorModeToggle className={styles.colorModeToggle}
/>
<Link className="header-right-button-primary
navbar-download-desktop" to="/download">
<Translate id="navbar.download">
@@ -155,7 +156,7 @@ export default function NavbarContent(): JSX.Element {
</Link>
</>
}
- bottom={NavbarTypes[currentNavbar].bottom}
+ bottom={!showSearchPageMobile ? NavbarTypes[currentNavbar].bottom
: null}
/>
);
}
diff --git a/src/theme/Navbar/Layout/index.tsx
b/src/theme/Navbar/Layout/index.tsx
index cac5c65760..35cae3f946 100644
--- a/src/theme/Navbar/Layout/index.tsx
+++ b/src/theme/Navbar/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, type ComponentProps } from 'react';
+import React, { useState, useEffect, useContext, type ComponentProps } from
'react';
import clsx from 'clsx';
import { useThemeConfig } from '@docusaurus/theme-common';
import { useHideableNavbar, useNavbarMobileSidebar } from
'@docusaurus/theme-common/internal';
@@ -7,6 +7,7 @@ import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
import type { Props } from '@theme/Navbar/Layout';
import useIsDocPage from '@site/src/hooks/use-is-doc';
import styles from './styles.module.css';
+import { DataContext } from '../../Layout';
function NavbarBackdrop(props: ComponentProps<'div'>) {
return <div role="presentation" {...props}
className={clsx('navbar-sidebar__backdrop', props.className)} />;
@@ -16,6 +17,7 @@ export default function NavbarLayout({ children }: Props):
JSX.Element {
const {
navbar: { hideOnScroll, style },
} = useThemeConfig();
+ const { showSearchPageMobile } = useContext(DataContext);
const mobileSidebar = useNavbarMobileSidebar();
const [isDocsPage] = useIsDocPage(false);
const [isCommunity, setIsCommunity] = useState(false);
@@ -44,6 +46,7 @@ export default function NavbarLayout({ children }: Props):
JSX.Element {
message: 'Main',
description: 'The ARIA label for the main navigation',
})}
+ style={showSearchPageMobile ? { height: '3.75rem' } : {}}
className={clsx(
'navbar',
'navbar--fixed-top',
diff --git a/src/theme/Navbar/MobileSidebar/Layout/index.tsx
b/src/theme/Navbar/MobileSidebar/Layout/index.tsx
index 6107f5105c..9f9452459e 100644
--- a/src/theme/Navbar/MobileSidebar/Layout/index.tsx
+++ b/src/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -1,24 +1,24 @@
import React from 'react';
import clsx from 'clsx';
-import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
-import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
+import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal';
+import type { Props } from '@theme/Navbar/MobileSidebar/Layout';
+import './style.scss';
-export default function NavbarMobileSidebarLayout({
- header,
- primaryMenu,
- secondaryMenu,
-}: Props): JSX.Element {
- const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
- return (
- <div className="navbar-sidebar">
- {header}
- <div
- className={clsx('navbar-sidebar__items', {
- 'navbar-sidebar__items--show-secondary': secondaryMenuShown,
- })}>
- <div className="navbar-sidebar__item menu">{primaryMenu}</div>
- <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
- </div>
- </div>
- );
+export default function NavbarMobileSidebarLayout({ header, primaryMenu,
secondaryMenu }: Props): JSX.Element {
+ const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
+ return (
+ <div className="navbar-sidebar navbar-sidebar-container">
+ {header}
+ <div
+ className={clsx('navbar-sidebar__items', {
+ 'navbar-sidebar__items--show-secondary':
secondaryMenuShown,
+ })}
+ >
+ <div className={clsx('navbar-sidebar__item',
'menu','primary-menu')}>{primaryMenu}</div>
+ <div className={clsx('navbar-sidebar__item', 'menu',
'secondary-menu')}>
+ {secondaryMenu}
+ </div>
+ </div>
+ </div>
+ );
}
diff --git a/src/theme/Navbar/MobileSidebar/Layout/style.scss
b/src/theme/Navbar/MobileSidebar/Layout/style.scss
new file mode 100644
index 0000000000..bc088654d0
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/Layout/style.scss
@@ -0,0 +1,25 @@
+.navbar-sidebar-container {
+ width: 100vw;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100vh;
+ transform: translateY(-100%);
+ position: fixed;
+ background-color: #fff;
+ z-index: 1000;
+ transition: transform 0.3s ease-in-out;
+ overflow-y: auto;
+}
+
+.navbar-sidebar-container--open {
+ transform: translateY(0);
+}
+
+.primary-menu,
+.secondary-menu {
+ width: 100vw;
+}
+.navbar-sidebar__items--show-secondary {
+ transform: translate3d(-100vw, 0, 0);
+}
diff --git a/src/theme/Navbar/Search/index.tsx
b/src/theme/Navbar/Search/index.tsx
index 788b3f1cd4..8b6b351ef2 100644
--- a/src/theme/Navbar/Search/index.tsx
+++ b/src/theme/Navbar/Search/index.tsx
@@ -7,7 +7,7 @@ import styles from './styles.module.css';
export default function NavbarSearch({
children,
className,
-}: Props): JSX.Element {
+}: Props): React.ReactElement {
return (
<div className={clsx(className, styles.navbarSearchContainer)}>
{children}
diff --git a/src/theme/Navbar/Search/styles.module.css
b/src/theme/Navbar/Search/styles.module.css
index 8edec9594b..a9c2077261 100644
--- a/src/theme/Navbar/Search/styles.module.css
+++ b/src/theme/Navbar/Search/styles.module.css
@@ -8,15 +8,12 @@ See https://github.com/facebook/docusaurus/pull/9385
@media (max-width: 996px) {
.navbarSearchContainer {
- display: none;
- /* position: absolute;
- right: var(--ifm-navbar-padding-horizontal); */
+ padding: 1.5rem;
}
}
@media (min-width: 997px) {
.navbarSearchContainer {
- padding: var(--ifm-navbar-item-padding-vertical)
- var(--ifm-navbar-item-padding-horizontal);
+ padding: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
}
-}
+}
\ No newline at end of file
diff --git a/src/theme/SearchBar/SearchBar.jsx
b/src/theme/SearchBar/SearchBar.jsx
index 7158c9d2ae..8051f3452e 100644
--- a/src/theme/SearchBar/SearchBar.jsx
+++ b/src/theme/SearchBar/SearchBar.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState, useContext } from
'react';
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useIsBrowser from '@docusaurus/useIsBrowser';
@@ -25,6 +25,7 @@ import { VERSIONS, DEFAULT_VERSION } from
'@site/src/constant/common';
import styles from './SearchBar.module.css';
import { normalizeContextByPath } from '../../utils/normalizeContextByPath';
import useIsDocPage from '@site/src/hooks/use-is-doc';
+import { DataContext } from '../Layout';
async function fetchAutoCompleteJS() {
const autoCompleteModule = await import('@easyops-cn/autocomplete.js');
const autoComplete = autoCompleteModule.default;
@@ -42,6 +43,7 @@ export default function SearchBar({ handleSearchBarToggle }) {
const isBrowser = useIsBrowser();
const [curVersion, setCurVersion] = useState(DEFAULT_VERSION);
const location = useLocation();
+ const { setShowSearchPageMobile } = useContext(DataContext);
const {
siteConfig: { baseUrl },
i18n: { currentLocale },
@@ -126,155 +128,159 @@ export default function SearchBar({
handleSearchBarToggle }) {
setSearchContext(nextSearchContext);
}, [location.pathname, versionUrl]);
const hidden = !!hideSearchBarWithNoSearchContext &&
Array.isArray(searchContextByPaths) && searchContext === '';
- const loadIndex = useCallback(async (forceLoad = false) => {
- if (hidden || indexStateMap.current.get(searchContext) && !forceLoad) {
- // Do not load the index (again) if its already loaded or in the
process of being loaded.
- return;
- }
- indexStateMap.current.set(searchContext, 'loading');
- search.current?.autocomplete.destroy();
- setLoading(true);
- const [autoComplete] = await Promise.all([
- fetchAutoCompleteJS(),
- fetchIndexesByWorker(versionUrl, searchContext),
- ]);
- const searchFooterLinkElement = ({ query, isEmpty }) => {
- const a = document.createElement('a');
- const params = new URLSearchParams();
- params.set('q', query);
- let linkText;
- if (searchContext) {
- const detailedSearchContext =
- searchContext && Array.isArray(searchContextByPaths)
- ? searchContextByPaths.find(item =>
- typeof item === 'string' ? item ===
searchContext : item.path === searchContext,
- )
+ const loadIndex = useCallback(
+ async (forceLoad = false) => {
+ if (hidden || (indexStateMap.current.get(searchContext) &&
!forceLoad)) {
+ // Do not load the index (again) if its already loaded or in
the process of being loaded.
+ return;
+ }
+ indexStateMap.current.set(searchContext, 'loading');
+ search.current?.autocomplete.destroy();
+ setLoading(true);
+ const [autoComplete] = await Promise.all([
+ fetchAutoCompleteJS(),
+ fetchIndexesByWorker(versionUrl, searchContext),
+ ]);
+ const searchFooterLinkElement = ({ query, isEmpty }) => {
+ const a = document.createElement('a');
+ const params = new URLSearchParams();
+ params.set('q', query);
+ let linkText;
+ if (searchContext) {
+ const detailedSearchContext =
+ searchContext && Array.isArray(searchContextByPaths)
+ ? searchContextByPaths.find(item =>
+ typeof item === 'string' ? item ===
searchContext : item.path === searchContext,
+ )
+ : searchContext;
+ const translatedSearchContext = detailedSearchContext
+ ? normalizeContextByPath(detailedSearchContext,
currentLocale).label
: searchContext;
- const translatedSearchContext = detailedSearchContext
- ? normalizeContextByPath(detailedSearchContext,
currentLocale).label
- : searchContext;
- if (useAllContextsWithNoSearchContext && isEmpty) {
- linkText = translate(
- {
- id: 'theme.SearchBar.seeAllOutsideContext',
- message: 'See all results outside "{context}"',
- },
- { context: translatedSearchContext },
- );
+ if (useAllContextsWithNoSearchContext && isEmpty) {
+ linkText = translate(
+ {
+ id: 'theme.SearchBar.seeAllOutsideContext',
+ message: 'See all results outside "{context}"',
+ },
+ { context: translatedSearchContext },
+ );
+ } else {
+ linkText = translate(
+ {
+ id: 'theme.SearchBar.searchInContext',
+ message: 'See all results within "{context}"',
+ },
+ { context: translatedSearchContext },
+ );
+ }
} else {
- linkText = translate(
- {
- id: 'theme.SearchBar.searchInContext',
- message: 'See all results within "{context}"',
- },
- { context: translatedSearchContext },
- );
+ linkText = translate({
+ id: 'theme.SearchBar.seeAll',
+ message: 'See all results',
+ });
}
- } else {
- linkText = translate({
- id: 'theme.SearchBar.seeAll',
- message: 'See all results',
- });
- }
- if (
- searchContext &&
- Array.isArray(searchContextByPaths) &&
- (!useAllContextsWithNoSearchContext || !isEmpty)
- ) {
- params.set('ctx', searchContext);
- }
- if (versionUrl !== baseUrl) {
- if (!versionUrl.startsWith(baseUrl)) {
- throw new Error(
- `Version url '${versionUrl}' does not start with base
url '${baseUrl}', this is a bug of \`@easyops-cn/docusaurus-search-local\`,
please report it.`,
- );
+ if (
+ searchContext &&
+ Array.isArray(searchContextByPaths) &&
+ (!useAllContextsWithNoSearchContext || !isEmpty)
+ ) {
+ params.set('ctx', searchContext);
}
- params.set('version', versionUrl.substring(baseUrl.length));
- }
- const url = `${baseUrl}search/?${params.toString()}`;
- a.href = url;
- a.textContent = linkText;
- a.addEventListener('click', e => {
- if (!e.ctrlKey && !e.metaKey) {
- e.preventDefault();
- search.current?.autocomplete.close();
- history.push(url);
+ if (versionUrl !== baseUrl) {
+ if (!versionUrl.startsWith(baseUrl)) {
+ throw new Error(
+ `Version url '${versionUrl}' does not start with
base url '${baseUrl}', this is a bug of
\`@easyops-cn/docusaurus-search-local\`, please report it.`,
+ );
+ }
+ params.set('version',
versionUrl.substring(baseUrl.length));
}
- });
- return a;
- };
- search.current = autoComplete(
- searchBarRef.current,
- {
- hint: false,
- autoselect: true,
- openOnFocus: true,
- cssClasses: {
- root: clsx(styles.searchBar, {
- [styles.searchBarLeft]: searchBarPosition === 'left',
- }),
- noPrefix: true,
- dropdownMenu: styles.dropdownMenu,
- input: styles.input,
- hint: styles.hint,
- suggestions: styles.suggestions,
- suggestion: styles.suggestion,
- cursor: styles.cursor,
- dataset: styles.dataset,
- empty: styles.empty,
- },
- },
- [
+ const url = `${baseUrl}search/?${params.toString()}`;
+ a.href = url;
+ a.textContent = linkText;
+ a.addEventListener('click', e => {
+ setShowSearchPageMobile(false);
+ if (!e.ctrlKey && !e.metaKey) {
+ e.preventDefault();
+ search.current?.autocomplete.close();
+ history.push(url);
+ }
+ });
+ return a;
+ };
+ search.current = autoComplete(
+ searchBarRef.current,
{
- source: async (input, callback) => {
- const result = await searchByWorker(versionUrl,
searchContext, input);
- callback(result);
+ hint: false,
+ autoselect: true,
+ openOnFocus: true,
+ cssClasses: {
+ root: clsx(styles.searchBar, {
+ [styles.searchBarLeft]: searchBarPosition ===
'left',
+ }),
+ noPrefix: true,
+ dropdownMenu: styles.dropdownMenu,
+ input: styles.input,
+ hint: styles.hint,
+ suggestions: styles.suggestions,
+ suggestion: styles.suggestion,
+ cursor: styles.cursor,
+ dataset: styles.dataset,
+ empty: styles.empty,
},
- templates: {
- suggestion: SuggestionTemplate,
- empty: EmptyTemplate,
- footer: ({ query, isEmpty }) => {
- if (isEmpty && (!searchContext ||
!useAllContextsWithNoSearchContext)) {
- return;
- }
- const a = searchFooterLinkElement({ query, isEmpty
});
- const div = document.createElement('div');
- div.className = styles.hitFooter;
- div.appendChild(a);
- return div;
+ },
+ [
+ {
+ source: async (input, callback) => {
+ const result = await searchByWorker(versionUrl,
searchContext, input);
+ callback(result);
+ },
+ templates: {
+ suggestion: SuggestionTemplate,
+ empty: EmptyTemplate,
+ footer: ({ query, isEmpty }) => {
+ if (isEmpty && (!searchContext ||
!useAllContextsWithNoSearchContext)) {
+ return;
+ }
+ const a = searchFooterLinkElement({ query,
isEmpty });
+ const div = document.createElement('div');
+ div.className = styles.hitFooter;
+ div.appendChild(a);
+ return div;
+ },
},
},
- },
- ],
- )
- .on('autocomplete:selected', function (event, { document: { u, h
}, tokens }) {
- searchBarRef.current?.blur();
- let url = u;
- if (Mark && tokens.length > 0) {
- const params = new URLSearchParams();
- for (const token of tokens) {
- params.append(SEARCH_PARAM_HIGHLIGHT, token);
+ ],
+ )
+ .on('autocomplete:selected', function (event, { document: { u,
h }, tokens }) {
+ searchBarRef.current?.blur();
+ let url = u;
+ if (Mark && tokens.length > 0) {
+ const params = new URLSearchParams();
+ for (const token of tokens) {
+ params.append(SEARCH_PARAM_HIGHLIGHT, token);
+ }
+ url += `?${params.toString()}`;
}
- url += `?${params.toString()}`;
- }
- if (h) {
- url += h;
+ if (h) {
+ url += h;
+ }
+ history.push(url);
+ })
+ .on('autocomplete:closed', () => {
+ searchBarRef.current?.blur();
+ });
+ indexStateMap.current.set(searchContext, 'done');
+ setLoading(false);
+ if (focusAfterIndexLoaded.current) {
+ const input = searchBarRef.current;
+ if (input.value) {
+ search.current?.autocomplete.open();
}
- history.push(url);
- })
- .on('autocomplete:closed', () => {
- searchBarRef.current?.blur();
- });
- indexStateMap.current.set(searchContext, 'done');
- setLoading(false);
- if (focusAfterIndexLoaded.current) {
- const input = searchBarRef.current;
- if (input.value) {
- search.current?.autocomplete.open();
+ input.focus();
}
- input.focus();
- }
- }, [hidden, searchContext, versionUrl, baseUrl, history]);
+ },
+ [hidden, searchContext, versionUrl, baseUrl, history],
+ );
useEffect(() => {
if (!Mark) {
return;
@@ -315,6 +321,7 @@ export default function SearchBar({ handleSearchBarToggle
}) {
}, [loadIndex]);
const onInputChange = useCallback(event => {
setInputValue(event.target.value);
+
if (event.target.value) {
setInputChanged(true);
}
@@ -354,6 +361,26 @@ export default function SearchBar({ handleSearchBarToggle
}) {
document.removeEventListener('keydown', handleShortcut);
};
}, [isMac, onInputFocus]);
+ useEffect(() => {
+ if (inputValue) {
+ const inputDoms =
document.getElementsByClassName('navbar__search-input');
+ let inputDom = null;
+ for (let input of inputDoms) {
+ if (input.getAttribute('value')) {
+ inputDom = input;
+ }
+ }
+ if (inputDom) {
+ const suggestionsContainer =
inputDom.parentNode?.lastElementChild?.firstChild;
+ if (suggestionsContainer) {
+ suggestionsContainer.addEventListener('click', () => {
+ setInputValue('');
+ setShowSearchPageMobile(false);
+ });
+ }
+ }
+ }
+ }, [inputValue]);
const onClearSearch = useCallback(() => {
const params = new URLSearchParams(location.search);
@@ -367,7 +394,7 @@ export default function SearchBar({ handleSearchBarToggle
}) {
setInputValue('');
search.current?.autocomplete.setVal('');
}, [location.pathname, location.search, location.hash, history]);
-
+
return (
<div
className={clsx('navbar__search', styles.searchBarContainer, {
diff --git a/src/theme/SearchBar/SearchBar.module.css
b/src/theme/SearchBar/SearchBar.module.css
index c4c0f0f722..b8c8a95507 100644
--- a/src/theme/SearchBar/SearchBar.module.css
+++ b/src/theme/SearchBar/SearchBar.module.css
@@ -21,6 +21,13 @@
}
}
+@media (max-width: 996px) {
+ .searchHintContainer{
+ display: none !important;
+ }
+}
+
+
@media (max-width: 576px) {
:global(.navbar__search-input):not(:focus) {
width: 2rem;
@@ -256,7 +263,7 @@ html[data-theme="dark"] .noResultsIcon {
right: 10x;
top: 50%;
transform: translateY(-50%);
- display: flex !important;
+ display: flex;
align-items: center;
justify-content: center;
padding: 5px 7px;
@@ -294,14 +301,6 @@ html[data-theme="dark"] .noResultsIcon {
box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-500);
}
-@media (max-width: 576px) {
-
- .searchBarContainer:not(.focused) .searchClearButton,
- .searchHintContainer {
- display: none;
- }
-}
-
html[dir="rtl"] .searchHintContainer {
right: auto;
left: 10px;
diff --git a/start-docs.sh b/start-docs.sh
deleted file mode 100755
index 5df8697134..0000000000
--- a/start-docs.sh
+++ /dev/null
@@ -1,65 +0,0 @@
-set -eo pipefail
-
-echo "starting Docs..."
-
-# clone common docs to versioned_docs
-cp -rf benchmark versioned_docs/version-3.0
-cp -rf ecosystem versioned_docs/version-3.0
-cp -rf faq versioned_docs/version-3.0
-cp -rf releasenotes versioned_docs/version-3.0
-cp -rf gettingStarted versioned_docs/version-3.0
-cp -rf benchmark versioned_docs/version-2.1
-cp -rf ecosystem versioned_docs/version-2.1
-cp -rf faq versioned_docs/version-2.1
-cp -rf releasenotes versioned_docs/version-2.1
-cp -rf gettingStarted versioned_docs/version-2.1
-cp -rf benchmark versioned_docs/version-2.0
-cp -rf ecosystem versioned_docs/version-2.0
-cp -rf faq versioned_docs/version-2.0
-cp -rf releasenotes versioned_docs/version-2.0
-cp -rf gettingStarted versioned_docs/version-2.0
-cp -rf benchmark versioned_docs/version-1.2
-cp -rf ecosystem versioned_docs/version-1.2
-cp -rf faq versioned_docs/version-1.2
-cp -rf releasenotes versioned_docs/version-1.2
-cp -rf gettingStarted versioned_docs/version-1.2
-cp -rf benchmark docs
-cp -rf ecosystem docs
-cp -rf faq docs
-cp -rf releasenotes docs
-cp -rf gettingStarted docs
-cp -rf common_docs_zh/benchmark
i18n/zh-CN/docusaurus-plugin-content-docs/current
-cp -rf common_docs_zh/ecosystem
i18n/zh-CN/docusaurus-plugin-content-docs/current
-cp -rf common_docs_zh/faq i18n/zh-CN/docusaurus-plugin-content-docs/current
-cp -rf common_docs_zh/releasenotes
i18n/zh-CN/docusaurus-plugin-content-docs/current
-cp -rf common_docs_zh/gettingStarted
i18n/zh-CN/docusaurus-plugin-content-docs/current
-cp -rf common_docs_zh/benchmark
i18n/zh-CN/docusaurus-plugin-content-docs/version-1.2
-cp -rf common_docs_zh/ecosystem
i18n/zh-CN/docusaurus-plugin-content-docs/version-1.2
-cp -rf common_docs_zh/faq i18n/zh-CN/docusaurus-plugin-content-docs/version-1.2
-cp -rf common_docs_zh/releasenotes
i18n/zh-CN/docusaurus-plugin-content-docs/version-1.2
-cp -rf common_docs_zh/gettingStarted
i18n/zh-CN/docusaurus-plugin-content-docs/version-1.2
-cp -rf common_docs_zh/benchmark
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.0
-cp -rf common_docs_zh/ecosystem
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.0
-cp -rf common_docs_zh/faq i18n/zh-CN/docusaurus-plugin-content-docs/version-2.0
-cp -rf common_docs_zh/releasenotes
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.0
-cp -rf common_docs_zh/gettingStarted
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.0
-cp -rf common_docs_zh/benchmark
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1
-cp -rf common_docs_zh/ecosystem
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1
-cp -rf common_docs_zh/faq i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1
-cp -rf common_docs_zh/releasenotes
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1
-cp -rf common_docs_zh/gettingStarted
i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1
-cp -rf common_docs_zh/benchmark
i18n/zh-CN/docusaurus-plugin-content-docs/version-3.0
-cp -rf common_docs_zh/ecosystem
i18n/zh-CN/docusaurus-plugin-content-docs/version-3.0
-cp -rf common_docs_zh/faq i18n/zh-CN/docusaurus-plugin-content-docs/version-3.0
-cp -rf common_docs_zh/releasenotes
i18n/zh-CN/docusaurus-plugin-content-docs/version-3.0
-cp -rf common_docs_zh/gettingStarted
i18n/zh-CN/docusaurus-plugin-content-docs/version-3.0
-if [ "$1" = "zh-CN" ]; then
- yarn start:zh-CN
-else
- yarn start
-fi
-
-
-echo "***************************************"
-echo "Docs started success"
-echo "***************************************"
\ No newline at end of file
diff --git a/static/images/icon/close.svg b/static/images/icon/close.svg
new file mode 100644
index 0000000000..51f5ea003d
--- /dev/null
+++ b/static/images/icon/close.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+ <path d="M5 5L15 15" stroke="black" stroke-width="1.5"
stroke-linecap="round"
+ stroke-linejoin="round" />
+ <path d="M5 15L15 5" stroke="black" stroke-width="1.5"
stroke-linecap="round"
+ stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/worker.js b/worker.js
index da27d837f3..9ae934622c 100644
--- a/worker.js
+++ b/worker.js
@@ -4646,9 +4646,6 @@ var MyBundle = (function (exports) {
}
} else {
const lunrLang = lunr[lang];
- console.log("lunrLang", lunrLang);
- console.log("lunr", lunr);
-
if (lunrLang.stopWordFilter) {
stopWordPipelines.unshift(lunrLang.stopWordFilter);
}
@@ -4803,8 +4800,6 @@ var MyBundle = (function (exports) {
return promise;
}
async search(baseUrl, searchContext, input) {
- console.log('params',baseUrl, searchContext, input);
-
const rawTokens = tokenize(input, language);
if (rawTokens.length === 0) {
return [];
@@ -4861,8 +4856,6 @@ var MyBundle = (function (exports) {
}
sortSearchResults(results);
processTreeStatusOfSearchResults(results);
- console.log('result',results);
-
return results;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@doris.apache.org
For additional commands, e-mail: commits-h...@doris.apache.org
