jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[bugfix,site][s]: replace YOUTUBE_REGEX

This commit is contained in:
khalilcodes 2022-06-21 15:32:21 +03:00
parent d284ea96ce
commit 3ecdf4cca2
4 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/components/Home/Latest.js
View File

@ -1,5 +1,5 @@
import Link from "next/link" import Link from "next/link"
import { YOUTUBE_REGEX } from "../../lib/constants" import { YOUTUBE_ID_REGEX } from "../../lib/constants"
export function Latest({ posts }) { export function Latest({ posts }) {
return ( 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 bg-slate-800 p-6 flex flex-col justify-between">
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-medium text-indigo-600 dark:text-yellow-500"> <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"> <a target="_blank" rel="noopener" href={youtube} className="hover:underline">
Video Video
</a>) : <p>Article</p>} </a>) : <p>Article</p>}

4
site/components/MDX.js
View File

@ -3,13 +3,13 @@ import MdxContent from "./MdxContent";
import siteConfig from "../config/siteConfig"; import siteConfig from "../config/siteConfig";
import LiteYouTubeEmbed from "react-lite-youtube-embed"; 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 }) { export default function MdxPage({ body, meta }) {
const { title, description, date, keywords, youtube, podcast, image, _raw } = const { title, description, date, keywords, youtube, podcast, image, _raw } =
meta; 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; const PodcastIcon = siteConfig.social.find((s) => s.name === "Podcast").icon;

1
site/lib/constants.js
View File

@ -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 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+)/; export const TWITTER_REGEX = /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/(\d+)/;

64
site/pages/notes.js
View File

@ -1,6 +1,6 @@
import Link from "next/link"; import Link from "next/link";
import { allOtherPages } from "contentlayer/generated" import { allOtherPages } from "contentlayer/generated"
import { YOUTUBE_REGEX } from "lib/constants"; import { YOUTUBE_ID_REGEX } from "lib/constants";
export async function getStaticProps() { export async function getStaticProps() {
const posts = allOtherPages const posts = allOtherPages
@ -30,37 +30,37 @@ export default function Notes({ posts }) {
</p> </p>
</div> </div>
<div className="mt-12 max-w-lg mx-auto grid gap-6 lg:grid-cols-3 lg:max-w-none"> <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 }) => ( {posts && posts.map(({ title, description, image, youtube, link }) => (
title && description && title && description &&
(<div key={link} className="flex flex-col rounded-lg shadow-lg overflow-hidden"> (<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"}`}> <div className={`bg-stone-100 flex-shrink-0 ${image ? "h-48" : "h-10"}`}>
{image && <img className="" width="100%" height="100%" src={image} alt={title} />} {image && <img className="" width="100%" height="100%" src={image} alt={title} />}
</div> </div>
<div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between"> <div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between">
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-medium text-indigo-600 dark:text-yellow-500"> <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"> ? (<a target="_blank" rel="noopener" href={youtube} className="hover:underline">
Video Video
</a>) </a>)
: <p>Article</p> : <p>Article</p>
} }
</p> </p>
<Link href={link}> <Link href={link}>
<a className="block mt-2"> <a className="block mt-2">
<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"> <p className="mt-3 text-base text-gray-500">
{description && description.length > 150 {description && description.length > 150
? `${description.slice(0, image ? 120 : 200)} ...` ? `${description.slice(0, image ? 120 : 200)} ...`
: description : description
} }
</p> </p>
</a> </a>
</Link> </Link>
</div> </div>
</div> </div>
</div>) </div>)
))} ))}
</div> </div>
</div> </div>
</div> </div>