3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-23 11:38:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor useTitleFormatter() hook

Browse source
This commit is contained in:
sebastien 2025-04-11 16:03:07 +02:00
parent fffb5a7213
commit f414ebf442
5 changed files with 35 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-common/src/internal.ts
View file

@ -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';

2
packages/docusaurus-theme-common/src/utils/__tests__/titleFormatter.test.tsx → packages/docusaurus-theme-common/src/utils/__tests__/titleFormatterUtils.test.tsx
View file

@ -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', () => {

11
packages/docusaurus-theme-common/src/utils/metadataUtils.tsx
View file

@ -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 (
<Head>
{title && <title>{pageTitle}</title>}
{title && <meta property="og:title" content={pageTitle} />}
{title && <title>{title}</title>}
{title && <meta property="og:title" content={title} />}
{description && <meta name="description" content={description} />}
{description && <meta property="og:description" content={description} />}

4
packages/docusaurus-theme-common/src/utils/titleFormatter.tsx → packages/docusaurus-theme-common/src/utils/titleFormatterUtils.tsx
View file

@ -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;

47
packages/docusaurus-theme-search-algolia/src/theme/SearchPage/index.tsx
View file

@ -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 (
<Layout>
<PageMetadata title={pageTitle} />
<Head>
<title>{useTitleFormatter(getTitle())}</title>
{/*
We should not index search pages
See https://github.com/facebook/docusaurus/pull/3233
@ -390,7 +393,7 @@ function SearchPageContent(): ReactNode {
</Head>
<div className="container margin-vert--lg">
<Heading as="h1">{getTitle()}</Heading>
<Heading as="h1">{pageTitle}</Heading>
<form className="row" onSubmit={(e) => e.preventDefault()}>
<div