[site/mdx][xs]: refactor code for youtube regex
This commit is contained in:
khalilcodes
parent
3b1e0350d6
commit
0be1d0b72f
|
|
@ -1,37 +1,49 @@
|
||||||
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 { NextSeo } from "next-seo";
|
||||||
import siteConfig from "../config/siteConfig"
|
import siteConfig from "../config/siteConfig";
|
||||||
|
import { YOUTUBE_REGEX } from "../lib/constants";
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
Head,
|
Head,
|
||||||
p: Paragraph
|
p: Paragraph,
|
||||||
}
|
};
|
||||||
|
|
||||||
export default function MdxPage({ children, editUrl }) {
|
export default function MdxPage({ children, editUrl }) {
|
||||||
const { Component, frontmatter: {
|
const {
|
||||||
title, description, date, authors, youtube, podcast, image, _raw
|
Component,
|
||||||
}} = children
|
frontmatter: {
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
date,
|
||||||
|
authors,
|
||||||
|
youtube,
|
||||||
|
podcast,
|
||||||
|
image,
|
||||||
|
_raw,
|
||||||
|
},
|
||||||
|
} = children;
|
||||||
|
|
||||||
let youtubeThumnbnail
|
let youtubeThumnbnail;
|
||||||
let podcastEmbed
|
let podcastEmbed;
|
||||||
|
|
||||||
if (youtube && !image) {
|
if (youtube && YOUTUBE_REGEX.test(youtube) && !image) {
|
||||||
// get the youtube thumbnail image from https://img.youtube.com/vi/<youtube-video-id>/maxresdefault.jpg
|
// get the youtube thumbnail image from https://img.youtube.com/vi/<youtube-video-id>/maxresdefault.jpg
|
||||||
const regex =
|
const youtubeId = youtube.split(/^|=|\//).pop();
|
||||||
/\www.youtube.com\/\embed\/|youtube.com\/\embed\/|youtu.be\/|\www.youtube.com\/\watch\?v=|\youtube.com\/\watch\?v=/;
|
youtubeThumnbnail = youtube.replace(
|
||||||
youtubeThumnbnail =
|
YOUTUBE_REGEX,
|
||||||
youtube.replace(regex, "img.youtube.com/vi/") + "/maxresdefault.jpg";
|
`https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (podcast && podcast.includes("life-itself")) {
|
if (podcast && podcast.includes("life-itself")) {
|
||||||
const podcastUrl = podcast
|
const podcastUrl = podcast;
|
||||||
podcastEmbed = ([
|
podcastEmbed = [
|
||||||
podcastUrl.slice(0, "https://anchor.fm/life-itself".length),
|
podcastUrl.slice(0, "https://anchor.fm/life-itself".length),
|
||||||
"/embed",
|
"/embed",
|
||||||
podcastUrl.slice("https://anchor.fm/life-itself".length)
|
podcastUrl.slice("https://anchor.fm/life-itself".length),
|
||||||
].join(""))
|
].join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
const titleFromUrl = _raw.flattenedPath
|
const titleFromUrl = _raw.flattenedPath
|
||||||
|
|
@ -44,7 +56,9 @@ export default function MdxPage({ children, editUrl }) {
|
||||||
const SeoTitle = title ?? titleFromUrl;
|
const SeoTitle = title ?? titleFromUrl;
|
||||||
const imageUrl = image
|
const imageUrl = image
|
||||||
? siteConfig.url + image
|
? siteConfig.url + image
|
||||||
: youtubeThumnbnail ? youtubeThumnbnail : null
|
: youtubeThumnbnail
|
||||||
|
? youtubeThumnbnail
|
||||||
|
: null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -56,15 +70,15 @@ export default function MdxPage({ children, editUrl }) {
|
||||||
title: SeoTitle,
|
title: SeoTitle,
|
||||||
description: description,
|
description: description,
|
||||||
images: imageUrl
|
images: imageUrl
|
||||||
? ([
|
? [
|
||||||
{
|
{
|
||||||
url: imageUrl,
|
url: imageUrl,
|
||||||
width: 1200,
|
width: 1200,
|
||||||
height: 627,
|
height: 627,
|
||||||
alt: title,
|
alt: title,
|
||||||
type: "image/png"
|
type: "image/png",
|
||||||
},
|
},
|
||||||
])
|
]
|
||||||
: siteConfig.nextSeo.openGraph.images,
|
: siteConfig.nextSeo.openGraph.images,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -82,10 +96,8 @@ export default function MdxPage({ children, editUrl }) {
|
||||||
on {date}
|
on {date}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{description && (
|
{description && <p className="">{description}</p>}
|
||||||
<p className="">{description}</p>
|
{youtube && YOUTUBE_REGEX.test(youtube) && (
|
||||||
)}
|
|
||||||
{youtube && (
|
|
||||||
<div className="relative pt-[56.25%]">
|
<div className="relative pt-[56.25%]">
|
||||||
<ReactPlayer
|
<ReactPlayer
|
||||||
className="absolute top-0 left-0"
|
className="absolute top-0 left-0"
|
||||||
|
|
@ -121,19 +133,35 @@ export default function MdxPage({ children, editUrl }) {
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<div className="my-6">
|
<div className="my-6">
|
||||||
<Component components={components} />
|
<Component components={components} />
|
||||||
</div>
|
</div>
|
||||||
{editUrl && (
|
{editUrl && (
|
||||||
<div className='mt-12 mb-6'>
|
<div className="mt-12 mb-6">
|
||||||
<a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
|
<a
|
||||||
Edit this page
|
className="flex no-underline font-semibold text-yellow-li"
|
||||||
<span className="mx-1">
|
href={editUrl}
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
target="_blank"
|
||||||
<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>
|
Edit this page
|
||||||
</span>
|
<span className="mx-1">
|
||||||
</a>
|
<svg
|
||||||
</div>)}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</main>
|
</main>
|
||||||
</article>
|
</article>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue