feat: figures with open in tab link (#1030)

In the main branch you can open diagrams in a new tab. This commit brings them back.

- Improve styling of embedded svgs.
- Use semantic figure and figurecaption elements.
- Add open in tab link
- Pull svgs and source files into the intro section as appropriate


License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>

assets/_custom.scss

@@ -11,7 +11,9 @@
 
 // SVG Diagrams
 .diagrams-container {
-    margin: 20px 20px;
+    margin: 20px 0px;
+    border: 1px solid $gray-200;
+    border-radius: $border-radius;
 }
 .diagrams {
     width: auto;
@@ -28,9 +30,15 @@
     cursor: grabbing;
 }
 .diagrams-caption {
-    text-align: center;
-    a {
+    // background-color: #e9ecef;
+    border-top: 1px solid #e9ecef;
+    padding: 0.5rem;
+    font-size: 12px;
+    font-weight: 500;
+    .diagrams-link {
         text-decoration: none !important;
+        float:right;
+        font-weight: 400;
     }
 }
 

content/intro/arch.md

@@ -19,14 +19,14 @@ dashboardAudit: 0
 {{< /details >}}
 
 
-{{< svg src="/.assets/overview.dot.svg" title="Protocol Overview Diagram" >}}
+{{< svg src="diagrams/overview1/overview.dot.svg" title="Protocol Overview Diagram" >}}
 
 ## Protocol Flow Diagram
 
-{{< svg src="/.assets/full-deals-on-chain.mmd.svg" title="Deals on Chain" >}}
+{{< svg src="diagrams/sequence/full-deals-on-chain.mmd.svg" title="Deals on Chain" >}}
 
 ## Parameter Calculation Dependency Graph
 
 This is a diagram of the model for parameter calculation. This is made with [orient](https://github.com/filecoin-project/orient), our tool for modeling and solving for constraints.
 
-{{< svg src="/.assets/filecoin.dot.svg" title="Protocol Overview Diagram" >}}
+{{< svg src="diagrams/orient/filecoin.dot.svg" title="Protocol Overview Diagram" >}}

content/intro/diagrams/buildsys/buildsys.dot

@@ -0,0 +1,52 @@
+strict digraph G {
+  node [shape=box]
+  graph [ranksep="1", nodesep="1"]
+
+  { // editable inputs
+    node [fillcolor=lightyellow, style=filled]
+    ".md"
+    ".ipld"
+    ".go"
+    ".orient"
+    ".org"
+    ".dot"
+  }
+
+  { // outputs
+    node [fillcolor=lightgreen, style=filled]
+   "[website]"
+   "spec.pdf"
+  }
+
+  { // programs
+    node [shape=none]
+    "emacs"
+    "dot"
+    "orient"
+    "bin/codeGen"
+    "hugo"
+    "go test"
+    "make website"
+    "make pdf"
+  }
+
+
+  ".org" -> "<emacs>" -> ".md"
+  ".md" -> "hugo build" -> ".html"
+
+  ".orient" -> "orient" -> "<emacs>" -> ".md"
+  ".orient" -> "orient" -> ".dot"
+  ".orient" -> "orient" -> ".html"
+
+  ".dot" -> "dot" -> ".svg"
+
+  ".ipld" -> "bin/codeGen" -> ".go"
+  ".go" -> "go test" -> "[ok]"
+  ".go" -> "hugo build" -> ".html"
+
+  ".html" -> "make website" -> "[website]"
+  ".svg" -> "make website" -> "[website]"
+
+  ".md" -> "make pdf" -> "spec.pdf"
+  ".svg" -> "make pdf" -> "spec.pdf"
+}