astro-mermaid 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -1
- package/astro-mermaid-integration.d.ts +26 -0
- package/astro-mermaid-integration.js +19 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,10 +85,53 @@ mermaid({
|
|
|
85
85
|
flowchart: {
|
|
86
86
|
curve: 'basis'
|
|
87
87
|
}
|
|
88
|
-
}
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
// Register icon packs for use in diagrams
|
|
91
|
+
iconPacks: [
|
|
92
|
+
{
|
|
93
|
+
name: 'logos',
|
|
94
|
+
loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
name: 'iconoir',
|
|
98
|
+
loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(res => res.json())
|
|
99
|
+
}
|
|
100
|
+
]
|
|
89
101
|
})
|
|
90
102
|
```
|
|
91
103
|
|
|
104
|
+
## Icon Packs
|
|
105
|
+
|
|
106
|
+
You can register icon packs to use custom icons in your diagrams. Icon packs are loaded from Iconify JSON sources:
|
|
107
|
+
|
|
108
|
+
```js
|
|
109
|
+
iconPacks: [
|
|
110
|
+
{
|
|
111
|
+
name: 'logos',
|
|
112
|
+
loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
|
|
113
|
+
}
|
|
114
|
+
]
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Then use icons in your diagrams:
|
|
118
|
+
|
|
119
|
+
````markdown
|
|
120
|
+
```mermaid
|
|
121
|
+
architecture-beta
|
|
122
|
+
group api(logos:aws-lambda)[API]
|
|
123
|
+
|
|
124
|
+
service db(logos:postgresql)[Database] in api
|
|
125
|
+
service disk1(logos:aws-s3)[Storage] in api
|
|
126
|
+
service disk2(logos:cloudflare)[CDN] in api
|
|
127
|
+
service server(logos:docker)[Server] in api
|
|
128
|
+
|
|
129
|
+
db:L -- R:server
|
|
130
|
+
disk1:T -- B:server
|
|
131
|
+
disk2:T -- B:db
|
|
132
|
+
```
|
|
133
|
+
````
|
|
134
|
+
|
|
92
135
|
## Theme Switching
|
|
93
136
|
|
|
94
137
|
If `autoTheme` is enabled (default), the integration will automatically switch between themes based on your site's `data-theme` attribute:
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
import type { AstroIntegration } from 'astro';
|
|
2
2
|
|
|
3
|
+
export interface IconPack {
|
|
4
|
+
/**
|
|
5
|
+
* Name of the icon pack
|
|
6
|
+
*/
|
|
7
|
+
name: string;
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Function that returns a promise resolving to the icon pack data
|
|
11
|
+
*/
|
|
12
|
+
loader: () => Promise<any>;
|
|
13
|
+
}
|
|
14
|
+
|
|
3
15
|
export interface AstroMermaidOptions {
|
|
4
16
|
/**
|
|
5
17
|
* Default mermaid theme
|
|
@@ -18,6 +30,20 @@ export interface AstroMermaidOptions {
|
|
|
18
30
|
* @see https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults
|
|
19
31
|
*/
|
|
20
32
|
mermaidConfig?: Record<string, any>;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Icon packs to register with mermaid
|
|
36
|
+
* @example
|
|
37
|
+
* ```js
|
|
38
|
+
* iconPacks: [
|
|
39
|
+
* {
|
|
40
|
+
* name: 'logos',
|
|
41
|
+
* loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
|
|
42
|
+
* }
|
|
43
|
+
* ]
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
iconPacks?: IconPack[];
|
|
21
47
|
}
|
|
22
48
|
|
|
23
49
|
/**
|
|
@@ -65,7 +65,8 @@ export default function astroMermaid(options = {}) {
|
|
|
65
65
|
const {
|
|
66
66
|
theme = 'default',
|
|
67
67
|
autoTheme = true,
|
|
68
|
-
mermaidConfig = {}
|
|
68
|
+
mermaidConfig = {},
|
|
69
|
+
iconPacks = []
|
|
69
70
|
} = options;
|
|
70
71
|
|
|
71
72
|
return {
|
|
@@ -92,6 +93,12 @@ export default function astroMermaid(options = {}) {
|
|
|
92
93
|
}
|
|
93
94
|
});
|
|
94
95
|
|
|
96
|
+
// Serialize icon packs for client-side use
|
|
97
|
+
const iconPacksConfig = iconPacks.map(pack => ({
|
|
98
|
+
name: pack.name,
|
|
99
|
+
loader: pack.loader.toString()
|
|
100
|
+
}));
|
|
101
|
+
|
|
95
102
|
// Inject client-side mermaid script with conditional loading
|
|
96
103
|
const mermaidScriptContent = `
|
|
97
104
|
// Check if page has mermaid diagrams
|
|
@@ -104,7 +111,17 @@ if (hasMermaidDiagrams()) {
|
|
|
104
111
|
console.log('[astro-mermaid] Mermaid diagrams detected, loading mermaid.js...');
|
|
105
112
|
|
|
106
113
|
// Dynamically import mermaid only when needed
|
|
107
|
-
import('mermaid').then(({ default: mermaid }) => {
|
|
114
|
+
import('mermaid').then(async ({ default: mermaid }) => {
|
|
115
|
+
// Register icon packs if provided
|
|
116
|
+
const iconPacks = ${JSON.stringify(iconPacksConfig)};
|
|
117
|
+
if (iconPacks && iconPacks.length > 0) {
|
|
118
|
+
console.log('[astro-mermaid] Registering', iconPacks.length, 'icon packs');
|
|
119
|
+
const packs = iconPacks.map(pack => ({
|
|
120
|
+
name: pack.name,
|
|
121
|
+
loader: new Function('return ' + pack.loader)()
|
|
122
|
+
}));
|
|
123
|
+
await mermaid.registerIconPacks(packs);
|
|
124
|
+
}
|
|
108
125
|
// Mermaid configuration
|
|
109
126
|
const defaultConfig = ${JSON.stringify({
|
|
110
127
|
startOnLoad: false,
|
package/package.json
CHANGED