Create script to build examples

domoritz · domoritz · commit a486cf717713 · 2017-10-30T21:41:38.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -15,7 +15,9 @@ Gemfile.lock
 
 test/log
 test/log/difflist.json
-examples/images/*
+examples/compiled/*.png
+site/examples/
+!site/examples/index.md
 examples/all-examples.json
 build/*
 !build/vega-lite-schema.json
diff --git a/_config.yml b/_config.yml
@@ -44,8 +44,3 @@ kramdown:
   input: GFM
   syntax_highlighter: rouge
   auto_id_stripping: true
-
-collections:
-  examples:
-    output: true
-    permalink: /:collection/:name
diff --git a/_data/examples.json b/_data/examples.json
@@ -3,6 +3,7 @@
     {
       "name": "bar",
       "title": "Simple Bar Chart",
+      "description": "A bar chart encodes quantitative values as the extent of rectangular bars.",
       "style": "background-size: auto 110%; background-position: center center !important;"
     },
     {
diff --git a/_includes/example.html b/_includes/example.html
@@ -0,0 +1,20 @@
+{% assign id = include.spec | replace:'/', '-' %}
+
+<div id="{{id}}"></div>
+
+<script>
+  window.onload = function() {
+    var spec = {% include_relative {{ include.spec }}.vl.json %};
+
+    embedExample('#{{id}}', spec, false);
+}
+</script>
+
+<a href="https://vega.github.io/editor/#/examples/vega-lite/{{ include.spec }}">View this example in the online editor</a>
+
+<h3 id="spec">Vega-Lite JSON Specification</h3>
+
+{: .example-spec}
+```json
+{% include_relative {{ include.spec }}.vl.json %}
+```
diff --git a/_includes/example.md b/_includes/example.md
diff --git a/_includes/preview.html b/_includes/preview.html
@@ -1,4 +1,4 @@
-<a class="imagegroup" href="https://vega.github.io/editor/#/examples/vega-lite/{{ include.spec }}">
+<a class="imagegroup" href="{{site.baseurl}}/examples/{{ include.spec }}.html">
   <span class="image" alt="{{ include.title | strip }}" style="background-image: url({{site.baseurl}}/examples/compiled/{{ include.spec }}.svg);{% if include.style %}{{ include.style }}{% endif %}"></span>
   <span class="image-title">{{ include.title | strip }}</span>
 </a>
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -12,12 +12,20 @@
       var BASEURL = window.location.origin + "{{site.baseurl}}";
     </script>
 
-    <title> {{site.title}}{% if page.title %}:{% endif %} {{page.title}} </title>
-    <link rel="stylesheet" href="{{site.baseurl}}/site/static/syntax.css">
-    <link rel="stylesheet" href="{{site.baseurl}}/site/static/github.css">
+    <title>{{site.title}}{% if page.title %}:{% endif %} {{page.title}}</title>
+    <link rel="stylesheet" href="{{ site.baseurl }}/site/static/syntax.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/site/static/github.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
-    <link rel="stylesheet" href="{{site.baseurl}}/site/static/main.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/site/static/main.css">
     {% seo %}
+
+    {% if page.image %}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@vega_vis" />
+      <meta property="og:image" content="{{ site.baseurl }}{{ page.image }}" />
+      {% if page.description %}<meta property="og:description" content="{{ page.description }}" />{% endif %}
+      <meta property="og:title" content="{{ page.title }}" />
+    {% endif %}
   </head>
   <body>
     {{ content }}
diff --git a/_layouts/examples.html b/_layouts/examples.html
diff --git a/bin/vl2png b/bin/vl2png
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-# Expects the path to a Vega-Lite specification as the first argument. Passes remaining argument to vg2png
+# Expects the path to a Vega-Lite specification as the first argument. Passes remaining arguments to vg2png
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
diff --git a/bin/vl2svg b/bin/vl2svg
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-# Expects the path to a Vega-Lite specification as the first argument. Passes remaining argument to vg2svg
+# Expects the path to a Vega-Lite specification as the first argument. Passes remaining arguments to vg2svg
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "build:test-gallery": "browserify test-gallery/main.ts -p [tsify -p test-gallery] -d > build/test-gallery/main.js",
     "check:examples": "scripts/check-examples.sh",
     "check:schema": "scripts/check-schema.sh",
-    "clean": "rm -rf build && rm -f vega-lite.* & find -E src test site examples -regex '.*\\.(js|js.map|d.ts)' -delete",
+    "clean": "rm -rf build && rm -f vega-lite.* & find -E src test site examples -regex '.*\\.(js|js.map|d.ts)' -delete && rm -f examples/compiled/*.png && find site/examples ! -name 'index.md' -type f -exec rm -f {} +",
     "data": "rsync -r node_modules/vega-datasets/data/* data",
     "link": "npm link && npm link vega-lite",
 
@@ -51,7 +51,7 @@
     "preschema": "npm run prebuild",
     "schema": "ts-json-schema-generator --path tsconfig.json --type TopLevelExtendedSpec > build/vega-lite-schema.json && npm run renameschema && cp build/vega-lite-schema.json _data/",
     "renameschema": "scripts/rename-schema.sh",
-    "presite": "npm run prebuild && npm run data && npm run build:site && npm run build:toc && npm run build:versions",
+    "presite": "npm run prebuild && npm run data && npm run build:site && npm run build:toc && npm run build:versions && npm run build:example-pages && scripts/create-example-pages",
     "site": "bundle exec jekyll serve",
 
     "lint": "tslint -p .",
diff --git a/scripts/build-normalized-examples b/scripts/build-normalized-examples
@@ -9,15 +9,15 @@
  * redundant Vega output specs.
  */
 
-const fs = require('fs'),
-  vl = require('../build/src/index.js'),
-  stringify = require('json-stable-stringify');
+const fs = require('fs');
+const vl = require('../build/src/index.js');
+const stringify = require('json-stable-stringify');
 
 const DIR = __dirname + '/..';
 const SPECS = '/examples/specs';
 const examples = fs.readdirSync(DIR + SPECS);
 
-examples.forEach(function(example) {
+examples.forEach((example) => {
   if (example && example.includes('.vl.json')) {
     const path = DIR + SPECS + '/' + example;
     const spec = JSON.parse(fs.readFileSync(path));
@@ -33,7 +33,7 @@ examples.forEach(function(example) {
       // -8 is cutting .vl.json
       const newFilename = example.slice(0, -8) + '_normalized.vl.json';
       const newFilenameAndPath = DIR + SPECS + '/normalized/' + newFilename;
-      fs.writeFile(newFilenameAndPath, postNormalizedOutput, function(err) {
+      fs.writeFile(newFilenameAndPath, postNormalizedOutput, (err) => {
         if (err) return console.log(err);
         console.log("Built:", newFilename);
       });
diff --git a/scripts/create-example-pages b/scripts/create-example-pages
@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * This script creates pages for all examples for the website.
+ */
+
+const fs = require('fs');
+const examples = require('../_data/examples.json');
+const { execSync } = require('child_process');
+
+function createPage(example) {
+  return (`---
+layout: page
+menu: examples
+${example.description ? `description: ${example.description}`: ''}
+title: ${example.title}
+permalink: /examples/${example.name}.html
+image: /examples/compiled/${example.name}.png
+---
+
+${example.description || ''}
+
+{% include example.html spec='${example.name}'%}
+`);
+}
+
+for (const category of Object.keys(examples)) {
+  for (const example of examples[category]) {
+    const name = example.name;
+    fs.writeFileSync(`site/examples/${name}.vl.json`, fs.readFileSync(`examples/specs/${name}.vl.json`));
+    fs.writeFileSync(`site/examples/${name}.md`, createPage(example));
+    execSync(`bin/vl2png examples/specs/${name}.vl.json > examples/compiled/${name}.png -b .`)
+  }
+}
diff --git a/scripts/generate-toc b/scripts/generate-toc
@@ -25,12 +25,12 @@ function generateListItem(content, buffer) {
 	for (var i = 0; i < buffer; i++) {
 		indent += '    ';
 	}
-	return indent + '- ' + content;
+	return `${indent}- ${content}`;
 }
 
 // generate markdown for anchor tag
 function generateLink(title, page, local) {
-	return '[' + title + ']' + '(' + URL + page + '.html' + (local || '') + ')';
+	return `[${title}](${URL}${page}.html${local || ''})`;
 }
 
 // parse Docs layout
@@ -43,12 +43,10 @@ fs.readFile(DOCS_LAYOUT, function (err, contents) {
 	var sidebar = front.sidebar; // docs sidebar, top level
 
 	function parseSidebar(sidebar, depth) {
-		for (var y = 0; y < sidebar.length; y++) {
-			var el = sidebar[y];
-
+    for (const el of sidebar) {
 			// skip break and table of contents itself
 			if (!el.break && el.url !== 'toc') {
-				var page = COMPILED_DOCS + '/' + el.url + '.html';
+				var page = `${COMPILED_DOCS }/${el.url}.html`;
 
 				// generate markdown for top level navigation
 				var link = generateLink(el.text, el.url);
@@ -59,8 +57,7 @@ fs.readFile(DOCS_LAYOUT, function (err, contents) {
 				var $ = cheerio.load(fs.readFileSync(page).toString());
 
 				// iterate through links in DOM tree
-				$(CONTENT_TAG + ' ' + INNER_LINK_TAG).each(function(i, elem) {
-
+				$(CONTENT_TAG + ' ' + INNER_LINK_TAG).each(function() {
 					// generate markdown for in-page navigation
 					var hash = '#' + $(this).attr('id');
 					var link = generateLink($(this).text(), el.url, hash);
diff --git a/scripts/index-examples b/scripts/index-examples
@@ -18,5 +18,5 @@ var examples = examples.filter(function(example) {
 
 fs.writeFile(DIR + OUTPUT, JSON.stringify(examples), function (err) {
   if (err) return console.log(err);
-  console.log('Indexed all examples [source: ' + SPECS + ', index: ' + OUTPUT + ']');
+  console.log(`Indexed all examples [source: ${SPECS}, index: ${OUTPUT}]`);
 });
diff --git a/site/examples/bar.md b/site/examples/bar.md
diff --git a/site/examples/index.md b/site/examples/index.md
@@ -1,12 +1,12 @@
 ---
-layout: examples
+layout: page
 menu: examples
 title: Example Gallery
 permalink: /examples/
 ---
 
 This page shows example specifications for different types of graphics.
-To see example code for embedding visualization in a webpage, please refer to [this page](../usage/embed.html).
+To see example code for embedding visualizations in a webpage, please read the [embed dcoumentation](../usage/embed.html).
 
 
 * TOC
diff --git a/site/examples/specs b/site/examples/specs

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`{`
`4`	`4`	`"name": "bar",`
`5`	`5`	`"title": "Simple Bar Chart",`
	`6`	`+ "description": "A bar chart encodes quantitative values as the extent of rectangular bars.",`
`6`	`7`	`"style": "background-size: auto 110%; background-position: center center !important;"`
`7`	`8`	`},`
`8`	`9`	`{`