astro-mermaid 1.0.2 → 1.0.4

package/README.md

@@ -85,10 +85,53 @@ mermaid({
     flowchart: {
       curve: 'basis'
     }
-  }
+  },
+  
+  // Register icon packs for use in diagrams
+  iconPacks: [
+    {
+      name: 'logos',
+      loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
+    },
+    {
+      name: 'iconoir',
+      loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(res => res.json())
+    }
+  ]
 })
 ```
 
+## Icon Packs
+
+You can register icon packs to use custom icons in your diagrams. Icon packs are loaded from Iconify JSON sources:
+
+```js
+iconPacks: [
+  {
+    name: 'logos',
+    loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
+  }
+]
+```
+
+Then use icons in your diagrams:
+
+````markdown
+```mermaid
+architecture-beta
+  group api(logos:aws-lambda)[API]
+
+  service db(logos:postgresql)[Database] in api
+  service disk1(logos:aws-s3)[Storage] in api
+  service disk2(logos:cloudflare)[CDN] in api
+  service server(logos:docker)[Server] in api
+
+  db:L -- R:server
+  disk1:T -- B:server
+  disk2:T -- B:db
+```
+````
+
 ## Theme Switching
 
 If `autoTheme` is enabled (default), the integration will automatically switch between themes based on your site's `data-theme` attribute:

package/astro-mermaid-integration.d.ts

@@ -1,5 +1,17 @@
 import type { AstroIntegration } from 'astro';
 
+export interface IconPack {
+  /**
+   * Name of the icon pack
+   */
+  name: string;
+  
+  /**
+   * Function that returns a promise resolving to the icon pack data
+   */
+  loader: () => Promise<any>;
+}
+
 export interface AstroMermaidOptions {
   /**
    * Default mermaid theme
@@ -18,6 +30,20 @@ export interface AstroMermaidOptions {
    * @see https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults
    */
   mermaidConfig?: Record<string, any>;
+  
+  /**
+   * Icon packs to register with mermaid
+   * @example
+   * ```js
+   * iconPacks: [
+   *   {
+   *     name: 'logos',
+   *     loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
+   *   }
+   * ]
+   * ```
+   */
+  iconPacks?: IconPack[];
 }
 
 /**

package/astro-mermaid-integration.js

@@ -1,6 +1,42 @@
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 
+/**
+ * Remark plugin to transform mermaid code blocks at the markdown level
+ */
+function remarkMermaidPlugin(options = {}) {
+  return async function transformer(tree, file) {
+    const { visit } = await import('unist-util-visit');
+    
+    let mermaidCount = 0;
+    
+    visit(tree, 'code', (node, index, parent) => {
+      if (node.lang === 'mermaid') {
+        mermaidCount++;
+        
+        // Transform to html node with pre.mermaid
+        const htmlNode = {
+          type: 'html',
+          value: `<pre class="mermaid">${node.value}</pre>`
+        };
+        
+        // Replace the code node with html node
+        if (parent && typeof index === 'number') {
+          parent.children[index] = htmlNode;
+        }
+        
+        if (options.logger) {
+          options.logger.info(`Remark transformed mermaid block #${mermaidCount} in ${file.path || 'unknown file'}`);
+        }
+      }
+    });
+    
+    if (mermaidCount > 0 && options.logger) {
+      options.logger.info(`Remark total mermaid blocks transformed: ${mermaidCount}`);
+    }
+  };
+}
+
 /**
  * Rehype plugin to transform mermaid code blocks
  * Converts ```mermaid code blocks to <pre class="mermaid">
@@ -39,14 +75,14 @@ function rehypeMermaidPlugin(options = {}) {
           }];
           
           if (options.logger) {
-            options.logger.info(`Transformed mermaid block #${mermaidCount} in ${file.path || 'unknown file'}`);
+            options.logger.info(`Rehype transformed mermaid block #${mermaidCount} in ${file.path || 'unknown file'}`);
           }
         }
       }
     });
     
     if (mermaidCount > 0 && options.logger) {
-      options.logger.info(`Total mermaid blocks transformed: ${mermaidCount}`);
+      options.logger.info(`Rehype total mermaid blocks transformed: ${mermaidCount}`);
     }
   };
 }
@@ -65,7 +101,8 @@ export default function astroMermaid(options = {}) {
   const {
     theme = 'default',
     autoTheme = true,
-    mermaidConfig = {}
+    mermaidConfig = {},
+    iconPacks = []
   } = options;
 
   return {
@@ -77,9 +114,13 @@ export default function astroMermaid(options = {}) {
         // Log existing rehype plugins
         logger.info('Existing rehype plugins:', config.markdown?.rehypePlugins?.length || 0);
 
-        // Update markdown config to use our rehype plugin
+        // Update markdown config to use both remark and rehype plugins
         updateConfig({
           markdown: {
+            remarkPlugins: [
+              ...(config.markdown?.remarkPlugins || []),
+              [remarkMermaidPlugin, { logger }]
+            ],
             rehypePlugins: [
               ...(config.markdown?.rehypePlugins || []),
               [rehypeMermaidPlugin, { logger }]
@@ -92,6 +133,12 @@ export default function astroMermaid(options = {}) {
           }
         });
 
+        // Serialize icon packs for client-side use
+        const iconPacksConfig = iconPacks.map(pack => ({
+          name: pack.name,
+          loader: pack.loader.toString()
+        }));
+
         // Inject client-side mermaid script with conditional loading
         const mermaidScriptContent = `
 // Check if page has mermaid diagrams
@@ -104,7 +151,17 @@ if (hasMermaidDiagrams()) {
   console.log('[astro-mermaid] Mermaid diagrams detected, loading mermaid.js...');
   
   // Dynamically import mermaid only when needed
-  import('mermaid').then(({ default: mermaid }) => {
+  import('mermaid').then(async ({ default: mermaid }) => {
+    // Register icon packs if provided
+    const iconPacks = ${JSON.stringify(iconPacksConfig)};
+    if (iconPacks && iconPacks.length > 0) {
+      console.log('[astro-mermaid] Registering', iconPacks.length, 'icon packs');
+      const packs = iconPacks.map(pack => ({
+        name: pack.name,
+        loader: new Function('return ' + pack.loader)()
+      }));
+      await mermaid.registerIconPacks(packs);
+    }
     // Mermaid configuration
     const defaultConfig = ${JSON.stringify({
       startOnLoad: false,
@@ -129,13 +186,16 @@ if (hasMermaidDiagrams()) {
         return;
       }
       
-      // Get current theme
+      // Get current theme from multiple sources
       let currentTheme = defaultConfig.theme;
       
       if (${autoTheme}) {
-        const dataTheme = document.documentElement.getAttribute('data-theme');
+        // Check both html and body for data-theme attribute
+        const htmlTheme = document.documentElement.getAttribute('data-theme');
+        const bodyTheme = document.body.getAttribute('data-theme');
+        const dataTheme = htmlTheme || bodyTheme;
         currentTheme = themeMap[dataTheme] || defaultConfig.theme;
-        console.log('[astro-mermaid] Using theme:', currentTheme);
+        console.log('[astro-mermaid] Using theme:', currentTheme, 'from', htmlTheme ? 'html' : 'body');
       }
       
       // Configure mermaid with gitGraph support
@@ -204,10 +264,15 @@ if (hasMermaidDiagrams()) {
         }
       });
       
+      // Observe both html and body for data-theme changes
       observer.observe(document.documentElement, {
         attributes: true,
         attributeFilter: ['data-theme']
       });
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['data-theme']
+      });
     }
 
     // Handle view transitions (for Astro View Transitions API)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-mermaid",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "An Astro integration for rendering Mermaid diagrams with automatic theme switching and client-side rendering",
   "type": "module",
   "main": "./astro-mermaid-integration.js",