feat: support youtube

package.json

@@ -23,6 +23,10 @@
     "@astrojs/sitemap": "^3.0.2",
     "@astrojs/tailwind": "^5.0.2",
     "@notionhq/client": "^2.2.13",
+    "@remark-embedder/cache": "^2.1.0",
+    "@remark-embedder/core": "^3.0.2",
+    "@remark-embedder/transformer-codesandbox": "^3.0.0",
+    "@remark-embedder/transformer-oembed": "^3.0.0",
     "@resvg/resvg-js": "^2.6.0",
     "@supercharge/promise-pool": "^3.1.0",
     "astro": "^3.3.2",
@@ -38,6 +42,7 @@
     "rehype-katex": "^7.0.0",
     "rehype-mermaid": "^2.0.1",
     "rehype-prism-plus": "^1.6.3",
+    "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
@@ -49,6 +54,7 @@
   },
   "devDependencies": {
     "@types/async-retry": "^1.4.7",
+    "@types/escape-html": "^1.0.3",
     "@types/katex": "^0.16.5",
     "@types/node": "^20.8.7",
     "@types/prismjs": "^1.26.2",

src/embed.ts

@@ -0,0 +1,23 @@
+import type { Transformer } from "@remark-embedder/core";
+import codeSandboxTransformer from "@remark-embedder/transformer-codesandbox";
+import oembedTransformer from "@remark-embedder/transformer-oembed";
+
+const youtube: Transformer = {
+  name: "youtube",
+  shouldTransform(url: string) {
+    return new URL(url).hostname === "www.youtube.com";
+  },
+  getHTML(url: string) {
+    const u = new URL(url);
+    const id = u.searchParams.get("v") || u.pathname.split("/").pop();
+    const iframeSrc = new URL("https://www.youtube.com/embed/" + id);
+    // iframeSrc.searchParams.set("origin", "orign");
+    return `<iframe type="text/html" width="640" height="360" src="${iframeSrc.toString()}" frameborder="0" class="youtube"></iframe>`;
+  },
+};
+
+export const transformers: Transformer<any>[] = [
+  youtube,
+  codeSandboxTransformer,
+  oembedTransformer,
+];

src/markdown.ts

@@ -1,21 +1,30 @@
+import remarkEmbedder from "@remark-embedder/core";
 import rehypeKatex from "rehype-katex";
 import rehypeMermaid from "rehype-mermaid";
 import rehypePrism from "rehype-prism-plus";
+import rehypeRaw from "rehype-raw";
 import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import { unified } from "unified";
 
+import { transformers } from "./embed";
+
 export const md2html = unified()
   .use(remarkParse)
   .use(remarkGfm)
   .use(remarkMath)
-  .use(remarkRehype)
+  // remarkEmbedder reports type error
+  .use(remarkEmbedder as any, {
+    transformers,
+  })
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeRaw)
   .use(rehypeKatex)
   .use(rehypeMermaid, { strategy: "pre-mermaid" })
-  .use(rehypePrism)
+  .use(rehypePrism) // put after mermaid
   .use(rehypeStringify);
 
 export async function markdownToHTML(md: string): Promise<string> {

src/notion/client.ts

@@ -11,11 +11,12 @@ import { debug } from "../utils";
 
 import { buildDatabase, buildPost, isValidPage } from "./conv";
 import {
+  newNotionToMarkdown,
   transformMdBlocks,
   transformMdImageBlock,
   transformMdLinkBlock,
 } from "./markdown";
-import { newNotionToMarkdown, type MinimalNotionClient } from "./minimal";
+import { type MinimalNotionClient } from "./minimal";
 import { getAll } from "./utils";
 
 export class Client implements ClientType {
@@ -30,9 +31,9 @@ export class Client implements ClientType {
     debug?: boolean,
   ) {
     this.client = client;
-    this.n2m = newNotionToMarkdown(client, {});
     this.databaseId = databaseId;
     this.debug = debug || false;
+    this.n2m = newNotionToMarkdown(client);
   }
 
   async getDatabase(): Promise<Database> {

src/notion/markdown.ts

@@ -1,9 +1,40 @@
+import type { BlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
+import { NotionToMarkdown } from "notion-to-md";
 import type { MdBlock } from "notion-to-md/build/types";
 
 import type { Post } from "../interfaces";
 
+import type { MinimalNotionClient } from "./minimal";
 import { fileUrlToAssetUrl } from "./utils";
 
+export function newNotionToMarkdown(
+  client: MinimalNotionClient,
+): NotionToMarkdown {
+  const n2m = new NotionToMarkdown({
+    notionClient: client as any,
+  });
+
+  n2m.setCustomTransformer("embed", (block) => {
+    const b = block as BlockObjectResponse;
+    if (b.type !== "embed") return false;
+    return b.embed.url;
+  });
+
+  n2m.setCustomTransformer("video", (block) => {
+    const b = block as BlockObjectResponse;
+    if (b.type !== "video" || b.video.type !== "external") return false;
+    return b.video.external.url;
+  });
+
+  n2m.setCustomTransformer("bookmark", (block) => {
+    const b = block as BlockObjectResponse;
+    if (b.type !== "bookmark") return false;
+    return b.bookmark.url;
+  });
+
+  return n2m;
+}
+
 export function transformMdBlocks(
   blocks: MdBlock[],
   ...transformers: ((block: MdBlock) => MdBlock)[]

src/notion/minimal.ts

@@ -6,8 +6,6 @@ import type {
   QueryDatabaseParameters,
   QueryDatabaseResponse,
 } from "@notionhq/client/build/src/api-endpoints";
-import { NotionToMarkdown } from "notion-to-md";
-import type { NotionToMarkdownOptions } from "notion-to-md/build/types";
 
 export type MinimalNotionClient = {
   blocks: {
@@ -22,13 +20,3 @@ export type MinimalNotionClient = {
     retrieve: (args: GetDatabaseParameters) => Promise<GetDatabaseResponse>;
   };
 };
-
-export function newNotionToMarkdown(
-  client: MinimalNotionClient,
-  options?: Omit<NotionToMarkdownOptions, "notionClient">,
-): NotionToMarkdown {
-  return new NotionToMarkdown({
-    ...options,
-    notionClient: client as any,
-  });
-}

src/styles/markdown.css

@@ -106,3 +106,7 @@
 .markdown img {
   max-width: 100%;
 }
+
+.markdown .youtube {
+  @apply aspect-video w-full h-auto;
+}