Merge pull request #729 from OpenGeoscience/new_website

New gh-pages website

.eslintignore

@@ -5,6 +5,7 @@ src/util/wigglemaps.js
 src/util/distanceGrid.js
 dist/**
 testing/**
+website/**
 geo.js
 **/*.min.js
 examples/common/jsonlint.js

examples/build-utils.js

@@ -0,0 +1,104 @@
+var fs = require('fs-extra');
+var glob = require('glob').sync;
+var path = require('path');
+var yaml = require('js-yaml');
+
+/**
+ * Get a sorted list of tutorials or examples, each of which contains an object
+ * with a variety of attributes:
+ *  - `baseName`Css: a list of css files, if any specified by the record.
+ *  - `baseName`Js: a list of js files, if any specified by the record.
+ *  - main: the first js file in the previous list.  May be `undefined` if that
+ *      list is empty.
+ *  - bundle: '../bundle.js' (a fixed string).
+ *  - dir: the directory of the record.
+ *  - path: the last component of the record's directory, or the value
+ *      specified by the record.
+ *  - output: an output path based on `outputDir`, `rootDir`, and `path`.
+ *
+ * @param {string} rootDir The location to search for files.  Any directory
+ *      with a json file called `baseName`.json will be parsed.
+ * @param {string} baseName The name of the json file.  Also use for attribute
+ *      names.
+ * @param {string} outputDir The root of a location to empty and copy.  The
+ *      actual output is stored at `outputDir`/`rootDir`/<record name>.
+ */
+function getList(rootDir, baseName, outputDir) {
+  var list = glob(rootDir + '/*/' + baseName + '.json')
+    .map(function (f) {
+      // /path/to/<baseName>.json
+      f = path.resolve(f);
+
+      // content of <baseName>.json
+      var json = fs.readJSONSync(path.resolve(f));
+
+      // directory of the file
+      var dir = path.dirname(f);
+
+      // by default, assume the path is where the files are located.
+      json.path = json.path || path.basename(dir);
+      json[baseName + 'Css'] = json[baseName + 'Css'] || [];
+      json[baseName + 'Js'] = json[baseName + 'Js'] || [];
+      if (json[baseName + 'Js'].length) {
+        json.main = path.resolve(dir, json[baseName + 'Js'][0]);
+      }
+      json.bundle = '../bundle.js';
+      json.dir = dir;
+
+      json.output = path.resolve(outputDir, rootDir, json.path);
+      // create, empty, and copy the source directory
+      fs.emptyDirSync(json.output);
+      fs.copySync(json.dir, json.output);
+
+      return json;
+    });
+
+  /* Sort records.  Recods are sorted by level, order, title, and path.
+   * undefined or null levels ard orders are sorted after defined values.
+   * level should be used for the approximate significant of the record, and
+   * order for making specific records appear sooner in the list. */
+  list.sort(function (a, b) {
+    if (a.level !== b.level) {
+      return a.level === undefined ? 1 : b.level === undefined ? -1 : a.level - b.level;
+    }
+    if (a.order !== b.order) {
+      return a.order === undefined ? 1 : b.order === undefined ? -1 : a.order - b.order;
+    }
+    if (a.title !== b.title) {
+      return a.title < b.title ? -1 : 1;
+    }
+    return a.path < b.path ? -1 : 1;
+  });
+
+  return list;
+}
+
+/**
+ * Emit a yml list based on the records returned from `getList`.
+ *
+ * @param {string} dir The directory to write the file.
+ * @param {string} filename The name of the file to write.
+ * @param {array} An array from `getList` to emit.
+ */
+function writeYamlList(dir, filename, records) {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
+  fs.writeFileSync(
+    path.resolve(dir, filename),
+    yaml.safeDump(records.filter(function (t) {
+      return !t.disabled;
+    }).map(function (t) {
+      return {
+        name: t.path,
+        title: t.title,
+        description: (t.about || {}).text || t.title
+      };
+    }))
+  );
+}
+
+module.exports = {
+  getList: getList,
+  writeYamlList: writeYamlList
+};

examples/build-website.js

@@ -0,0 +1,52 @@
+var path = require('path');
+var fs = require('fs-extra');
+var docco = require('docco').document;
+var pug = require('pug');
+
+var buildUtils = require('./build-utils');
+
+// generate the examples
+fs.ensureDirSync('website/source/examples');
+var examples = buildUtils.getList('examples', 'example', path.resolve('website', 'source'));
+examples.map(function (json) {
+  // make docco documentation in:
+  //   dist/examples/<name>/docs/
+  if (json.main) {
+    docco({
+      args: [json.main],
+      output: path.resolve(json.output, 'docs'),
+      layout: 'classic'
+    }, function () {
+      // simplify the docco output to reduce the output size by
+      // removing the unnecessary public/ directory
+      fs.removeSync(path.resolve(json.output, 'docs', 'public'));
+    });
+  }
+  json.docHTML = 'docs/' + path.basename(json.main).replace(/js$/, 'html');
+
+  var pugTemplate = '';
+  var pugFile = path.relative('.', path.resolve(json.dir, 'index.pug'));
+  if (fs.existsSync(path.resolve(json.dir, 'index.pug'))) {
+    pugTemplate = fs.readFileSync(pugFile, 'utf8');
+    pugTemplate = pugTemplate.replace('extends ../common/index.pug', '');
+    pugTemplate = pugTemplate.replace('block append mainContent', '');
+  }
+  pugTemplate = 'div' + pugTemplate;
+
+  var fn = pug.compile(pugTemplate, { pretty: false });
+  var html = fn(json);
+  html = `---
+layout: example
+title: ${json.title}
+about: ${json.about.text}
+exampleCss: ${JSON.stringify(json.exampleCss)}
+exampleJs: ${JSON.stringify(json.exampleJs)}
+---
+` + html;
+  fs.writeFileSync(path.resolve(json.output, 'index.html'), html);
+});
+
+// copy common files
+fs.copySync('examples/common', 'website/source/examples/common');
+
+buildUtils.writeYamlList(path.resolve('website', 'source', '_data'), 'examples.yml', examples);

examples/build.js

@@ -1,62 +1,37 @@
 var path = require('path');
-var glob = require('glob').sync;
 var fs = require('fs-extra');
 var docco = require('docco').document;
 var pug = require('pug');
 
+var buildUtils = require('./build-utils');
+
 // generate the examples
 fs.ensureDirSync('dist/examples');
-var examples = glob('examples/*/example.json')
-  .map(function (f) {
-    // /path/to/example.json
-    f = path.resolve(f);
-
-    // content of example.json
-    var json = fs.readJSONSync(path.resolve(f));
-
-    // directory of the example
-    var dir = path.dirname(f);
-
-    // by default, assume the path is where the files are located
-    json.path = json.path || path.basename(dir);
-    json.exampleCss = json.exampleCss || [];
-    json.exampleJs = json.exampleJs || [];
-
-    // the main js file for the example
-    var main = path.resolve(dir, json.exampleJs[0]);
-
-    // the output directory where the example will be compiled
-    var output = path.resolve('dist', 'examples', json.path);
-
-    // create, empty, and copy the source directory
-    fs.emptyDirSync(output);
-    fs.copySync(dir, output);
-
-    // make docco documentation in:
-    //   dist/examples/<name>/docs/
-    if (json.exampleJs.length) {
-      docco({
-        args: [main],
-        output: path.resolve(output, 'docs'),
-        layout: 'classic'
-      }, function () {
-        // simplify the docco output to reduce the output size by
-        // removing the unnecessary public/ directory
-        fs.removeSync(path.resolve(output, 'docs', 'public'));
-      });
-    }
-    json.docHTML = 'docs/' + path.basename(main).replace(/js$/, 'html');
-
-    json.bundle = '../bundle.js';
-
-    var pugFile = path.relative('.', path.resolve(dir, 'index.pug'));
-    if (!fs.existsSync(path.resolve(dir, 'index.pug'))) {
-      pugFile = path.relative('.', path.resolve(dir, '../common/index.pug'));
-    }
-    var fn = pug.compileFile(pugFile, {pretty: true});
-    fs.writeFileSync(path.resolve(output, 'index.html'), fn(json));
-    return json;
-  });
+var examples = buildUtils.getList('examples', 'example', 'dist');
+
+examples.map(function (json) {
+  // make docco documentation in:
+  //   dist/examples/<name>/docs/
+  if (json.exampleJs.length) {
+    docco({
+      args: [json.main],
+      output: path.resolve(json.output, 'docs'),
+      layout: 'classic'
+    }, function () {
+      // simplify the docco output to reduce the output size by
+      // removing the unnecessary public/ directory
+      fs.removeSync(path.resolve(json.output, 'docs', 'public'));
+    });
+  }
+  json.docHTML = 'docs/' + path.basename(json.main).replace(/js$/, 'html');
+
+  var pugFile = path.relative('.', path.resolve(json.dir, 'index.pug'));
+  if (!fs.existsSync(path.resolve(json.dir, 'index.pug'))) {
+    pugFile = path.relative('.', path.resolve(json.dir, '../common/index.pug'));
+  }
+  var fn = pug.compileFile(pugFile, {pretty: true});
+  fs.writeFileSync(path.resolve(json.output, 'index.html'), fn(json));
+});
 
 // copy common files
 fs.copySync('examples/common', 'dist/examples/common');

examples/geoJSON/main.css

@@ -3,7 +3,7 @@
   left: 10px;
   top: 80px;
   width: calc(50% - 10px);
-  height: calc(100% - 100px) !important;
+  height: calc(70% - 100px) !important;
   z-index: 50;
   border-radius: 5px;
   border: 1px solid grey;

examples/hurricanes/example.json

@@ -2,6 +2,8 @@
   "title": "Hurricane tracking data",
   "exampleCss": ["main.css"],
   "exampleJs": ["main.js"],
+  "level": 0,
+  "order": 0,
   "about": {
     "text": "Explore historic hurricane paths since 1980 on an interactive map."
   }

examples/index-website.js

@@ -0,0 +1,20 @@
+require('../src/vendor');
+window.geo = require('../src/index');
+
+// codemirror and plugins
+require('codemirror/lib/codemirror.css');
+require('codemirror/addon/lint/lint.css');
+require('codemirror/addon/fold/foldgutter.css');
+
+// Colorbrewer
+require('colorbrewer');
+
+require('./common/jsonlint');
+require('codemirror');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/addon/lint/lint');
+require('codemirror/addon/lint/json-lint');
+require('codemirror/addon/fold/brace-fold');
+require('codemirror/addon/fold/foldcode');
+require('codemirror/addon/fold/foldgutter');
+require('codemirror/addon/edit/matchbrackets');

examples/sld/example.json

@@ -1,5 +1,5 @@
 {
-  "title": "Adding styles to WMS raster layers",
+  "title": "Styling WMS raster layers",
   "exampleCss": ["main.css"],
   "exampleJs": ["main.js"],
   "about": {

package.json

@@ -53,6 +53,7 @@
     "jsdoc-autoprivate": "0.0.1",
     "json-loader": "^0.5.4",
     "jstransformer-markdown-it": "^2.0.0",
+    "js-yaml": "^3.10.0",
     "karma": "^0.13.22",
     "karma-coverage": "^1.0.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -86,9 +87,12 @@
     "xmlbuilder": "^8.2.2"
   },
   "scripts": {
+    "postinstall": "cd website && npm install",
     "build": "webpack --config webpack.config.js && webpack --config external.config.js",
-    "build-examples": "webpack --config webpack-examples.config.js",
-    "build-tutorials": "webpack --config webpack-tutorials.config.js",
+    "build-examples": "node examples/build.js && webpack --config webpack-examples.config.js",
+    "build-website-examples": "node examples/build-website.js && webpack --config webpack-website-examples.config.js",
+    "build-tutorials": "node tutorials/build.js && webpack --config webpack-tutorials.config.js",
+    "build-website-tutorials": "node tutorials/build-website.js && webpack --config webpack-website-tutorials.config.js",
     "lint": "eslint --cache .",
     "puglint": "pug-lint src examples",
     "test": "GEOJS_TEST_CASE=tests/test-unit.js karma start karma-cov.conf.js --single-run --browsers ChromeHeadlessTouch,FirefoxTouch,PhantomJS",
@@ -107,7 +111,9 @@
     "examples": "webpack-dev-server --config webpack-examples.config.js --host ${HOST-127.0.0.1} --port ${PORT-8082} --content-base dist/",
     "start-test": "node examples/build.js; forever start ./testing/test-runners/server.js",
     "stop-test": "forever stop ./testing/test-runners/server.js",
-    "docs": "jsdoc --pedantic -d dist/apidocs -r src -c jsdoc.conf.json"
+    "docs": "jsdoc --pedantic -d dist/apidocs -r src -c jsdoc.conf.json",
+    "website": "cd website && npx hexo server",
+    "build-website": "npm run build && cp -a dist/built/. website/source/built && npm run build-website-examples && npm run build-website-tutorials && npm run docs && cp -ar dist/data/. website/source/data && cp -ar dist/apidocs/. website/source/apidocs && cd website && rm -f db.json && npx hexo generate"
   },
   "keywords": [
     "map",

tutorials/build-website.js

@@ -0,0 +1,34 @@
+var path = require('path');
+var fs = require('fs-extra');
+var pug = require('pug');
+
+var buildUtils = require('../examples/build-utils');
+
+// generate the tutorials
+fs.ensureDirSync('website/source/tutorials');
+var tutorials = buildUtils.getList('tutorials', 'tutorial', path.resolve('website', 'source'));
+
+tutorials.map(function (json) {
+  var pugTemplate = fs.readFileSync(path.relative('.', path.resolve(json.dir, 'index.pug')), 'utf8');
+  pugTemplate = pugTemplate.replace('extends ../common/index.pug', 'extends ../common/index-website.pug');
+
+  var fn = pug.compile(pugTemplate, {
+    pretty: false,
+    filename: path.relative('.', path.resolve(json.dir, 'index.pug'))
+  });
+  var html = fn(json);
+  html = `---
+layout: tutorial
+title: ${json.title}
+about: ${json.about.text}
+tutorialCss: ${JSON.stringify(json.tutorialCss)}
+tutorialJs: ${JSON.stringify(json.tutorialJs)}
+---
+` + html;
+  fs.writeFileSync(path.resolve(json.output, 'index.html'), html);
+});
+
+// copy common files
+fs.copySync('tutorials/common', 'website/source/tutorials/common');
+
+buildUtils.writeYamlList(path.resolve('website', 'source', '_data'), 'tutorials.yml', tutorials);