Add new mermaid graphs (#230)

* First draft for mermaid charts

* Refine graphs and use correct size to avoid layout shift

* Add legend

* Update graph generation to match new comment syntax

* Update docs

* Update dependencies

* Add nvmrc for netlify

* Create graphs dir

.gitignore

@@ -4,6 +4,7 @@ node_modules
 .vscode
 /export
 .idea
+static/graphs
 
 # Needs to be taken from the main rollup repo
 guide/en

.nvmrc

@@ -0,0 +1 @@
+14

mermaid.config.json

@@ -0,0 +1,3 @@
+{
+	"themeCSS": "span.edgeLabel { background-color: #fff } path.LS-parallel,path.LS-sequential,path.LS-legend { stroke: none }"
+}

package.json

@@ -3,49 +3,52 @@
   "author": "Rich Harris",
   "version": "1.0.0",
   "devDependencies": {
-    "@babel/core": "^7.14.3",
+    "@babel/core": "^7.15.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@mermaid-js/mermaid-cli": "^8.11.4",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-url": "^6.0.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.3.0",
-    "prettier-plugin-svelte": "^2.3.0",
-    "rollup": "^2.49.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-url": "^6.1.0",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.1.2",
+    "prettier": "^2.3.2",
+    "prettier-plugin-svelte": "^2.3.1",
+    "rollup": "^2.56.2",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sapper": "^0.29.1",
+    "sapper": "^0.29.2",
     "shx": "^0.3.3",
-    "sirv-cli": "^1.0.12",
-    "svelte": "^3.38.2"
+    "sirv": "^1.0.14",
+    "sirv-cli": "^1.0.14",
+    "svelte": "^3.42.1",
+    "zx": "^2.1.0"
   },
   "scripts": {
     "dev": "sapper dev",
-    "build": "npm run clean && npm run update-guide && sapper export --legacy && cp -r __sapper__/export export",
+    "build": "npm run clean && npm run update-guide && npm run generate-graphs && sapper export --legacy && cp -r __sapper__/export export",
     "start": "sirv export",
     "update-guide": "git submodule update --init --recursive && shx rm -rf guide/en && shx cp -r rollup-submodule/docs/ guide/en",
     "publish-updated-guide": "git pull && git submodule update --init --recursive && cd rollup-submodule && git checkout master && git pull && cd .. && npm test && git add rollup-submodule && git commit -m \"Update guide\" && git push",
     "clean": "rm -rf export/ && rm -rf __sapper__/",
     "lint": "prettier --write src/**/*.{js,html,svelte} test/**/*.js",
+    "generate-graphs": "zx scripts/generate-graphs.mjs",
     "stage": "netlify deploy --dir=export",
     "deploy": "netlify deploy --dir=export --prod",
     "prestage": "npm run build",
     "predeploy": "npm run build",
-    "test": "npx rollup test/verify-guide-links.js -f cjs --silent | node",
+    "test": "npx rollup scripts/verify-guide-links.js -f cjs --silent | node",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
-    "codemirror": "^5.61.1",
+    "@babel/runtime": "^7.15.3",
+    "codemirror": "^5.62.2",
     "compression": "^1.7.4",
-    "highlight.js": "^10.7.2",
-    "marked": "^2.0.5",
-    "polka": "^0.5.2",
-    "sirv": "^1.0.12"
+    "highlight.js": "^11.2.0",
+    "marked": "^2.1.3",
+    "polka": "^0.5.2"
   }
 }

scripts/generate-graphs.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env zx
+
+import path from 'path';
+
+const mermaidFiles = await globby('guide/en/*.mmd');
+await fs.ensureDir('static/graphs');
+await Promise.all(
+	mermaidFiles.map(
+		file =>
+			$`npx mmdc -c mermaid.config.json -i "${file}" -o "static/graphs/${path.basename(
+				file,
+				'.mmd'
+			)}.svg"`
+	)
+);

src/components/Guide.svelte

@@ -246,13 +246,6 @@
 		top: -0.1em;
 	}
 
-	.content :global(p),
-	.content :global(ol) {
-		margin: 0 0 1em 0;
-		color: #181818;
-		line-height: 1.5;
-	}
-
 	.content :global(a) {
 		border-bottom: 1px solid #e3d9d9;
 	}

src/helpers/createGuide.js

@@ -66,7 +66,11 @@ function create_guide(lang) {
 			.replace(/<p>@@(\d+)<\/p>/g, (match, id) => {
 				return `<pre><code>${highlighted[id]}</code></pre>`;
 			})
-			.replace(/^\t+/gm, match => match.split('\t').join('  '));
+			.replace(/^\t+/gm, match => match.split('\t').join('  '))
+			.replace(/<!-- html:([\w.-]+) -->/g, (_, fileName) =>
+				fs.readFileSync(`guide/en/${fileName}`, 'utf8')
+			)
+			.replace(/<!-- mermaid:([\w.-]+)\.mmd -->/g, (_, fileName) => getSvgGraph(fileName));
 
 		const subsections = [];
 		const pattern = /<h3 id="(.+?)">(.+?)<\/h3>/g;
@@ -95,3 +99,15 @@ function create_guide(lang) {
 		};
 	});
 }
+
+// This will avoid a layout shift and wrong anchor positions by making sure the
+// element has the correct size before the file is loaded
+function getSvgGraph(fileName) {
+	const fileContent = fs.readFileSync(`static/graphs/${fileName}.svg`, 'utf8');
+	const [, width, height] = fileContent.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+	return `
+<object
+  data="graphs/${fileName}.svg"
+  type="image/svg+xml"
+  style="max-width:80vw; height:min(${height}px,calc(80vw * ${height / width}))"></object>`;
+}

static/global.css

@@ -24,8 +24,9 @@
 body {
 	margin: 0;
 	background: #fff;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-	color: #555;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
+		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	color: #181818;
 	line-height: 1.5;
 	-webkit-font-smoothing: antialiased;
 }
@@ -35,7 +36,8 @@ main {
 	overflow-x: hidden;
 }
 
-code, pre {
+code,
+pre {
 	font-family: 'Inconsolata', monospace;
 	font-weight: 400;
 	line-height: 1.2;
@@ -45,15 +47,17 @@ pre {
 	overflow-x: auto;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
 	margin: 0;
 	font-weight: 300;
 	line-height: 1.2;
 }
 
 a {
 	text-decoration: none;
-	color: rgb(170,30,30);
+	color: rgb(170, 30, 30);
 }
 
 strong {
@@ -127,3 +131,20 @@ strong {
 .hljs-meta-string {
 	color: #555;
 }
+
+.legend-grid {
+	display: grid;
+	grid-template-columns: max-content max-content;
+	grid-column-gap: 16px;
+}
+
+.legend-rect {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	border-radius: 5px;
+	border: 1px solid #000;
+	vertical-align: middle;
+	margin-right: 5px;
+	background: #fff;
+}