display frontmatter fields on page and add seo

site/components/MDX.js

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import ReactPlayer from 'react-player/lazy'
 import { Paragraph } from './Link'
 
 const components = {
@@ -8,20 +9,67 @@ const components = {
 
 export default function MdxPage({ children }) {
   const { Component, frontmatter } = children
+  
+  let podcastEmbed
+
+  if (frontmatter.podcast && frontmatter.podcast.includes("life-itself")) {
+    const url = frontmatter.podcast
+    podcastEmbed = ([
+      url.slice(0, "https://anchor.fm/life-itself".length),
+      "/embed",
+      url.slice("https://anchor.fm/life-itself".length)
+    ].join(""))
+  }
 
   return (
     <article className="prose dark:prose-invert mx-auto p-6">
       <header>
         <div className="mb-6">
-          <h1>{frontmatter.title}</h1>
+          {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>
+            <div className="-mt-6">
+              <p className="opacity-60 pl-1">{frontmatter.authors}</p>
+            </div>
           )}
           {frontmatter.date && (
-            <p className="">{frontmatter.date}</p>
+            <p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
+              on {frontmatter.date}
+            </p>
           )}
           {frontmatter.description && (
-            <p classname="">frontmatter.description}</p>
+            <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>
@@ -29,5 +77,5 @@ export default function MdxPage({ children }) {
         <Component components={components} />
       </main>
     </article>
-  )
+  );
 }

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

@@ -1,7 +1,8 @@
 import MdxPage from '../components/MDX';
 import { allOtherPages } from 'contentlayer/generated';
 import { useMDXComponent } from 'next-contentlayer/hooks';
-import { NewsArticleJsonLd, NextSeo } from 'next-seo';
+import { NextSeo } from 'next-seo';
+import siteConfig from "../config/siteConfig"
 
 
 export default function Page({ body, ...rest }) {
@@ -9,14 +10,17 @@ export default function Page({ body, ...rest }) {
   const children = {
     Component,
     frontmatter: {
-      authors: rest.authors,
       title: rest.title,
       date: rest.date,
       description: rest.description,
-      modified: rest.modified,
+      image: rest.image,
-      tags: rest.tags,
+      youtube: rest.youtube,
-    }
+      podcast: rest.podcast,
-  }
+      featured: rest.featured,
+      created: rest.created,
+      aliases: rest.aliases
+    },
+  };
 
   const titleFromUrl = rest._raw.flattenedPath
     .split("/")
@@ -27,7 +31,23 @@ export default function Page({ body, ...rest }) {
   
   return (
     <>
-      <NextSeo title={children.frontmatter.title ?? titleFromUrl} />
+      <NextSeo
+        title={children.frontmatter.title ?? titleFromUrl}
+        description={children.frontmatter.description}
+        canonical={siteConfig.url + "/" + rest._raw.flattenedPath}
+        openGraph={{
+          title: children.frontmatter.title ?? titleFromUrl,
+          description: children.frontmatter.description,
+          images: [
+            {
+              url: siteConfig.url + children.frontmatter.image,
+              width: 1200,
+              height: 627,
+              alt: children.frontmatter.title,
+            },
+          ],
+        }}
+      />
       <MdxPage children={children} />
     </>
   );