From c4321f3009e0d6a270bcde077bf45547d5547f69 Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Fri, 13 May 2022 02:35:22 +0300
Subject: [PATCH 1/2] [site/pages][s]: move seo component and logic to MDX
 component

---
 site/pages/[...slug].js | 33 +--------------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/site/pages/[...slug].js b/site/pages/[...slug].js
index a56bf14..8a15d62 100644
--- a/site/pages/[...slug].js
+++ b/site/pages/[...slug].js
@@ -1,8 +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"
 
 
 export default function Page({ body, ...rest }) {
@@ -15,38 +13,9 @@ export default function Page({ body, ...rest }) {
       created: rest.created === "Invalid Date" ? null : rest.created
     },
   };
-
-  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
   
   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} />
-    </>
+    <MdxPage children={children} />
   );
 }
 

From 7faadb94924212eb2131e0bb7b3f6a877c3b2326 Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Fri, 13 May 2022 02:39:15 +0300
Subject: [PATCH 2/2] [site/seo][s]: configure seo for default image previews

---
 site/components/MDX.js | 169 ++++++++++++++++++++++++++---------------
 1 file changed, 108 insertions(+), 61 deletions(-)

diff --git a/site/components/MDX.js b/site/components/MDX.js
index a6ec2d0..587e852 100644
--- a/site/components/MDX.js
+++ b/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,74 +10,119 @@ const components = {
 }
 
 export default function MdxPage({ children }) {
-  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")) {
-    const url = frontmatter.podcast
+  if (youtube && !image) {
+    //  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 (
-    <article className="prose dark:prose-invert mx-auto p-6">
-      <header>
-        <div className="mb-6">
-          {frontmatter.title && <h1 className="mb-0">{frontmatter.title}</h1>}
-          {frontmatter.authors && (
-            <div className="-mt-6">
-              <p className="opacity-60 pl-1">{frontmatter.authors}</p>
-            </div>
-          )}
-          {frontmatter.date && (
-            <p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
-              on {frontmatter.date}
-            </p>
-          )}
-          {frontmatter.description && (
-            <p className="">{frontmatter.description}</p>
-          )}
-          {frontmatter.youtube && (
-            <div className="relative pt-[56.25%]">
-              <ReactPlayer
-                className="absolute top-0 left-0"
-                width="100%"
-                height="100%"
-                url={frontmatter.youtube}
-              />
-            </div>
-          )}
-          {frontmatter.podcast && (
-            <div className='pt-4'>
-              <ul className="list-disc">
-                <li>
-                  Podcast: &nbsp;
-                  <a href={frontmatter.podcast}>{frontmatter.podcast}</a>
-                </li>
-              </ul>
-              {podcastEmbed && (
-                <div className='md:mx-4'>
-                  <iframe
-                    src={podcastEmbed}
-                    height="100px"
-                    width="100%"
-                    frameBorder="0"
-                    scrolling="no"
-                    className="rounded-md"
-                  />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </header>
-      <main>
-        <Component components={components} />
-      </main>
-    </article>
+    <>
+      <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="mb-6">
+            {title && <h1 className="mb-0">{title}</h1>}
+            {authors && (
+              <div className="-mt-6">
+                <p className="opacity-60 pl-1">{authors}</p>
+              </div>
+            )}
+            {date && (
+              <p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
+                on {date}
+              </p>
+            )}
+            {description && (
+              <p className="">{description}</p>
+            )}
+            {youtube && (
+              <div className="relative pt-[56.25%]">
+                <ReactPlayer
+                  className="absolute top-0 left-0"
+                  width="100%"
+                  height="100%"
+                  url={youtube}
+                />
+              </div>
+            )}
+            {podcast && (
+              <div className="pt-4">
+                <ul className="list-disc">
+                  <li>
+                    Podcast: &nbsp;
+                    <a href={podcast}>{podcast}</a>
+                  </li>
+                </ul>
+                {podcastEmbed && (
+                  <div className="md:mx-4">
+                    <iframe
+                      src={podcastEmbed}
+                      height="100px"
+                      width="100%"
+                      frameBorder="0"
+                      scrolling="no"
+                      className="rounded-md"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </header>
+        <main>
+          <Component components={components} />
+        </main>
+      </article>
+    </>
   );
 }