diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts index 48e5726ddd..258b9b22c2 100644 --- a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts +++ b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts @@ -106,3 +106,15 @@ declare module '@theme/DocPage' { const DocPage: (props: Props) => JSX.Element; export default DocPage; } + +declare module '@theme/Seo' { + export type Props = { + readonly title?: string; + readonly description?: string; + readonly keywords?: readonly string[] | string; + readonly image?: string; + }; + + const Seo: (props: Props) => JSX.Element; + export default Seo; +} diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx index 58ac8da053..1655ee4316 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx @@ -9,11 +9,10 @@ import React from 'react'; import clsx from 'clsx'; import {MDXProvider} from '@mdx-js/react'; import Translate from '@docusaurus/Translate'; -import Head from '@docusaurus/Head'; import Link from '@docusaurus/Link'; import MDXComponents from '@theme/MDXComponents'; +import Seo from '@theme/Seo'; import type {Props} from '@theme/BlogPostItem'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import styles from './styles.module.css'; @@ -47,7 +46,6 @@ function BlogPostItem(props: Props): JSX.Element { const authorTitle = frontMatter.author_title || frontMatter.authorTitle; const authorImageURL = frontMatter.author_image_url || frontMatter.authorImageURL; - const imageUrl = useBaseUrl(image, {absolute: true}); const renderPostHeader = () => { const TitleHeading = isBlogPostPage ? 'h1' : 'h2'; @@ -91,16 +89,7 @@ function BlogPostItem(props: Props): JSX.Element { return ( <> - - {keywords && keywords.length && ( - - )} - {image && } - {image && } - {image && ( - - )} - +
{renderPostHeader()} diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx index 9999d044c8..764eac5492 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx @@ -6,12 +6,9 @@ */ import React from 'react'; -import Head from '@docusaurus/Head'; -import {useTitleFormatter} from '@docusaurus/theme-common'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import DocPaginator from '@theme/DocPaginator'; import DocVersionSuggestions from '@theme/DocVersionSuggestions'; +import Seo from '@theme/Seo'; import type {Props} from '@theme/DocItem'; import TOC from '@theme/TOC'; import EditThisPage from '@theme/EditThisPage'; @@ -25,26 +22,17 @@ import { } from '@theme/hooks/useDocs'; function DocItem(props: Props): JSX.Element { - const {siteConfig} = useDocusaurusContext(); - const {url: siteUrl} = siteConfig; const {content: DocContent} = props; const { metadata, frontMatter: { - image: metaImage, + image, keywords, hide_title: hideTitle, hide_table_of_contents: hideTableOfContents, }, } = DocContent; - const { - description, - title, - permalink, - editUrl, - lastUpdatedAt, - lastUpdatedBy, - } = metadata; + const {description, title, editUrl, lastUpdatedAt, lastUpdatedBy} = metadata; const {pluginId} = useActivePlugin({failfast: true}); const versions = useVersions(pluginId); @@ -55,28 +43,9 @@ function DocItem(props: Props): JSX.Element { // See https://github.com/facebook/docusaurus/issues/3362 const showVersionBadge = versions.length > 1; - const metaTitle = useTitleFormatter(title); - const metaImageUrl = useBaseUrl(metaImage, {absolute: true}); return ( <> - - {metaTitle} - - {description && } - {description && ( - - )} - {keywords && keywords.length && ( - - )} - {metaImage && } - {metaImage && } - {metaImage && ( - - )} - {permalink && } - {permalink && } - +
- {metaTitle && {metaTitle}} - {metaTitle && } {favicon && } - {description && } - {description && ( - - )} - {keywords && keywords.length && ( - - )} - {metaImage && } - {metaImage && } - {metaImage && ( - - )} - + + diff --git a/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx new file mode 100644 index 0000000000..c7c952f0af --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Seo/index.tsx @@ -0,0 +1,45 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import Head from '@docusaurus/Head'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import {useTitleFormatter} from '@docusaurus/theme-common'; +import type {Props} from '@theme/Seo'; + +export default function Seo({ + title, + description, + keywords, + image, +}: Props): JSX.Element { + const metaTitle = useTitleFormatter(title); + const metaImageUrl = useBaseUrl(image, {absolute: true}); + + return ( + + {title && {metaTitle}} + {title && } + + {description && } + {description && } + + {keywords && ( + + )} + + {image && } + {image && } + {image && } + + ); +}