Add a markdown preprocessor

2021-01-04 12:15:55 -08:00 · 2021-01-04 12:15:55 -08:00 · eb7e8038ee
--- a/package-lock.json
+++ b/package-lock.json
@ -35,6 +35,11 @@
      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
      "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA=="
    },
+    "@popperjs/core": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
+    },
    "@rollup/plugin-commonjs": {
      "version": "17.0.0",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-17.0.0.tgz",
@ -123,6 +128,15 @@
        "picomatch": "^2.0.4"
      }
    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
    "async-limiter": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
@ -141,6 +155,11 @@
      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
      "dev": true
    },
+    "bootstrap": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -249,6 +268,12 @@
      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
      "dev": true
    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
    "estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@ -264,6 +289,15 @@
        "to-regex-range": "^5.0.1"
      }
    },
+    "front-matter": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-3.2.1.tgz",
+      "integrity": "sha512-YUhgEhbL6tG+Ok3vTGIoSDKqcr47aSDvyhEqIv8B+YuBJFsPnOiArNXTPp2yO07NL+a0L4+2jXlKlKqyVcsRRA==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1"
+      }
+    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -430,6 +464,16 @@
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "dev": true
    },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
    "kleur": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@ -458,6 +502,16 @@
      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
      "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw=="
    },
+    "lodash.isobject": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
+      "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
+    },
+    "lodash.tonumber": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
+      "integrity": "sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk="
+    },
    "magic-string": {
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@ -467,6 +521,12 @@
        "sourcemap-codec": "^1.4.4"
      }
    },
+    "marked": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.7.tgz",
+      "integrity": "sha512-No11hFYcXr/zkBvL6qFmAp1z6BKY3zqLMHny/JN/ey+al7qwCM2+CMBL9BOgqMxZU36fz4cCWfn2poWIf7QRXA==",
+      "dev": true
+    },
    "merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -726,6 +786,12 @@
      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
      "dev": true
    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -736,11 +802,31 @@
      }
    },
    "svelte": {
-      "version": "3.31.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.0.tgz",
-      "integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==",
+      "version": "3.31.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.1.tgz",
+      "integrity": "sha512-Q8xVz5U/IFFNjgvVSjdzKJPAX0MFytFwiJo1HAPfGwM7LkHA+BN2q2kL8vKcJwjku7/509MapLov8C9SjogNRg==",
      "dev": true
    },
+    "svelte-preprocess-markdown": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess-markdown/-/svelte-preprocess-markdown-2.7.3.tgz",
+      "integrity": "sha512-KJkIDNp41r1qfdKY6dRtYnADV0anYKYlJ2k+DX5SbXRDqKxZJN8UlFiuW/c1XoT1lQ1bE5QQe9uzWJgJrQPnzw==",
+      "dev": true,
+      "requires": {
+        "front-matter": "^3.2.1",
+        "marked": "^1.0.0"
+      }
+    },
+    "sveltestrap": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/sveltestrap/-/sveltestrap-3.11.0.tgz",
+      "integrity": "sha512-MdjbdEGYQXvwlZm+QwNjIGmGRRxGAErn7OzDWHfmbA4o7+Sd50ow7uVGatXE7LZz4DMh/vC/feCFWySs5FBX+A==",
+      "requires": {
+        "@popperjs/core": "^2.6.0",
+        "lodash.isobject": "^3.0.2",
+        "lodash.tonumber": "^4.0.3"
+      }
+    },
    "terser": {
      "version": "5.5.1",
      "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
--- a/package.json
+++ b/package.json
@ -14,10 +14,13 @@
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.31.0"
+    "svelte": "^3.31.1",
+    "svelte-preprocess-markdown": "^2.7.3"
  },
  "dependencies": {
+    "bootstrap": "^4.5.3",
    "sirv-cli": "^1.0.10",
+    "sveltestrap": "^3.11.0",
    "vis-data": "^7.1.1",
    "vis-network": "^8.5.5"
  }
--- a/rollup.config.js
+++ b/rollup.config.js
@ -4,6 +4,7 @@ import resolve from "@rollup/plugin-node-resolve";
 import livereload from "rollup-plugin-livereload";
 import { terser } from "rollup-plugin-terser";
 import css from "rollup-plugin-css-only";
+import { markdown } from "svelte-preprocess-markdown";

 const production = !process.env.ROLLUP_WATCH;

@ -42,6 +43,8 @@ export default {
  },
  plugins: [
    svelte({
+      extensions: [".svelte", ".md"],
+      preprocess: markdown(),
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
--- a/src/App.svelte
+++ b/src/App.svelte
@ -1,6 +1,7 @@
 <script>
  import { onMount } from "svelte";
  import { DataSet } from "vis-data/peer";
+  import FrontMatter from "./FrontMatter.md";
  import Network from "./Network.svelte";
  import Summary from "./Summary.svelte";

@ -94,28 +95,8 @@

 <div id="container">
  <h1>BigQuery ETL Query Network</h1>
-  <i>Created 2020-06-18.</i>
-  <p>
-    This network represents the relationships between tables in BigQuery. Each
-    blue node represents a table, while each orange node represents a dataset.
-    The network was created by scraping the BigQuery TABLES and JOBS_BY_PROJECT
-    tables in the INFORMATION_SCHEMA dataset. Views are resolved using bq with
-    --dry_run.
-  </p>
-  <p>
-    Scroll and drag to navigate the network. Selecting a node by double clicking
-    will show summary information about the table or dataset.
-  </p>
-  <p>
-    The source can be found at
-    <a
-      href="https://github.com/acmiyaguchi/etl-graph">acmiyaguchi/etl-graph</a>.
-    See
-    <a
-      href="https://github.com/acmiyaguchi/etl-graph/blob/main/README.md">NOTES.md</a>
-    for a detailed overview of development. This visualizaton is powered by
-    <a href="https://visjs.github.io/vis-network/docs/network/">vis-network</a>.
-  </p>
+
+  <FrontMatter />

  {#if data}
    <Network {data} bind:network bind:selectedNode />
--- a/src/FrontMatter.md
+++ b/src/FrontMatter.md
@ -0,0 +1,16 @@
+_Created 2020-06-18._
+
+This network represents the relationships between tables in BigQuery. Each blue
+node represents a table, while each orange node represents a dataset. The
+network was created by scraping the BigQuery `TABLES` and `JOBS_BY_PROJECT`
+tables in the `INFORMATION_SCHEMA` dataset. Views are resolved using bq with
+`--dry_run`.
+
+Scroll and drag to navigate the network. Selecting a node by double clicking
+will show summary information about the table or dataset.
+
+The source can be found at
+[acmiyaguchi/etl-graph](https://github.com/acmiyaguchi/etl-graph). See
+[NOTES.md](https://github.com/acmiyaguchi/etl-graph/blob/main/README.md) for an
+overview of development. This visualizaton is powered by
+[vis-network](https://visjs.github.io/vis-network/docs/network/).