small fixes

packages/demo/astro.config.mjs

@@ -2,7 +2,7 @@ import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 
 import { getCache } from "@beoe/cache";
-import { rehypeGraphviz } from "@beoe/astro-graphviz/rehype";
+import { rehypeGraphviz } from "@beoe/rehype-graphviz";
 import { rehypeMermaid } from "@beoe/rehype-mermaid";
 import { rehypeGnuplot } from "@beoe/rehype-gnuplot";
 
@@ -31,7 +31,7 @@ export default defineConfig({
   ],
   markdown: {
     rehypePlugins: [
-      [rehypeGraphviz, { class: className }],
+      [rehypeGraphviz, { cache, class: className }],
       [rehypeMermaid, { cache, class: className, strategy: "class-dark-mode" }],
       [rehypeGnuplot, { cache, class: className }],
     ],

packages/demo/package.json

@@ -15,10 +15,11 @@
     "@beoe/astro-graphviz": "workspace:*",
     "@beoe/cache": "workspace:*",
     "@beoe/rehype-gnuplot": "workspace:*",
+    "@beoe/rehype-graphviz": "workspace:*",
     "@beoe/rehype-mermaid": "workspace:*",
     "astro": "^4.7.1",
     "sharp": "^0.33.3",
     "svg-pan-zoom-gesture": "^0.0.2",
     "typescript": "^5.4.5"
   }
-}
+}

packages/demo/src/content/docs/index.mdx

@@ -1,4 +1,4 @@
 ---
-title: Diagram All The Things (beoe)
+title: Diagram All The Things
 ---
 

packages/rehype-graphviz/src/index.ts

@@ -18,33 +18,36 @@ type Engine =
 export type RenderGraphvizOptions = {
   code: string;
   class?: string;
-  /* it is possible to change layout with in dot file itself */
+  /* it is possible to change layout with in dot code itself */
   engine?: Engine;
 };
 
-import { Graphviz } from "@hpcc-js/wasm";
-const graphviz = await Graphviz.load();
-export const renderGraphviz = (o: RenderGraphvizOptions) =>
-  processGraphvizSvg(
-    graphviz.layout(o.code, "svg", o.engine || "dot"),
-    o.class
-  );
+// import { Graphviz } from "@hpcc-js/wasm";
+// const graphviz = await Graphviz.load();
+// export const renderGraphviz = (o: RenderGraphvizOptions) =>
+//   processGraphvizSvg(
+//     graphviz.layout(o.code, "svg", o.engine || "dot"),
+//     o.class
+//   );
 
-// import { waitFor } from "@beoe/rehype-code-hook";
+import { waitFor } from "@beoe/rehype-code-hook";
 /**
  * If all graphviz diagrams are cached it would not even load module in memory.
  * If there are diagrams, it would load module and first few renders would be async,
  * but all consequent renders would be sync
  */
-// export const renderGraphviz = waitFor(
-//   async () => {
-//     // @ts-ignore
-//     const Graphviz = (await import("@hpcc-js/wasm")).Graphviz;
-//     return await Graphviz.load();
-//   },
-//   (graphviz) => (o: RenderGraphvizOptions) =>
-//     processGraphvizSvg(graphviz.dot(o.code), o.class)
-// );
+export const renderGraphviz = waitFor(
+  async () => {
+    // @ts-ignore
+    const Graphviz = (await import("@hpcc-js/wasm")).Graphviz;
+    return await Graphviz.load();
+  },
+  (graphviz) => (o: RenderGraphvizOptions) =>
+    processGraphvizSvg(
+      graphviz.layout(o.code, "svg", o.engine || "dot"),
+      o.class
+    )
+);
 
 export { processGraphvizSvg };
 

packages/rehype-mermaid/README.md

@@ -48,7 +48,5 @@ It support caching the same way as [@beoe/rehype-code-hook](/packages/rehype-cod
 ## TODO
 
 - write about dark mode
-- maybe use `waitFor`
-- maybe remove `style="max-width: ..."`
 - test `mermaid-isomorphic` options (`css, mermaidConfig, prefix, browser, launchOptions`)
 - write tips about styling with CSS