feat(version): versions

2 files changed, 563 insertions, 0 deletions

diff --git a/src/templates/assets/javascripts/components/content/mermaid/index.css b/src/templates/assets/javascripts/components/content/mermaid/index.css
new file mode 100644
index 00000000..3092b8ec
--- /dev/null
+++ b/src/templates/assets/javascripts/components/content/mermaid/index.css
@@ -0,0 +1,430 @@
+/*
+ * Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Rules: general
+ * ------------------------------------------------------------------------- */
+
+/* General node */
+.node circle,
+.node ellipse,
+.node path,
+.node polygon,
+.node rect {
+  fill: var(--md-mermaid-node-bg-color);
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* General marker */
+marker {
+  fill: var(--md-mermaid-edge-color) !important;
+}
+
+/* General edge label */
+.edgeLabel .label rect {
+  fill: transparent;
+}
+
+/* ----------------------------------------------------------------------------
+ * Rules: flowcharts
+ * ------------------------------------------------------------------------- */
+
+/* Flowchart node label */
+.label {
+  color: var(--md-mermaid-label-fg-color);
+  font-family: var(--md-mermaid-font-family);
+}
+
+/* Flowchart node label container */
+.label foreignObject {
+  overflow: visible;
+  line-height: initial;
+}
+
+/* Flowchart edge label in node label */
+.label div .edgeLabel {
+  color: var(--md-mermaid-label-fg-color);
+  background-color: var(--md-mermaid-label-bg-color);
+}
+
+/* Flowchart edge label */
+.edgeLabel,
+.edgeLabel rect {
+  color: var(--md-mermaid-edge-color);
+  background-color: var(--md-mermaid-label-bg-color);
+  fill: var(--md-mermaid-label-bg-color);
+}
+
+/* Flowchart edge path */
+.edgePath .path,
+.flowchart-link {
+  stroke: var(--md-mermaid-edge-color);
+  stroke-width: .05rem;
+}
+
+/* Flowchart arrow head */
+.edgePath .arrowheadPath {
+  fill: var(--md-mermaid-edge-color);
+  stroke: none;
+}
+
+/* Flowchart subgraph */
+.cluster rect {
+  fill: var(--md-default-fg-color--lightest);
+  stroke: var(--md-default-fg-color--lighter);
+}
+
+/* Flowchart subgraph labels */
+.cluster span {
+  color: var(--md-mermaid-label-fg-color);
+  font-family: var(--md-mermaid-font-family);
+}
+
+/* Flowchart markers */
+g #flowchart-circleStart,
+g #flowchart-circleEnd,
+g #flowchart-crossStart,
+g #flowchart-crossEnd,
+g #flowchart-pointStart,
+g #flowchart-pointEnd {
+  stroke: none;
+}
+
+/* ----------------------------------------------------------------------------
+ * Rules: class diagrams
+ * ------------------------------------------------------------------------- */
+
+/* Class group node */
+g.classGroup line,
+g.classGroup rect {
+  fill: var(--md-mermaid-node-bg-color);
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* Class group node text */
+g.classGroup text {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-label-fg-color);
+}
+
+/* Class label box */
+.classLabel .box {
+  background-color: var(--md-mermaid-label-bg-color);
+  opacity: 1;
+  fill: var(--md-mermaid-label-bg-color);
+}
+
+/* Class label text */
+.classLabel .label {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-label-fg-color);
+}
+
+/* Class group divider */
+.node .divider {
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* Class relation */
+.relation {
+  stroke: var(--md-mermaid-edge-color);
+}
+
+/* Class relation cardinality */
+.cardinality {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-label-fg-color);
+}
+
+/* Class relation cardinality text */
+.cardinality text {
+  fill: inherit !important;
+}
+
+/* Class extension, composition and dependency marker */
+defs #classDiagram-extensionStart,
+defs #classDiagram-extensionEnd,
+defs #classDiagram-compositionStart,
+defs #classDiagram-compositionEnd,
+defs #classDiagram-dependencyStart,
+defs #classDiagram-dependencyEnd {
+  fill: var(--md-mermaid-edge-color) !important;
+  stroke: var(--md-mermaid-edge-color) !important;
+}
+
+/* Class aggregation marker */
+defs #classDiagram-aggregationStart,
+defs #classDiagram-aggregationEnd {
+  fill: var(--md-mermaid-label-bg-color) !important;
+  stroke: var(--md-mermaid-edge-color) !important;
+}
+
+/* ----------------------------------------------------------------------------
+ * Rules: state diagrams
+ * ------------------------------------------------------------------------- */
+
+/* State group node */
+g.stateGroup rect {
+  fill: var(--md-mermaid-node-bg-color);
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* State group title */
+g.stateGroup .state-title {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-label-fg-color) !important;
+}
+
+/* State group background */
+g.stateGroup .composit {
+  fill: var(--md-mermaid-label-bg-color);
+}
+
+/* State node label */
+.nodeLabel {
+  color: var(--md-mermaid-label-fg-color);
+  font-family: var(--md-mermaid-font-family);
+}
+
+/* State start and end marker */
+.start-state,
+.node circle.state-start,
+.node circle.state-end {
+  fill: var(--md-mermaid-edge-color);
+  stroke: none;
+}
+
+/* State end marker */
+.end-state-outer,
+.end-state-inner {
+  fill: var(--md-mermaid-edge-color);
+}
+
+/* State end marker */
+.end-state-inner,
+.node circle.state-end {
+  stroke: var(--md-mermaid-label-bg-color);
+}
+
+/* State transition */
+.transition {
+  stroke: var(--md-mermaid-edge-color);
+}
+
+/* State fork and join */
+[id^=state-fork] rect,
+[id^=state-join] rect {
+  fill: var(--md-mermaid-edge-color) !important;
+  stroke: none !important;
+}
+
+/* State cluster (yes, 2x... Mermaid WTF) */
+.statediagram-cluster.statediagram-cluster .inner {
+  fill: var(--md-default-bg-color);
+}
+
+/* State cluster node */
+.statediagram-cluster rect {
+  fill: var(--md-mermaid-node-bg-color);
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* State cluster divider */
+.statediagram-state rect.divider {
+  fill: var(--md-default-fg-color--lightest);
+  stroke: var(--md-default-fg-color--lighter);
+}
+
+/* State diagram markers */
+defs #statediagram-barbEnd {
+  stroke: var(--md-mermaid-edge-color);
+}
+
+/* ----------------------------------------------------------------------------
+ * Rules: entity-relationship diagrams
+ * ------------------------------------------------------------------------- */
+
+/* Attribute box */
+.attributeBoxEven,
+.attributeBoxOdd {
+  fill: var(--md-mermaid-node-bg-color);
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* Entity node */
+.entityBox {
+  fill: var(--md-mermaid-label-bg-color);
+  stroke: var(--md-mermaid-node-fg-color);
+}
+
+/* Entity node label */
+.entityLabel {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-label-fg-color);
+}
+
+/* Entity relationship label container */
+.relationshipLabelBox {
+  background-color: var(--md-mermaid-label-bg-color);
+  opacity: 1;
+  fill: var(--md-mermaid-label-bg-color);
+  fill-opacity: 1;
+}
+
+/* Entity relationship label */
+.relationshipLabel {
+  fill: var(--md-mermaid-label-fg-color);
+}
+
+/* Entity relationship line { */
+.relationshipLine {
+  stroke: var(--md-mermaid-edge-color);
+}
+
+/* Entity relationship line markers */
+defs #ZERO_OR_ONE_START *,
+defs #ZERO_OR_ONE_END *,
+defs #ZERO_OR_MORE_START *,
+defs #ZERO_OR_MORE_END *,
+defs #ONLY_ONE_START *,
+defs #ONLY_ONE_END *,
+defs #ONE_OR_MORE_START *,
+defs #ONE_OR_MORE_END * {
+  stroke: var(--md-mermaid-edge-color) !important;
+}
+
+/* Entity relationship line markers */
+defs #ZERO_OR_MORE_START circle,
+defs #ZERO_OR_MORE_END circle {
+  fill: var(--md-mermaid-label-bg-color);
+}
+
+/* ----------------------------------------------------------------------------
+ * Rules: sequence diagrams
+ * ------------------------------------------------------------------------- */
+
+/* Sequence actor */
+.actor {
+  fill: var(--md-mermaid-sequence-actor-bg-color);
+  stroke: var(--md-mermaid-sequence-actor-border-color);
+}
+
+/* Sequence actor text */
+text.actor > tspan {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-sequence-actor-fg-color);
+}
+
+/* Sequence actor line */
+line {
+  stroke: var(--md-mermaid-sequence-actor-line-color);
+}
+
+/* Sequence actor */
+.actor-man circle,
+.actor-man line {
+  fill: var(--md-mermaid-sequence-actorman-bg-color);
+  stroke: var(--md-mermaid-sequence-actorman-line-color);
+}
+
+/* Sequence message line */
+.messageLine0,
+.messageLine1 {
+  stroke: var(--md-mermaid-sequence-message-line-color);
+}
+
+/* Sequence note */
+.note {
+  fill: var(--md-mermaid-sequence-note-bg-color);
+  stroke: var(--md-mermaid-sequence-note-border-color);
+}
+
+/* Sequence message, loop and note text */
+.messageText,
+.loopText,
+.loopText > tspan,
+.noteText > tspan {
+  font-family: var(--md-mermaid-font-family) !important;
+  stroke: none;
+}
+
+/* Sequence message text */
+.messageText {
+  fill: var(--md-mermaid-sequence-message-fg-color);
+}
+
+/* Sequence loop text */
+.loopText,
+.loopText > tspan {
+  fill: var(--md-mermaid-sequence-loop-fg-color);
+}
+
+/* Sequence note text */
+.noteText > tspan {
+  fill: var(--md-mermaid-sequence-note-fg-color);
+}
+
+/* Sequence arrow head */
+#arrowhead path {
+  fill: var(--md-mermaid-sequence-message-line-color);
+  stroke: none;
+}
+
+/* Sequence loop line */
+.loopLine {
+  fill: var(--md-mermaid-sequence-loop-bg-color);
+  stroke: var(--md-mermaid-sequence-loop-border-color);
+}
+
+/* Sequence label box */
+.labelBox {
+  fill: var(--md-mermaid-sequence-label-bg-color);
+  stroke: none;
+}
+
+/* Sequence label text */
+.labelText,
+.labelText > span {
+  font-family: var(--md-mermaid-font-family);
+  fill: var(--md-mermaid-sequence-label-fg-color);
+}
+
+/* Sequence number */
+.sequenceNumber {
+  fill: var(--md-mermaid-sequence-number-fg-color);
+}
+
+/* Sequence rectangle */
+rect.rect {
+  fill: var(--md-mermaid-sequence-box-bg-color);
+  stroke: none;
+}
+
+/* Sequence rectangle text */
+rect.rect + text.text {
+  fill: var(--md-mermaid-sequence-box-fg-color);
+}
+
+/* Sequence diagram markers */
+defs #sequencenumber {
+  fill: var(--md-mermaid-sequence-number-bg-color) !important;
+}
diff --git a/src/templates/assets/javascripts/components/content/mermaid/index.ts b/src/templates/assets/javascripts/components/content/mermaid/index.ts
new file mode 100644
index 00000000..3f6480fd
--- /dev/null
+++ b/src/templates/assets/javascripts/components/content/mermaid/index.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import {
+  Observable,
+  map,
+  of,
+  shareReplay,
+  tap
+} from "rxjs"
+
+import { watchScript } from "~/browser"
+import { h } from "~/utilities"
+
+import { Component } from "../../_"
+
+import themeCSS from "./index.css"
+
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mermaid diagram
+ */
+export interface Mermaid {}
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mermaid instance observable
+ */
+let mermaid$: Observable<void>
+
+/**
+ * Global sequence number for diagrams
+ */
+let sequence = 0
+
+/* ----------------------------------------------------------------------------
+ * Helper functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Fetch Mermaid script
+ *
+ * @returns Mermaid scripts observable
+ */
+function fetchScripts(): Observable<void> {
+  return typeof mermaid === "undefined" || mermaid instanceof Element
+    ? watchScript("https://unpkg.com/mermaid@9.4.3/dist/mermaid.min.js")
+    : of(undefined)
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mount Mermaid diagram
+ *
+ * @param el - Code block element
+ *
+ * @returns Mermaid diagram component observable
+ */
+export function mountMermaid(
+  el: HTMLElement
+): Observable<Component<Mermaid>> {
+  el.classList.remove("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
+  mermaid$ ||= fetchScripts()
+    .pipe(
+      tap(() => mermaid.initialize({
+        startOnLoad: false,
+        themeCSS,
+        sequence: {
+          actorFontSize: "16px", // Hack: mitigate https://bit.ly/3y0NEi3
+          messageFontSize: "16px",
+          noteFontSize: "16px"
+        }
+      })),
+      map(() => undefined),
+      shareReplay(1)
+    )
+
+  /* Render diagram */
+  mermaid$.subscribe(() => {
+    el.classList.add("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
+    const id = `__mermaid_${sequence++}`
+
+    /* Create host element to replace code block */
+    const host = h("div", { class: "mermaid" })
+    const text = el.textContent
+
+    /* Render and inject diagram */
+    mermaid.mermaidAPI.render(id, text, (svg: string, fn: Function) => {
+
+      /* Create a shadow root and inject diagram */
+      const shadow = host.attachShadow({ mode: "closed" })
+      shadow.innerHTML = svg
+
+      /* Replace code block with diagram and bind functions */
+      el.replaceWith(host)
+      fn?.(shadow)
+    })
+  })
+
+  /* Create and return component */
+  return mermaid$
+    .pipe(
+      map(() => ({ ref: el }))
+    )
+}