Skip to content

Commit 1184254

Browse files
authored
refactor: patch search pages (#1532)
1 parent b7c545b commit 1184254

7 files changed

+757
-9
lines changed

blog/package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"serve:en": "docusaurus serve en",
1313
"serve:zh": "docusaurus serve zh",
1414
"swizzle": "docusaurus swizzle",
15-
"docusaurus": "docusaurus"
15+
"docusaurus": "docusaurus",
16+
"postinstall": "patch-package"
1617
},
1718
"devDependencies": {
1819
"@docusaurus/module-type-aliases": "^2.0.0-beta.6",
@@ -42,6 +43,8 @@
4243
"fitty": "^2.3.6",
4344
"gsap": "^3.7.1",
4445
"lethargy": "^1.0.9",
46+
"patch-package": "^6.5.1",
47+
"postinstall-postinstall": "^2.1.0",
4548
"raw-loader": "^4.0.2",
4649
"rc-image": "^5.6.2",
4750
"react": "^17.0.2",
@@ -74,4 +77,4 @@
7477
"resolutions": {
7578
"styled-components": "^5"
7679
}
77-
}
80+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
diff --git a/node_modules/@docusaurus/theme-search-algolia/src/theme/SearchPage/index.js b/node_modules/@docusaurus/theme-search-algolia/src/theme/SearchPage/index.js
2+
index 8c3ac8b..046f990 100644
3+
--- a/node_modules/@docusaurus/theme-search-algolia/src/theme/SearchPage/index.js
4+
+++ b/node_modules/@docusaurus/theme-search-algolia/src/theme/SearchPage/index.js
5+
@@ -7,7 +7,7 @@
6+
7+
/* eslint-disable jsx-a11y/no-autofocus */
8+
9+
-import React, {useEffect, useState, useReducer, useRef} from 'react';
10+
+import React, { useEffect, useState, useReducer, useRef } from 'react';
11+
12+
import algoliaSearch from 'algoliasearch/lite';
13+
import algoliaSearchHelper from 'algoliasearch-helper';
14+
@@ -22,15 +22,15 @@ import {
15+
useDynamicCallback,
16+
} from '@docusaurus/theme-common';
17+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
18+
-import {useAllDocsData} from '@theme/hooks/useDocs';
19+
+import { useAllDocsData } from '@theme/hooks/useDocs';
20+
import useSearchQuery from '@theme/hooks/useSearchQuery';
21+
import Layout from '@theme/Layout';
22+
-import Translate, {translate} from '@docusaurus/Translate';
23+
+import Translate, { translate } from '@docusaurus/Translate';
24+
import styles from './styles.module.css';
25+
26+
// Very simple pluralization: probably good enough for now
27+
function useDocumentsFoundPlural() {
28+
- const {selectMessage} = usePluralForm();
29+
+ const { selectMessage } = usePluralForm();
30+
return (count) =>
31+
selectMessage(
32+
count,
33+
@@ -41,7 +41,7 @@ function useDocumentsFoundPlural() {
34+
'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)',
35+
message: 'One document found|{count} documents found',
36+
},
37+
- {count},
38+
+ { count },
39+
),
40+
);
41+
}
42+
@@ -53,13 +53,13 @@ function useDocsSearchVersionsHelpers() {
43+
// docsPluginId -> versionName map
44+
const [searchVersions, setSearchVersions] = useState(() => {
45+
return Object.entries(allDocsData).reduce((acc, [pluginId, pluginData]) => {
46+
- return {...acc, [pluginId]: pluginData.versions[0].name};
47+
+ return { ...acc, [pluginId]: pluginData.versions[0].name };
48+
}, {});
49+
});
50+
51+
// Set the value of a single select menu
52+
const setSearchVersion = (pluginId, searchVersion) =>
53+
- setSearchVersions((s) => ({...s, [pluginId]: searchVersion}));
54+
+ setSearchVersions((s) => ({ ...s, [pluginId]: searchVersion }));
55+
56+
const versioningEnabled = Object.values(allDocsData).some(
57+
(docsData) => docsData.versions.length > 1,
58+
@@ -74,7 +74,7 @@ function useDocsSearchVersionsHelpers() {
59+
}
60+
61+
// We want to display one select per versioned docs plugin instance
62+
-const SearchVersionSelectList = ({docsSearchVersionsHelpers}) => {
63+
+const SearchVersionSelectList = ({ docsSearchVersionsHelpers }) => {
64+
const versionedPluginEntries = Object.entries(
65+
docsSearchVersionsHelpers.allDocsData,
66+
)
67+
@@ -121,15 +121,15 @@ function SearchPage() {
68+
const {
69+
siteConfig: {
70+
themeConfig: {
71+
- algolia: {appId, apiKey, indexName},
72+
+ algolia: { appId, apiKey, indexName },
73+
},
74+
},
75+
- i18n: {currentLocale},
76+
+ i18n: { currentLocale },
77+
} = useDocusaurusContext();
78+
const documentsFoundPlural = useDocumentsFoundPlural();
79+
80+
const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
81+
- const {searchQuery, setSearchQuery} = useSearchQuery();
82+
+ const { searchQuery, setSearchQuery } = useSearchQuery();
83+
const initialSearchResultState = {
84+
items: [],
85+
query: null,
86+
@@ -140,13 +140,13 @@ function SearchPage() {
87+
loading: null,
88+
};
89+
const [searchResultState, searchResultStateDispatcher] = useReducer(
90+
- (prevState, {type, value: state}) => {
91+
+ (prevState, { type, value: state }) => {
92+
switch (type) {
93+
case 'reset': {
94+
return initialSearchResultState;
95+
}
96+
case 'loading': {
97+
- return {...prevState, loading: true};
98+
+ return { ...prevState, loading: true };
99+
}
100+
case 'update': {
101+
if (searchQuery !== state.query) {
102+
@@ -186,9 +186,9 @@ function SearchPage() {
103+
104+
algoliaHelper.on(
105+
'result',
106+
- ({results: {query, hits, page, nbHits, nbPages}}) => {
107+
+ ({ results: { query, hits, page, nbHits, nbPages } }) => {
108+
if (query === '' || !(hits instanceof Array)) {
109+
- searchResultStateDispatcher({type: 'reset'});
110+
+ searchResultStateDispatcher({ type: 'reset' });
111+
return;
112+
}
113+
114+
@@ -202,10 +202,10 @@ function SearchPage() {
115+
const items = hits.map(
116+
({
117+
url,
118+
- _highlightResult: {hierarchy},
119+
+ _highlightResult: { hierarchy },
120+
_snippetResult: snippet = {},
121+
}) => {
122+
- const {pathname, hash} = new URL(url);
123+
+ const { pathname, hash } = new URL(url);
124+
const titles = Object.keys(hierarchy).map((key) => {
125+
return sanitizeValue(hierarchy[key].value);
126+
});
127+
@@ -240,40 +240,40 @@ function SearchPage() {
128+
const prevY = useRef(0);
129+
const observer = useRef(
130+
ExecutionEnvironment.canUseDOM &&
131+
- new IntersectionObserver(
132+
- (entries) => {
133+
- const {
134+
- isIntersecting,
135+
- boundingClientRect: {y: currentY},
136+
- } = entries[0];
137+
-
138+
- if (isIntersecting && prevY.current > currentY) {
139+
- searchResultStateDispatcher({type: 'advance'});
140+
- }
141+
+ new IntersectionObserver(
142+
+ (entries) => {
143+
+ const {
144+
+ isIntersecting,
145+
+ boundingClientRect: { y: currentY },
146+
+ } = entries[0];
147+
+
148+
+ if (isIntersecting && prevY.current > currentY) {
149+
+ searchResultStateDispatcher({ type: 'advance' });
150+
+ }
151+
152+
- prevY.current = currentY;
153+
- },
154+
- {threshold: 1},
155+
- ),
156+
+ prevY.current = currentY;
157+
+ },
158+
+ { threshold: 1 },
159+
+ ),
160+
);
161+
162+
const getTitle = () =>
163+
searchQuery
164+
? translate(
165+
- {
166+
- id: 'theme.SearchPage.existingResultsTitle',
167+
- message: 'Search results for "{query}"',
168+
- description: 'The search page title for non-empty query',
169+
- },
170+
- {
171+
- query: searchQuery,
172+
- },
173+
- )
174+
+ {
175+
+ id: 'theme.SearchPage.existingResultsTitle',
176+
+ message: 'Search results for "{query}"',
177+
+ description: 'The search page title for non-empty query',
178+
+ },
179+
+ {
180+
+ query: searchQuery,
181+
+ },
182+
+ )
183+
: translate({
184+
- id: 'theme.SearchPage.emptyResultsTitle',
185+
- message: 'Search the documentation',
186+
- description: 'The search page title for empty query',
187+
- });
188+
+ id: 'theme.SearchPage.emptyResultsTitle',
189+
+ message: 'Search the documentation',
190+
+ description: 'The search page title for empty query',
191+
+ });
192+
193+
const makeSearch = useDynamicCallback((page = 0) => {
194+
algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
195+
@@ -302,10 +302,10 @@ function SearchPage() {
196+
}, [loaderRef]);
197+
198+
useEffect(() => {
199+
- searchResultStateDispatcher({type: 'reset'});
200+
+ searchResultStateDispatcher({ type: 'reset' });
201+
202+
if (searchQuery) {
203+
- searchResultStateDispatcher({type: 'loading'});
204+
+ searchResultStateDispatcher({ type: 'loading' });
205+
206+
setTimeout(() => {
207+
makeSearch();
208+
@@ -414,10 +414,10 @@ function SearchPage() {
209+
{searchResultState.items.length > 0 ? (
210+
<main>
211+
{searchResultState.items.map(
212+
- ({title, url, summary, breadcrumbs}, i) => (
213+
+ ({ title, url, summary, breadcrumbs }, i) => (
214+
<article key={i} className={styles.searchResultItem}>
215+
<h2 className={styles.searchResultItemHeading}>
216+
- <Link to={url} dangerouslySetInnerHTML={{__html: title}} />
217+
+ <Link to={url} dangerouslySetInnerHTML={{ __html: title }} target="__blank" />
218+
</h2>
219+
220+
{breadcrumbs.length > 0 && (
221+
@@ -433,7 +433,7 @@ function SearchPage() {
222+
className="breadcrumbs__item"
223+
// Developer provided the HTML, so assume it's safe.
224+
// eslint-disable-next-line react/no-danger
225+
- dangerouslySetInnerHTML={{__html: html}}
226+
+ dangerouslySetInnerHTML={{ __html: html }}
227+
/>
228+
))}
229+
</ul>
230+
@@ -445,7 +445,7 @@ function SearchPage() {
231+
className={styles.searchResultItemSummary}
232+
// Developer provided the HTML, so assume it's safe.
233+
// eslint-disable-next-line react/no-danger
234+
- dangerouslySetInnerHTML={{__html: summary}}
235+
+ dangerouslySetInnerHTML={{ __html: summary }}
236+
/>
237+
)}
238+
</article>

doc/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"fitty": "^2.3.6",
4242
"gsap": "^3.7.1",
4343
"lethargy": "^1.0.9",
44-
"patch-package": "^6.4.7",
44+
"patch-package": "^6.5.1",
4545
"postinstall-postinstall": "^2.1.0",
4646
"raw-loader": "^4.0.2",
4747
"rc-image": "^5.6.2",

0 commit comments

Comments
 (0)