refactor(theme-{classic,common}): change how site/page/search metadata is handled (#6925)

This commit is contained in:
Sébastien Lorber 2022-03-18 18:53:00 +01:00 committed by GitHub
parent 74e37e86ba
commit 74f653dd82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 808 additions and 625 deletions

View file

@ -129,9 +129,10 @@ export {isRegexpStringMatch} from './utils/regexpUtils';
export {useHomePageRoute} from './utils/routesUtils';
export {
PageMetadata,
HtmlClassNameProvider,
PluginHtmlClassNameProvider,
} from './utils/metadataUtilsTemp';
} from './utils/metadataUtils';
export {
useColorMode,

View file

@ -9,6 +9,53 @@ import React, {type ReactNode} from 'react';
import Head from '@docusaurus/Head';
import clsx from 'clsx';
import useRouteContext from '@docusaurus/useRouteContext';
import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
import {useTitleFormatter} from './generalUtils';
interface PageMetadataProps {
readonly title?: string;
readonly description?: string;
readonly keywords?: readonly string[] | string;
readonly image?: string;
readonly children?: ReactNode;
}
// Helper component to manipulate page metadata and override site defaults
export function PageMetadata({
title,
description,
keywords,
image,
children,
}: PageMetadataProps): JSX.Element {
const pageTitle = useTitleFormatter(title);
const {withBaseUrl} = useBaseUrlUtils();
const pageImage = image ? withBaseUrl(image, {absolute: true}) : undefined;
return (
<Head>
{title && <title>{pageTitle}</title>}
{title && <meta property="og:title" content={pageTitle} />}
{description && <meta name="description" content={description} />}
{description && <meta property="og:description" content={description} />}
{keywords && (
<meta
name="keywords"
content={
(Array.isArray(keywords) ? keywords.join(',') : keywords) as string
}
/>
)}
{pageImage && <meta property="og:image" content={pageImage} />}
{pageImage && <meta name="twitter:image" content={pageImage} />}
{children}
</Head>
);
}
const HtmlClassNameContext = React.createContext<string | undefined>(undefined);