Merge pull request #160 from life-itself/seo-preview-images

[site/seo]: configure default social preview image for seo

site/components/MDX.js

@@ -1,6 +1,8 @@
 import Head from 'next/head'
 import ReactPlayer from 'react-player/lazy'
 import { Paragraph } from './Link'
+import { NextSeo } from 'next-seo'
+import siteConfig from "../config/siteConfig"
 
 const components = {
   Head,
@@ -8,57 +10,101 @@ const components = {
 }
 
 export default function MdxPage({ children, editUrl }) {
-  const { Component, frontmatter } = children
+  const { Component, frontmatter: {
+    title, description, date, authors, youtube, podcast, image, _raw
+  }} = children
 
+  let youtubeThumnbnail
   let podcastEmbed
 
-  if (frontmatter.podcast && frontmatter.podcast.includes("life-itself")) {
+  if (youtube && !image) {
-    const url = frontmatter.podcast
+    //  get the youtube thumbnail image from https://img.youtube.com/vi/<youtube-video-id>/maxresdefault.jpg
+    const regex =
+      /\www.youtube.com\/\embed\/|youtube.com\/\embed\/|youtu.be\/|\www.youtube.com\/\watch\?v=|\youtube.com\/\watch\?v=/;
+    youtubeThumnbnail =
+      youtube.replace(regex, "img.youtube.com/vi/") + "/maxresdefault.jpg";
+  }
+
+  if (podcast && podcast.includes("life-itself")) {
+    const podcastUrl = podcast
     podcastEmbed = ([
-      url.slice(0, "https://anchor.fm/life-itself".length),
+      podcastUrl.slice(0, "https://anchor.fm/life-itself".length),
       "/embed",
-      url.slice("https://anchor.fm/life-itself".length)
+      podcastUrl.slice("https://anchor.fm/life-itself".length)
     ].join(""))
   }
 
+  const titleFromUrl = _raw.flattenedPath
+    .split("/")
+    .pop()
+    .replace(/-/g, " ")
+    // capitalize first char of each word
+    .replace(/(^\w{1})|(\s{1}\w{1})/g, (str) => str.toUpperCase());
+
+  const SeoTitle = title ?? titleFromUrl;
+  const imageUrl = image
+    ? siteConfig.url + image
+    : youtubeThumnbnail ? youtubeThumnbnail : null
+
   return (
+    <>
+      <NextSeo
+        title={SeoTitle}
+        description={description}
+        canonical={`${siteConfig.url}/${_raw.flattenedPath}`}
+        openGraph={{
+          title: SeoTitle,
+          description: description,
+          images: imageUrl
+            ? ([
+                {
+                  url: imageUrl,
+                  width: 1200,
+                  height: 627,
+                  alt: title,
+                  type: "image/png"
+                },
+              ])
+            : siteConfig.nextSeo.openGraph.images,
+        }}
+      />
       <article className="prose dark:prose-invert mx-auto p-6">
         <header>
-        <div className="my-6">
+          <div className="mb-6">
-          {frontmatter.title && <h1 className="mb-0">{frontmatter.title}</h1>}
+            {title && <h1 className="mb-0">{title}</h1>}
-          {frontmatter.authors && (
+            {authors && (
               <div className="-mt-6">
-              <p className="opacity-60 pl-1">{frontmatter.authors}</p>
+                <p className="opacity-60 pl-1">{authors}</p>
               </div>
             )}
-          {frontmatter.date && (
+            {date && (
               <p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
-              on {frontmatter.date}
+                on {date}
               </p>
             )}
-          {frontmatter.description && (
+            {description && (
-            <p className="">{frontmatter.description}</p>
+              <p className="">{description}</p>
             )}
-          {frontmatter.youtube && (
+            {youtube && (
               <div className="relative pt-[56.25%]">
                 <ReactPlayer
                   className="absolute top-0 left-0"
                   width="100%"
                   height="100%"
-                url={frontmatter.youtube}
+                  url={youtube}
                 />
               </div>
             )}
-          {frontmatter.podcast && (
+            {podcast && (
-            <div className='pt-4'>
+              <div className="pt-4">
                 <ul className="list-disc">
                   <li>
                     Podcast: &nbsp;
-                  <a href={frontmatter.podcast}>{frontmatter.podcast}</a>
+                    <a href={podcast}>{podcast}</a>
                   </li>
                 </ul>
                 {podcastEmbed && (
-                <div className='md:mx-4'>
+                  <div className="md:mx-4">
                     <iframe
                       src={podcastEmbed}
                       height="100px"
@@ -82,13 +128,14 @@ export default function MdxPage({ children, editUrl }) {
             <a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
               Edit this page
               <span className="mx-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                 </svg>
               </span>
             </a>
           </div>)}
         </main>
       </article>
+    </>
   );
 }

site/pages/[...slug].js

@@ -1,7 +1,6 @@
 import MdxPage from '../components/MDX';
 import { allOtherPages } from 'contentlayer/generated';
 import { useMDXComponent } from 'next-contentlayer/hooks';
-import { NextSeo } from 'next-seo';
 import siteConfig from "../config/siteConfig"
 
 
@@ -16,42 +15,13 @@ export default function Page({ body, ...rest }) {
     },
   };
 
-  const titleFromUrl = rest._raw.flattenedPath
-    .split("/")
-    .pop()
-    .replace(/-/g, " ")
-    // capitalize first char of each word
-    .replace(/(^\w{1})|(\s{1}\w{1})/g, (str) => str.toUpperCase());
-
-  const title = children.frontmatter.title ?? titleFromUrl
-  const imageUrl = siteConfig.url + children.frontmatter.image
-
   // enable editing content only for claims, concepts, and guide for now
   const editUrl = ['claims', 'concepts', 'guide'].includes(rest._raw.sourceFileDir)
         ? siteConfig.repoRoot + siteConfig.repoEditPath + rest._raw.sourceFilePath
         : null
   
   return (
-    <>
-      <NextSeo
-        title={title}
-        description={children.frontmatter.description}
-        canonical={`${siteConfig.url}/${rest._raw.flattenedPath}`}
-        openGraph={{
-          title: title,
-          description: children.frontmatter.description,
-          images: [
-            {
-              url: imageUrl,
-              width: 1200,
-              height: 627,
-              alt: children.frontmatter.title,
-            },
-          ],
-        }}
-      />
       <MdxPage children={children} editUrl={editUrl} />
-    </>
   );
 }