mirror of
https://github.com/facebook/docusaurus.git
synced 2025-12-25 17:22:50 +00:00
9c689880ed
Some checks failed
Argos CI / take-screenshots (push) Has been cancelled
Build Hash Router / Build Hash Router (push) Has been cancelled
Canary Release / Publish Canary (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
Continuous Releases / Continuous Releases (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (20) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (20.0) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (22) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 (24) (push) Has been cancelled
E2E Tests / E2E — Yarn v1 Windows (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (node-modules, -s) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (node-modules, -st) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (pnp, -s) (push) Has been cancelled
E2E Tests / E2E — Yarn Berry (pnp, -st) (push) Has been cancelled
E2E Tests / E2E — npm (push) Has been cancelled
E2E Tests / E2E — pnpm (push) Has been cancelled
Co-authored-by: sebastien <lorber.sebastien@gmail.com>
597 lines
21 KiB
TypeScript
597 lines
21 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
/* eslint-disable jsx-a11y/no-autofocus */
|
|
|
|
import React, {
|
|
type ReactNode,
|
|
useEffect,
|
|
useReducer,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
import algoliaSearchHelper from 'algoliasearch-helper';
|
|
import {liteClient} from 'algoliasearch/lite';
|
|
|
|
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
|
|
import Head from '@docusaurus/Head';
|
|
import Link from '@docusaurus/Link';
|
|
import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
|
|
import {
|
|
HtmlClassNameProvider,
|
|
PageMetadata,
|
|
useEvent,
|
|
usePluralForm,
|
|
useSearchQueryString,
|
|
} from '@docusaurus/theme-common';
|
|
import Translate, {translate} from '@docusaurus/Translate';
|
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
|
import {
|
|
useAlgoliaThemeConfig,
|
|
useSearchResultUrlProcessor,
|
|
} from '@docusaurus/theme-search-algolia/client';
|
|
import Layout from '@theme/Layout';
|
|
import Heading from '@theme/Heading';
|
|
import styles from './styles.module.css';
|
|
|
|
// Very simple pluralization: probably good enough for now
|
|
function useDocumentsFoundPlural() {
|
|
const {selectMessage} = usePluralForm();
|
|
return (count: number) =>
|
|
selectMessage(
|
|
count,
|
|
translate(
|
|
{
|
|
id: 'theme.SearchPage.documentsFound.plurals',
|
|
description:
|
|
'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
|
|
message: 'One document found|{count} documents found',
|
|
},
|
|
{count},
|
|
),
|
|
);
|
|
}
|
|
|
|
function useDocsSearchVersionsHelpers() {
|
|
const allDocsData = useAllDocsData();
|
|
|
|
// State of the version select menus / algolia facet filters
|
|
// docsPluginId -> versionName map
|
|
const [searchVersions, setSearchVersions] = useState<{
|
|
[pluginId: string]: string;
|
|
}>(() =>
|
|
Object.entries(allDocsData).reduce(
|
|
(acc, [pluginId, pluginData]) => ({
|
|
...acc,
|
|
[pluginId]: pluginData.versions[0]!.name,
|
|
}),
|
|
{},
|
|
),
|
|
);
|
|
|
|
// Set the value of a single select menu
|
|
const setSearchVersion = (pluginId: string, searchVersion: string) =>
|
|
setSearchVersions((s) => ({...s, [pluginId]: searchVersion}));
|
|
|
|
const versioningEnabled = Object.values(allDocsData).some(
|
|
(docsData) => docsData.versions.length > 1,
|
|
);
|
|
|
|
return {
|
|
allDocsData,
|
|
versioningEnabled,
|
|
searchVersions,
|
|
setSearchVersion,
|
|
};
|
|
}
|
|
|
|
// We want to display one select per versioned docs plugin instance
|
|
function SearchVersionSelectList({
|
|
docsSearchVersionsHelpers,
|
|
}: {
|
|
docsSearchVersionsHelpers: ReturnType<typeof useDocsSearchVersionsHelpers>;
|
|
}) {
|
|
const versionedPluginEntries = Object.entries(
|
|
docsSearchVersionsHelpers.allDocsData,
|
|
)
|
|
// Do not show a version select for unversioned docs plugin instances
|
|
.filter(([, docsData]) => docsData.versions.length > 1);
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'col',
|
|
'col--3',
|
|
'padding-left--none',
|
|
styles.searchVersionColumn,
|
|
)}>
|
|
{versionedPluginEntries.map(([pluginId, docsData]) => {
|
|
const labelPrefix =
|
|
versionedPluginEntries.length > 1 ? `${pluginId}: ` : '';
|
|
return (
|
|
<select
|
|
key={pluginId}
|
|
onChange={(e) =>
|
|
docsSearchVersionsHelpers.setSearchVersion(
|
|
pluginId,
|
|
e.target.value,
|
|
)
|
|
}
|
|
defaultValue={docsSearchVersionsHelpers.searchVersions[pluginId]}
|
|
className={styles.searchVersionInput}>
|
|
{docsData.versions.map((version, i) => (
|
|
<option
|
|
key={i}
|
|
label={`${labelPrefix}${version.label}`}
|
|
value={version.name}
|
|
/>
|
|
))}
|
|
</select>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AlgoliaLogo(): ReactNode {
|
|
return (
|
|
<svg
|
|
width="80"
|
|
height="24"
|
|
aria-label="Algolia"
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 2196.2 500"
|
|
style={{maxWidth: '150px'}}>
|
|
<defs>
|
|
{/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
|
|
<style>{`.cls-1,.cls-2{fill:#003dff}.cls-2{fill-rule:evenodd}`}</style>
|
|
</defs>
|
|
<path
|
|
className="cls-2"
|
|
d="M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"
|
|
/>
|
|
<rect
|
|
className="cls-1"
|
|
x="1845.88"
|
|
y="104.73"
|
|
width="62.58"
|
|
height="277.9"
|
|
rx="5.9"
|
|
ry="5.9"
|
|
/>
|
|
<path
|
|
className="cls-2"
|
|
d="M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z"
|
|
/>
|
|
<path
|
|
className="cls-2"
|
|
d="M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"
|
|
/>
|
|
<path
|
|
className="cls-2"
|
|
d="M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z"
|
|
/>
|
|
<path
|
|
className="cls-2"
|
|
d="M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"
|
|
/>
|
|
<path
|
|
className="cls-2"
|
|
d="M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"
|
|
/>
|
|
<path
|
|
className="cls-2"
|
|
d="M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z"
|
|
/>
|
|
<path
|
|
className="cls-1"
|
|
d="M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
type ResultDispatcherState = {
|
|
items: {
|
|
title: string;
|
|
url: string;
|
|
summary: string;
|
|
breadcrumbs: string[];
|
|
}[];
|
|
query: string | null;
|
|
totalResults: number | null;
|
|
totalPages: number | null;
|
|
lastPage: number | null;
|
|
hasMore: boolean | null;
|
|
loading: boolean | null;
|
|
};
|
|
|
|
type ResultDispatcher =
|
|
| {type: 'reset'; value?: undefined}
|
|
| {type: 'loading'; value?: undefined}
|
|
| {type: 'update'; value: ResultDispatcherState}
|
|
| {type: 'advance'; value?: undefined};
|
|
|
|
function getSearchPageTitle(searchQuery: string | undefined): string {
|
|
return searchQuery
|
|
? translate(
|
|
{
|
|
id: 'theme.SearchPage.existingResultsTitle',
|
|
message: 'Search results for "{query}"',
|
|
description: 'The search page title for non-empty query',
|
|
},
|
|
{
|
|
query: searchQuery,
|
|
},
|
|
)
|
|
: translate({
|
|
id: 'theme.SearchPage.emptyResultsTitle',
|
|
message: 'Search the documentation',
|
|
description: 'The search page title for empty query',
|
|
});
|
|
}
|
|
|
|
function SearchPageContent(): ReactNode {
|
|
const {
|
|
i18n: {currentLocale},
|
|
} = useDocusaurusContext();
|
|
const {
|
|
algolia: {appId, apiKey, indexName, contextualSearch},
|
|
} = useAlgoliaThemeConfig();
|
|
const processSearchResultUrl = useSearchResultUrlProcessor();
|
|
const documentsFoundPlural = useDocumentsFoundPlural();
|
|
|
|
const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
|
|
const [searchQuery, setSearchQuery] = useSearchQueryString();
|
|
const pageTitle = getSearchPageTitle(searchQuery);
|
|
|
|
const initialSearchResultState: ResultDispatcherState = {
|
|
items: [],
|
|
query: null,
|
|
totalResults: null,
|
|
totalPages: null,
|
|
lastPage: null,
|
|
hasMore: null,
|
|
loading: null,
|
|
};
|
|
const [searchResultState, searchResultStateDispatcher] = useReducer(
|
|
(prevState: ResultDispatcherState, data: ResultDispatcher) => {
|
|
switch (data.type) {
|
|
case 'reset': {
|
|
return initialSearchResultState;
|
|
}
|
|
case 'loading': {
|
|
return {...prevState, loading: true};
|
|
}
|
|
case 'update': {
|
|
if (searchQuery !== data.value.query) {
|
|
return prevState;
|
|
}
|
|
|
|
return {
|
|
...data.value,
|
|
items:
|
|
data.value.lastPage === 0
|
|
? data.value.items
|
|
: prevState.items.concat(data.value.items),
|
|
};
|
|
}
|
|
case 'advance': {
|
|
const hasMore = prevState.totalPages! > prevState.lastPage! + 1;
|
|
|
|
return {
|
|
...prevState,
|
|
lastPage: hasMore ? prevState.lastPage! + 1 : prevState.lastPage,
|
|
hasMore,
|
|
};
|
|
}
|
|
default:
|
|
return prevState;
|
|
}
|
|
},
|
|
initialSearchResultState,
|
|
);
|
|
|
|
// respect settings from the theme config for facets
|
|
const disjunctiveFacets = contextualSearch
|
|
? ['language', 'docusaurus_tag']
|
|
: [];
|
|
|
|
const algoliaClient = liteClient(appId, apiKey);
|
|
const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore: why errors happens after upgrading to TS 5.5 ?
|
|
hitsPerPage: 15,
|
|
advancedSyntax: true,
|
|
disjunctiveFacets,
|
|
});
|
|
|
|
algoliaHelper.on(
|
|
'result',
|
|
({results: {query, hits, page, nbHits, nbPages}}) => {
|
|
if (query === '' || !Array.isArray(hits)) {
|
|
searchResultStateDispatcher({type: 'reset'});
|
|
return;
|
|
}
|
|
|
|
const sanitizeValue = (value: string) =>
|
|
value.replace(
|
|
/algolia-docsearch-suggestion--highlight/g,
|
|
'search-result-match',
|
|
);
|
|
|
|
const items = hits.map(
|
|
({
|
|
url,
|
|
_highlightResult: {hierarchy},
|
|
_snippetResult: snippet = {},
|
|
}: {
|
|
url: string;
|
|
_highlightResult: {hierarchy: {[key: string]: {value: string}}};
|
|
_snippetResult: {content?: {value: string}};
|
|
}) => {
|
|
const titles = Object.keys(hierarchy).map((key) =>
|
|
sanitizeValue(hierarchy[key]!.value),
|
|
);
|
|
return {
|
|
title: titles.pop()!,
|
|
url: processSearchResultUrl(url),
|
|
summary: snippet.content
|
|
? `${sanitizeValue(snippet.content.value)}...`
|
|
: '',
|
|
breadcrumbs: titles,
|
|
};
|
|
},
|
|
);
|
|
|
|
searchResultStateDispatcher({
|
|
type: 'update',
|
|
value: {
|
|
items,
|
|
query,
|
|
totalResults: nbHits,
|
|
totalPages: nbPages,
|
|
lastPage: page,
|
|
hasMore: nbPages > page + 1,
|
|
loading: false,
|
|
},
|
|
});
|
|
},
|
|
);
|
|
|
|
const [loaderRef, setLoaderRef] = useState<HTMLDivElement | null>(null);
|
|
const prevY = useRef(0);
|
|
const observer = useRef(
|
|
ExecutionEnvironment.canUseIntersectionObserver &&
|
|
new IntersectionObserver(
|
|
// TODO need to fix this React Compiler lint error
|
|
// eslint-disable-next-line react-compiler/react-compiler
|
|
(entries) => {
|
|
const {
|
|
isIntersecting,
|
|
boundingClientRect: {y: currentY},
|
|
} = entries[0]!;
|
|
|
|
if (isIntersecting && prevY.current > currentY) {
|
|
searchResultStateDispatcher({type: 'advance'});
|
|
}
|
|
|
|
prevY.current = currentY;
|
|
},
|
|
{threshold: 1},
|
|
),
|
|
);
|
|
|
|
const makeSearch = useEvent((page: number = 0) => {
|
|
if (contextualSearch) {
|
|
algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
|
|
algoliaHelper.addDisjunctiveFacetRefinement('language', currentLocale);
|
|
|
|
Object.entries(docsSearchVersionsHelpers.searchVersions).forEach(
|
|
([pluginId, searchVersion]) => {
|
|
algoliaHelper.addDisjunctiveFacetRefinement(
|
|
'docusaurus_tag',
|
|
`docs-${pluginId}-${searchVersion}`,
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
algoliaHelper.setQuery(searchQuery).setPage(page).search();
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!loaderRef) {
|
|
return undefined;
|
|
}
|
|
const currentObserver = observer.current;
|
|
if (currentObserver) {
|
|
currentObserver.observe(loaderRef);
|
|
return () => currentObserver.unobserve(loaderRef);
|
|
}
|
|
return () => true;
|
|
}, [loaderRef]);
|
|
|
|
useEffect(() => {
|
|
searchResultStateDispatcher({type: 'reset'});
|
|
|
|
if (searchQuery) {
|
|
searchResultStateDispatcher({type: 'loading'});
|
|
|
|
setTimeout(() => {
|
|
makeSearch();
|
|
}, 300);
|
|
}
|
|
}, [searchQuery, docsSearchVersionsHelpers.searchVersions, makeSearch]);
|
|
|
|
useEffect(() => {
|
|
if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
|
|
return;
|
|
}
|
|
|
|
makeSearch(searchResultState.lastPage);
|
|
}, [makeSearch, searchResultState.lastPage]);
|
|
|
|
return (
|
|
<Layout>
|
|
<PageMetadata title={pageTitle} />
|
|
|
|
<Head>
|
|
{/*
|
|
We should not index search pages
|
|
See https://github.com/facebook/docusaurus/pull/3233
|
|
*/}
|
|
<meta property="robots" content="noindex, follow" />
|
|
</Head>
|
|
|
|
<div className="container margin-vert--lg">
|
|
<Heading as="h1">{pageTitle}</Heading>
|
|
|
|
<form className="row" onSubmit={(e) => e.preventDefault()}>
|
|
<div
|
|
className={clsx('col', styles.searchQueryColumn, {
|
|
'col--9': docsSearchVersionsHelpers.versioningEnabled,
|
|
'col--12': !docsSearchVersionsHelpers.versioningEnabled,
|
|
})}>
|
|
<input
|
|
type="search"
|
|
name="q"
|
|
className={styles.searchQueryInput}
|
|
placeholder={translate({
|
|
id: 'theme.SearchPage.inputPlaceholder',
|
|
message: 'Type your search here',
|
|
description: 'The placeholder for search page input',
|
|
})}
|
|
aria-label={translate({
|
|
id: 'theme.SearchPage.inputLabel',
|
|
message: 'Search',
|
|
description: 'The ARIA label for search page input',
|
|
})}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
value={searchQuery}
|
|
autoComplete="off"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
{contextualSearch && docsSearchVersionsHelpers.versioningEnabled && (
|
|
<SearchVersionSelectList
|
|
docsSearchVersionsHelpers={docsSearchVersionsHelpers}
|
|
/>
|
|
)}
|
|
</form>
|
|
|
|
<div className="row">
|
|
<div className={clsx('col', 'col--8', styles.searchResultsColumn)}>
|
|
{!!searchResultState.totalResults &&
|
|
documentsFoundPlural(searchResultState.totalResults)}
|
|
</div>
|
|
|
|
<div className={clsx('col', 'col--4', styles.searchLogoColumn)}>
|
|
<span>
|
|
{translate({
|
|
id: 'theme.SearchPage.algoliaLabel',
|
|
message: 'Powered by',
|
|
description:
|
|
'The text explain that the search powered by Algolia',
|
|
})}
|
|
</span>
|
|
<Link
|
|
to="https://www.algolia.com/"
|
|
aria-label={translate({
|
|
id: 'theme.SearchPage.algoliaLabel',
|
|
message: 'Powered by Algolia',
|
|
description: 'The description label for Algolia mention',
|
|
})}>
|
|
<AlgoliaLogo />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{searchResultState.items.length > 0 ? (
|
|
<main>
|
|
{searchResultState.items.map(
|
|
({title, url, summary, breadcrumbs}, i) => (
|
|
<article key={i} className={styles.searchResultItem}>
|
|
<Heading as="h2" className={styles.searchResultItemHeading}>
|
|
<Link to={url} dangerouslySetInnerHTML={{__html: title}} />
|
|
</Heading>
|
|
|
|
{breadcrumbs.length > 0 && (
|
|
<nav aria-label="breadcrumbs">
|
|
<ul
|
|
className={clsx(
|
|
'breadcrumbs',
|
|
styles.searchResultItemPath,
|
|
)}>
|
|
{breadcrumbs.map((html, index) => (
|
|
<li
|
|
key={index}
|
|
className="breadcrumbs__item"
|
|
// Developer provided the HTML, so assume it's safe.
|
|
// eslint-disable-next-line react/no-danger
|
|
dangerouslySetInnerHTML={{__html: html}}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
)}
|
|
|
|
{summary && (
|
|
<p
|
|
className={styles.searchResultItemSummary}
|
|
// Developer provided the HTML, so assume it's safe.
|
|
// eslint-disable-next-line react/no-danger
|
|
dangerouslySetInnerHTML={{__html: summary}}
|
|
/>
|
|
)}
|
|
</article>
|
|
),
|
|
)}
|
|
</main>
|
|
) : (
|
|
[
|
|
searchQuery && !searchResultState.loading && (
|
|
<p key="no-results">
|
|
<Translate
|
|
id="theme.SearchPage.noResultsText"
|
|
description="The paragraph for empty search result">
|
|
No results were found
|
|
</Translate>
|
|
</p>
|
|
),
|
|
!!searchResultState.loading && (
|
|
<div key="spinner" className={styles.loadingSpinner} />
|
|
),
|
|
]
|
|
)}
|
|
|
|
{searchResultState.hasMore && (
|
|
<div className={styles.loader} ref={setLoaderRef}>
|
|
<Translate
|
|
id="theme.SearchPage.fetchingNewResults"
|
|
description="The paragraph for fetching new search results">
|
|
Fetching new results...
|
|
</Translate>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default function SearchPage(): ReactNode {
|
|
return (
|
|
<HtmlClassNameProvider className="search-page-wrapper">
|
|
<SearchPageContent />
|
|
</HtmlClassNameProvider>
|
|
);
|
|
}
|