From 3ecdf4cca269e8cc327d6a77740ed0d388183586 Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Tue, 21 Jun 2022 15:32:21 +0300
Subject: [PATCH] [bugfix,site][s]: replace YOUTUBE_REGEX

---
 site/components/Home/Latest.js |  4 +--
 site/components/MDX.js         |  4 +--
 site/lib/constants.js          |  1 -
 site/pages/notes.js            | 64 +++++++++++++++++-----------------
 4 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/site/components/Home/Latest.js b/site/components/Home/Latest.js
index 73c9403..d47f2c9 100644
--- a/site/components/Home/Latest.js
+++ b/site/components/Home/Latest.js
@@ -1,5 +1,5 @@
 import Link from "next/link"
-import { YOUTUBE_REGEX } from "../../lib/constants"
+import { YOUTUBE_ID_REGEX } from "../../lib/constants"
 
 export function Latest({ posts }) {
   return (
@@ -23,7 +23,7 @@ export function Latest({ posts }) {
                 <div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between">
                   <div className="flex-1">
                     <p className="text-sm font-medium text-indigo-600 dark:text-yellow-500">
-                      {youtube && YOUTUBE_REGEX.test(youtube) ? (
+                      {youtube && YOUTUBE_ID_REGEX.test(youtube) ? (
                         <a target="_blank" rel="noopener" href={youtube} className="hover:underline">
                         Video
                       </a>) : <p>Article</p>}
diff --git a/site/components/MDX.js b/site/components/MDX.js
index b9f6763..9362a3d 100644
--- a/site/components/MDX.js
+++ b/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 { YOUTUBE_REGEX, YOUTUBE_ID_REGEX } from "lib/constants";
+import { YOUTUBE_ID_REGEX } from "lib/constants";
 
 export default function MdxPage({ body, meta }) {
   const { title, description, date, keywords, youtube, podcast, image, _raw } =
     meta;
 
-  const youtubeId = youtube && YOUTUBE_REGEX.test(youtube) && youtube.match(YOUTUBE_ID_REGEX)[1]
+  const youtubeId = youtube && YOUTUBE_ID_REGEX.test(youtube) && youtube.match(YOUTUBE_ID_REGEX)[1]
 
   const PodcastIcon = siteConfig.social.find((s) => s.name === "Podcast").icon;
 
diff --git a/site/lib/constants.js b/site/lib/constants.js
index 5b6e54c..0b11839 100644
--- a/site/lib/constants.js
+++ b/site/lib/constants.js
@@ -1,4 +1,3 @@
-export const YOUTUBE_REGEX = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
 export const YOUTUBE_ID_REGEX = /(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:\S*&)?vi?=|(?:embed|v|vi|user|shorts)\/))([^?&\"'>\s]+)/
 
 export const TWITTER_REGEX = /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/(\d+)/;
diff --git a/site/pages/notes.js b/site/pages/notes.js
index 4bc7dde..7472e48 100644
--- a/site/pages/notes.js
+++ b/site/pages/notes.js
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { allOtherPages } from "contentlayer/generated"
-import { YOUTUBE_REGEX } from "lib/constants";
+import { YOUTUBE_ID_REGEX } from "lib/constants";
 
 export async function getStaticProps() {
   const posts = allOtherPages
@@ -30,37 +30,37 @@ export default function Notes({ 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(({ title, description, image, youtube, link }) => (
-						title && description && 
-							(<div key={link} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
-								<div className={`bg-stone-100 flex-shrink-0 ${image ? "h-48" : "h-10"}`}>
-									{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">
-											<p className="text-sm font-medium text-indigo-600 dark:text-yellow-500">
-												{youtube && YOUTUBE_REGEX.test(youtube)
-													? (<a target="_blank" rel="noopener" href={youtube} className="hover:underline">
-														Video
-													</a>) 
-													: <p>Article</p>
-												}
-											</p>
-											<Link href={link}>
-												<a className="block mt-2">
-													<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, image ? 120 : 200)} ...`
-															: description
-														}
-													</p>
-												</a>
-											</Link>
-									</div>
-								</div>
-							</div>)
-					))}
+          {posts && posts.map(({ title, description, image, youtube, link }) => (
+            title && description && 
+              (<div key={link} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
+                <div className={`bg-stone-100 flex-shrink-0 ${image ? "h-48" : "h-10"}`}>
+                  {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">
+                    <p className="text-sm font-medium text-indigo-600 dark:text-yellow-500">
+                      {youtube && YOUTUBE_ID_REGEX.test(youtube)
+                        ? (<a target="_blank" rel="noopener" href={youtube} className="hover:underline">
+                          Video
+                        </a>) 
+                        : <p>Article</p>
+                      }
+                    </p>
+                    <Link href={link}>
+                      <a className="block mt-2">
+                        <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, image ? 120 : 200)} ...`
+                            : description
+                          }
+                        </p>
+                      </a>
+                    </Link>
+                  </div>
+                </div>
+              </div>)
+          ))}
         </div>
       </div>
     </div>