Matt Wang 5e5e2438d2
Fix mermaid v10, bundle all mermaid code in component (#1190)
This PR does two things:

1. fixes using mermaid version `>= 10` from the CDN, by importing the ESM module instead
2. moves script loading code from `head.html` to the mermaid include

I've also added some light documentation to clarify how using mermaid with local paths should work (users should specify a version, and they should only use fully-minified bundles with no local references).

The nice thing about this approach is that it's a breaking change for nobody, and only adds functionality (v10 support). Eventually, we should remove support for mermaid <10, which should make this much easier!

Closes #1206.

## Context

In v10, Mermaid has implemented a few (admittedly, very frustrating to deal with) breaking changes:

1. they've removed CJS support, which is fine, *but*
2. that means that the `dist` they publish to JSDelivr now has a **different URL**: for versions `10.0.0` - `10.0.2`, **they do not have a minified bundle -- you have to load the ESM version with relative imports**
3. and, separately the `init` function has been deprecated

2 is really the issue, and so I've had to go into the code to now load mermaid by ESM by default when the user is on mermaid > v10.

I've tested this with:

- CDN version < 10 (v9)
- CDN version 10
- local path with version < 10 (v9)
- local path with version 10 (new: also loaded as an ESM module)

Separately, I chose to put all the mermaid stuff in one include because:

- I think @pdmosses requested something like this - it's a bit confusing that some mermaid code is *not* in the include, and this makes modular components ... more modular
- from a developer perspective, it's more clear what's happening with mermaid
- mermaid is not render-blocking, so it shouldn't be in the `head` anyways

---------

Co-authored-by: Peter Mosses <18308236+pdmosses@users.noreply.github.com>
2023-04-12 12:05:51 -07:00

43 lines
1.4 KiB
HTML

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
{% if site.ga_tracking != nil %}
{% assign ga_tracking_ids = site.ga_tracking | split: "," %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ ga_tracking_ids.first }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
{% for ga_property in ga_tracking_ids %}
gtag('config', '{{ ga_property }}'{% unless site.ga_tracking_anonymize_ip == nil %}, { 'anonymize_ip': true }{% endunless %});
{% endfor %}
</script>
{% endif %}
{% if site.search_enabled != false %}
<script src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
{% endif %}
<script src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% for file in site.static_files %}
{% if file.path == site.favicon_ico or file.path == '/favicon.ico' %}
{% assign favicon = true %}
{% endif %}
{% endfor %}
{% if favicon %}
<link rel="icon" href="{{ site.favicon_ico | default: '/favicon.ico' | relative_url }}" type="image/x-icon">
{% endif %}
{% seo %}
{% include head_custom.html %}
</head>