add support for responsive youtube embeds in posts

data/blog/coronary-evidence-video.mdx

@@ -0,0 +1,12 @@
+---
+title: Coronary Evidence Tour video
+date: '2016-04-04'
+tags: ['video', 'tour']
+video: ZZFlhe_I4kI
+draft: false
+summary: We just toured with Aborted on the Coronary Evidence Tour!
+---
+
+We just toured with Aborted on the Coronary Evidence Tour!
+
+Check out video from the road here!

data/blog/new-merch-available.md

@@ -0,0 +1,14 @@
+---
+title: New merch available
+date: '2016-04-04'
+tags: ['merch']
+draft: false
+summary: New merch artwork made by Sam Haglund at Double Jaw Designs.
+images: ['/static/images/news/iga.jpg']
+---
+
+New merch artwork made by Sam Haglund at Double Jaw Designs.
+
+[facebook.com/doublejawdesigns](http://www.facebook.com/doublejawdesigns)
+
+![Parallel Biosphers](/static/images/news/merch-parallel-biospheres.jpg)

layouts/PostLayout.tsx

@@ -11,12 +11,6 @@ import { ReactNode } from 'react'
 import { PostFrontMatter } from 'types/PostFrontMatter'
 import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
 
-const editUrl = (fileName) => `${siteMetadata.siteRepo}/blob/master/data/blog/${fileName}`
-const discussUrl = (slug) =>
-  `https://mobile.twitter.com/search?q=${encodeURIComponent(
-    `${siteMetadata.siteUrl}/blog/${slug}`
-  )}`
-
 const postDateTemplate: Intl.DateTimeFormatOptions = {
   weekday: 'long',
   year: 'numeric',
@@ -33,7 +27,7 @@ interface Props {
 }
 
 export default function PostLayout({ frontMatter, authorDetails, next, prev, children }: Props) {
-  const { slug, fileName, date, title, tags } = frontMatter
+  const { slug, fileName, date, title, tags, video } = frontMatter
 
   return (
     <SectionContainer>
@@ -75,8 +69,8 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                       {author.avatar && (
                         <Image
                           src={author.avatar}
-                          width="38px"
+                          width="64px"
-                          height="38px"
+                          height="64px"
                           alt="avatar"
                           className="h-10 w-10 rounded-full"
                         />
@@ -102,7 +96,21 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
               </dd>
             </dl>
             <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
-              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
+              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">
+                {children}
+                {video ? (
+                  <div
+                    className="relative h-0 w-full max-w-full overflow-hidden"
+                    style={{ paddingBottom: '56.25%' }}
+                  >
+                    <iframe
+                      title={title}
+                      src={`https://www.youtube.com/embed/${video}`}
+                      className="absolute top-0 left-0 h-full w-full"
+                    />
+                  </div>
+                ) : null}
+              </div>
               <Comments frontMatter={frontMatter} />
             </div>
             <footer>

next.config.js

@@ -5,13 +5,13 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 // You might need to insert additional domains in script-src if you are using external services
 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app youtube.com www.youtube.com s.ytimg.com;
   style-src 'self' 'unsafe-inline';
   img-src * blob: data:;
   media-src 'none';
   connect-src *;
   font-src 'self';
-  frame-src giscus.app
+  frame-src giscus.app youtube.com www.youtube.com s.ytimg.com
 `
 
 const securityHeaders = [

types/PostFrontMatter.ts

@@ -6,6 +6,7 @@ export type PostFrontMatter = {
   draft?: boolean
   summary?: string
   images?: string[]
+  video?: string
   authors?: string[]
   layout?: string
   canonicalUrl?: string