mermaid: refactor config to use mermaid_config.js include, only require mermaid.version in _config.yml (#909)

This PR has a bit of scope creep! This PR now:

- changes the mermaid opt-in logic to only check for the existence of a `mermaid` key instead of `mermaid != false`: this resolves the follow-up in #857
- changes the behaviour of mermaid configuration
    - instead of using `mermaid_init.html` with default settings, makes the include `mermaid_config.js`
    - the include is loaded directly into the contents of `mermaid_initialize`
    - by default, it is an empty object (i.e. `{}`), triggering the defaults
- updates docs
- adds an example to the markdown kitchen sink  

It does significantly change the interface provided in #857, and I apologize for the confusion. However, given the discussion in this PR, I think it's the best move forward!

_includes/head.html

@@ -30,7 +30,7 @@
     <script type="text/javascript" src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
   {% endif %}
 
-  {% if site.mermaid_enabled != false %}
+  {% if site.mermaid %}
     <script src="https://cdn.jsdelivr.net/npm/mermaid@{{ site.mermaid.version }}/dist/mermaid.min.js"></script>
   {% endif %}
 

_includes/mermaid_config.js

@@ -0,0 +1 @@
+{}

_includes/mermaid_init.html

@@ -1,58 +0,0 @@
-<script>
-  var config = {
-    theme: '{{ site.mermaid.theme | default: "default" }}',
-    logLevel: '{{ site.mermaid.logLevel | default: "fatal" }}',
-    securityLevel: '{{ site.mermaid.securityLevel | default: "strict" }}',
-    startOnLoad: {{ site.mermaid.startOnLoad | default: true }},
-    arrowMarkerAbsolute: {{ site.mermaid.arrowMarkerAbsolute | default: false }},
-
-    er: {
-      diagramPadding: {{ site.mermaid.er.diagramPadding | default: 20 }},
-      layoutDirection: '{{ site.mermaid.er.layoutDirection | default: "TB" }}',
-      minEntityWidth: {{ site.mermaid.er.minEntityWidth | default: 100 }},
-      minEntityHeight: {{ site.mermaid.er.minEntityHeight | default: 75 }},
-      entityPadding: {{ site.mermaid.er.entityPadding | default: 15 }},
-      stroke: '{{ site.mermaid.er.stroke | default: "gray" }}',
-      fill: '{{ site.mermaid.er.fill | default: "honeydew" }}',
-      fontSize: {{ site.mermaid.er.fontSize | default: 12 }},
-      useMaxWidth: {{ site.mermaid.er.useMaxWidth | default: true }},
-    },	
-    flowchart:{
-      diagramPadding: {{ site.mermaid.flowchart.diagramPadding | default: 8 }},
-      htmlLabels: {{ site.mermaid.flowchart.htmlLabels | default: true }},
-      curve: '{{ site.mermaid.flowchart.curve | default: "basis" }}',
-    },
-    sequence: {
-      diagramMarginX: {{ site.mermaid.sequence.diagramMarginX | default: 50 }},
-      diagramMarginY: {{ site.mermaid.sequence.diagramMarginY | default: 10 }},
-      actorMargin: {{ site.mermaid.sequence.actorMargin | default: 50 }},
-      width: {{ site.mermaid.sequence.width | default: 150 }},
-      height: {{ site.mermaid.sequence.height | default: 65 }},
-      boxMargin: {{ site.mermaid.sequence.boxMargin | default: 10 }},
-      boxTextMargin: {{ site.mermaid.sequence.boxTextMargin | default: 5 }},
-      noteMargin: {{ site.mermaid.sequence.noteMargin | default: 10 }},
-      messageMargin: {{ site.mermaid.sequence.messageMargin | default: 35 }},
-      messageAlign: '{{ site.mermaid.sequence.messageAlign | default: "center" }}',
-      mirrorActors: {{ site.mermaid.sequence.mirrorActors | default: true }},
-      bottomMarginAdj: {{ site.mermaid.sequence.bottomMarginAdj | default: 1 }},
-      useMaxWidth: {{ site.mermaid.sequence.useMaxWidth | default: true }},
-      rightAngles: {{ site.mermaid.sequence.rightAngles | default: false }},
-      showSequenceNumbers: {{ site.mermaid.sequence.showSequenceNumbers | default: false }},
-    },
-    gantt: {
-      titleTopMargin: {{ site.mermaid.gantt.titleTopMargin | default: 25 }},
-      barHeight: {{ site.mermaid.gantt.barHeight | default: 20 }},
-      barGap: {{ site.mermaid.gantt.barGap | default: 4 }},
-      topPadding: {{ site.mermaid.gantt.topPadding | default: 50 }},
-      leftPadding: {{ site.mermaid.gantt.leftPadding | default: 75 }},
-      fontSize: {{ site.mermaid.gantt.fontSize | default: 11 }},
-      gridLineStartPadding: {{ site.mermaid.gantt.gridLineStartPadding | default: 35 }},
-      fontFamily: '{{ site.mermaid.gantt.fontFamily | default: "\'Open Sans\', sans-serif" }}',
-      numberSectionStyles: {{ site.mermaid.gantt.numberSectionStyles | default: 4 }},
-      axisFormat: '{{ site.mermaid.gantt.axisFormat | default: "%Y-%m-%d" }}',
-      topAxis: {{ site.mermaid.gantt.topAxis | default: false }},
-    },
-  };
-  mermaid.initialize(config);
-  window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
-</script>