From 2254b4095ebaad295175a816c2d126cd4de77a72 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Wed, 2 Nov 2022 11:33:23 +0100
Subject: [PATCH] [docs] Add author and published_time meta tags (#34382)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 docs/pages/index.tsx                         |  41 ++++----
 docs/src/modules/components/TopLayoutBlog.js | 101 +++++++++----------
 2 files changed, 70 insertions(+), 72 deletions(-)
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index 0953203fc77241..498cffac6346ec 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -22,7 +22,26 @@ export default function Home() {
       <Head
         title="MUI: The React component library you always wanted"
         description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
-      />
+      >
+        <script
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              '@context': 'https://schema.org',
+              '@type': 'Organization',
+              name: 'MUI',
+              url: 'https://mui.com/',
+              logo: 'https://mui.com/static/logo.png',
+              sameAs: [
+                'https://twitter.com/MUI_hq',
+                'https://github.com/mui/',
+                'https://opencollective.com/mui',
+              ],
+            }),
+          }}
+        />
+      </Head>
       <NoSsr>
         <NewsletterToast />
       </NoSsr>
@@ -40,26 +59,6 @@ export default function Home() {
         <Divider />
       </main>
       <AppFooter />
-      <script
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-{
-  "@context": "https://schema.org",
-  "@type": "Organization",
-  "name": "MUI",
-  "url": "https://mui.com/",
-  "logo": "https://mui.com/static/logo.png",
-  "sameAs": [
-    "https://twitter.com/MUI_hq",
-    "https://github.com/mui/",
-    "https://opencollective.com/mui"
-  ]
-}
-          `,
-        }}
-      />
     </BrandingCssVarsProvider>
   );
 }
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index d0afcfed994fdf..b22ac51628c605 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -228,7 +228,56 @@ function TopLayoutBlog(props) {
         disableAlternateLocale
         card={card}
         type="article"
-      />
+      >
+        <meta name="author" content={headers.authors.map((key) => authors[key].name).join(', ')} />
+        <meta property="article:published_time" content={headers.date} />
+        <script
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              '@context': 'https://schema.org',
+              '@type': 'Article',
+              publisher: {
+                '@type': 'Organization',
+                name: 'MUI blog',
+                url: 'https://mui.com/blog/',
+                logo: {
+                  '@type': 'ImageObject',
+                  url: 'https://mui.com/static/icons/512x512.png',
+                },
+              },
+              author: {
+                '@type': 'Person',
+                name: authors[headers.authors[0]].name,
+                image: {
+                  '@type': 'ImageObject',
+                  url: `${authors[headers.authors[0]].avatar}?s=${250}`,
+                  width: 250,
+                  height: 250,
+                },
+                sameAs: [`https://github.com/${authors[headers.authors[0]].github}`],
+              },
+              headline: finalTitle,
+              url: `https://mui.com${canonicalAsServer}`,
+              datePublished: headers.date,
+              dateModified: headers.date,
+              image: {
+                '@type': 'ImageObject',
+                url: card,
+                width: 1280,
+                height: 640,
+              },
+              keywords: headers.tags.join(', '),
+              description,
+              mainEntityOfPage: {
+                '@type': 'WebPage',
+                '@id': 'https://mui.com/blog/',
+              },
+            }),
+          }}
+        />
+      </Head>
       <Root className={className}>
         <AppContainer component="main" className={classes.container}>
           <Link
@@ -294,56 +343,6 @@ function TopLayoutBlog(props) {
         <Divider />
         <AppFooter />
       </Root>
-      <script
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-{
-  "@context": "https://schema.org",
-  "@type": "Article",
-  "publisher": {
-    "@type": "Organization",
-    "name": "MUI blog",
-    "url": "https://mui.com/blog/",
-    "logo": {
-      "@type": "ImageObject",
-      "url": "https://mui.com/static/icons/512x512.png"
-    }
-  },
-  "author": {
-    "@type": "Person",
-    "name": "${authors[headers.authors[0]].name}",
-    "image": {
-      "@type": "ImageObject",
-      "url": "${authors[headers.authors[0]].avatar}?s=${250}",
-      "width": 250,
-      "height": 250
-    },
-    "sameAs": [
-      "https://github.com/${authors[headers.authors[0]].github}"
-    ]
-  },
-  "headline": "${finalTitle}",
-  "url": "https://mui.com${canonicalAsServer}",
-  "datePublished": "${headers.date}",
-  "dateModified": "${headers.date}",
-  "image": {
-    "@type": "ImageObject",
-    "url": "${card}",
-    "width": 1280,
-    "height": 640
-  },
-  "keywords": "${headers.tags.join(', ')}",
-  "description": "${description}",
-  "mainEntityOfPage": {
-    "@type": "WebPage",
-    "@id": "https://mui.com/blog/"
-  }
-}
-            `,
-        }}
-      />
     </BrandingProvider>
   );
 }
