Mix.install([
  {:mdex, path: ".."}
])

opts = [
  render: [unsafe_: true],
  features: [sanitize: false]
]

markdown = """
# Mermaid Example

In this example we'll inject the script code to initialize and render mermaid blocks.

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop HealthCheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

The following script is used to load the mermaid library and initialize it:

```js
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
```
"""

mermaid = """
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
"""

html =
  markdown
  |> MDEx.parse_document!(opts)
  |> MDEx.traverse_and_update(fn
    # inject the script at the end of the document
    {"document", attrs, children} ->
      mermaid = MDEx.parse_document!(mermaid)
      {"document", attrs, children ++ mermaid}

    # inject the mermaid <pre> block without escaping the content
    {"code_block", _attrs, children} = node ->
      with ["mermaid"] <- MDEx.attribute(node, "info"),
           [code] <- MDEx.attribute(node, "literal") do
        code = """
        <pre class="mermaid">#{code}</pre>
        """

        {"html_block", [{"literal", code}], children}
      else
        _ -> node
      end

    node ->
      node
  end)
  |> MDEx.to_html!(opts)

File.write!("mermaid.html", html)

IO.puts(html)