[site/mdx][s]: remove youtube thumbnail logic
This commit is contained in:
khalilcodes
parent
f970e70c75
commit
9d34954293
|
|
@ -1,20 +1,7 @@
|
|||
// import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { YOUTUBE_REGEX } from "../../lib/constants"
|
||||
import { getYoutube } from "../../utils/getYoutube"
|
||||
|
||||
export function Latest({ posts }) {
|
||||
// const initialValue = 6
|
||||
// const [ value, setValue ] = useState(initialValue)
|
||||
// const initialPosts = posts && posts.slice(0, value)
|
||||
|
||||
// const handleButton = () => {
|
||||
// setValue(prev =>
|
||||
// initialPosts.length === posts.length
|
||||
// ? initialValue
|
||||
// : prev + 3)
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div className="absolute inset-0">
|
||||
|
|
@ -28,22 +15,10 @@ export function Latest({ posts }) {
|
|||
</p>
|
||||
</div>
|
||||
<div className="mt-12 max-w-lg mx-auto grid gap-6 lg:grid-cols-3 lg:max-w-none">
|
||||
{posts && posts.map(({ _id, title, description, image, youtube, link }) => {
|
||||
const { thumbnail } = getYoutube(youtube)
|
||||
const imageSource = image || thumbnail
|
||||
return (
|
||||
<div key={_id} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
{posts && posts.map(({ title, description, image, youtube, link }) => (
|
||||
<div key={link} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="h-48 bg-stone-100 flex-shrink-0">
|
||||
{imageSource ?
|
||||
<img className="" width="100%" height="100%" src={imageSource} alt={title} />
|
||||
: (
|
||||
<div className="border-2 border-slate-900 m-2 inline-flex h-full text-xl font-bold tracking-tight text-left items-center p-4 text-[#000]">
|
||||
<Link href={link}>
|
||||
<a>{title}</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{image && <img className="" width="100%" height="100%" src={image} alt={title} />}
|
||||
</div>
|
||||
<div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between">
|
||||
<div className="flex-1">
|
||||
|
|
@ -55,10 +30,10 @@ export function Latest({ posts }) {
|
|||
</p>
|
||||
<Link href={link}>
|
||||
<a className="block mt-2">
|
||||
{(imageSource) && <p className="text-xl font-semibold text-slate-900 dark:text-slate-300">{title}</p>}
|
||||
<p className="text-xl font-semibold text-slate-900 dark:text-slate-300">{title}</p>
|
||||
<p className="mt-3 text-base text-gray-500">
|
||||
{description && description.length > 150
|
||||
? `${description.slice(0, imageSource ? 120 : 240)} ...`
|
||||
? `${description.slice(0, 120)} ...`
|
||||
: description
|
||||
}
|
||||
</p>
|
||||
|
|
@ -67,14 +42,8 @@ export function Latest({ posts }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
{/* <div className="w-full flex justify-center pt-12">
|
||||
{!(posts.length === initialPosts.length && value === initialValue) &&
|
||||
<button onClick={handleButton}>{initialPosts.length === posts.length ? "show less" : "show more"}</button>
|
||||
}
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ import MdxContent from "./MdxContent";
|
|||
import siteConfig from "../config/siteConfig";
|
||||
|
||||
import LiteYouTubeEmbed from "react-lite-youtube-embed";
|
||||
import { getYoutube } from "utils/getYoutube"
|
||||
import { YOUTUBE_REGEX, YOUTUBE_ID_REGEX } from "lib/constants";
|
||||
|
||||
export default function MdxPage({ body, meta }) {
|
||||
const { title, description, date, keywords, youtube, podcast, image, _raw } =
|
||||
meta;
|
||||
|
||||
const { id: youtubeId, thumbnail: youtubeThumnbnail } = getYoutube(youtube)
|
||||
const youtubeId = youtube && YOUTUBE_REGEX.test(youtube) && youtube.match(YOUTUBE_ID_REGEX)[1]
|
||||
|
||||
const PodcastIcon = siteConfig.social.find((s) => s.name === "Podcast").icon;
|
||||
|
||||
|
|
@ -21,11 +21,7 @@ export default function MdxPage({ body, meta }) {
|
|||
.replace(/(^\w{1})|(\s{1}\w{1})/g, (str) => str.toUpperCase());
|
||||
|
||||
const SeoTitle = title ?? titleFromUrl;
|
||||
const imageUrl = image
|
||||
? siteConfig.url + image
|
||||
: youtubeThumnbnail
|
||||
? youtubeThumnbnail
|
||||
: null;
|
||||
const imageUrl = image ? siteConfig.url + image : null;
|
||||
|
||||
// enable editing for all pages for now
|
||||
const editUrl = siteConfig.repoRoot + siteConfig.repoEditPath + _raw.sourceFilePath
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import { Latest } from "components/Home/Latest"
|
||||
import { allOtherPages } from "contentlayer/generated"
|
||||
|
||||
export default function Demo ({ deepDivePages }) {
|
||||
return <Latest posts={deepDivePages} />
|
||||
}
|
||||
|
||||
export async function getStaticProps() {
|
||||
const deepDivePages = allOtherPages
|
||||
.filter((page) => page.featured !== undefined && page.featured)
|
||||
.sort((a, b) => new Date(b.date) - new Date(a.date))
|
||||
.map((page) => {
|
||||
return {
|
||||
title: page.title ?? null,
|
||||
description: page.description ?? null,
|
||||
image: page.image ?? null,
|
||||
youtube: page.youtube ?? null,
|
||||
link: `/${page._raw.flattenedPath}`,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
props: { deepDivePages }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { YOUTUBE_REGEX, YOUTUBE_ID_REGEX } from "lib/constants";
|
||||
|
||||
export function getYoutube(youtube) {
|
||||
let youtubeThumbnail;
|
||||
|
||||
const youtubeId =
|
||||
youtube && YOUTUBE_REGEX.test(youtube) && youtube.match(YOUTUBE_ID_REGEX)[1];
|
||||
|
||||
if (youtubeId) {
|
||||
// get the youtube thumbnail image from https://img.youtube.com/vi/<youtube-video-id>/maxresdefault.jpg
|
||||
youtubeThumbnail = youtube.replace(
|
||||
YOUTUBE_REGEX,
|
||||
`https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg`
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
id: youtubeId,
|
||||
thumbnail: youtubeThumbnail
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue