Customize mermaid module (#362)

* enabled mermaid by default

* implemented logic to use internal oder cdn mermaid

* added english documentation

* added french translation for the mermaid options

* Removed useless test print

* Hugo does not use upper case letters in params

* fixed false sample link

* improved mermaid pages

* fixed always load mermaid if no frontmatter specified

* fixed mermaid samples

* removed obsolete css files

* changed default version of mermaid cdn

* renamed mermaidURL to customMermaidURL and removed css link

* improved mermaid configuration description

Co-authored-by: Arthur Ferdinand Lindner <Arthur-Ferdinand.Lindner@Telekom.de>
Co-authored-by: Arthur Ferdinand Lindner <arthur.lindner@outlook.de>

3 files changed, 0 insertions, 911 deletions

diff --git a/static/mermaid/mermaid.css b/static/mermaid/mermaid.css
deleted file mode 100644
index 1ca8f3d..0000000
--- a/static/mermaid/mermaid.css
+++ /dev/null
@@ -1,277 +0,0 @@
-/* Flowchart variables */
-/* Sequence Diagram variables */
-/* Gantt chart variables */
-.mermaid .label {
-  color: #333;
-}
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon {
-  fill: #ECECFF;
-  stroke: #CCCCFF;
-  stroke-width: 1px;
-}
-.edgePath .path {
-  stroke: #333333;
-}
-.edgeLabel {
-  background-color: #e8e8e8;
-}
-.cluster rect {
-  fill: #ffffde !important;
-  rx: 4 !important;
-  stroke: #aaaa33 !important;
-  stroke-width: 1px !important;
-}
-.cluster text {
-  fill: #333;
-}
-.actor {
-  stroke: #CCCCFF;
-  fill: #ECECFF;
-}
-text.actor {
-  fill: black;
-  stroke: none;
-}
-.actor-line {
-  stroke: grey;
-}
-.messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #333;
-}
-.messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  stroke: #333;
-}
-#arrowhead {
-  fill: #333;
-}
-#crosshead path {
-  fill: #333 !important;
-  stroke: #333 !important;
-}
-.messageText {
-  fill: #333;
-  stroke: none;
-}
-.labelBox {
-  stroke: #CCCCFF;
-  fill: #ECECFF;
-}
-.labelText {
-  fill: black;
-  stroke: none;
-}
-.loopText {
-  fill: black;
-  stroke: none;
-}
-.loopLine {
-  stroke-width: 2;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #CCCCFF;
-}
-.note {
-  stroke: #aaaa33;
-  fill: #fff5ad;
-}
-.noteText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-/** Section styling */
-.section {
-  stroke: none;
-  opacity: 0.2;
-}
-.section0 {
-  fill: rgba(102, 102, 255, 0.49);
-}
-.section2 {
-  fill: #fff400;
-}
-.section1,
-.section3 {
-  fill: white;
-  opacity: 0.2;
-}
-.sectionTitle0 {
-  fill: #333;
-}
-.sectionTitle1 {
-  fill: #333;
-}
-.sectionTitle2 {
-  fill: #333;
-}
-.sectionTitle3 {
-  fill: #333;
-}
-.sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px;
-}
-/* Grid and axis */
-.grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.grid path {
-  stroke-width: 0;
-}
-/* Today line */
-.today {
-  fill: none;
-  stroke: red;
-  stroke-width: 2px;
-}
-/* Task styling */
-/* Default task */
-.task {
-  stroke-width: 2;
-}
-.taskText {
-  text-anchor: middle;
-  font-size: 11px;
-}
-.taskTextOutsideRight {
-  fill: black;
-  text-anchor: start;
-  font-size: 11px;
-}
-.taskTextOutsideLeft {
-  fill: black;
-  text-anchor: end;
-  font-size: 11px;
-}
-/* Specific task settings for the sections*/
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
-  fill: white;
-}
-.task0,
-.task1,
-.task2,
-.task3 {
-  fill: #8a90dd;
-  stroke: #534fbc;
-}
-.taskTextOutside0,
-.taskTextOutside2 {
-  fill: black;
-}
-.taskTextOutside1,
-.taskTextOutside3 {
-  fill: black;
-}
-/* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
-  fill: #bfc7ff;
-  stroke: #534fbc;
-}
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
-  fill: black !important;
-}
-/* Completed task */
-.done0,
-.done1,
-.done2,
-.done3 {
-  stroke: grey;
-  fill: lightgrey;
-  stroke-width: 2;
-}
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
-  fill: black !important;
-}
-/* Tasks on the critical line */
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
-  stroke: #ff8888;
-  fill: red;
-  stroke-width: 2;
-}
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
-  stroke: #ff8888;
-  fill: #bfc7ff;
-  stroke-width: 2;
-}
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
-  stroke: #ff8888;
-  fill: lightgrey;
-  stroke-width: 2;
-  cursor: pointer;
-  shape-rendering: crispEdges;
-}
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
-  fill: black !important;
-}
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
-  fill: black !important;
-}
-.titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: black;
-}
-/*
-
-
-*/
-.node text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-.node.clickable {
-  cursor: pointer;
-}
-div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
-  background: #ffffde;
-  border: 1px solid #aaaa33;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}
-
diff --git a/static/mermaid/mermaid.dark.css b/static/mermaid/mermaid.dark.css
deleted file mode 100644
index 507efb4..0000000
--- a/static/mermaid/mermaid.dark.css
+++ /dev/null
@@ -1,278 +0,0 @@
-/* Flowchart variables */
-/* Sequence Diagram variables */
-/* Gantt chart variables */
-.mermaid .label {
-  color: #323D47;
-}
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon {
-  fill: #BDD5EA;
-  stroke: #81B1DB;
-  stroke-width: 1px;
-}
-.edgePath .path {
-  stroke: lightgrey;
-}
-.edgeLabel {
-  background-color: #e8e8e8;
-}
-.cluster rect {
-  fill: #6D6D65 !important;
-  rx: 4 !important;
-  stroke: rgba(255, 255, 255, 0.25) !important;
-  stroke-width: 1px !important;
-}
-.cluster text {
-  fill: #F9FFFE;
-}
-.actor {
-  stroke: #81B1DB;
-  fill: #BDD5EA;
-}
-text.actor {
-  fill: black;
-  stroke: none;
-}
-.actor-line {
-  stroke: lightgrey;
-}
-.messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: lightgrey;
-}
-.messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  stroke: lightgrey;
-}
-#arrowhead {
-  fill: lightgrey !important;
-}
-#crosshead path {
-  fill: lightgrey !important;
-  stroke: lightgrey !important;
-}
-.messageText {
-  fill: lightgrey;
-  stroke: none;
-}
-.labelBox {
-  stroke: #81B1DB;
-  fill: #BDD5EA;
-}
-.labelText {
-  fill: #323D47;
-  stroke: none;
-}
-.loopText {
-  fill: lightgrey;
-  stroke: none;
-}
-.loopLine {
-  stroke-width: 2;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #81B1DB;
-}
-.note {
-  stroke: rgba(255, 255, 255, 0.25);
-  fill: #fff5ad;
-}
-.noteText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-/** Section styling */
-.section {
-  stroke: none;
-  opacity: 0.2;
-}
-.section0 {
-  fill: rgba(255, 255, 255, 0.3);
-}
-.section2 {
-  fill: #EAE8B9;
-}
-.section1,
-.section3 {
-  fill: white;
-  opacity: 0.2;
-}
-.sectionTitle0 {
-  fill: #F9FFFE;
-}
-.sectionTitle1 {
-  fill: #F9FFFE;
-}
-.sectionTitle2 {
-  fill: #F9FFFE;
-}
-.sectionTitle3 {
-  fill: #F9FFFE;
-}
-.sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px;
-}
-/* Grid and axis */
-.grid .tick {
-  stroke: rgba(255, 255, 255, 0.3);
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.grid .tick text {
-  fill: lightgrey;
-  opacity: 0.5;
-}
-.grid path {
-  stroke-width: 0;
-}
-/* Today line */
-.today {
-  fill: none;
-  stroke: #DB5757;
-  stroke-width: 2px;
-}
-/* Task styling */
-/* Default task */
-.task {
-  stroke-width: 1;
-}
-.taskText {
-  text-anchor: middle;
-  font-size: 11px;
-}
-.taskTextOutsideRight {
-  fill: #323D47;
-  text-anchor: start;
-  font-size: 11px;
-}
-.taskTextOutsideLeft {
-  fill: #323D47;
-  text-anchor: end;
-  font-size: 11px;
-}
-/* Specific task settings for the sections*/
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
-  fill: #323D47;
-}
-.task0,
-.task1,
-.task2,
-.task3 {
-  fill: #BDD5EA;
-  stroke: rgba(255, 255, 255, 0.5);
-}
-.taskTextOutside0,
-.taskTextOutside2 {
-  fill: lightgrey;
-}
-.taskTextOutside1,
-.taskTextOutside3 {
-  fill: lightgrey;
-}
-/* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
-  fill: #81B1DB;
-  stroke: rgba(255, 255, 255, 0.5);
-}
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
-  fill: #323D47 !important;
-}
-/* Completed task */
-.done0,
-.done1,
-.done2,
-.done3 {
-  fill: lightgrey;
-}
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
-  fill: #323D47 !important;
-}
-/* Tasks on the critical line */
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
-  stroke: #E83737;
-  fill: #E83737;
-  stroke-width: 2;
-}
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
-  stroke: #E83737;
-  fill: #81B1DB;
-  stroke-width: 2;
-}
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
-  stroke: #E83737;
-  fill: lightgrey;
-  stroke-width: 1;
-  cursor: pointer;
-  shape-rendering: crispEdges;
-}
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
-  fill: lightgrey !important;
-}
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
-  fill: #323D47 !important;
-}
-.titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: lightgrey;
-}
-/*
-
-
-*/
-.node text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-.node.clickable {
-  cursor: pointer;
-}
-div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
-  background: #6D6D65;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}
diff --git a/static/mermaid/mermaid.forest.css b/static/mermaid/mermaid.forest.css
deleted file mode 100644
index ad432d5..0000000
--- a/static/mermaid/mermaid.forest.css
+++ /dev/null
@@ -1,356 +0,0 @@
-/* Flowchart variables */
-/* Sequence Diagram variables */
-/* Gantt chart variables */
-.mermaid .label {
-  font-family: 'trebuchet ms', verdana, arial;
-  color: #333;
-}
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon {
-  fill: #cde498;
-  stroke: #13540c;
-  stroke-width: 1px;
-}
-.edgePath .path {
-  stroke: green;
-  stroke-width: 1.5px;
-}
-.edgeLabel {
-  background-color: #e8e8e8;
-}
-.cluster rect {
-  fill: #cdffb2 !important;
-  rx: 4  !important;
-  stroke: #6eaa49 !important;
-  stroke-width: 1px !important;
-}
-.cluster text {
-  fill: #333;
-}
-.actor {
-  stroke: #13540c;
-  fill: #cde498;
-}
-text.actor {
-  fill: black;
-  stroke: none;
-}
-.actor-line {
-  stroke: grey;
-}
-.messageLine0 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #333;
-}
-.messageLine1 {
-  stroke-width: 1.5;
-  stroke-dasharray: "2 2";
-  stroke: #333;
-}
-#arrowhead {
-  fill: #333;
-}
-#crosshead path {
-  fill: #333 !important;
-  stroke: #333 !important;
-}
-.messageText {
-  fill: #333;
-  stroke: none;
-}
-.labelBox {
-  stroke: #326932;
-  fill: #cde498;
-}
-.labelText {
-  fill: black;
-  stroke: none;
-}
-.loopText {
-  fill: black;
-  stroke: none;
-}
-.loopLine {
-  stroke-width: 2;
-  stroke-dasharray: "2 2";
-  marker-end: "url(#arrowhead)";
-  stroke: #326932;
-}
-.note {
-  stroke: #6eaa49;
-  fill: #fff5ad;
-}
-.noteText {
-  fill: black;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-/** Section styling */
-.section {
-  stroke: none;
-  opacity: 0.2;
-}
-.section0 {
-  fill: #6eaa49;
-}
-.section2 {
-  fill: #6eaa49;
-}
-.section1,
-.section3 {
-  fill: white;
-  opacity: 0.2;
-}
-.sectionTitle0 {
-  fill: #333;
-}
-.sectionTitle1 {
-  fill: #333;
-}
-.sectionTitle2 {
-  fill: #333;
-}
-.sectionTitle3 {
-  fill: #333;
-}
-.sectionTitle {
-  text-anchor: start;
-  font-size: 11px;
-  text-height: 14px;
-}
-/* Grid and axis */
-.grid .tick {
-  stroke: lightgrey;
-  opacity: 0.3;
-  shape-rendering: crispEdges;
-}
-.grid path {
-  stroke-width: 0;
-}
-/* Today line */
-.today {
-  fill: none;
-  stroke: red;
-  stroke-width: 2px;
-}
-/* Task styling */
-/* Default task */
-.task {
-  stroke-width: 2;
-}
-.taskText {
-  text-anchor: middle;
-  font-size: 11px;
-}
-.taskTextOutsideRight {
-  fill: black;
-  text-anchor: start;
-  font-size: 11px;
-}
-.taskTextOutsideLeft {
-  fill: black;
-  text-anchor: end;
-  font-size: 11px;
-}
-/* Specific task settings for the sections*/
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
-  fill: white;
-}
-.task0,
-.task1,
-.task2,
-.task3 {
-  fill: #487e3a;
-  stroke: #13540c;
-}
-.taskTextOutside0,
-.taskTextOutside2 {
-  fill: black;
-}
-.taskTextOutside1,
-.taskTextOutside3 {
-  fill: black;
-}
-/* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
-  fill: #cde498;
-  stroke: #13540c;
-}
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
-  fill: black !important;
-}
-/* Completed task */
-.done0,
-.done1,
-.done2,
-.done3 {
-  stroke: grey;
-  fill: lightgrey;
-  stroke-width: 2;
-}
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
-  fill: black !important;
-}
-/* Tasks on the critical line */
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
-  stroke: #ff8888;
-  fill: red;
-  stroke-width: 2;
-}
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
-  stroke: #ff8888;
-  fill: #cde498;
-  stroke-width: 2;
-}
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
-  stroke: #ff8888;
-  fill: lightgrey;
-  stroke-width: 2;
-  cursor: pointer;
-  shape-rendering: crispEdges;
-}
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
-  fill: black !important;
-}
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
-  fill: black !important;
-}
-.titleText {
-  text-anchor: middle;
-  font-size: 18px;
-  fill: black;
-}
-/*
-
-
-*/
-g.classGroup text {
-  fill: #13540c;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-g.classGroup rect {
-  fill: #cde498;
-  stroke: #13540c;
-}
-g.classGroup line {
-  stroke: #13540c;
-  stroke-width: 1;
-}
-svg .classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: #cde498;
-  opacity: 0.5;
-}
-svg .classLabel .label {
-  fill: #13540c;
-}
-.relation {
-  stroke: #13540c;
-  stroke-width: 1;
-  fill: none;
-}
-.composition {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#compositionStart {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#compositionEnd {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-.aggregation {
-  fill: #cde498;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#aggregationStart {
-  fill: #cde498;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#aggregationEnd {
-  fill: #cde498;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#dependencyStart {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#dependencyEnd {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#extensionStart {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-#extensionEnd {
-  fill: #13540c;
-  stroke: #13540c;
-  stroke-width: 1;
-}
-.node text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-.node.clickable {
-  cursor: pointer;
-}
-div.mermaidTooltip {
-  position: absolute;
-  text-align: center;
-  max-width: 200px;
-  padding: 2px;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 12px;
-  background: #cdffb2;
-  border: 1px solid #6eaa49;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 100;
-}