diff --git a/packages/docusaurus-theme-common/src/internal.ts b/packages/docusaurus-theme-common/src/internal.ts
index ca12647f23..d18237e888 100644
--- a/packages/docusaurus-theme-common/src/internal.ts
+++ b/packages/docusaurus-theme-common/src/internal.ts
@@ -43,7 +43,7 @@ export {
export {DEFAULT_SEARCH_TAG} from './utils/searchUtils';
-export {useTitleFormatter} from './utils/generalUtils';
+export {useTitleFormatter} from './utils/titleFormatterUtils';
export {useLocationChange} from './utils/useLocationChange';
diff --git a/packages/docusaurus-theme-common/src/utils/__tests__/titleFormatter.test.tsx b/packages/docusaurus-theme-common/src/utils/__tests__/titleFormatterUtils.test.tsx
similarity index 94%
rename from packages/docusaurus-theme-common/src/utils/__tests__/titleFormatter.test.tsx
rename to packages/docusaurus-theme-common/src/utils/__tests__/titleFormatterUtils.test.tsx
index f1314aa3f2..091117e46a 100644
--- a/packages/docusaurus-theme-common/src/utils/__tests__/titleFormatter.test.tsx
+++ b/packages/docusaurus-theme-common/src/utils/__tests__/titleFormatterUtils.test.tsx
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import {DefaultTitleFormatter} from '../generalUtils';
+import {DefaultTitleFormatter} from '../titleFormatterUtils';
describe('DefaultTitleFormatter', () => {
it('works', () => {
diff --git a/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
index 110753a84e..e81ca52ca3 100644
--- a/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
@@ -10,7 +10,7 @@ import clsx from 'clsx';
import Head from '@docusaurus/Head';
import useRouteContext from '@docusaurus/useRouteContext';
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-import {useTitleFormatter} from './generalUtils';
+import {useTitleFormatter} from './titleFormatterUtils';
type PageMetadataProps = {
readonly title?: string;
@@ -25,20 +25,21 @@ type PageMetadataProps = {
* Works in the same way as Helmet.
*/
export function PageMetadata({
- title,
+ title: pageTitle,
description,
keywords,
image,
children,
}: PageMetadataProps): ReactNode {
- const pageTitle = useTitleFormatter(title);
+ const titleFormatter = useTitleFormatter();
const {withBaseUrl} = useBaseUrlUtils();
const pageImage = image ? withBaseUrl(image, {absolute: true}) : undefined;
+ const title = pageTitle ? titleFormatter.format(pageTitle) : undefined;
return (
- {title && {pageTitle}}
- {title && }
+ {title && {title}}
+ {title && }
{description && }
{description && }
diff --git a/packages/docusaurus-theme-common/src/utils/titleFormatter.tsx b/packages/docusaurus-theme-common/src/utils/titleFormatterUtils.tsx
similarity index 89%
rename from packages/docusaurus-theme-common/src/utils/titleFormatter.tsx
rename to packages/docusaurus-theme-common/src/utils/titleFormatterUtils.tsx
index d882fdd6c5..bbea718021 100644
--- a/packages/docusaurus-theme-common/src/utils/titleFormatter.tsx
+++ b/packages/docusaurus-theme-common/src/utils/titleFormatterUtils.tsx
@@ -27,12 +27,12 @@ export const DefaultTitleFormatter: TitleFormatterFn = ({
return `${trimmedTitle} ${titleDelimiter} ${siteTitle}`;
};
-type TitleFormatter = {format: (title?: string) => string};
+type TitleFormatterUtils = {format: (title?: string) => string};
/**
* Returns a function to format the page title
*/
-export function useTitleFormatter(): TitleFormatter {
+export function useTitleFormatter(): TitleFormatterUtils {
const {siteConfig} = useDocusaurusContext();
const formatter = DefaultTitleFormatter;
const {title: siteTitle, titleDelimiter} = siteConfig;
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
index 7e392fee20..0dd822f6e8 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
@@ -25,11 +25,11 @@ import Link from '@docusaurus/Link';
import {useAllDocsData} from '@docusaurus/plugin-content-docs/client';
import {
HtmlClassNameProvider,
+ PageMetadata,
useEvent,
usePluralForm,
useSearchQueryString,
} from '@docusaurus/theme-common';
-import {useTitleFormatter} from '@docusaurus/theme-common/internal';
import Translate, {translate} from '@docusaurus/Translate';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {
@@ -160,6 +160,25 @@ type ResultDispatcher =
| {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},
@@ -167,12 +186,13 @@ function SearchPageContent(): ReactNode {
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,
@@ -310,24 +330,6 @@ function SearchPageContent(): ReactNode {
),
);
- const getTitle = () =>
- 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',
- });
-
const makeSearch = useEvent((page: number = 0) => {
if (contextualSearch) {
algoliaHelper.addDisjunctiveFacetRefinement('docusaurus_tag', 'default');
@@ -380,8 +382,9 @@ function SearchPageContent(): ReactNode {
return (
+
+
- {useTitleFormatter(getTitle())}
{/*
We should not index search pages
See https://github.com/facebook/docusaurus/pull/3233
@@ -390,7 +393,7 @@ function SearchPageContent(): ReactNode {
- {getTitle()}
+ {pageTitle}