update mermaid theme and start on alternatives

wesley-dean-gsa · Feb 6, 2020 · 14f257f · 14f257f
1 parent f722c64
commit 14f257f
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 2 deletions.
diff --git a/_assets/css/index.scss b/_assets/css/index.scss
@@ -9,6 +9,7 @@
 @import "uswds";
 
 @import 'theme/uswds-theme-custom-styles';
+@import 'mermaid';
 
 // Add your SASS/CSS here
 

diff --git a/_assets/css/mermaid.scss b/_assets/css/mermaid.scss
@@ -0,0 +1,112 @@
+.cg-diagrams-hidden {
+    position: absolute;
+    top: -9999px;
+    left: -99999px;
+  }
+
+  .cg-diagrams-stage {
+    background: #f1f1f1;
+    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; }
+    .cg-diagrams-stage .label {
+      color: #ffffff;
+      overflow-wrap: break-word;
+      word-break: break-word; }
+
+  .cg-diagrams,
+  .cg-diagrams-stage {
+    overflow: scroll;
+    width: 100%;
+  }
+
+  .cluster rect {
+    fill: #f1f1f1 !important;
+    stroke: #0071bc !important;
+    stroke-width: 2px !important; }
+
+  .cluster text {
+    font-size: 1.7rem;
+    font-weight: 700;
+    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+    font-size: 17px; }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon {
+    fill: #0071bc;
+    stroke: #112e51;
+    stroke-width: 2px; }
+
+  .node .label {
+    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+    color: white; }
+
+  .edgePath .path {
+    stroke: #112e51 !important;
+    stroke-width: 2px !important; }
+
+  .edgePath marker path {
+    fill: #112e51 !important; }
+
+  .edgeLabel {
+    background-color: #ffffff;
+    border: #ffffff 5px solid;
+    color: #000000;
+    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+    font-family: 17px; }
+    .edgeLabel:empty {
+      border: none; }
+
+  rect {
+    fill: #0071bc;
+    stroke: #112e51;
+    stroke-width: 2px; }
+    rect.note {
+      fill: #e1f3f8;
+      stroke: #9bdaf1;
+      stroke-width: 2px; }
+    rect.labelBox {
+      fill: #205493;
+      stroke: #0071bc; }
+    rect.actor {
+      fill: #0071bc;
+      stroke: #112e51; }
+
+  #crosshead path,
+  #arrowhead path {
+    fill: #112e51; }
+
+  line[class^=messageLine], line.actor-line {
+    fill: #112e51;
+    stroke: #112e51;
+    stroke-width: 2px; }
+
+  line.loopLine {
+    fill: #112e51;
+    stroke: #0071bc;
+    stroke-width: 2px; }
+
+  text.messageText {
+    font-family: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
+    text-shadow: 2px 2px 0 #ffffff, 1px 1px 0 #5b616b;
+    fill: #046b99;
+    font-size: 1rem; }
+
+  text.actor {
+    fill: #ffffff; }
+
+  text.noteText {
+    fill: #212121;
+    font-size: 1.25rem; }
+
+  text.labelText {
+    font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif;
+    fill: #dce4ef;
+    font-size: 1.25rem;
+    text-transform: uppercase; }
+
+  text.loopText {
+    font-family: "Merriweather", "Georgia", "Cambria", "Times New Roman", "Times", serif;
+    font-size: 1rem;
+    font-style: oblique; }
+
diff --git a/_assets/js/app.js b/_assets/js/app.js
@@ -1,4 +1,4 @@
 // Add your custom javascript here
 console.log("Hi from Federalist");
 
-mermaid.initialize({startOnLoad:true}, ".someOtherClass");
+mermaid.initialize({startOnLoad:true, theme: 'null'}, ".someOtherClass");
diff --git a/_assets/js/mermaid.min.js.map b/_assets/js/mermaid.min.js.map
diff --git a/_includes/alternatives.html b/_includes/alternatives.html
@@ -0,0 +1,14 @@
+<div class="tabs">
+  <ul>
+    <li tabindex="-1">
+      <a class="env-specifier" tabindex="0" href='#{{ .Get "dashboard" }}'>
+      Using the dashboard</a>
+      <a class="env-specifier tab-note" tabindex="-1" href="/docs/getting-started/setup/#log-into-the-dashboard-web-interface">(what's this?)</a>
+    </li>
+    <li tabindex="-1">
+      <a class="env-specifier" tabindex="0" href='#{{ .Get "cli" }}'>Using the command line </a>
+      <a class="env-specifier tab-note" tabindex="-1" href="/docs/getting-started/setup/#set-up-the-command-line">(what's this?)</a>
+    </li>
+  </ul>
+  {{ Inner }}
+</div>
diff --git a/_plugins/jekyll-mermaid.rb b/_plugins/jekyll-mermaid.rb
@@ -10,7 +10,7 @@ def initialize(tag_name, markup, tokens)
       end
 
       def render(context)
-        "<div class=\"mermaid\">#{super}</div>"
+        "<div class=\"mermaid cg-diagrams\">#{super}</div>"
       end
     end
   end
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ def initialize(tag_name, markup, tokens) @@
           end
           def render(context)
-            "<div class=\"mermaid\">#{super}</div>"
+            "<div class=\"mermaid cg-diagrams\">#{super}</div>"
           end
         end
       end
@@ Expand Down @@