From 8f0a42c96476d9a8cb03e928017c9e5245fe8868 Mon Sep 17 00:00:00 2001
From: Michael Uloth <hello@michaeluloth.com>
Date: Sun, 22 Dec 2024 22:49:45 -0500
Subject: [PATCH] remark: generate youtube embed markup from obsidian youtube
 image links

---
 lib/remark/plugins.ts                       |  2 ++
 lib/remark/youtube-embed-from-image-link.ts | 40 +++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 lib/remark/youtube-embed-from-image-link.ts

diff --git a/lib/remark/plugins.ts b/lib/remark/plugins.ts
index af015586..47a62971 100644
--- a/lib/remark/plugins.ts
+++ b/lib/remark/plugins.ts
@@ -3,6 +3,7 @@ import remarkWikiLink from '@portaljs/remark-wiki-link'
 
 import remarkLastModified from './last-modified'
 import remarkRemoveTags from './remove-tags'
+import remarkYouTubeEmbedFromImageLink from './youtube-embed-from-image-link'
 
 export default [
   remarkLastModified,
@@ -17,4 +18,5 @@ export default [
       wikiLinkResolver: (slug: string): string[] => [`${slug}/`], // expects all pages to have root-level paths
     },
   ],
+  remarkYouTubeEmbedFromImageLink,
 ]
diff --git a/lib/remark/youtube-embed-from-image-link.ts b/lib/remark/youtube-embed-from-image-link.ts
new file mode 100644
index 00000000..27f23f41
--- /dev/null
+++ b/lib/remark/youtube-embed-from-image-link.ts
@@ -0,0 +1,40 @@
+// Obsidian uses ![](<video link>) for embedding videos responsively, so I need to convert those to YouTube embeds.
+// see: https://www.ryanfiller.com/blog/remark-and-rehype-plugins
+// see: https://github.com/syntax-tree/mdast
+
+import type { RemarkPlugin } from '@astrojs/markdown-remark'
+import type { Data, Image } from 'mdast'
+import { visit } from 'unist-util-visit'
+import type { Node } from 'unist'
+
+/**
+ * Convert markdown image link containing a YouTube video link to a YouTube iFrame embed.
+ */
+const convertImageLinkToIframe = (url: string): string => {
+  const videoId = url.split('v=')[1]
+  const embedUrl = `https://www.youtube.com/embed/${videoId}`
+  return `<iframe width="560" height="315" src="${embedUrl}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`
+}
+
+type Transformer = (tree: Node<Data>) => Promise<void>
+
+/**
+ * Convert markdown image links containing Youtube video links to YouTube embeds.
+ */
+const remarkYouTubeEmbedFromImageLink: RemarkPlugin =
+  (): Transformer =>
+  async (tree: Node<Data>): Promise<void> => {
+    // Identify the type of node I want to modify ("text" in this case) here: https://astexplorer.net
+    visit(tree, 'image', (node: Image) => {
+      if (!node.url.includes('youtube.com')) return
+
+      // Use Object.assign to replace the exact same object instead of triggering an infinite loop by creating new objects
+      Object.assign(node, {
+        type: 'html',
+        value: convertImageLinkToIframe(node.url),
+        position: node.position,
+      })
+    })
+  }
+
+export default remarkYouTubeEmbedFromImageLink