Merge pull request #160 from life-itself/seo-preview-images
[site/seo]: configure default social preview image for seo
This commit is contained in:
Khalil Ali
GitHub
commit
52145b575d
|
|
@ -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,73 +10,117 @@ const components = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MdxPage({ children, editUrl }) {
|
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
|
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="my-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>
|
||||||
<div className="my-6">
|
Podcast:
|
||||||
|
<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>
|
||||||
|
<div className="my-6">
|
||||||
<Component components={components} />
|
<Component components={components} />
|
||||||
</div>
|
</div>
|
||||||
{editUrl && (
|
{editUrl && (
|
||||||
|
|
@ -82,13 +128,14 @@ export default function MdxPage({ children, editUrl }) {
|
||||||
<a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
|
<a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
|
||||||
Edit this page
|
Edit this page
|
||||||
<span className="mx-1">
|
<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>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>)}
|
</div>)}
|
||||||
</main>
|
</main>
|
||||||
</article>
|
</article>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,6 @@
|
||||||
import MdxPage from '../components/MDX';
|
import MdxPage from '../components/MDX';
|
||||||
import { allOtherPages } from 'contentlayer/generated';
|
import { allOtherPages } from 'contentlayer/generated';
|
||||||
import { useMDXComponent } from 'next-contentlayer/hooks';
|
import { useMDXComponent } from 'next-contentlayer/hooks';
|
||||||
import { NextSeo } from 'next-seo';
|
|
||||||
import siteConfig from "../config/siteConfig"
|
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
|
// enable editing content only for claims, concepts, and guide for now
|
||||||
const editUrl = ['claims', 'concepts', 'guide'].includes(rest._raw.sourceFileDir)
|
const editUrl = ['claims', 'concepts', 'guide'].includes(rest._raw.sourceFileDir)
|
||||||
? siteConfig.repoRoot + siteConfig.repoEditPath + rest._raw.sourceFilePath
|
? siteConfig.repoRoot + siteConfig.repoEditPath + rest._raw.sourceFilePath
|
||||||
: null
|
: null
|
||||||
|
|
||||||
return (
|
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} />
|
<MdxPage children={children} editUrl={editUrl} />
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue