[site/seo][s]: configure seo for default image previews
This commit is contained in:
khalilcodes
parent
c4321f3009
commit
7faadb9492
|
|
@ -1,6 +1,8 @@
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import ReactPlayer from 'react-player/lazy'
|
import ReactPlayer from 'react-player/lazy'
|
||||||
import { Paragraph } from './Link'
|
import { Paragraph } from './Link'
|
||||||
|
import { NextSeo } from 'next-seo'
|
||||||
|
import siteConfig from "../config/siteConfig"
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
Head,
|
Head,
|
||||||
|
|
@ -8,74 +10,119 @@ const components = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MdxPage({ children }) {
|
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
|
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 = ([
|
podcastEmbed = ([
|
||||||
url.slice(0, "https://anchor.fm/life-itself".length),
|
podcastUrl.slice(0, "https://anchor.fm/life-itself".length),
|
||||||
"/embed",
|
"/embed",
|
||||||
url.slice("https://anchor.fm/life-itself".length)
|
podcastUrl.slice("https://anchor.fm/life-itself".length)
|
||||||
].join(""))
|
].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 (
|
return (
|
||||||
<article className="prose dark:prose-invert mx-auto p-6">
|
<>
|
||||||
<header>
|
<NextSeo
|
||||||
<div className="mb-6">
|
title={SeoTitle}
|
||||||
{frontmatter.title && <h1 className="mb-0">{frontmatter.title}</h1>}
|
description={description}
|
||||||
{frontmatter.authors && (
|
canonical={`${siteConfig.url}/${_raw.flattenedPath}`}
|
||||||
<div className="-mt-6">
|
openGraph={{
|
||||||
<p className="opacity-60 pl-1">{frontmatter.authors}</p>
|
title: SeoTitle,
|
||||||
</div>
|
description: description,
|
||||||
)}
|
images: imageUrl
|
||||||
{frontmatter.date && (
|
? ([
|
||||||
<p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
|
{
|
||||||
on {frontmatter.date}
|
url: imageUrl,
|
||||||
</p>
|
width: 1200,
|
||||||
)}
|
height: 627,
|
||||||
{frontmatter.description && (
|
alt: title,
|
||||||
<p className="">{frontmatter.description}</p>
|
type: "image/png"
|
||||||
)}
|
},
|
||||||
{frontmatter.youtube && (
|
])
|
||||||
<div className="relative pt-[56.25%]">
|
: siteConfig.nextSeo.openGraph.images,
|
||||||
<ReactPlayer
|
}}
|
||||||
className="absolute top-0 left-0"
|
/>
|
||||||
width="100%"
|
<article className="prose dark:prose-invert mx-auto p-6">
|
||||||
height="100%"
|
<header>
|
||||||
url={frontmatter.youtube}
|
<div className="mb-6">
|
||||||
/>
|
{title && <h1 className="mb-0">{title}</h1>}
|
||||||
</div>
|
{authors && (
|
||||||
)}
|
<div className="-mt-6">
|
||||||
{frontmatter.podcast && (
|
<p className="opacity-60 pl-1">{authors}</p>
|
||||||
<div className='pt-4'>
|
</div>
|
||||||
<ul className="list-disc">
|
)}
|
||||||
<li>
|
{date && (
|
||||||
Podcast:
|
<p className="text-gray-900 dark:text-gray-500 text-sm pl-2">
|
||||||
<a href={frontmatter.podcast}>{frontmatter.podcast}</a>
|
on {date}
|
||||||
</li>
|
</p>
|
||||||
</ul>
|
)}
|
||||||
{podcastEmbed && (
|
{description && (
|
||||||
<div className='md:mx-4'>
|
<p className="">{description}</p>
|
||||||
<iframe
|
)}
|
||||||
src={podcastEmbed}
|
{youtube && (
|
||||||
height="100px"
|
<div className="relative pt-[56.25%]">
|
||||||
width="100%"
|
<ReactPlayer
|
||||||
frameBorder="0"
|
className="absolute top-0 left-0"
|
||||||
scrolling="no"
|
width="100%"
|
||||||
className="rounded-md"
|
height="100%"
|
||||||
/>
|
url={youtube}
|
||||||
</div>
|
/>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
{podcast && (
|
||||||
</div>
|
<div className="pt-4">
|
||||||
</header>
|
<ul className="list-disc">
|
||||||
<main>
|
<li>
|
||||||
<Component components={components} />
|
Podcast:
|
||||||
</main>
|
<a href={podcast}>{podcast}</a>
|
||||||
</article>
|
</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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue