Dynamic import gfm

Signed-off-by: Marcos Candeia <marrcooos@gmail.com>

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}`);