remark-mind-elixir 0.3.3 → 0.5.0

package/README.md

@@ -45,6 +45,71 @@ const file = await remark()
 console.log(String(file))
 ```
 
+## Usage with Astro
+
+Install the plugin in your Astro project:
+
+```bash
+npm install remark-mind-elixir
+```
+
+Then add it to the `markdown.remarkPlugins` configuration in `astro.config.mjs`:
+
+```js
+// @ts-check
+import { defineConfig } from 'astro/config'
+import remarkMindElixir from 'remark-mind-elixir'
+
+export default defineConfig({
+  markdown: {
+    remarkPlugins: [remarkMindElixir()],
+  },
+})
+```
+
+You can then use `elixir-mind` blocks directly in your Markdown or MDX pages:
+
+````markdown
+# JavaScript
+
+```elixir-mind
+root:
+  topic: JavaScript
+  children:
+    - topic: Browser
+      children:
+        - topic: DOM
+        - topic: Web APIs
+    - topic: Node.js
+    - topic: Deno
+```
+````
+
+The plugin transforms the block during Astro's Markdown processing and injects the client-side Mind Elixir runtime automatically.
+
+### Astro with CDN disabled
+
+By default, `remark-mind-elixir` loads the client runtime from `esm.sh`.
+
+You can disable this behavior:
+
+```js
+import { defineConfig } from 'astro/config'
+import remarkMindElixir from 'remark-mind-elixir'
+
+export default defineConfig({
+  markdown: {
+    remarkPlugins: [
+      remarkMindElixir({
+        useCdn: false,
+      }),
+    ],
+  },
+})
+```
+
+When `useCdn` is disabled, your application must provide the Mind Elixir client runtime itself.
+
 ## Markdown Syntax
 
 Use an `elixir-mind` fenced code block:
@@ -73,6 +138,7 @@ Separate the configuration and data using `---`:
 ---
 direction: right
 ---
+
 root:
   topic: JavaScript
   children:
@@ -141,7 +207,7 @@ When disabled, the plugin does not inject the CDN runtime. Your application must
 
 By default, the plugin injects the Mind Elixir runtime using `esm.sh`.
 
-The generated Markdown contains a container similar to:
+The generated HTML contains a container similar to:
 
 ```html
 <div
@@ -200,4 +266,4 @@ It is built on top of ZikoJS utilities while remaining a remark plugin rather th
 
 ## License
 
-MIT
+MIT + Mind Elixir License 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "remark-mind-elixir",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "description": "A remark plugin for embedding interactive Mind Elixir mind maps in Markdown.",
   "keywords": [
+    "zikojs",
     "remark",
     "unified",
     "markdown",

package/src/client.js

@@ -2,15 +2,15 @@ import { MindMap } from '@zikojs/mind-elixir/no-css'
 
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('[data-elixir-mind]').forEach((element) => {
-        const raw = element.dataset.xmindBody
-        // const config = element.dataset?.xmindConfig
+        const body = element.dataset.xmindBody
+        const config = element.dataset?.xmindConfig
 
-        if (!raw) return
+        if (!body) return
 
-        const nodeData = JSON.parse(raw)
-        // const nodeConfig = JSON.parse(config)
+        const nodeData = JSON.parse(body)
+        const nodeConfig = JSON.parse(config)
 
-        const map = MindMap({}, nodeData)
+        const map = MindMap({height : '400px', ...nodeConfig}, nodeData)
 
         map.mount(element)
     })

package/src/index.js

@@ -16,10 +16,10 @@ const remarkElixirMind = ({
       let config = {}, body = null;
 
       const documents = splitDocuments(node.value.trim());
-      if(documents.length === 1) body = yaml2MindElixirData(documents[0])
+      if(documents.length === 1) body = parseMindBody(documents[0])
       else {
         config = parse(documents[0])
-        body = yaml2MindElixirData(documents[1])
+        body = parseMindBody(documents[1])
       }
 
       // parent creates circular references, so serialize a clean copy
@@ -59,12 +59,12 @@ const remarkElixirMind = ({
 import { MindMap } from 'https://esm.sh/@zikojs/mind-elixir@latest/src/mind/main.js'
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('[data-elixir-mind]').forEach((element) => {
-        const raw = element.dataset.xmindBody
-        // const config = element.dataset?.xmindConfig
-        if (!raw) return
-        const nodeData = JSON.parse(raw)
-        // const nodeConfig = JSON.parse(config)
-        const map = MindMap({}, nodeData)
+        const body = element.dataset.xmindBody
+        const config = element.dataset?.xmindConfig
+        if (!body) return
+        const nodeData = JSON.parse(body)
+        const nodeConfig = JSON.parse(config)
+        const map = MindMap({height : '400px', ...nodeConfig}, nodeData)
         map.mount(element)
     })
 })
@@ -140,4 +140,34 @@ const splitDocuments = (text) => {
   }
 
   return documents
+}
+
+// const parseMindBody = (text) => {
+//   try {
+//     return JSON.parse(text)
+//   } catch {
+//     return yaml2MindElixirData(text)
+//   }
+// }
+
+const parseMindBody = (text) => {
+  const trimmed = text.trim()
+
+  // JSON
+  try {
+    return JSON.parse(trimmed)
+  } catch {}
+
+  // JavaScript object/array
+  if (
+    trimmed.startsWith('{') ||
+    trimmed.startsWith('[')
+  ) {
+    try {
+      return Function(`"use strict"; return (${trimmed})`)()
+    } catch {}
+  }
+
+  // YAML
+  return yaml2MindElixirData(trimmed)
 }