3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-19 20:17:06 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): introduce Seo component for internal usage (#4243)

Browse source
This commit is contained in:
Alexey Pyltsyn 2021-02-18 17:38:55 +03:00 • committed by GitHub
parent f13448d5e1
commit 1ec2f04108
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 67 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts vendored
View file

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

15
packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
View file

@ -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 (
<>
<Head>
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{image && <meta property="og:image" content={imageUrl} />}
{image && <meta name="twitter:image" content={imageUrl} />}
{image && (
<meta name="twitter:image:alt" content={`Image for ${title}`} />
)}
</Head>
<Seo {...{keywords, image}} />
<article className={!isBlogPostPage ? 'margin-bottom--xl' : undefined}>
{renderPostHeader()}

39
packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
View file

@ -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 (
<>
<Head>
<title>{metaTitle}</title>
<meta property="og:title" content={metaTitle} />
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && <meta name="twitter:image" content={metaImageUrl} />}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${title}`} />
)}
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
</Head>
<Seo {...{title, description, keywords, image}} />
<div className="row">
<div

26
packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
View file

@ -11,9 +11,9 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import type {Props} from '@theme/Layout';
import SearchMetadatas from '@theme/SearchMetadatas';
import Seo from '@theme/Seo';
import {
DEFAULT_SEARCH_TAG,
useTitleFormatter,
useAlternatePageUtils,
} from '@docusaurus/theme-common';
import {useLocation} from '@docusaurus/router';
@ -90,9 +90,7 @@ export default function LayoutHead(props: Props): JSX.Element {
themeConfig: {image: defaultImage, metadatas},
} = siteConfig;
const {title, description, image, keywords, searchMetadatas} = props;
const metaTitle = useTitleFormatter(title);
const metaImage = image || defaultImage;
const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
const faviconUrl = useBaseUrl(favicon);
// See https://github.com/facebook/docusaurus/issues/3317#issuecomment-754661855
@ -104,27 +102,11 @@ export default function LayoutHead(props: Props): JSX.Element {
<>
<Head>
<html lang={htmlLang} dir={htmlDir} />
{metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{keywords && keywords.length && (
<meta
name="keywords"
content={Array.isArray(keywords) ? keywords.join(',') : keywords}
/>
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && <meta name="twitter:image" content={metaImageUrl} />}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)}
<meta name="twitter:card" content="summary_large_image" />
</Head>
<Seo {...{title, description, keywords, image: image || defaultImage}} />
<CanonicalUrlHeaders />
<AlternateLangHeaders />

45
packages/docusaurus-theme-classic/src/theme/Seo/index.tsx Normal file
View file

@ -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 (
<Head>
{title && <title>{metaTitle}</title>}
{title && <meta property="og:title" content={metaTitle} />}
{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
}
/>
)}
{image && <meta property="og:image" content={metaImageUrl} />}
{image && <meta name="twitter:image" content={metaImageUrl} />}
{image && <meta name="twitter:card" content="summary_large_image" />}
</Head>
);
}