Copied over merge from cse340 website

https://gitlab.cs.washington.edu/cse340/website/-/merge_requests/49/diffs

.gitmodules

+[submodule "reveal.js"]
+	path = reveal.js
+	url = https://github.com/hakimel/reveal.js.git
+[submodule "_submodules/he"]
+	path = _submodules/he
+	url = https://github.com/mathiasbynens/he.git
+[submodule "_submodules/MathJax-docs"]
+	path = _submodules/MathJax-docs
+	url = https://github.com/mathjax/MathJax-docs.git
+[submodule "_submodules/MathJax"]
+	path = _submodules/MathJax
+	url = https://github.com/mathjax/MathJax.git
+[submodule "_submodules/MathJax-a11y"]
+	path = _submodules/MathJax-a11y
+	url = https://github.com/mathjax/MathJax-a11y.git

_config.yml

@@ -66,8 +66,7 @@ kramdown:
   toc_levels: '1'
 
 mermaid:
-  src: '/assets/js/mermaid.js'
-  src_config: '/assets/js/mermaid_config.js'
+  src: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'
 
 remarkConfig:
   # possible highlight options:

_config_production.yml

@@ -66,8 +66,7 @@ kramdown:
   toc_levels: '1'
 
 mermaid:
-  src: '/website/assets/js/mermaid.js'
-  src_config: '/website/assets/js/mermaid_config.js'
+  src: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'
 
 remarkConfig:
   # possible highlight options:

_layouts/assignment.html

@@ -66,7 +66,7 @@
       {% include footer.html %}
     </main>
 
-  <script src="{{ '/assets/js/mermaid.js' | relative_url}}"></script>
+  <script src="src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js""></script>
   <link rel="stylesheet" href="{{ '/assets/css/mermaid.css' | relative_url }}">
   <link rel="stylesheet" href="{{ '/assets/css/assignment.css' | relative_url }}">
   <script>mermaid.initialize({startOnLoad:true});</script>

_layouts/default.html

@@ -23,7 +23,7 @@
   </main>
 
   <script src="{{ '/assets/js/bootstrap.min.js' | relative_url}}"></script>
-  <script src="{{ '/assets/js/mermaid.js' | relative_url}}"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   <link rel="stylesheet" href="{{ '/assets/css/mermaid.css' | relative_url }}">
   <script>mermaid.initialize({ startOnLoad: true });</script>
 

_layouts/presentation.html

@@ -54,9 +54,9 @@
           highlightStyle: 'github',
           highlightLines: 'true',
           slideNumberFormat: 'Slide %current% of %total%'
-      });
+      }); 
     </script>
-    <script type="module" src="{{site.baseurl}}/assets/js/mermaid.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   </body>
 
 <!--

_layouts/presentation_production.html

@@ -57,7 +57,7 @@
           slideNumberFormat: 'Slide %current% of %total%'
       });
     </script>
-    <script type="module" src="{{site.baseurl}}/assets/js/mermaid.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   </body>
 
 <!--

assets/css/mermaid.css

@@ -2,11 +2,11 @@
 /* Sequence Diagram variables */
 /* Gantt chart variables */
 
-
 .remark-slide-container {
     visibility: hidden;
     display: initial;
 }
+
 .remark-visible {
     visibility: visible;
 }
@@ -14,7 +14,6 @@
 .mermaid .label {
   color: #333;
   font-size: 16pt;
-
 }
 
 .node rect,
@@ -30,147 +29,180 @@
 .edgePath .path {
   stroke: #333333;
 }
+
 .edgeLabel {
   font-size: 14pt;
-  padding-right: 2px; 
 }
+
 .cluster rect {
   fill: #ffffde !important;
   rx: 4 !important;
   stroke: #aaaa33 !important;
   stroke-width: 1px !important;
 }
+
 .cluster text {
   fill: #333;
 }
+
 .actor {
   stroke: #CCCCFF;
   fill: #dbf0db;
 }
+
 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: #dbf0db;
 }
+
 .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: 12px;
 }
+
 /** 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: 10px;
   text-height: 12px;
 }
+
 /* 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: 10px;
 }
+
 .taskTextOutsideRight {
   fill: black;
   text-anchor: start;
   font-size: 10px;
 }
+
 .taskTextOutsideLeft {
   fill: black;
   text-anchor: end;
   font-size: 10px;
 }
+
 /* Specific task settings for the sections*/
 .taskText0,
 .taskText1,
@@ -178,6 +210,7 @@ text.actor {
 .taskText3 {
   fill: white;
 }
+
 .task0,
 .task1,
 .task2,
@@ -185,14 +218,17 @@ text.actor {
   fill: #dbf0db;
   stroke: #534fbc;
 }
+
 .taskTextOutside0,
 .taskTextOutside2 {
   fill: black;
 }
+
 .taskTextOutside1,
 .taskTextOutside3 {
   fill: black;
 }
+
 /* Active task */
 .active0,
 .active1,
@@ -201,12 +237,14 @@ text.actor {
   fill: #bfc7ff;
   stroke: #534fbc;
 }
+
 .activeText0,
 .activeText1,
 .activeText2,
 .activeText3 {
   fill: black !important;
 }
+
 /* Completed task */
 .done0,
 .done1,
@@ -216,12 +254,14 @@ text.actor {
   fill: lightgrey;
   stroke-width: 2;
 }
+
 .doneText0,
 .doneText1,
 .doneText2,
 .doneText3 {
   fill: black !important;
 }
+
 /* Tasks on the critical line */
 .crit0,
 .crit1,
@@ -231,6 +271,7 @@ text.actor {
   fill: red;
   stroke-width: 2;
 }
+
 .activeCrit0,
 .activeCrit1,
 .activeCrit2,
@@ -239,6 +280,7 @@ text.actor {
   fill: #bfc7ff;
   stroke-width: 2;
 }
+
 .doneCrit0,
 .doneCrit1,
 .doneCrit2,
@@ -249,31 +291,32 @@ text.actor {
   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: 16px;
   fill: black;
 }
-/*
 
-
-*/
 .node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 12px;
 }
+
 div.mermaidTooltip {
   position: absolute;
   text-align: center;
@@ -288,7 +331,6 @@ div.mermaidTooltip {
   z-index: 100;
 }
 
-
 .bluegreen  > rect {
     fill: #d1e0e0 !important;
     stroke:#333 !important;
@@ -303,25 +345,22 @@ div.mermaidTooltip {
 
 .green > rect {
     fill: #dbf0db !important;
-    stroke:#333 !imporatant;
+    stroke:#333 !important;
     stroke-width:2px !important;
 }
 
-
 .yellow > rect {
     fill:#ffffe6 !important;
     stroke:#333 !important;
     stroke-width:2px !important;
 }
 
-
 .darkblue > rect {
     fill: #99ccff !important;
     stroke:#333 !important;
     stroke-width:4px !important;
 }
 
-
 .bluegreen  > circle {
     fill: #d1e0e0 !important;
     stroke:#333 !important;
@@ -337,7 +376,7 @@ div.mermaidTooltip {
 
 .green > circle {
     fill: #dbf0db !important;
-    stroke:#333 !imporatant;
+    stroke:#333 !important;
     stroke-width:2px !important;
 }
 
@@ -354,19 +393,20 @@ div.mermaidTooltip {
     color:white !important;
 }
 
-
 .finish > circle {
     outline-style:double;
     fill:#d1e0e0;
     stroke:#333;
     stroke-width:2px;
 }
+
 .finish > rect {
     outline-style:double;
     fill:#d1e0e0;
     stroke:#333;
     stroke-width:2px;
 }
+
 .normal > circle {
     fill:#e6f3ff;
     stroke:#333;
@@ -378,6 +418,7 @@ div.mermaidTooltip {
     stroke:#333;
     stroke-width:2px;
 }
+
 .start > circle {
     fill:#d1e0e0;
     stroke:#333;
@@ -426,6 +467,17 @@ g.classGroup rect {
 
 }
 
+/* Remove label background fill */
+.label > rect {
+  fill: #FFFFFF00 !important;
+}
+
+/* Keep svgs within containing div */
+div.mermaid > svg {
+  width: 100%;
+  aspect-ratio: none;
+}
+
 g > foreignObject > div {
     position:relative;
     font-size: .8em;