From bb0967f0059e594f05748139e113be76c6288803 Mon Sep 17 00:00:00 2001
From: Panayiotis Lipiridis <lipiridis@gmail.com>
Date: Wed, 19 Dec 2018 19:57:32 +0200
Subject: [PATCH 1/3] feat: Update SVG related tasks

---
 package.json | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 090ece56b86ed..ed63ff61ccfe3 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,10 @@
     "*.{md,css,scss,yaml,yml}": [
       "prettier --write",
       "git add"
+    ],
+    "*.svg": [
+      "svgo --pretty --indent=2 --config=svgo.yml",
+      "git add"
     ]
   },
   "husky": {
@@ -60,10 +64,10 @@
   "scripts": {
     "bootstrap": "npm-run-all -s check-versions lerna-prepare",
     "check-versions": "babel-node scripts/check-versions.js",
-    "format": "npm run format:code && npm run format:other",
+    "format": "npm run format:code && npm run format:other && npm run format:svg",
     "format:other": "npm run prettier -- --write",
     "format:code": "npm run lint:code -- --fix",
-    "format-svg": "find www examples packages | grep '\\.svg$' | xargs -Iz -n 1 svgo --pretty --indent=2 --config=svgo.yml z",
+    "format:svg": "find www examples packages | grep '\\.svg$' | xargs -Iz -n 1 svgo --pretty --indent=2 --config=svgo.yml z",
     "hooks:uninstall": "node node_modules/husky/husky.js uninstall",
     "hooks:install": "node node_modules/husky/husky.js install",
     "jest": "jest",

From ac2b6470bc4c91d5898d40e19b04337cb0598405 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Wed, 13 Feb 2019 04:46:22 -0800
Subject: [PATCH 2/3] chore: update format-svg scripts

---
 .../diagram-ci.svg                            | 502 +++++-------------
 .../gatsby.svg                                |  15 +-
 package.json                                  |   4 +-
 scripts/format-svg.js                         |  19 +
 www/src/assets/showcase-feather.svg           |  27 +-
 5 files changed, 177 insertions(+), 390 deletions(-)
 create mode 100644 scripts/format-svg.js

diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg
index 11f4a52132c66..af239d82494fb 100644
--- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg
+++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg
@@ -1,360 +1,142 @@
-<svg id="mermaidChart125" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 626.390625 223" style="max-width:626.390625px;"><style>
-  /* 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: orange;
-  stroke: #ff5722;
-  stroke-width: 1px;
-}
-.arrowheadPath {
-  fill: #ff5722;
-}
-.edgePath .path {
-  stroke: #ff5722;
-  stroke-width: 1.5px;
-}
-.edgeLabel {
-  background-color: #e8e8e8;
-}
-.cluster rect {
-  fill: #cdffb2 !important;
-  rx: 4 !important;
-  stroke: #ff5722 !important;
-  stroke-width: 1px !important;
-}
-.cluster text {
-  fill: #333;
-}
-.actor {
-  stroke: #ff5722;
-  fill: orange;
-}
-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: #ff5722;
-  fill: orange;
-}
-.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: #ff5722;
-}
-.taskTextOutside0,
-.taskTextOutside2 {
-  fill: black;
-}
-.taskTextOutside1,
-.taskTextOutside3 {
-  fill: black;
-}
-/* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
-  fill: orange;
-  stroke: #ff5722;
-}
-.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: orange;
-  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: #ff5722;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 10px;
-}
-g.classGroup rect {
-  fill: orange;
-  stroke: #ff5722;
-}
-g.classGroup line {
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-svg .classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: orange;
-  opacity: 0.5;
-}
-svg .classLabel .label {
-  fill: #ff5722;
-  font-size: 10px;
-}
-.relation {
-  stroke: #ff5722;
-  stroke-width: 1;
-  fill: none;
-}
-.composition {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#compositionStart {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#compositionEnd {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-.aggregation {
-  fill: orange;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#aggregationStart {
-  fill: orange;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#aggregationEnd {
-  fill: orange;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#dependencyStart {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#dependencyEnd {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#extensionStart {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-#extensionEnd {
-  fill: #ff5722;
-  stroke: #ff5722;
-  stroke-width: 1;
-}
-.node text {
-  font-family: 'trebuchet ms', verdana, arial;
-  font-size: 14px;
-}
-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;
-}
-
-svg {
-  color: rgba(0, 0, 0, 0.65);
-  font: normal normal normal normal 12px / 18px "Helvetica Neue For Number", -apple-system, system-ui, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-  </style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M70.265625,93L109.1328125,93L148,93" marker-end="url(#arrowhead2389)" style="fill:none"></path><defs><marker id="arrowhead2389" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M204.4095775462963,74L255.75,39L310.78125,39" marker-end="url(#arrowhead2390)" style="fill:none"></path><defs><marker id="arrowhead2390" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M359.03125,39L407.4765625,39L496.421875,60.53832679372197" marker-end="url(#arrowhead2391)" style="fill:none"></path><defs><marker id="arrowhead2391" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M496.421875,71.46167320627802L407.4765625,93L334.90625,93L255.75,93L205.078125,93" marker-end="url(#arrowhead2392)" style="fill:none"></path><defs><marker id="arrowhead2392" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M363.390625,164L407.4765625,164L451.5625,164" marker-end="url(#arrowhead2393)" style="fill:none"></path><defs><marker id="arrowhead2393" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M197.73635563380282,112L255.75,164L306.421875,164" marker-end="url(#arrowhead2394)" style="fill:none"></path><defs><marker id="arrowhead2394" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(109.1328125,93)" style="opacity: 1;"><g transform="translate(-13.8671875,-9)" class="label"><foreignObject width="27.734375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">push</span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(407.4765625,164)" style="opacity: 1;"><g transform="translate(-19.0859375,-9)" class="label"><foreignObject width="38.171875" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">deploy</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(255.75,164)" style="opacity: 1;"><g transform="translate(-25.671875,-9)" class="label"><foreignObject width="51.34375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">webhook</span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="G" transform="translate(176.5390625,93)" style="opacity: 1;"><rect rx="0" ry="0" x="-28.5390625" y="-19" width="57.078125" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-18.5390625,-9)"><foreignObject width="37.078125" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">GitLab</div></foreignObject></g></g></g><g class="node" id="B" transform="translate(334.90625,39)" style="opacity: 1;"><rect rx="0" ry="0" x="-24.125" y="-19" width="48.25" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-14.125,-9)"><foreignObject width="28.25" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Build</div></foreignObject></g></g></g><g class="node" id="T" transform="translate(518.9765625,66)" style="opacity: 1;"><rect rx="0" ry="0" x="-22.5546875" y="-19" width="45.109375" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-12.5546875,-9)"><foreignObject width="25.109375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Test</div></foreignObject></g></g></g><g class="node" id="L" transform="translate(45.1328125,93)" style="opacity: 1;"><rect rx="0" ry="0" x="-25.1328125" y="-19" width="50.265625" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-15.1328125,-9)"><foreignObject width="30.265625" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Local</div></foreignObject></g></g></g><g class="node" id="W" transform="translate(518.9765625,164)" style="opacity: 1;"><rect rx="0" ry="0" x="-67.4140625" y="-19" width="134.828125" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-57.4140625,-9)"><foreignObject width="114.828125" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">blog.singuerinc.com</div></foreignObject></g></g></g><g class="node" id="N" transform="translate(334.90625,164)" style="opacity: 1;"><rect rx="0" ry="0" x="-28.484375" y="-19" width="56.96875" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-18.484375,-9)"><foreignObject width="36.96875" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Netlify</div></foreignObject></g></g></g></g></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 626.391 223" style="max-width:626.390625px;font:12px/18px &quot;Helvetica Neue For Number&quot;,-apple-system,system-ui,&quot;Segoe UI&quot;,Roboto,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" color="rgba(0,0,0,.65)">
+  <g class="output">
+    <g class="edgePaths">
+      <g class="edgePath">
+        <path class="path" d="M70.266 93H148" marker-end="url(#a)" fill="none"/>
+        <defs>
+          <marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
+            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
+          </marker>
+        </defs>
+      </g>
+      <g class="edgePath">
+        <path class="path" d="M204.41 74l51.34-35h55.031" marker-end="url(#b)" fill="none"/>
+        <defs>
+          <marker id="b" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
+            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
+          </marker>
+        </defs>
+      </g>
+      <g class="edgePath">
+        <path class="path" d="M359.031 39h48.446l88.945 21.538" marker-end="url(#c)" fill="none"/>
+        <defs>
+          <marker id="c" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
+            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
+          </marker>
+        </defs>
+      </g>
+      <g class="edgePath">
+        <path class="path" d="M496.422 71.462L407.477 93H205.078" marker-end="url(#d)" fill="none"/>
+        <defs>
+          <marker id="d" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
+            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
+          </marker>
+        </defs>
+      </g>
+      <g class="edgePath">
+        <path class="path" d="M363.39 164h88.173" marker-end="url(#e)" fill="none"/>
+        <defs>
+          <marker id="e" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
+            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
+          </marker>
+        </defs>
+      </g>
+      <g class="edgePath">
+        <path class="path" d="M197.736 112l58.014 52h50.672" marker-end="url(#f)" fill="none"/>
+        <defs>
+          <marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
+            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
+          </marker>
+        </defs>
+      </g>
+    </g>
+    <g class="edgeLabels">
+      <foreignObject width="27.734" height="18" transform="translate(95.266 84)">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+          <span class="edgeLabel">
+            push
+          </span>
+        </div>
+      </foreignObject>
+      <foreignObject width="0" height="0">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+          <span class="edgeLabel"/>
+        </div>
+      </foreignObject>
+      <foreignObject width="0" height="0">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+          <span class="edgeLabel"/>
+        </div>
+      </foreignObject>
+      <foreignObject width="0" height="0">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+          <span class="edgeLabel"/>
+        </div>
+      </foreignObject>
+      <foreignObject width="38.172" height="18" transform="translate(388.39 155)">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+          <span class="edgeLabel">
+            deploy
+          </span>
+        </div>
+      </foreignObject>
+      <foreignObject width="51.344" height="18" transform="translate(230.078 155)">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+          <span class="edgeLabel">
+            webhook
+          </span>
+        </div>
+      </foreignObject>
+    </g>
+    <g class="nodes">
+      <g class="node" transform="translate(176.54 93)">
+        <rect rx="0" ry="0" x="-28.539" y="-19" width="57.078" height="38"/>
+        <foreignObject width="37.078" height="18" transform="translate(-18.54 -9)">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+            GitLab
+          </div>
+        </foreignObject>
+      </g>
+      <g class="node" transform="translate(334.906 39)">
+        <rect rx="0" ry="0" x="-24.125" y="-19" width="48.25" height="38"/>
+        <foreignObject width="28.25" height="18" transform="translate(-14.125 -9)">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+            Build
+          </div>
+        </foreignObject>
+      </g>
+      <g class="node" transform="translate(518.977 66)">
+        <rect rx="0" ry="0" x="-22.555" y="-19" width="45.109" height="38"/>
+        <foreignObject width="25.109" height="18" transform="translate(-12.555 -9)">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+            Test
+          </div>
+        </foreignObject>
+      </g>
+      <g class="node" transform="translate(45.133 93)">
+        <rect rx="0" ry="0" x="-25.133" y="-19" width="50.266" height="38"/>
+        <foreignObject width="30.266" height="18" transform="translate(-15.133 -9)">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+            Local
+          </div>
+        </foreignObject>
+      </g>
+      <g class="node" transform="translate(518.977 164)">
+        <rect rx="0" ry="0" x="-67.414" y="-19" width="134.828" height="38"/>
+        <foreignObject width="114.828" height="18" transform="translate(-57.414 -9)">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+            blog.singuerinc.com
+          </div>
+        </foreignObject>
+      </g>
+      <g class="node" transform="translate(334.906 164)">
+        <rect rx="0" ry="0" x="-28.484" y="-19" width="56.969" height="38"/>
+        <foreignObject width="36.969" height="18" transform="translate(-18.484 -9)">
+          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
+            Netlify
+          </div>
+        </foreignObject>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg
index fa7e3b8860c67..51b5741111af4 100644
--- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg
+++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/gatsby.svg
@@ -1,12 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
-    <title>gatsby</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="gatsby" fill-rule="nonzero" fill="#744C9E">
-            <path d="M125,0.140734266 C56.0421766,0.140734266 0.140734266,56.041958 0.140734266,125 C0.140734266,193.95826 56.0423951,249.859266 125,249.859266 C193.95826,249.859266 249.859266,193.958042 249.859266,125 C249.859266,56.041958 193.95826,0.140734266 125,0.140734266 Z M26.9698427,126.301573 L123.698208,223.030157 C70.5832605,222.33785 27.6619318,179.416521 26.9698427,126.301573 Z M146.944274,220.579108 L29.4208916,103.055726 C39.3863636,59.4715909 78.3946678,26.9534528 125,26.9534528 C157.578016,26.9534528 186.439467,42.8465909 204.268794,67.2978584 L190.693619,79.2760052 C176.230988,58.5356206 152.20236,44.9619755 125,44.9619755 C90.3660402,44.9619755 60.8725962,66.9611014 49.7246503,97.7471591 L152.253059,200.275568 C177.152098,191.25896 196.301573,170.240603 202.715035,144.209135 L160.216783,144.209135 L160.216783,125.000219 L205.038024,125.000219 L205.038024,124.999781 L223.046547,124.999781 L223.046547,125 C223.046547,171.605332 190.528628,210.613636 146.944274,220.579108 Z" id="Shape"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
+  <path d="M125 .14C56.042.14.14 56.043.14 125S56.043 249.86 125 249.86 249.86 193.957 249.86 125 193.957.14 125 .14zM26.97 126.303l96.728 96.728c-53.115-.692-96.036-43.613-96.728-96.728zm119.974 94.277L29.421 103.056C39.386 59.472 78.395 26.953 125 26.953c32.578 0 61.44 15.894 79.269 40.345l-13.575 11.978C176.23 58.536 152.202 44.962 125 44.962c-34.634 0-64.127 22-75.275 52.785l102.528 102.529c24.9-9.017 44.049-30.035 50.462-56.067h-42.498V125h62.83c0 46.605-32.518 85.614-76.103 95.58z" fill="#744C9E"/>
+</svg>
diff --git a/package.json b/package.json
index ed63ff61ccfe3..8600add8f4aef 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
       "git add"
     ],
     "*.svg": [
-      "svgo --pretty --indent=2 --config=svgo.yml",
+      "svgo --pretty --indent=2 --config=svgo.yml --multipass",
       "git add"
     ]
   },
@@ -67,7 +67,7 @@
     "format": "npm run format:code && npm run format:other && npm run format:svg",
     "format:other": "npm run prettier -- --write",
     "format:code": "npm run lint:code -- --fix",
-    "format:svg": "find www examples packages | grep '\\.svg$' | xargs -Iz -n 1 svgo --pretty --indent=2 --config=svgo.yml z",
+    "format:svg": "node scripts/format-svg.js",
     "hooks:uninstall": "node node_modules/husky/husky.js uninstall",
     "hooks:install": "node node_modules/husky/husky.js install",
     "jest": "jest",
diff --git a/scripts/format-svg.js b/scripts/format-svg.js
new file mode 100644
index 0000000000000..e4b80c03fa770
--- /dev/null
+++ b/scripts/format-svg.js
@@ -0,0 +1,19 @@
+// this file exists because svgo only accepts folders or files, to make this work you'll need to do
+// find www examples packages | grep '\\.svg$' | xargs -Iz -n 1 svgo --pretty --indent=2 --config=svgo.yml z
+// this only works on bash not inside windows so we create a simple js file that does the globbing for us
+const glob = require(`glob`)
+const execa = require(`execa`)
+const path = require(`path`)
+
+const files = glob.sync(`./**/*.svg`, {
+  ignore: `./node_modules/**`,
+})
+
+const proc = execa(
+  `./node_modules/.bin/svgo`,
+  [`--pretty`, `--indent=2`, `--config=svgo.yml`, `--multipass`].concat(files),
+  { cwd: path.join(__dirname, `..`) }
+)
+
+proc.stdout.pipe(process.stdout)
+proc.stderr.pipe(process.stderr)
diff --git a/www/src/assets/showcase-feather.svg b/www/src/assets/showcase-feather.svg
index f8d57129ba8c9..9cedd550e693b 100644
--- a/www/src/assets/showcase-feather.svg
+++ b/www/src/assets/showcase-feather.svg
@@ -1,19 +1,14 @@
-<svg width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path d="M7.611125,8.107875 L7.659875,11.362875 L5.103625,13.919125 L5.103625,10.615375 L7.611125,8.107875 Z M13.448625,2.271625 C14.461125,1.256625 16.012375,1.119125 17.178625,1.842875 L11.653625,7.367875 L11.604875,4.114125 L13.448625,2.271625 Z M18.158625,2.821625 C18.452375,3.297875 18.607375,3.835375 18.613625,4.376625 L16.601125,4.376625 L18.158625,2.821625 Z M17.274875,7.006625 L13.972375,7.006625 L15.218625,5.760375 L18.283625,5.760375 C18.142375,6.044125 17.966125,6.315375 17.729875,6.551625 L17.274875,7.006625 Z M9.023625,9.999125 L8.974875,6.744125 L10.242375,5.477875 L10.291125,8.731625 L9.023625,9.999125 Z M9.384875,14.897875 L6.082375,14.897875 L12.587375,8.390375 L15.891125,8.390375 L9.384875,14.897875 Z M2.247375,18.685375 L4.652375,16.280375 L9.957375,16.280375 L18.708625,7.530375 C20.431125,5.807875 20.431125,3.014125 18.708625,1.292875 C16.986125,-0.430875 14.192375,-0.430875 12.469875,1.292875 L3.922375,9.840375 L3.719875,10.042875 L3.719875,15.349125 L-0.000125,19.067875 L2.247375,18.685375 Z" id="path-1"></path>
-    </defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="detail/header" transform="translate(-292.000000, -116.000000)">
-            <g id="icons/feather" transform="translate(292.000000, 116.000000)">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use id="Fill-1" fill="#9B9B9B" fill-rule="evenodd" xlink:href="#path-1"></use>
-                <g id="colors/gatsby" mask="url(#mask-2)" fill="#663399" fill-rule="evenodd">
-                    <rect id="Rectangle-4" x="0" y="0" width="20" height="20"></rect>
-                </g>
-            </g>
-        </g>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <path d="M7.611 8.108l.049 3.255-2.556 2.556v-3.304L7.61 8.108zm5.838-5.836a3.02 3.02 0 0 1 3.73-.43l-5.525 5.526-.05-3.254 1.845-1.842zm4.71.55a3.03 3.03 0 0 1 .455 1.555H16.6l1.558-1.555zm-.884 4.185h-3.303L15.22 5.76h3.065a2.978 2.978 0 0 1-.554.792l-.455.455zM9.024 9.999l-.05-3.255 1.268-1.266.05 3.254-1.268 1.267zm.36 4.899H6.083l6.505-6.508h3.304l-6.506 6.508zm-7.137 3.787l2.405-2.405h5.305l8.752-8.75a4.41 4.41 0 1 0-6.24-6.237L3.923 9.84l-.202.203v5.306L0 19.068l2.247-.383z" id="a"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="b" fill="#fff">
+      <use xlink:href="#a"/>
+    </mask>
+    <use fill="#9B9B9B" xlink:href="#a"/>
+    <g mask="url(#b)" fill="#639">
+      <path d="M0 0h20v20H0z"/>
     </g>
   </g>
 </svg>

From dd4101abb406c5eb4350011d24553fecd82ccf49 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Wed, 13 Feb 2019 04:51:52 -0800
Subject: [PATCH 3/3] ignore diagram-ci

---
 .../diagram-ci.svg                            | 502 +++++++++++++-----
 scripts/format-svg.js                         |   7 +-
 2 files changed, 366 insertions(+), 143 deletions(-)

diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg
index af239d82494fb..11f4a52132c66 100644
--- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg
+++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg
@@ -1,142 +1,360 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 626.391 223" style="max-width:626.390625px;font:12px/18px &quot;Helvetica Neue For Number&quot;,-apple-system,system-ui,&quot;Segoe UI&quot;,Roboto,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" color="rgba(0,0,0,.65)">
-  <g class="output">
-    <g class="edgePaths">
-      <g class="edgePath">
-        <path class="path" d="M70.266 93H148" marker-end="url(#a)" fill="none"/>
-        <defs>
-          <marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
-            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
-          </marker>
-        </defs>
-      </g>
-      <g class="edgePath">
-        <path class="path" d="M204.41 74l51.34-35h55.031" marker-end="url(#b)" fill="none"/>
-        <defs>
-          <marker id="b" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
-            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
-          </marker>
-        </defs>
-      </g>
-      <g class="edgePath">
-        <path class="path" d="M359.031 39h48.446l88.945 21.538" marker-end="url(#c)" fill="none"/>
-        <defs>
-          <marker id="c" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
-            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
-          </marker>
-        </defs>
-      </g>
-      <g class="edgePath">
-        <path class="path" d="M496.422 71.462L407.477 93H205.078" marker-end="url(#d)" fill="none"/>
-        <defs>
-          <marker id="d" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
-            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
-          </marker>
-        </defs>
-      </g>
-      <g class="edgePath">
-        <path class="path" d="M363.39 164h88.173" marker-end="url(#e)" fill="none"/>
-        <defs>
-          <marker id="e" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
-            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
-          </marker>
-        </defs>
-      </g>
-      <g class="edgePath">
-        <path class="path" d="M197.736 112l58.014 52h50.672" marker-end="url(#f)" fill="none"/>
-        <defs>
-          <marker id="f" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
-            <path d="M0 0l10 5-10 5z" class="arrowheadPath" stroke-dasharray="1,0"/>
-          </marker>
-        </defs>
-      </g>
-    </g>
-    <g class="edgeLabels">
-      <foreignObject width="27.734" height="18" transform="translate(95.266 84)">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-          <span class="edgeLabel">
-            push
-          </span>
-        </div>
-      </foreignObject>
-      <foreignObject width="0" height="0">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-          <span class="edgeLabel"/>
-        </div>
-      </foreignObject>
-      <foreignObject width="0" height="0">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-          <span class="edgeLabel"/>
-        </div>
-      </foreignObject>
-      <foreignObject width="0" height="0">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-          <span class="edgeLabel"/>
-        </div>
-      </foreignObject>
-      <foreignObject width="38.172" height="18" transform="translate(388.39 155)">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-          <span class="edgeLabel">
-            deploy
-          </span>
-        </div>
-      </foreignObject>
-      <foreignObject width="51.344" height="18" transform="translate(230.078 155)">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-          <span class="edgeLabel">
-            webhook
-          </span>
-        </div>
-      </foreignObject>
-    </g>
-    <g class="nodes">
-      <g class="node" transform="translate(176.54 93)">
-        <rect rx="0" ry="0" x="-28.539" y="-19" width="57.078" height="38"/>
-        <foreignObject width="37.078" height="18" transform="translate(-18.54 -9)">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-            GitLab
-          </div>
-        </foreignObject>
-      </g>
-      <g class="node" transform="translate(334.906 39)">
-        <rect rx="0" ry="0" x="-24.125" y="-19" width="48.25" height="38"/>
-        <foreignObject width="28.25" height="18" transform="translate(-14.125 -9)">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-            Build
-          </div>
-        </foreignObject>
-      </g>
-      <g class="node" transform="translate(518.977 66)">
-        <rect rx="0" ry="0" x="-22.555" y="-19" width="45.109" height="38"/>
-        <foreignObject width="25.109" height="18" transform="translate(-12.555 -9)">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-            Test
-          </div>
-        </foreignObject>
-      </g>
-      <g class="node" transform="translate(45.133 93)">
-        <rect rx="0" ry="0" x="-25.133" y="-19" width="50.266" height="38"/>
-        <foreignObject width="30.266" height="18" transform="translate(-15.133 -9)">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-            Local
-          </div>
-        </foreignObject>
-      </g>
-      <g class="node" transform="translate(518.977 164)">
-        <rect rx="0" ry="0" x="-67.414" y="-19" width="134.828" height="38"/>
-        <foreignObject width="114.828" height="18" transform="translate(-57.414 -9)">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-            blog.singuerinc.com
-          </div>
-        </foreignObject>
-      </g>
-      <g class="node" transform="translate(334.906 164)">
-        <rect rx="0" ry="0" x="-28.484" y="-19" width="56.969" height="38"/>
-        <foreignObject width="36.969" height="18" transform="translate(-18.484 -9)">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
-            Netlify
-          </div>
-        </foreignObject>
-      </g>
-    </g>
-  </g>
-</svg>
+<svg id="mermaidChart125" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 626.390625 223" style="max-width:626.390625px;"><style>
+  /* 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: orange;
+  stroke: #ff5722;
+  stroke-width: 1px;
+}
+.arrowheadPath {
+  fill: #ff5722;
+}
+.edgePath .path {
+  stroke: #ff5722;
+  stroke-width: 1.5px;
+}
+.edgeLabel {
+  background-color: #e8e8e8;
+}
+.cluster rect {
+  fill: #cdffb2 !important;
+  rx: 4 !important;
+  stroke: #ff5722 !important;
+  stroke-width: 1px !important;
+}
+.cluster text {
+  fill: #333;
+}
+.actor {
+  stroke: #ff5722;
+  fill: orange;
+}
+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: #ff5722;
+  fill: orange;
+}
+.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: #ff5722;
+}
+.taskTextOutside0,
+.taskTextOutside2 {
+  fill: black;
+}
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: black;
+}
+/* Active task */
+.active0,
+.active1,
+.active2,
+.active3 {
+  fill: orange;
+  stroke: #ff5722;
+}
+.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: orange;
+  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: #ff5722;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 10px;
+}
+g.classGroup rect {
+  fill: orange;
+  stroke: #ff5722;
+}
+g.classGroup line {
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+svg .classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: orange;
+  opacity: 0.5;
+}
+svg .classLabel .label {
+  fill: #ff5722;
+  font-size: 10px;
+}
+.relation {
+  stroke: #ff5722;
+  stroke-width: 1;
+  fill: none;
+}
+.composition {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#compositionStart {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#compositionEnd {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+.aggregation {
+  fill: orange;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#aggregationStart {
+  fill: orange;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#aggregationEnd {
+  fill: orange;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#dependencyStart {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#dependencyEnd {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#extensionStart {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+#extensionEnd {
+  fill: #ff5722;
+  stroke: #ff5722;
+  stroke-width: 1;
+}
+.node text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+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;
+}
+
+svg {
+  color: rgba(0, 0, 0, 0.65);
+  font: normal normal normal normal 12px / 18px "Helvetica Neue For Number", -apple-system, system-ui, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+  </style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M70.265625,93L109.1328125,93L148,93" marker-end="url(#arrowhead2389)" style="fill:none"></path><defs><marker id="arrowhead2389" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M204.4095775462963,74L255.75,39L310.78125,39" marker-end="url(#arrowhead2390)" style="fill:none"></path><defs><marker id="arrowhead2390" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M359.03125,39L407.4765625,39L496.421875,60.53832679372197" marker-end="url(#arrowhead2391)" style="fill:none"></path><defs><marker id="arrowhead2391" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M496.421875,71.46167320627802L407.4765625,93L334.90625,93L255.75,93L205.078125,93" marker-end="url(#arrowhead2392)" style="fill:none"></path><defs><marker id="arrowhead2392" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M363.390625,164L407.4765625,164L451.5625,164" marker-end="url(#arrowhead2393)" style="fill:none"></path><defs><marker id="arrowhead2393" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M197.73635563380282,112L255.75,164L306.421875,164" marker-end="url(#arrowhead2394)" style="fill:none"></path><defs><marker id="arrowhead2394" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(109.1328125,93)" style="opacity: 1;"><g transform="translate(-13.8671875,-9)" class="label"><foreignObject width="27.734375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">push</span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(407.4765625,164)" style="opacity: 1;"><g transform="translate(-19.0859375,-9)" class="label"><foreignObject width="38.171875" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">deploy</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(255.75,164)" style="opacity: 1;"><g transform="translate(-25.671875,-9)" class="label"><foreignObject width="51.34375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">webhook</span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="G" transform="translate(176.5390625,93)" style="opacity: 1;"><rect rx="0" ry="0" x="-28.5390625" y="-19" width="57.078125" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-18.5390625,-9)"><foreignObject width="37.078125" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">GitLab</div></foreignObject></g></g></g><g class="node" id="B" transform="translate(334.90625,39)" style="opacity: 1;"><rect rx="0" ry="0" x="-24.125" y="-19" width="48.25" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-14.125,-9)"><foreignObject width="28.25" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Build</div></foreignObject></g></g></g><g class="node" id="T" transform="translate(518.9765625,66)" style="opacity: 1;"><rect rx="0" ry="0" x="-22.5546875" y="-19" width="45.109375" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-12.5546875,-9)"><foreignObject width="25.109375" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Test</div></foreignObject></g></g></g><g class="node" id="L" transform="translate(45.1328125,93)" style="opacity: 1;"><rect rx="0" ry="0" x="-25.1328125" y="-19" width="50.265625" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-15.1328125,-9)"><foreignObject width="30.265625" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Local</div></foreignObject></g></g></g><g class="node" id="W" transform="translate(518.9765625,164)" style="opacity: 1;"><rect rx="0" ry="0" x="-67.4140625" y="-19" width="134.828125" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-57.4140625,-9)"><foreignObject width="114.828125" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">blog.singuerinc.com</div></foreignObject></g></g></g><g class="node" id="N" transform="translate(334.90625,164)" style="opacity: 1;"><rect rx="0" ry="0" x="-28.484375" y="-19" width="56.96875" height="38"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-18.484375,-9)"><foreignObject width="36.96875" height="18"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Netlify</div></foreignObject></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/scripts/format-svg.js b/scripts/format-svg.js
index e4b80c03fa770..650d26457a064 100644
--- a/scripts/format-svg.js
+++ b/scripts/format-svg.js
@@ -5,8 +5,13 @@ const glob = require(`glob`)
 const execa = require(`execa`)
 const path = require(`path`)
 
+// list of ignored files because they don't get optimized correctly
+const ignoreList = [
+  `./docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/diagram-ci.svg`,
+]
+
 const files = glob.sync(`./**/*.svg`, {
-  ignore: `./node_modules/**`,
+  ignore: [`./node_modules/**`].concat(ignoreList),
 })
 
 const proc = execa(