Skip to content

refactor(v2): use new way to get versions for search page #3604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
slorber merged 2 commits into from
Oct 22, 2020
Merged

refactor(v2): use new way to get versions for search page #3604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ba9274
refactor(v2): use new way to get versions for search page
lex111 Oct 17, 2020
b8bc278
search page: support docs multi-instance
slorber Oct 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 0 additions & 30 deletions packages/docusaurus-plugin-content-docs/src/theme/hooks/useVersioning.ts
View file
Open in desktop

This file was deleted.

139 changes: 94 additions & 45 deletions packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import clsx from 'clsx';
import Head from '@docusaurus/Head';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useVersioning from '@theme/hooks/useVersioning';
import {useAllDocsData} from '@theme/hooks/useDocs';
import useSearchQuery from '@theme/hooks/useSearchQuery';
import Link from '@docusaurus/Link';
import Layout from '@theme/Layout';
Expand All @@ -27,15 +27,85 @@ function pluralize(count, word) {
return count > 1 ? `${word}s` : word;
}

function useDocsSearchVersionsHelpers() {
const allDocsData = useAllDocsData();

// State of the version select menus / algolia facet filters
// docsPluginId -> versionName map
const [searchVersions, setSearchVersions] = useState(() => {
return Object.entries(allDocsData).reduce((acc, [pluginId, pluginData]) => {
return {...acc, [pluginId]: pluginData.versions[0].name};
}, {});
});

@slorber slorber Oct 21, 2020

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of just a version string, we now need a version string per plugin instance, so it's now a map


// Set the value of a single select menu
const setSearchVersion = (pluginId, searchVersion) =>
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
const SearchVersionSelectList = ({docsSearchVersionsHelpers}) => {
const versionedPluginEntries = Object.entries(
docsSearchVersionsHelpers.allDocsData,
)
// Do not show a version select for unversioned docs plugin instances
.filter(([, docsData]) => docsData.versions.length > 1);

@slorber slorber Oct 21, 2020

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ensure our "community" docs instance do not lead to a select menu being displayed, as there will never be more than 1 value in this select it's useless


return (
<div
className={clsx(
'col',
'col--3',
'padding-left--none',
styles.searchVersionColumn,
)}>
{versionedPluginEntries.map(([pluginId, docsData]) => {
const labelPrefix =
versionedPluginEntries.length > 1 ? `${pluginId}: ` : '';

@slorber slorber Oct 21, 2020

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This "label prefix" is not perfect, unfortunately, I'm not sure we have a "label" for the docs version instance, so it's not easy to create a great UX.

I think multi-instance versioning is rare enough so that we can figure this out later, but if you have ideas...

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 Search() {
const {
siteConfig: {
themeConfig: {algolia: {appId = 'BH4D9OD16A', apiKey, indexName} = {}},
} = {},
} = useDocusaurusContext();
const docsSearchVersionsHelpers = useDocsSearchVersionsHelpers();
const {searchValue, updateSearchPath} = useSearchQuery();
const {versioningEnabled, versions, latestVersion} = useVersioning();
const [searchVersion, setSearchVersion] = useState(latestVersion);
const [searchQuery, setSearchQuery] = useState(searchValue);
const initialSearchResultState = {
items: [],
Expand Down Expand Up @@ -87,7 +157,7 @@ function Search() {
const algoliaHelper = algoliaSearchHelper(algoliaClient, indexName, {
hitsPerPage: 15,
advancedSyntax: true,
facets: searchVersion ? ['version'] : [],
disjunctiveFacets: ['docusaurus_tag'],
});

algoliaHelper.on(
Expand Down Expand Up @@ -169,25 +239,19 @@ function Search() {
: 'Search the documentation';

const makeSearch = (page = 0) => {
if (searchVersion) {
algoliaHelper
.setQuery(searchQuery)
.addFacetRefinement('version', searchVersion)
.setPage(page)
.search();
} else {
algoliaHelper.setQuery(searchQuery).setPage(page).search();
}
};

const handleSearchInputChange = (e) => {
const searchInputValue = e.target.value;
algoliaHelper.setQuery(searchQuery).setPage(page);

algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
Object.entries(docsSearchVersionsHelpers.searchVersions).forEach(
([pluginId, searchVersion]) => {
algoliaHelper.addDisjunctiveFacetRefinement(
'docusaurus_tag',
`docs-${pluginId}-${searchVersion}`,
);
},
);

@slorber slorber Oct 21, 2020

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

query is like: default OR docs-alpha66 OR docs-community-current, ie we search in pages, blogs, and the selected docs versions .

It's an improvement compared to previous search page as we can now search in pages and blog, which was not possible by using the previous facet filter logic (only searching in docs)

see:


if (e.target.tagName === 'SELECT') {
setSearchVersion(searchInputValue);
} else {
setSearchQuery(searchInputValue);
}
algoliaHelper.search();
};

useEffect(() => {
Expand All @@ -214,7 +278,7 @@ function Search() {
makeSearch();
}, 300);
}
}, [searchQuery, searchVersion]);
}, [searchQuery, docsSearchVersionsHelpers.searchVersions]);

useEffect(() => {
if (!searchResultState.lastPage || searchResultState.lastPage === 0) {
Expand Down Expand Up @@ -246,41 +310,26 @@ function Search() {
<form className="row" onSubmit={(e) => e.preventDefault()}>
<div
className={clsx('col', styles.searchQueryColumn, {
'col--9': versioningEnabled,
'col--12': !versioningEnabled,
'col--9': docsSearchVersionsHelpers.versioningEnabled,
'col--12': !docsSearchVersionsHelpers.versioningEnabled,
})}>
<input
type="search"
name="q"
className={styles.searchQueryInput}
placeholder="Type your search here"
aria-label="Search"
onChange={handleSearchInputChange}
onChange={(e) => setSearchQuery(e.target.value)}
value={searchQuery}
autoComplete="off"
autoFocus
/>
</div>

{versioningEnabled && (
<div
className={clsx(
'col',
'col--3',
'padding-left--none',
styles.searchVersionColumn,
)}>
<select
onChange={handleSearchInputChange}
defaultValue={searchVersion}
className={styles.searchVersionInput}>
{versions.map((version, i) => (
<option key={i} value={version}>
{version}
</option>
))}
</select>
</div>
{docsSearchVersionsHelpers.versioningEnabled && (
<SearchVersionSelectList
docsSearchVersionsHelpers={docsSearchVersionsHelpers}
/>
)}
</form>

Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-search-algolia/src/theme/SearchPage/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
padding: 0.5rem;
width: 100%;
background: #fff;
margin-bottom: 1rem;
}

.searchResultsColumn {
Expand Down