Add back youtube component to embed player (#539)

* Add back youtube component to embed player

* fix npm run build

_posts/complementing-python-with-rust.mdx

@@ -259,3 +259,9 @@ Something I didn’t explore was to check if the benefits will be much higher fo
 There are a few talks that I borrowed ideas from — [here](https://www.youtube.com/watch?v=-ylbuEzkG4M), [here](https://blog.sentry.io/2016/10/19/fixing-python-performance-with-rust.html) and [here](https://www.youtube.com/watch?v=3CwJ0MH-4MA). The first talk takes a different approach and uses [rust-cpython](https://github.com/dgrunwald/rust-cpython) for binding Python and Rust.
 
 You can also watch a recording of the video, but if you have already read so far, there is nothing new in the video. I start at 3 mins.
+
+<YoutubeEmbed
+  title="Python meetup at Fyndiq"
+  id="uBzRF8_UKNw?si=WB1XCihxxyqPjIaE"
+  start="175"
+/>

components/post-body.tsx

@@ -1,12 +1,14 @@
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 import Quotation from './quotation'
+import YoutubeEmbed from './youtube-embed'
 
 type PostBodyProps = {
   source: MDXRemoteSerializeResult
 }
 
 const components = {
   Quotation,
+  YoutubeEmbed,
 }
 
 const PostBody: React.FC<PostBodyProps> = ({ source }) => {

components/youtube-embed.tsx

@@ -0,0 +1,22 @@
+interface YoutubeEmbedProps {
+  title: string
+  id: string
+  start?: number
+}
+
+const YoutubeEmbed: React.FC<YoutubeEmbedProps> = ({ title, id, start }) => {
+  return (
+    <iframe
+      width="560"
+      height="315"
+      src={`https://www.youtube-nocookie.com/embed/${id}&amp;start=${start}`}
+      title={title}
+      frameBorder="0"
+      className="mx-auto mb-8"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowFullScreen
+    ></iframe>
+  )
+}
+
+export default YoutubeEmbed

lib/markdownToHtml.ts

@@ -3,48 +3,13 @@ import remarkDirective from 'remark-directive'
 import remarkHtml from 'remark-html'
 import remarkParse from 'remark-parse'
 import remarkPrism from 'remark-prism'
-import { visit } from 'unist-util-visit'
-
-function youtubeDirective(node: any) {
-  const data = node.data || (node.data = {})
-  const attributes = node.attributes || {}
-  const id = attributes.id
-  if (node.type === 'textDirective')
-    console.warn('Text directives for `youtube` not supported', node)
-  if (!id) console.warn('Missing video id', node)
-  data.hName = 'iframe'
-  data.hProperties = {
-    src: 'https://www.youtube.com/embed/' + id,
-    height: '300px',
-    width: '100%',
-    frameborder: '0',
-    allow:
-      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-    allowfullscreen: true,
-  }
-}
-
-function onDirective() {
-  return (tree: any) => {
-    visit(
-      tree,
-      ['textDirective', 'leafDirective', 'containerDirective'],
-      (node) => {
-        if (node.name === 'youtube') {
-          return youtubeDirective(node)
-        }
-      },
-    )
-  }
-}
 
 export default async function markdownToHtml(
   markdown: string,
 ): Promise<string> {
   const r = remark()
   r.use(remarkParse)
   r.use(remarkDirective)
-  r.use(onDirective)
   r.use(remarkPrism)
   r.use(remarkHtml, { sanitize: false })
   return (await r.process(markdown)).toString()