docusaurus/packages/docusaurus-theme-classic/src/theme/Layout/index.js
Alexey Pyltsyn c0c7457e01
feat(v2): allow specifying meta image for blog posts (#2856)
* feat(v2): allow specifying meta image for blog posts

* Update docs [skip ci]
2020-06-02 10:48:22 +03:00

90 lines
2.9 KiB
JavaScript

/**
* 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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ThemeProvider from '@theme/ThemeProvider';
import TabGroupChoiceProvider from '@theme/TabGroupChoiceProvider';
import AnnouncementBarProvider from '@theme/AnnouncementBarProvider';
import AnnouncementBar from '@theme/AnnouncementBar';
import Navbar from '@theme/Navbar';
import Footer from '@theme/Footer';
import './styles.css';
function Layout(props) {
const {siteConfig = {}} = useDocusaurusContext();
const {
favicon,
title: siteTitle,
themeConfig: {image: defaultImage},
url: siteUrl,
} = siteConfig;
const {
children,
title,
noFooter,
description,
image,
keywords,
permalink,
version,
} = props;
const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
const metaImage = image || defaultImage;
const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
const faviconUrl = useBaseUrl(favicon);
return (
<ThemeProvider>
<TabGroupChoiceProvider>
<AnnouncementBarProvider>
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" />
{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} />
)}
{version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && (
<meta property="twitter:image" content={metaImageUrl} />
)}
{metaImage && (
<meta
name="twitter:image:alt"
content={`Image for ${metaTitle}`}
/>
)}
{permalink && (
<meta property="og:url" content={siteUrl + permalink} />
)}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
<meta name="twitter:card" content="summary_large_image" />
</Head>
<AnnouncementBar />
<Navbar />
<div className="main-wrapper">{children}</div>
{!noFooter && <Footer />}
</AnnouncementBarProvider>
</TabGroupChoiceProvider>
</ThemeProvider>
);
}
export default Layout;