From a5f4e62c2616a760600e8445c17a4c8542af4464 Mon Sep 17 00:00:00 2001
From: Marcos Candeia <marrcooos@gmail.com>
Date: Fri, 27 Sep 2024 16:03:04 -0300
Subject: [PATCH] Dynamic import gfm

Signed-off-by: Marcos Candeia <marrcooos@gmail.com>
---
 decohub/components/Markdown.tsx | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/decohub/components/Markdown.tsx b/decohub/components/Markdown.tsx
index be4eb92a7..1f590df3d 100644
--- a/decohub/components/Markdown.tsx
+++ b/decohub/components/Markdown.tsx
@@ -1,10 +1,33 @@
-import { CSS, KATEX_CSS, render } from "jsr:@deno/gfm@0.9.0";
-import "npm:prismjs@1.29.0/components/prism-diff.js";
-import "npm:prismjs@1.29.0/components/prism-jsx.js";
-import "npm:prismjs@1.29.0/components/prism-tsx.js";
-import "npm:prismjs@1.29.0/components/prism-typescript.js";
+interface DenoGfm {
+  render: (
+    content: string,
+    options: {
+      allowIframes: boolean;
+      allowMath: boolean;
+      disableHtmlSanitization: boolean;
+    },
+  ) => string;
+  KATEX_CSS: string;
+  CSS: string;
+}
 
+let denoGfm: Promise<DenoGfm> | null = null;
+const importDenoGfm = async (): Promise<DenoGfm> => {
+  const gfmVersion = `0.9.0`;
+  try {
+    const gfm = await import(`jsr:@deno/gfm@${gfmVersion}`);
+    return gfm;
+  } catch (err) {
+    return {
+      render: () => `could not dynamic load @deno/gfm@${gfmVersion} ${err}`,
+      KATEX_CSS: "",
+      CSS: "",
+    };
+  }
+};
 export const Markdown = async (path: string) => {
+  denoGfm ??= importDenoGfm();
+  const { CSS, KATEX_CSS, render } = await denoGfm;
   const content = await fetch(path)
     .then((res) => res.text())
     .catch(() => `Could not fetch README.md for ${path}`);