ability to add/override theme html metadatas

see #3024
facebook · Sep 4, 2020 · 1d99014 · 1d99014
1 parent f49d8ba
commit 1d99014
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -28,11 +28,11 @@ function Providers({children}) {
 }
 
 function Layout(props: Props): JSX.Element {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const {siteConfig} = useDocusaurusContext();
   const {
     favicon,
     title: siteTitle,
-    themeConfig: {image: defaultImage},
+    themeConfig: {image: defaultImage, metadatas},
     url: siteUrl,
   } = siteConfig;
   const {
@@ -48,13 +48,11 @@ function Layout(props: Props): JSX.Element {
   const metaImage = image || defaultImage;
   const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
   const faviconUrl = useBaseUrl(favicon);
-
   return (
     <Providers>
       <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} />}
@@ -74,6 +72,19 @@ function Layout(props: Props): JSX.Element {
         {permalink && <link rel="canonical" href={siteUrl + permalink} />}
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
+
+      <Head
+      // it's important to have an additional <Head> element here,
+      // as it allows react-helmet to override values set in previous <Head>
+      // ie we can override default metadatas such as "twitter:card"
+      // In same Head, the same meta would appear twice instead of overriding
+      // See react-helmet doc
+      >
+        {metadatas.map((metadata, i) => (
+          <meta key={`metadata_${i}`} {...metadata} />
+        ))}
+      </Head>
+
       <AnnouncementBar />
       <Navbar />
       <div className="main-wrapper">{children}</div>

diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -137,6 +137,15 @@ const ColorModeSchema = Joi.object({
   }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig),
 }).default(DEFAULT_COLOR_MODE_CONFIG);
 
+// schema can probably be improved
+const HtmlMetadataSchema = Joi.object({
+  id: Joi.string(),
+  name: Joi.string(),
+  property: Joi.string(),
+  content: Joi.string(),
+  itemprop: Joi.string(),
+}).unknown();
+
 const FooterLinkItemSchema = Joi.object({
   to: Joi.string(),
   href: URISchema,
@@ -164,6 +173,7 @@ const ThemeConfigSchema = Joi.object({
   }),
   colorMode: ColorModeSchema,
   image: Joi.string(),
+  metadatas: Joi.array().items(HtmlMetadataSchema).default([]),
   announcementBar: Joi.object({
     id: Joi.string().default('announcement-bar'),
     content: Joi.string(),

diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
@@ -85,6 +85,20 @@ module.exports = {
 };
 ```
 
+### Metadatas
+
+You can configure additional html metadatas (and override existing ones).
+
+```js {4-6} title="docusaurus.config.js"
+module.exports = {
+  // ...
+  themeConfig: {
+    metadatas: [{name: 'twitter:card', content: 'summary'}],
+    // ...
+  },
+};
+```
+
 ### Announcement bar
 
 Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissable panel above the navbar.

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -228,6 +228,7 @@ module.exports = {
       darkTheme: require('prism-react-renderer/themes/dracula'),
     },
     image: 'img/docusaurus-soc.png',
+    // metadatas: [{name: 'twitter:card', content: 'summary'}],
     gtag: {
       trackingID: 'UA-141789564-1',
     },