Adding youtube links.

package-lock.json

@@ -33,6 +33,7 @@
                 "stripe": "^11.8.0"
             },
             "devDependencies": {
+                "@tailwindcss/aspect-ratio": "^0.4.2",
                 "autoprefixer": "^10.4.13",
                 "postcss": "^8.4.21",
                 "tailwindcss": "^3.2.4"
@@ -1894,6 +1895,15 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@tailwindcss/aspect-ratio": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
+            "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
+            "dev": true,
+            "peerDependencies": {
+                "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -7981,6 +7991,13 @@
                 "tslib": "^2.4.0"
             }
         },
+        "@tailwindcss/aspect-ratio": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
+            "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
+            "dev": true,
+            "requires": {}
+        },
         "@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",

package.json

@@ -35,6 +35,7 @@
         "stripe": "^11.8.0"
     },
     "devDependencies": {
+        "@tailwindcss/aspect-ratio": "^0.4.2",
         "autoprefixer": "^10.4.13",
         "postcss": "^8.4.21",
         "tailwindcss": "^3.2.4"

src/app/(main)/podcast/[slug]/page.jsx

@@ -133,6 +133,12 @@ export default async function Page({ params }) {
             </p>
           </header>
           <hr className="my-12 border-gray-200" />
+          {episode?.youtube && (
+            <div class="aspect-w-16 aspect-h-9">
+              <iframe src={episode.youtube} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+              <hr className="my-12 border-gray-200" />
+            </div>
+          )}
           <div
             className="prose prose-slate mt-14 [&>h2]:mt-12 [&>h2]:flex [&>h2]:items-center [&>h2]:font-mono [&>h2]:text-sm [&>h2]:font-medium [&>h2]:leading-7 [&>h2]:text-slate-900 [&>h2]:before:mr-3 [&>h2]:before:h-3 [&>h2]:before:w-1.5 [&>h2]:before:rounded-r-full [&>h2]:before:bg-cyan-200 [&>ul]:mt-6 [&>ul]:list-['\2013\20'] [&>ul]:pl-5 [&>h2:nth-of-type(3n+2)]:before:bg-indigo-200 [&>h2:nth-of-type(3n)]:before:bg-violet-200"
             dangerouslySetInnerHTML={{ __html: episode.content || 'CONTENT' }}

src/data/episodes.js

@@ -9,23 +9,28 @@ export const PAGE_SIZE = 15;
 const episodeExtra = {
   'Buzzsprout-12260917': {
     slug: 'my-secret-to-successfully-working-in-react-with-a-mental-illness-mental-illness-in-software-part-2',
-    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '081-mixed.srt')).toString())
+    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '081-mixed.srt')).toString()),
+    youtube: 'https://www.youtube.com/embed/T8kWqE3x3_k'
   },
   'Buzzsprout-12258802': {
     slug: 'boss-what-meds-are-you-on-mental-illness-in-the-software-industry-part-1',
-    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '080-mixed.srt')).toString())
+    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '080-mixed.srt')).toString()),
+    youtube: 'https://www.youtube.com/embed/nz45jIY4vAg'
   },
   'Buzzsprout-12228273': {
     slug: 'moving-past-failure-learning-react-on-three-hours-per-week-janes-story',
-    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '079-mixed.srt')).toString())
+    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '079-mixed.srt')).toString()),
+    youtube: 'https://www.youtube.com/embed/uSpm2anwPnI'
   },
   'Buzzsprout-12220716': {
     slug: 'dropping-out-of-college-to-sell-my-first-saas-app',
-    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '078-mixed.srt')).toString())
+    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '078-mixed.srt')).toString()),
+    youtube: 'https://www.youtube.com/embed/cmT4okpCSrk'
   },
   'Buzzsprout-12207725': {
     slug: 'the-truth-about-react-server-components',
-    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '077-mixed.srt')).toString())
+    transcript: srtparsejs.parse(fs.readFileSync(path.join(process.cwd(), 'src', 'data', '077-mixed.srt')).toString()),
+    youtube: 'https://www.youtube.com/embed/aO9MrsK0Mos'
   },
   'Buzzsprout-12158608': {
     slug: 'how-using-typescript-actually-makes-your-program-worse',
@@ -208,6 +213,7 @@ export async function getEpisodes() {
       description,
       content,
       chapters,
+      youtube: episodeExtra[id]?.youtube,
       slug: episodeExtra[id]?.slug || title.replace(/[\W_]/g, '-'),
       transcript: episodeExtra[id]?.transcript,
       audio: [enclosure].map((enclosure) => ({

tailwind.config.js

@@ -19,5 +19,6 @@ module.exports = {
     require('@tailwindcss/line-clamp'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/forms'),
+    require('@tailwindcss/aspect-ratio'),
   ],
 }