[site/mdx][s]: remove youtube thumbnail logic

site/components/Home/Latest.js

@@ -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 }) => {
+          {posts && posts.map(({ title, description, image, youtube, link }) => (
-            const { thumbnail } = getYoutube(youtube)
+              <div key={link} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
-            const imageSource = image || thumbnail
-            return (
-              <div key={_id} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
                   <div className="h-48 bg-stone-100 flex-shrink-0">
-                    {imageSource ?
+                    {image && <img className="" width="100%" height="100%" src={image} alt={title} />}
-                      <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>
-                        )
-                    }
                   </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>
   )

site/components/MDX.js

@@ -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
+  const imageUrl = image ? siteConfig.url + image : null;
-    ? siteConfig.url + image
-    : youtubeThumnbnail
-    ? youtubeThumnbnail
-    : null;
 
   // enable editing for all pages for now
   const editUrl = siteConfig.repoRoot + siteConfig.repoEditPath + _raw.sourceFilePath

site/pages/demo.js

@@ -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 }
-    }
-}

site/utils/getYoutube.js

@@ -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
-  };
-}