From 88194ac348222f9e3deed92f6e149da23a644311 Mon Sep 17 00:00:00 2001
From: jeff <smartmu@gmail.com>
Date: Tue, 02 Jan 2024 18:49:14 +0000
Subject: [PATCH] feat: allow embedding youtube videos with the obsidian markdown syntax (#665)
---
quartz/plugins/transformers/ofm.ts | 27 +++++++++++++++++++++++++++
1 files changed, 27 insertions(+), 0 deletions(-)
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 8502440..be3344a 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -25,6 +25,7 @@
parseTags: boolean
parseBlockReferences: boolean
enableInHtmlEmbed: boolean
+ enableYouTubeEmbed: boolean
}
const defaultOptions: Options = {
@@ -36,6 +37,7 @@
parseTags: true,
parseBlockReferences: true,
enableInHtmlEmbed: false,
+ enableYouTubeEmbed: false,
}
const icons = {
@@ -127,6 +129,7 @@
// (?:\/[-_\p{L}\d\p{Z}]+)*) -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
const blockReferenceRegex = new RegExp(/\^([A-Za-z0-9]+)$/, "g")
+const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
userOpts,
@@ -505,6 +508,30 @@
})
}
+ if (opts.enableYouTubeEmbed) {
+ plugins.push(() => {
+ return (tree: HtmlRoot) => {
+ visit(tree, "element", (node) => {
+ if (node.tagName === "img" && typeof node.properties.src === "string") {
+ const match = node.properties.src.match(ytLinkRegex)
+ const videoId = match && match[2].length == 11 ? match[2] : null
+ if (videoId) {
+ node.tagName = "iframe"
+ node.properties = {
+ class: "external-embed",
+ allow: "fullscreen",
+ frameborder: 0,
+ width: "600px",
+ height: "350px",
+ src: `https://www.youtube.com/embed/${videoId}`,
+ }
+ }
+ }
+ })
+ }
+ })
+ }
+
return plugins
},
externalResources() {
--
Gitblit v1.10.0