diff --git a/site/components/MDX.js b/site/components/MDX.js index 681c04a..fe906ff 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,73 +10,117 @@ 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")) { - const url = frontmatter.podcast + if (youtube && !image) { + // get the youtube thumbnail image from https://img.youtube.com/vi//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 ( -
-
-
- {frontmatter.title &&

{frontmatter.title}

} - {frontmatter.authors && ( -
-

{frontmatter.authors}

-
- )} - {frontmatter.date && ( -

- on {frontmatter.date} -

- )} - {frontmatter.description && ( -

{frontmatter.description}

- )} - {frontmatter.youtube && ( -
- -
- )} - {frontmatter.podcast && ( -
- - {podcastEmbed && ( -
-