front page layout improvements

add pagelist-docs partial

.gitignore

@@ -3,7 +3,9 @@ Thumbs.db
 .npm
 .vscode
 
-node_modules
+node_modules/
 npm-debug.log*
-logs
+logs/
 *.log
+
+build/

README.md

@@ -43,9 +43,12 @@ npm run production-win
 
 The site is built in the `/build` folder.
 
+To deploy the contents of the `/build` folder to Github Pages, run the appropriate production build command, then:
+
+```bash
+npm run deploy
+```
+
 ## Further information
  
 The [built site](https://rawgit.com/dashdev-suite/dashdev-website/master/build/) provides further information about site files and settings.
-
-
-

build-old.js

@@ -1,144 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Metalsmith build file
-Build site with `node ./build.js` or `npm start`
-Build production site with `npm run production`
-*/
-
-
-'use strict';
-
-var
-  // defaults
-  consoleLog = false, // set true for metalsmith file and meta content logging
-  devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production'),
-  pkg = require('./package.json'),
-
-  // main directories
-  dir = {
-    base: __dirname + '/',
-    lib: __dirname + '/lib/',
-    source: './src/',
-    dest: './build/'
-  },
-
-  // modules
-  metalsmith = require('metalsmith'),
-  markdown = require('metalsmith-markdown'),
-  publish = require('metalsmith-publish'),
-  wordcount = require("metalsmith-word-count"),
-  collections = require('metalsmith-collections'),
-  permalinks = require('metalsmith-permalinks'),
-  // jstransformer = require('metalsmith-jstransformer'),
-  inplace = require('metalsmith-in-place'),
-  layouts = require('metalsmith-layouts'),
-  sitemap = require('metalsmith-mapsite'),
-  rssfeed = require('metalsmith-feed'),
-  assets = require('metalsmith-assets'),
-  htmlmin = devBuild ? null : require('metalsmith-html-minifier'),
-  browsersync = devBuild ? require('metalsmith-browser-sync') : null,
-  // handlebars = require('jstransformer')(require('jstransformer-handlebars')),
-
-  // custom plugins
-  setdate = require(dir.lib + 'metalsmith-setdate'),
-  moremeta = require(dir.lib + 'metalsmith-moremeta'),
-  debug = consoleLog ? require(dir.lib + 'metalsmith-debug') : null,
-
-  siteMeta = {
-    devBuild: devBuild,
-    version: pkg.version,
-    name: 'dashdev-website',
-    desc: 'metalsmith website', 
-    author: 'dashdevs',
-    contact: 'https://chat.dashdevs.org',
-    domain: devBuild ? 'http://127.0.0.1' : 'https://rawgit.com', // set domain
-    rootpath: devBuild ? null : '/dashdev-suite/dashdev-website/master/build/' // set absolute path (null for relative)
-  },
-
-  templateConfig = {
-    engine: 'handlebars',
-    directory: 'template/',
-    partials: 'partials/',
-    default: 'page.html'
-  };
-
-console.log((devBuild ? 'Development' : 'Production'), 'build, version', pkg.version);
-
-var ms = metalsmith(dir.base)
-  .clean(!devBuild) // clean folder before a production build
-  .source(dir.source + 'html/') // source folder (src/html/)
-  .destination(dir.dest) // build folder (build/)
-  .metadata(siteMeta) // add meta data to every page
-  .use(publish()) // draft, private, future-dated
-  .use(setdate()) // set date on every page if not set in front-matter
-  .use(collections({ // determine page collection/taxonomy
-    page: {
-      pattern: '**/index.*',
-      sortBy: 'priority',
-      reverse: true,
-      refer: false
-    },
-    start: {
-      pattern: 'start/**/*',
-      sortBy: 'priority',
-      reverse: true,
-      refer: true,
-      metadata: {
-        layout: 'article.html'
-      }
-    },
-    article: {
-      pattern: 'article/**/*',
-      sortBy: 'date',
-      reverse: true,
-      refer: true,
-      limit: 50,
-      metadata: {
-        layout: 'article.html'
-      }
-    }
-  }))
-  .use(markdown()) // convert markdown
-  .use(permalinks({ // generate permalinks
-    pattern: ':mainCollection/:title'
-  }))
-  .use(wordcount({
-    raw: true
-  })) // word count
-  .use(moremeta()) // determine root paths and navigation
-  // .use(jstransformer({
-  //   'pattern': '**',
-  //   'layoutPattern': './src/html/**',
-  //   'defaultLayout': null
-  // }))
-  .use(inplace(templateConfig)) // in-page templating
-  .use(layouts(templateConfig)); // layout templating
-
-if (htmlmin) ms.use(htmlmin()); // minify production HTML
-
-if (debug) ms.use(debug()); // output page debugging information
-
-if (browsersync) ms.use(browsersync({ // start test server
-  server: dir.dest,
-  files: [dir.source + '**/*']
-}));
-
-ms
-  .use(sitemap({ // generate sitemap.xml
-    hostname: siteMeta.domain + (siteMeta.rootpath || ''),
-    omitIndex: true
-  }))
-  .use(rssfeed({ // generate RSS feed for articles
-    collection: 'article',
-    site_url: siteMeta.domain + (siteMeta.rootpath || ''),
-    title: siteMeta.name,
-    description: siteMeta.desc
-  }))
-  .use(assets({ // copy assets: CSS, images etc.
-    source: dir.source + 'assets/',
-    destination: './'
-  }))
-  .build(function (err) { // build
-    if (err) throw err;
-  });

build.js

@@ -7,28 +7,31 @@ var pkg = require('./package.json');
 
 // main directories
 dir = {
-  base: __dirname + '/',
+    base: __dirname + '/',
-  lib: __dirname + '/lib/',
+    lib: __dirname + '/lib/',
-  source: './src/',
+    source: './src/',
-  dest: './build/'
+    dest: './build/'
 };
 
 siteMeta = {
-  devBuild: devBuild,
+    devBuild: devBuild,
-  version: pkg.version,
+    version: pkg.version,
-  name: 'dashdevs-suite',
+    name: 'dashdevs-suite',
-  desc: 'dashdevs-suite metalsmith website',
+    desc: 'dashdevs-suite metalsmith website',
-  author: 'dashdevs',
+    author: 'dashdevs',
-  contact: 'https://chat.dashdevs.org',
+    contact: 'https://chat.dashdevs.org',
-  domain: devBuild ? 'http://127.0.0.1' : 'https://dashdev-suite.github.io', // set domain
+    domain: devBuild ? 'http://127.0.0.1' : 'https://dashdev-suite.github.io', // set domain
-  rootpath: devBuild ? null : '/dashdev-website/build/' // set absolute path (null for relative)
+    // rootpath: devBuild ? null : '/dashdev-website/build/' // set absolute path (null for relative)
+    // for gh-pages npm package usage without "build/" dir:
+    rootpath: devBuild ? null : '/dashdev-website/' // set absolute path (null for relative)
+
 };
 
 templateConfig = {
-  engine: 'handlebars',
+    engine: 'handlebars',
-  directory: 'template/',
+    directory: 'template/',
-  partials: 'partials/',
+    partials: 'partials/',
-  default: 'page.html'
+    default: 'page.html'
 };
 
 // metalsmith
@@ -62,103 +65,131 @@ console.log((devBuild ? 'Development' : 'Production'), 'build, version', pkg.ver
 
 //  instantiate
 var metalsmith = Metalsmith(__dirname)
-  .clean(true)    // clean folder before a production build
+    .clean(true) // clean folder before a production build
-  .source(dir.source + 'html/')   // source folder (src/)
+    .source(dir.source + 'html/') // source folder (src/)
-  .destination(dir.dest)    // build folder (build/)
+    .destination(dir.dest) // build folder (build/)
-  .metadata(siteMeta) // add meta data to every page
+    .metadata(siteMeta) // add meta data to every page
-  .use(publish()) // draft, private, future-dated
+    .use(publish()) // draft, private, future-dated
-  .use(discoverPartials({   // needed for markdownPrecompiler
+    .use(discoverPartials({ // needed for markdownPrecompiler
-    directory: 'partials',
+        directory: 'partials',
-    pattern: /\.hbs$/       // original partials .html but exactly these parameters work 
+        pattern: /\.hbs$/ // original partials .html but exactly these parameters work 
-  }))
+    }))
-  // .use(json_to_files({
+    // .use(json_to_files({
-  //   source_path: './box/'
+    //   source_path: './box/'
-  // }))
+    // }))
-  .use(paths())
+    .use(paths())
-  .use(setdate()) // set date on every page if not set in front-matter
+    .use(setdate()) // set date on every page if not set in front-matter
-  .use(collections({ // determine page collection/taxonomy
+    .use(collections({ // determine page collection/taxonomy
-    page: {
+        page: {
-      pattern: '**/index.*',
+            pattern: '**/index.*',
-      sortBy: 'priority',
+            sortBy: 'priority',
-      reverse: true,
+            reverse: true,
-      refer: false
+            refer: false
-    },
+        },
-    start: {
+        frontpage: {
-      pattern: 'start/**/*',
+            pattern: 'index.*',
-      sortBy: 'priority',
+            sortBy: 'priority',
-      reverse: true,
+            reverse: true,
-      refer: true,
+            refer: false,
-      metadata: {
+            metadata: {
-        layout: 'article.hbs'
+                layout: './../src/layouts/frontpage.hbs' // default is <root>/layouts
-      }
+            }
-    },
+        },
-    article: {
+        docs: {
-      pattern: 'article/**/*',
+            pattern: 'docs/**/*',
-      sortBy: 'date',
+            sortBy: 'priority',
-      reverse: true,
+            reverse: true,
-      refer: true,
+            refer: true,
-      limit: 50,
+            metadata: {
-      metadata: {
+                layout: './../src/layouts/docs.hbs' // default is <root>/layouts
-        layout: 'article.hbs'
+            }
-      }
+        },
-    }
+        blog: {
-  }))
+            pattern: 'blog/**/*',
-  .use(markdownPrecompiler({  // convert {{> navmain}} in header.html
+            sortBy: 'date',
-    engine: "handlebars",
+            reverse: true,
-    pattern: /\.md$/, // regex; no idea why .md works, check discoverPartials above
+            refer: true,
-    partialsPath: './../partials',
+            limit: 50,
-    partials: ['navmain', 'navsub', 'footer', 'header', 'meta', 'pagelist']
+            metadata: {
-  }))
+                layout: './../src/layouts/blog.hbs'
-  .use(markdown()) // convert markdown
+            }
-  .use(permalinks({ // generate permalinks
+        },
-    pattern: ':mainCollection/:title'
+        tutorials: {
-  }))
+            pattern: 'tutorials/**/*',
-  .use(wordcount({  // word count
+            sortBy: 'priority',
-    raw: true
+            reverse: true,
-  })) 
+            refer: true,
-  .use(moremeta()) // determine root paths and navigation, TODO check remove
+            limit: 50,
-  // .use(inplace({
+            metadata: {
-  //   //engineOptions:  {},
+                layout: './../src/layouts/tutorials.hbs'
-  //   pattern: `partials.hbs/**`
+            }
-  // }))
+        },
-  .use(layouts({
+        boxes: {
-    //engineOptions:  {},
+            pattern: 'boxes/**/*',
-    pattern: `**/index.*`,
+            sortBy: 'date',
-    default: 'page.hbs'
+            reverse: true,
-  }))
+            refer: true,
-// .use(layouts({
+            limit: 50,
-//   //engineOptions:  {},
+            metadata: {
-//   pattern: `article/**`,
+                layout: './../src/layouts/boxes.hbs'
-//   default: 'article.hbs'
+            }
-// }))
+        }
+    }))
+    .use(markdownPrecompiler({ // convert {{> navmain}} in header.html
+        engine: "handlebars",
+        pattern: /\.md$/, // regex; no idea why .md works, check discoverPartials above
+        partialsPath: './../partials',
+        partials: ['navmain', 'navsub', 'footer', 'header', 'meta', 'pagelist', 'pagelist-docs']
+    }))
+    .use(markdown()) // convert markdown
+    .use(permalinks({ // generate permalinks
+        pattern: ':mainCollection/:title'
+    }))
+    .use(wordcount({ // word count
+        raw: true
+    }))
+    .use(moremeta()) // determine root paths and navigation, TODO check remove
+    // .use(inplace({
+    //   //engineOptions:  {},
+    //   pattern: `partials.hbs/**`
+    // }))
+    // define default (add additional rules in collections plugin )
+    .use(layouts({
+        //engineOptions:  {},
+        pattern: `**/index.*`,
+        default: './../src/layouts/page.hbs'
+    }))
+    // .use(layouts({
+    //   //engineOptions:  {},
+    //   pattern: `article/**`,
+    //   default: 'article.hbs'
+    // }))
 
 if (htmlmin) metalsmith.use(htmlmin()); // minify production HTML
 
 if (debug) metalsmith.use(debug()); // output page debugging information
 
 if (browsersync) metalsmith.use(browsersync({ // start test server
-  server: dir.dest,
+    server: dir.dest,
-  files: [dir.source + '**/*']
+    files: [dir.source + '**/*']
 }));
 
 metalsmith
-  .use(sitemap({ // generate sitemap.xml
+    .use(sitemap({ // generate sitemap.xml
-    hostname: siteMeta.domain + (siteMeta.rootpath || ''),
+        hostname: siteMeta.domain + (siteMeta.rootpath || ''),
-    omitIndex: true  // replace any paths ending in index.html with ''. Useful when you're using metalsmith-permalinks.
+        omitIndex: true // replace any paths ending in index.html with ''. Useful when you're using metalsmith-permalinks.
-  }))
+    }))
-  .use(rssfeed({ // generate RSS feed for articles
+    .use(rssfeed({ // generate RSS feed for articles (update: now blog)
-    collection: 'article',
+        collection: 'blog',
-    site_url: siteMeta.domain + (siteMeta.rootpath || ''),
+        site_url: siteMeta.domain + (siteMeta.rootpath || ''),
-    title: siteMeta.name,
+        title: siteMeta.name,
-    description: siteMeta.desc
+        description: siteMeta.desc
-  }))
+    }))
-  .use(assets({ // copy assets: CSS, images etc.
+    .use(assets({ // copy assets: CSS, images etc.
-    source: dir.source + 'assets/',
+        source: dir.source + 'assets/',
-    destination: './'
+        destination: './'
-  }))
+    }))
 
-  .build(function (err) {
+.build(function(err) {
     if (err) throw err;
-  });
+});
-
-

build/article/future/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Future publication - dashdevs-suite</title><meta name=description content="This article will be published after 1 March, 2016."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ class=active>Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Future publication</h1><p class=articleinfo>Published 1 March 2016, 16 words, 1-minute read</p><p>This article will only appear if the site is built is run after 1 March, 2016.</p><nav class="nav page"><ul><li><a href=/dashdev-website/build/article/gulp/ class=back>&laquo; back: Gulp</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/article/usage/ >Usage options</a></li><li><a href=/dashdev-website/build/article/gotchas/ >Gotchas</a></li><li><a href=/dashdev-website/build/article/gulp/ >Gulp</a></li><li><strong>Future publication</strong></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/article/gotchas/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Gotchas - dashdevs-suite</title><meta name=description content="Issues and workarounds when using Metalsmith."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ class=active>Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Gotchas</h1><p class=articleinfo>Published 10 March 2016, 127 words, 1-minute read</p><p>Not everything is necessarily straight-forward in the Metalsmith world&hellip;</p><h2 id=incompatible-plugins>Incompatible plugins</h2><p>Some plugins clash with another. For example, <a href=https://github.com/radiovisual/metalsmith-rootpath>metalsmith-rootpath</a> which calculates relative roots does not play nicely with <a href=https://github.com/segmentio/metalsmith-permalinks>metalsmith-permalinks</a> which creates custom folder structures.</p><p><em>Note: <code>lib/metalsmith-moremeta</code> in this project sets a correct <code>root</code> variable whether permalinks are used or not.</em></p><h2 id=plugin-order-can-be-critical>Plugin order can be critical</h2><p>One plugins may depend on another or conflict if placed the wrong way around. For example, the RSS-generating <a href=https://github.com/hurrymaplelad/metalsmith-feed>metalsmith-feed</a> plugin must be called after <a href=https://github.com/superwolff/metalsmith-layouts>metalsmith-layouts</a> to ensure <code>rss.xml</code> is not generated within a page template.</p><h2 id=browsersync-build-issues>Browsersync build issues</h2><p>When <a href=https://www.browsersync.io/ >Browsersync</a> is running and files are edited, collections are re-parsed but the old data remains. This can cause menus and next/back links to be incorrect. To fix this, stop and restart the build.</p><nav class="nav page"><ul><li><a href=/dashdev-website/build/article/usage/ class=back>&laquo; back: Usage options</a></li><p></p><li><a href=/dashdev-website/build/article/gulp/ class=next>next: Gulp &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/article/usage/ >Usage options</a></li><li><strong>Gotchas</strong></li><li><a href=/dashdev-website/build/article/gulp/ >Gulp</a></li><li><a href=/dashdev-website/build/article/future/ >Future publication</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/article/gulp/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Gulp - dashdevs-suite</title><meta name=description content="Do you need Gulp? Can it be integrated with Metalsmith?"><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ class=active>Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Gulp</h1><p class=articleinfo>Published 2 March 2016, 141 words, 1-minute read</p><p>Metalsmith has plugins for <a href=https://github.com/stevenschobert/metalsmith-sass>CSS pre-processing with Sass</a>, <a href=https://github.com/ahmadnassri/metalsmith-imagemin>image minification</a>, <a href=https://github.com/aymericbeaumet/metalsmith-concat>file concatenation</a>, <a href=https://github.com/ksmithut/metalsmith-uglify>uglification</a> and more. The build code will be familiar to anyone with <a href=http://gulpjs.com/ >Gulp</a> experience.</p><h2 id=do-you-still-need-gulp>Do you still need Gulp?</h2><p>Metalsmith is often enough for simpler workflows. However, Gulp has a more extensive range of plugins and permits complex build activities such as linting and <a href=http://postcss.org/ >PostCSS</a> processing with <a href=https://github.com/postcss/autoprefixer>auto-prefixer</a>.</p><p>Metalsmith can be used within any Gulp task, e.g.</p><pre><code>var
-    gulp       = require(&#39;gulp&#39;),
-    metalsmith = require(&#39;metalsmith&#39;),
-    publish    = require(&#39;metalsmith-publish&#39;),
-    markdown   = require(&#39;metalsmith-markdown&#39;);
-
-// build HTML files using Metalsmith
-gulp.task(&#39;html&#39;, function() {
-
-    var ms = metalsmith(dir.base)
-        .clean(false)
-        .source(&#39;src/html/&#39;)
-        .destination(&#39;build&#39;)
-        .use(publish())
-        .use(markdown())
-        .build(function(err) {
-            if (err) throw err;
-        });
-
-});</code></pre><p>Further Gulp tasks can then be added. Note <code>.clean(false)</code> ensures Metalsmith never wipes the build folder when other tasks are active.</p><p>There are a number of Gulp/Metalsmith integration plugins although they are rarely necessary.</p><nav class="nav page"><ul><li><a href=/dashdev-website/build/article/gotchas/ class=back>&laquo; back: Gotchas</a></li><p></p><li><a href=/dashdev-website/build/article/future/ class=next>next: Future publication &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/article/usage/ >Usage options</a></li><li><a href=/dashdev-website/build/article/gotchas/ >Gotchas</a></li><li><strong>Gulp</strong></li><li><a href=/dashdev-website/build/article/future/ >Future publication</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/article/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Articles - dashdevs-suite</title><meta name=description content="A set of articles published on this site."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ class=active>Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Articles</h1><p>A selection of articles is available in this section.</p><ul class=pagelist><li><a href=/dashdev-website/build/article/usage/ ><h2>Usage options</h2><p class=articleinfo>14 March 2016</p><p>What type of project could benefit from Metalsmith?</p></a></li><li><a href=/dashdev-website/build/article/gotchas/ ><h2>Gotchas</h2><p class=articleinfo>10 March 2016</p><p>Issues and workarounds when using Metalsmith.</p></a></li><li><a href=/dashdev-website/build/article/gulp/ ><h2>Gulp</h2><p class=articleinfo>2 March 2016</p><p>Do you need Gulp? Can it be integrated with Metalsmith?</p></a></li><li><a href=/dashdev-website/build/article/future/ ><h2>Future publication</h2><p class=articleinfo>1 March 2016</p><p>This article will be published after 1 March, 2016.</p></a></li></ul></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/article/usage/ >Usage options</a></li><li><a href=/dashdev-website/build/article/gotchas/ >Gotchas</a></li><li><a href=/dashdev-website/build/article/gulp/ >Gulp</a></li><li><a href=/dashdev-website/build/article/future/ >Future publication</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/article/usage/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Usage options - dashdevs-suite</title><meta name=description content="What type of project could benefit from Metalsmith?"><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ class=active>Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Usage options</h1><p class=articleinfo>Published 14 March 2016, 47 words, 1-minute read</p><p>Metalsmith could be used to create any number of resources, including:</p><ul><li>a fast static website with minimal server-side requirements</li><li>technical documentation</li><li>an eBook</li><li>application prototypes</li><li>build tools or project scaffolding</li></ul><p>The markdown files can be converted to other files types using plugins such as <a href=https://github.com/arve0/metalsmith-pandoc>metalsmith-pandoc</a> or <a href=https://github.com/jjclark1982/metalsmith-pdf>metalsmith-pdf</a>.</p><nav class="nav page"><ul><li><a href=/dashdev-website/build/article/ class=back>&laquo; back: Articles</a></li><p></p><li><a href=/dashdev-website/build/article/gotchas/ class=next>next: Gotchas &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><strong>Usage options</strong></li><li><a href=/dashdev-website/build/article/gotchas/ >Gotchas</a></li><li><a href=/dashdev-website/build/article/gulp/ >Gulp</a></li><li><a href=/dashdev-website/build/article/future/ >Future publication</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/contact/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Contact - dashdevs-suite</title><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ class=active>Contact</a></li></ul></nav></div></header><main><div class=content><article><h1>Contact</h1><p>Any questions?</p><p>Contact us at <a href="">Dash DApp Developers Discord</a></p></article></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, page template</p></footer></body></html>

build/css/styles.css

@@ -1,277 +0,0 @@
-/* basic page styles */
-*, *:before, *:after {
-  box-sizing: border-box;
-	padding: 0;
-	margin: 0;
-}
-
-body {
-	font-family: georgia, cambria, "times new roman", times, serif;
-	font-size: 1em;
-	color: #555;
-	background-color: #eee;
-	line-height: 1.5;
-}
-
-article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
-  display: block;
-}
-
-h1, h2, .logo {
-	font-family: arial, helvetica, free-sans, sans-serif;
-	font-weight: normal;
-}
-
-h1 {
-	font-size: 1.6em;
-}
-
-h2 {
-	font-size: 1.4em;
-	margin: 2rem 0 0 0;
-}
-
-p {
-	margin: 0 0 1em 0;
-}
-
-ul, ol {
-	margin: 1em 0 1.5em 3em;
-}
-
-li {
-	margin: 0 0 0.75em 0;
-}
-
-img {
-	float: right;
-	width: auto;
-	height: auto;
-	max-width: 50%;
-	margin: 0 0 1em 1em;
-	border: 0 none;
-}
-
-pre {
-	font-size: 0.8rem;
-	padding: 0.2em 0.4em;
-	margin: 1em 0 1.5em 3em;
-	background-color: #eff5ef;
-	border-radius: 3px;
-	overflow: auto;
-}
-
-code {
-	font-family: Consolas, Menlo, "DejaVu Mono", monospace;
-	color: #363;
-	background-color: #eff5ef;
-	border-radius: 3px;
-	padding: 0 0.2em;
-}
-
-pre code {
-	padding: 0;
-}
-
-a:link, a:visited {
-	text-decoration: none;
-	color: #66c;
-}
-
-a:hover, a:active {
-	color: #c66;
-}
-
-.pagelist {
-	list-style-type: none;
-	display: flex;
-	flex-wrap: wrap;
-	margin: 0;
-	line-height: 1.3;
-}
-
-.pagelist li {
-	flex: 1 1 45%;
-	margin: 0 1em 1em 0;
-}
-
-.pagelist a {
-	display: block;
-	height: 100%;
-	padding: 5px 10px;
-	border: 1px solid #ccc;
-	outline: 0 none;
-	overflow: hidden;
-}
-
-.pagelist a:hover, .pagelist a:focus {
-	background-color: #f9f9f9;
-	border-color: #999;
-}
-
-.pagelist h2, .pagelist p {
-	margin: 0;
-}
-
-.pagelist p {
-	color: #333;
-}
-
-p.articleinfo {
-	font-size: 0.8em;
-	color: #777;
-}
-
-/* layout */
-.content {
-	max-width: 50em;
-	padding: 0 0.5em;
-	margin: 0 auto;
-}
-
-main {
-	clear: both;
-	background-color: #fff;
-	overflow: auto;
-}
-
-article {
-	padding: 1rem 0;
-}
-
-header, footer {
-	clear: both;
-	width: 100%;
-	overflow: auto;
-	background-color: #eee;
-}
-
-footer {
-	font-size: 0.85em;
-	padding: 1em;
-	text-align: center;
-}
-
-footer p {
-	margin: 0;
-}
-
-.logo {
-	font-size: 1.5em;
-	margin: 0.2em 0 0 0;
-}
-
-.logo a {
-	padding: 0.2em 0;
-	color: #999;
-}
-
-/* navigation */
-.nav ul {
-	display: flex;
-	flex-wrap: wrap;
-	list-style-type: none;
-	margin: 0;
-}
-
-.nav li {
-	flex: 1 1 100%;
-	margin: 0;
-}
-
-.nav a, .nav strong {
-	display: block;
-	text-align: center;
-	white-space: nowrap;
-	padding: 0.6em 0;
-}
-
-.nav.main a {
-	color: #222;
-}
-
-.nav a.active, .nav strong {
-	background-color: #fff;
-}
-
-.nav.page {
-	margin-top: 1.5em;
-	border-top: 1px solid #ccc;
-	border-bottom: 1px solid #ccc;
-}
-
-@media (min-width: 16em) {
-
-	.nav li {
-		flex: 1 1 50%;
-	}
-
-}
-
-@media (min-width: 32em) {
-
-	header {
-		position: fixed;
-		top: 0;
-	}
-
-	.logo {
-		float: left;
-	}
-
-	.nav.main {
-		float: right;
-	}
-
-	.nav li {
-		flex: 1 1 auto;
-	}
-
-	.nav.main li {
-		width: 6em;
-	}
-
-	main {
-		padding: 3em 0 2em 0;
-	}
-
-	.subpages .content {
-		display: flex;
-	}
-
-	.subpages article {
-		flex: 1 1 70%;
-		min-width: 0;
-	}
-
-	.subpages .nav.sub {
-		flex: 1 1 30%;
-		margin: 0 0 0 2rem;
-	}
-
-	.nav.sub ul {
-		margin-top: 1em;
-		flex-direction: column;
-		border-top: 1px dotted #ccc;
-	}
-
-	.nav.sub li {
-		border-bottom: 1px dotted #ccc;
-	}
-
-	.nav.sub a, .nav.sub strong {
-		text-align: left;
-		padding-left: 0.75em;
-	}
-
-	.nav.page a {
-		text-align: left;
-		padding-left: 0.5em;
-		padding-right: 0.5em;
-	}
-
-	.nav.page a.next {
-		text-align: right;
-	}
-
-}

build/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>dashdevs-suite</title><meta name=description content="A static HTML-only website generated using Metalsmith.io."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ class=active>Home</a></li><li><a href=/dashdev-website/build/start/ >Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main><div class=content><article><p><a href=http://dash.org/ ><img src=images/nodejs.png alt=Node.js></a></p><p>This is a static website generated using the Node.js-powered <strong><a href=http://metalsmith.io>Metalsmith</a></strong> and various published and custom plugins.</p><p>This is a demonstration rather than a recommended way to build a static site. Your requirements will be different. Please use any part of the code as you wish.</p><h2 id=where-could-you-use-metalsmith>Where could you use Metalsmith?</h2><p>Metalsmith could be used to create:</p><ul><li>a fast static website with minimal server-side requirements</li><li>technical documentation</li><li>an eBook</li><li>application prototypes</li><li>build tools or project scaffolding</li></ul><p><a href=start/ >Get started&hellip;</a></p></article></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, page template</p></footer></body></html>

build/sitemap.xml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/</loc> <priority>1.0</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/article/future/</loc> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/article/gotchas/</loc> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/article/gulp/</loc> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/article/</loc> <priority>0.8</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/article/usage/</loc> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/contact/</loc> <priority>0.7</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/start/build/</loc> <priority>0.5</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/start/</loc> <priority>0.9</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/start/installation/</loc> <priority>0.5</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/start/page-definitions/</loc> <priority>0.3</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/start/plugins/</loc> <priority>0.3</priority> </url>
-<url> <loc>https://dashdev-suite.github.io/dashdev-website/build/start/site-files/</loc> <priority>0.4</priority> </url>
-</urlset>

build/start/build/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Build - dashdevs-suite</title><meta name=description content="How to build the static site using Metalsmith."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ class=active>Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Build</h1><p class=articleinfo>Published 3 March 2020, 55 words, 1-minute read</p><p>To build and launch the site in a test server using <a href=https://www.browsersync.io/ >Browsersync</a>:</p><pre><code>npm start</code></pre><p>(Stop the server with <code>Ctrl+C</code>.)</p><p>To build the site for production and compress HTML files:</p><pre><code>npm run production</code></pre><p>The site is built in the <code>/build</code> folder.</p><p>Note you may want to change the <code>siteMeta.domain</code> and <code>siteMeta.rootpath</code> on lines 52 and 53 of <code>./build.js</code>.</p><nav class="nav page"><ul><li><a href=/dashdev-website/build/start/installation/ class=back>&laquo; back: Installation</a></li><p></p><li><a href=/dashdev-website/build/start/site-files/ class=next>next: Site files &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/start/installation/ >Installation</a></li><li><strong>Build</strong></li><li><a href=/dashdev-website/build/start/site-files/ >Site files</a></li><li><a href=/dashdev-website/build/start/page-definitions/ >Page definitions</a></li><li><a href=/dashdev-website/build/start/plugins/ >Custom plugins</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/start/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Start - dashdevs-suite</title><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ class=active>Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Start</h1><p>This section provides an overview of core code and concepts.</p><ul class=pagelist><li><a href=/dashdev-website/build/start/installation/ ><h2>Installation</h2><p class=articleinfo>2 March 2020</p><p>How to install this demonstration code.</p></a></li><li><a href=/dashdev-website/build/start/build/ ><h2>Build</h2><p class=articleinfo>3 March 2020</p><p>How to build the static site using Metalsmith.</p></a></li><li><a href=/dashdev-website/build/start/site-files/ ><h2>Site files</h2><p class=articleinfo>26 February 2020</p><p>A description of the source files used to build a website</p></a></li><li><a href=/dashdev-website/build/start/page-definitions/ ><h2>Page definitions</h2><p class=articleinfo>26 February 2020</p><p>How pages are defined in the source folder.</p></a></li><li><a href=/dashdev-website/build/start/plugins/ ><h2>Custom plugins</h2><p class=articleinfo>2 March 2020</p><p>The custom plugins used to create this website.</p></a></li></ul></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/start/installation/ >Installation</a></li><li><a href=/dashdev-website/build/start/build/ >Build</a></li><li><a href=/dashdev-website/build/start/site-files/ >Site files</a></li><li><a href=/dashdev-website/build/start/page-definitions/ >Page definitions</a></li><li><a href=/dashdev-website/build/start/plugins/ >Custom plugins</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/start/installation/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Installation - dashdevs-suite</title><meta name=description content="How to install this demonstration code."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ class=active>Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Installation</h1><p class=articleinfo>Published 2 March 2020, 27 words, 1-minute read</p><p>Please ensure <a href=https://nodejs.org/ >Node.js</a> and <a href=https://git-scm.com/ >Git</a> are installed on your system.</p><p>Download the demonstration code and switch to directory:</p><p>git clone <a href=mailto:git@github.com>git@github.com</a>:dashdev-suite/dashdev-website.git cd metalsmith-demo</p><p>Install dependencies:</p><pre><code>npm install</code></pre><nav class="nav page"><ul><li><a href=/dashdev-website/build/start/ class=back>&laquo; back: Start</a></li><p></p><li><a href=/dashdev-website/build/start/build/ class=next>next: Build &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><strong>Installation</strong></li><li><a href=/dashdev-website/build/start/build/ >Build</a></li><li><a href=/dashdev-website/build/start/site-files/ >Site files</a></li><li><a href=/dashdev-website/build/start/page-definitions/ >Page definitions</a></li><li><a href=/dashdev-website/build/start/plugins/ >Custom plugins</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/start/page-definitions/index.html

@@ -1,8 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Page definitions - dashdevs-suite</title><meta name=description content="How pages are defined in the source folder."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ class=active>Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Page definitions</h1><p class=articleinfo>Published 26 February 2020, 194 words, 1-minute read</p><p>Each sub-folder in <code>src/html</code> is a website section. Pages named <code>index.md</code> are the default page in section. File paths are translated to permalinks, e.g.</p><pre><code>src/html/article/mypage.md</code></pre><p>is rendered to:</p><pre><code>build/article/mypage/index.html</code></pre><p>Pages use YAML front-matter defined at the top. This can be referenced in templates or during the build process, e.g.</p><pre><code>---
-title: My page title
-description: A description of this page for meta tags and page lists.
-layout: page.html
-priority: 0.9
-publish: 2016-06-01
-date: 2016-06-01
----</code></pre><p>All items are optional. Note:</p><ul><li><code>layout</code> defaults to <code>page.html</code> unless <code>metadata.layout</code> is defined for the page collection (see the <code>use(collections({ ... })</code> code in <code>build.js</code>).</li><li><code>priority</code> is a number between 0 (low) and 1 (high) which is used to order menus and define XML sitemaps.</li><li><code>publish</code> can be set <code>draft</code>, <code>private</code> or a future date to ensure it is not published until required.</li><li><code>date</code> is the date of the article. If not set, a future <code>publish</code> date or the file creation date is used.</li></ul><p>The page content is defined in markdown, HTML syntax or both below the front-matter section. The content can include <a href=http://handlebarsjs.com/ >Handlebars</a> partials from the <code>src/partials</code> folder, e.g.</p><pre><code>{{&gt; partialname }}</code></pre><p>where <code>partialname</code> is the partial filename without its <code>.html</code> extension.</p><nav class="nav page"><ul><li><a href=/dashdev-website/build/start/site-files/ class=back>&laquo; back: Site files</a></li><p></p><li><a href=/dashdev-website/build/start/plugins/ class=next>next: Custom plugins &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/start/installation/ >Installation</a></li><li><a href=/dashdev-website/build/start/build/ >Build</a></li><li><a href=/dashdev-website/build/start/site-files/ >Site files</a></li><li><strong>Page definitions</strong></li><li><a href=/dashdev-website/build/start/plugins/ >Custom plugins</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/start/plugins/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Custom plugins - dashdevs-suite</title><meta name=description content="The custom plugins used to create this website."><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ class=active>Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Custom plugins</h1><p class=articleinfo>Published 2 March 2020, 77 words, 1-minute read</p><p>The <code>build.js</code> file defines how the site is built using Metalsmith and various plugins.</p><p>Several custom plugins have been created specifically for this site:</p><ul><li><code>lib/metalsmith-debug.js</code>: output debugging information to the console.</li><li><code>lib/metalsmith-setdate.js</code>: ensure each page has a date. If a <code>date</code> is not defined in the page&#39;s front-matter, it is presumed to be the publish or file creation date.</li><li><code>lib/metalsmith-moremeta.js</code>: applies further metadata to each page including the root folder, a default layout, primary and secondary navigation.</li></ul><nav class="nav page"><ul><li><a href=/dashdev-website/build/start/page-definitions/ class=back>&laquo; back: Page definitions</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/start/installation/ >Installation</a></li><li><a href=/dashdev-website/build/start/build/ >Build</a></li><li><a href=/dashdev-website/build/start/site-files/ >Site files</a></li><li><a href=/dashdev-website/build/start/page-definitions/ >Page definitions</a></li><li><strong>Custom plugins</strong></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

build/start/site-files/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>Site files - dashdevs-suite</title><meta name=description content="A description of the source files used to build a website"><meta name=HandheldFriendly content=true><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=mobile-web-app-capable content=yes><link rel=stylesheet media=all href=/dashdev-website/build/css/styles.css></head><body><header><div class=content><p class=logo><a href=/dashdev-website/build/ >dashdevs-suite</a></p><nav class="nav main"><ul><li><a href=/dashdev-website/build/ >Home</a></li><li><a href=/dashdev-website/build/start/ class=active>Start</a></li><li><a href=/dashdev-website/build/article/ >Articles</a></li><li><a href=/dashdev-website/build/contact/ >Contact</a></li></ul></nav></div></header><main class=subpages><div class=content><article><h1>Site files</h1><p class=articleinfo>Published 26 February 2020, 57 words, 1-minute read</p><p>All files in the <code>src</code> folder can be edited:</p><ul><li>pages are created as markdown files in the <code>src/html</code> folder and sub-folders.</li><li>static assets such as CSS, JavaScript and image files are created in <code>src/assets</code>. These are copied without modification to <code>build/</code>.</li><li>page templates are defined in <code>src/template</code>.</li><li>reusable partials (chunks of HTML code) are declared in <code>src/partials</code>.</li></ul><nav class="nav page"><ul><li><a href=/dashdev-website/build/start/build/ class=back>&laquo; back: Build</a></li><p></p><li><a href=/dashdev-website/build/start/page-definitions/ class=next>next: Page definitions &raquo;</a></li><p></p></ul></nav></article><nav class="nav sub"><ul><li><a href=/dashdev-website/build/start/installation/ >Installation</a></li><li><a href=/dashdev-website/build/start/build/ >Build</a></li><li><strong>Site files</strong></li><li><a href=/dashdev-website/build/start/page-definitions/ >Page definitions</a></li><li><a href=/dashdev-website/build/start/plugins/ >Custom plugins</a></li></ul></nav></div></main><footer><p>By <a href=https://chat.dashdevs.org>dashdevs</a> and featured on <a href=http://www.dashdevs.org/ >DashDevs.org</a></p><p class=siteinfo>Production build, version 1.0.0, article template</p></footer></body></html>

layouts/article.hbs

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-{{> meta }}
-</head>
-<body>
-
-{{> header }}
-
-<main{{#if navsub}} class="subpages"{{/if}}>
-
-	<div class="content">
-
-		<article>
-
-			<h1>{{ title }}</h1>
-
-			{{#if isPage}}
-			{{else}}
-
-				<p class="articleinfo">Published {{ dateFormat }}, {{ wordCount }} words, {{ readingTime }}-minute read</p>
-
-			{{/if}}
-
-			{{{ contents }}}
-
-			{{#if isPage}}
-
-				{{> pagelist }}
-
-			{{else}}
-
-				<nav class="nav page">
-					<ul>
-
-					{{#if previous.title }}
-						<li><a href="{{ root }}{{ previous.path }}/" class="back">&laquo; back: {{ previous.title }}</a></li></p>
-					{{/if}}
-
-					{{#if next.title }}
-						<li><a href="{{ root }}{{ next.path }}/" class="next">next: {{ next.title }} &raquo;</a></li></p>
-					{{/if}}
-
-					</ul>
-				</nav>
-
-			{{/if}}
-
-			</article>
-
-		{{> navsub }}
-
-		</div>
-
-</main>
-
-{{> footer template='article' }}
-
-</body>
-</html>

layouts/page.hbs

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-{{> meta }}
-</head>
-<body>
-
-{{> header }}
-
-<main{{#if navsub}} class="subpages"{{/if}}>
-
-	<div class="content">
-
-		<article>
-
-			{{#if title}}
-				<h1>{{ title }}</h1>
-			{{/if}}
-
-			{{{ contents }}}
-
-		</article>
-
-		{{> navsub }}
-
-	</div>
-
-</main>
-
-{{> footer template='page' }}
-
-</body>
-</html>

lib/metalsmith-moremeta.js

@@ -49,6 +49,7 @@ module.exports = function() {
 					file.navmain.push({
 						title:				page.title || 'Home',
 						description:	page.description || '',
+						image:				file.root + page.image || '',
 						path:					file.root + page.path + (page.path ? '/' : ''),
 						dateFormat:		page.dateFormat,
 						active:				page.path == file.path || page.collection.indexOf(file.mainCollection) >= 0
@@ -75,6 +76,7 @@ module.exports = function() {
 						file.navsub.push({
 							title:				page.title || 'Home',
 							description:	page.description || '',
+							image:				file.root + page.image || '',
 							path:					file.root + page.path + (page.path ? '/' : ''),
 							dateFormat:		page.dateFormat,
 							active:				page.path == file.path

package.json

@@ -1,46 +1,46 @@
 {
-  "name": "dashdev-website",
+    "name": "dashdev-website",
-  "version": "1.0.0",
+    "version": "1.0.0",
-  "description": "",
+    "description": "",
-  "main": "build.js",
+    "main": "build.js",
-  "scripts": {
+    "scripts": {
-    "start": "node ./build.js",
+        "start": "node ./build.js",
-    "production": "NODE_ENV=production node ./build.js",
+        "production": "NODE_ENV=production node ./build.js",
-    "production-win": "set NODE_ENV=production & node ./build.js",
+        "production-win": "set NODE_ENV=production & node ./build.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+        "deploy": "node node_modules/gh-pages/bin/gh-pages.js -d build/",
-  },
+        "test": "echo \"Error: no test specified\" && exit 1"
-  "repository": {
+    },
-    "type": "git",
+    "repository": {
-    "url": "git+https://github.com/dashdev-suite/dashdev-website.git"
+        "type": "git",
-  },
+        "url": "git+https://github.com/dashdev-suite/dashdev-website.git"
-  "keywords": [],
+    },
-  "author": "",
+    "keywords": [],
-  "license": "ISC",
+    "author": "",
-  "bugs": {
+    "license": "ISC",
-    "url": "https://github.com/dashdev-suite/dashdev-website/issues"
+    "bugs": {
-  },
+        "url": "https://github.com/dashdev-suite/dashdev-website/issues"
-  "homepage": "https://github.com/dashdev-suite/dashdev-website#readme",
+    },
-  "devDependencies": {
+    "homepage": "https://github.com/dashdev-suite/dashdev-website#readme",
-    "handlebars": "^4.7.3",
+    "devDependencies": {
-    "metalsmith": "^2.3.0",
+        "gh-pages": "^2.2.0",
-    "metalsmith-assets": "^0.1.0",
+        "handlebars": "^4.7.3",
-    "metalsmith-browser-sync": "^1.1.1",
+        "jstransformer-handlebars": "^1.1.0",
-    "metalsmith-collections": "^0.9.0",
+        "jstransformer-markdown": "^1.2.1",
-    "metalsmith-feed": "^1.0.0",
+        "metalsmith": "^2.3.0",
-    "metalsmith-html-minifier": "^4.0.1",
+        "metalsmith-assets": "^0.1.0",
-    "metalsmith-layouts": "^2.3.1",
+        "metalsmith-browser-sync": "^1.1.1",
-    "metalsmith-markdown": "^1.3.0",
+        "metalsmith-collections": "^0.9.0",
-    "metalsmith-permalinks": "^2.2.0",
+        "metalsmith-discover-partials": "^0.1.2",
-    "metalsmith-publish": "^0.1.5",
+        "metalsmith-feed": "^1.0.0",
-    "metalsmith-word-count": "0.0.4",
+        "metalsmith-html-minifier": "^4.0.1",
-    "jstransformer-handlebars": "^1.1.0",
+        "metalsmith-layouts": "^2.3.1",
-    "jstransformer-markdown": "^1.2.1",
+        "metalsmith-markdown": "^1.3.0",
-    "metalsmith-discover-partials": "^0.1.2",
+        "metalsmith-markdown-precompiler": "^1.0.0",
-    "metalsmith-markdown-precompiler": "^1.0.0",
+        "metalsmith-paths": "^3.0.1",
-    "metalsmith-paths": "^3.0.1",
+        "metalsmith-permalinks": "^2.2.0",
-    "metalsmith-sitemap": "^1.2.2"
+        "metalsmith-publish": "^0.1.5",
-  },
+        "metalsmith-sitemap": "^1.2.2",
-  "dependencies": {
+        "metalsmith-word-count": "0.0.4"
-
+    },
-  }
+    "dependencies": {}
 }

src/assets/css/styles.css

@@ -1,277 +1,468 @@
 /* basic page styles */
-*, *:before, *:after {
+
-  box-sizing: border-box;
+
-	padding: 0;
+/* current default: 111833 - blue-weak: #1f2833; brown-red: 33111b;
-	margin: 0;
+
+
+/* light yellow: FBF7EB, new lighter: #f7f2ea */
+
+
+/* light grey: #c5c6c7*/
+
+
+/* neon green: #66FCF1 */
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+    padding: 0;
+    margin: 0;
 }
 
 body {
-	font-family: georgia, cambria, "times new roman", times, serif;
+    font-family: 'Open Sans', sans-serif;
-	font-size: 1em;
+    font-size: 1.05em;
-	color: #555;
+    line-height: 1.5;
-	background-color: #eee;
+    box-sizing: border-box;
-	line-height: 1.5;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: #f7f2ea;
 }
 
-article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
+article,
-  display: block;
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+nav,
+section,
+summary {
+    display: block;
 }
 
-h1, h2, .logo {
+h1,
-	font-family: arial, helvetica, free-sans, sans-serif;
+h2,
-	font-weight: normal;
+.logo {
+    /* font-family: arial, helvetica, free-sans, sans-serif; */
+    font-family: 'Oswald', sans-serif;
+    font-weight: normal;
 }
 
 h1 {
-	font-size: 1.6em;
+    font-size: 1.6em;
+    text-transform: uppercase;
 }
 
 h2 {
-	font-size: 1.4em;
+    font-size: 1.4em;
-	margin: 2rem 0 0 0;
+    margin: 2rem 0 0 0;
 }
 
 p {
-	margin: 0 0 1em 0;
+    margin: 0 0 1em 0;
 }
 
-ul, ol {
+ul,
-	margin: 1em 0 1.5em 3em;
+ol {
+    margin: 1em 0 1.5em 3em;
 }
 
 li {
-	margin: 0 0 0.75em 0;
+    margin: 0 0 0.75em 0;
 }
 
 img {
-	float: right;
+    width: auto;
-	width: auto;
+    height: auto;
-	height: auto;
+    max-width: 100%;
-	max-width: 50%;
+    border: 0 none;
-	margin: 0 0 1em 1em;
-	border: 0 none;
 }
 
 pre {
-	font-size: 0.8rem;
+    /* font-size: 1.05em; */
-	padding: 0.2em 0.4em;
+    padding: 1.08em 0;
-	margin: 1em 0 1.5em 3em;
+    padding-left: 1.0em;
-	background-color: #eff5ef;
+    margin: 1em 0 1.5em 1.5em;
-	border-radius: 3px;
+    background-color: #111833;
-	overflow: auto;
+    /* makes code-block border round */
+    border-radius: 7px;
+    overflow: auto;
 }
 
 code {
-	font-family: Consolas, Menlo, "DejaVu Mono", monospace;
+    font-size: 0.88em;
-	color: #363;
+    font-family: Consolas, Menlo, "DejaVu Mono", monospace;
-	background-color: #eff5ef;
+    color: #E831C1;
-	border-radius: 3px;
+    background-color: #ddd7d4;
-	padding: 0 0.2em;
+    font-weight: bold;
+    /* makes single code border round */
+    border-radius: 4px;
+    padding: 0 0.4em;
 }
 
 pre code {
-	padding: 0;
+    padding: 0;
+    color: #eff5ef;
+    background-color: #111833;
+    /* padding-left: 8px; */
+    line-height: 1.5;
+    font-size: 0.88em;
+    font-weight: normal;
 }
 
-a:link, a:visited {
+a:link,
-	text-decoration: none;
+a:visited {
-	color: #66c;
+    text-decoration: none;
+    color: #fff;
 }
 
-a:hover, a:active {
+a:hover,
-	color: #c66;
+a:active {
+    /* color: #c5c6c7; */
 }
 
+
+/* this is the Article-Layout List/Overview page */
+
 .pagelist {
-	list-style-type: none;
+    list-style-type: none;
-	display: flex;
+    /* TODO: check what flex does here */
-	flex-wrap: wrap;
+    display: flex;
-	margin: 0;
+    flex-wrap: wrap;
-	line-height: 1.3;
+    margin: 0;
+    line-height: 1.3;
+    text-align: center;
 }
 
 .pagelist li {
-	flex: 1 1 45%;
+    flex: 1 1 45%;
-	margin: 0 1em 1em 0;
+    margin: 0 1em 1em 0;
 }
 
 .pagelist a {
-	display: block;
+    display: block;
-	height: 100%;
+    height: 100%;
-	padding: 5px 10px;
+    padding: 5px 10px;
-	border: 1px solid #ccc;
+    border: 1px solid #ccc;
-	outline: 0 none;
+    outline: 0 none;
-	overflow: hidden;
+    overflow: hidden;
+    /* color for links in pagelist type page eg "Installation" (1 from 3) */
+    color: #111833;
+    background-color: #ffff;
+    transition: box-shadow .3s;
+    transition: transform .3s;
+    border-radius: 5px;
 }
 
-.pagelist a:hover, .pagelist a:focus {
+.pagelist a:hover,
-	background-color: #f9f9f9;
+.pagelist a:focus {
-	border-color: #999;
+    /* background-color: #5a14dd; */
+    /* border-color: rgb(238, 9, 150); */
+    box-shadow: 0 0 21px rgba(33, 33, 33, .2);
+    text-decoration: none;
+    transform: scale(1.03);
 }
 
-.pagelist h2, .pagelist p {
+.pagelist h2,
-	margin: 0;
+.pagelist p {
+    margin: 0;
 }
 
 .pagelist p {
-	color: #333;
+    color: #111833;
+}
+
+.pagelist img {
+    width: 100%;
+    float: none;
 }
 
 p.articleinfo {
-	font-size: 0.8em;
+    font-size: 0.8em;
-	color: #777;
+    /* currently date */
+    color: #111833;
 }
 
+
 /* layout */
-.content {
-	max-width: 50em;
-	padding: 0 0.5em;
-	margin: 0 auto;
-}
 
 main {
-	clear: both;
+    /* for page and article template */
-	background-color: #fff;
+    clear: both;
-	overflow: auto;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.content {
+    /* move font a little down */
+    padding-top: 10px;
+}
+
+.frontpage {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #111833;
+    color: white;
+}
+
+.frontpage>main {
+    /* width: 60em;
+    max-width: 100%;
+    margin: 0 auto; */
+}
+
+.hero-row {
+    display: flex;
+}
+
+.hero-row > * {
+    width: 33.33%;
+}
+
+.hero-3d-text {
+    height: auto;
+    margin: 0;
 }
 
 article {
-	padding: 1rem 0;
+    /* for page and article template */
+    /* Distance left, right 1em */
+    padding: 0 1em;
+    /* Distance top 2em for content */
+    padding-top: 2em;
+    flex-grow: 1;
 }
 
-header, footer {
+article a:link,
-	clear: both;
+article a:visited,
-	width: 100%;
+article a:hover {
-	overflow: auto;
+    color: #2092bc;
-	background-color: #eee;
+}
+
+article a:hover {
+    text-decoration: underline;
+}
+
+header {
+    background-color: #111833;
+    border-bottom: solid;
+    color: #66fcf1;
+    display: flex;
+    flex-direction: column;
+    padding: 7px 1em 0;
 }
 
 footer {
-	font-size: 0.85em;
+    /* footer global */
-	padding: 1em;
+    clear: both;
-	text-align: center;
+    background-color: #f7f2ea;
+    margin-top: 2em;
+    font-size: 0.90em;
+    padding: 1em;
+    text-align: center;
 }
 
 footer p {
-	margin: 0;
+    margin: 0;
+}
+
+footer a:link,
+footer a:visited,
+footer a:hover {
+    color: #2092bc;
+}
+
+footer a:hover {
+    text-decoration: underline;
 }
 
 .logo {
-	font-size: 1.5em;
+    font-size: 1.5em;
-	margin: 0.2em 0 0 0;
+    margin: 0.2em 0 0 0;
 }
 
 .logo a {
-	padding: 0.2em 0;
+    padding: 0.2em 0;
-	color: #999;
+    color: #66fcf1;
 }
 
-/* navigation */
+
+/* navigation bar top (nav.main) and left (nav.sub) 
+and article prev/next navigation links (.nav.page) */
+
 .nav ul {
-	display: flex;
+    display: flex;
-	flex-wrap: wrap;
+    flex-wrap: wrap;
-	list-style-type: none;
+    list-style-type: none;
-	margin: 0;
+    margin: 0;
 }
 
 .nav li {
-	flex: 1 1 100%;
+    flex: 1 1 100%;
-	margin: 0;
+    margin: 0;
 }
 
-.nav a, .nav strong {
+.nav a,
-	display: block;
+.nav strong {
-	text-align: center;
+    display: block;
-	white-space: nowrap;
+    text-align: left;
-	padding: 0.6em 0;
+    white-space: nowrap;
+    padding: 0.6em 0;
 }
 
 .nav.main a {
-	color: #222;
+    color: #fff;
+    /* font-size: 1.6em; */
+    text-transform: uppercase;
+    font-weight: bold;
+    font-family: 'Oswald', sans-serif;
 }
 
-.nav a.active, .nav strong {
+.nav.main a:hover {
-	background-color: #fff;
+    color: #c5c6c7;
 }
 
+.nav a.active,
+.nav strong {
+    background-color: #111833;
+}
+
+
+/* this is the prev-next-link at bottom in articles */
+
 .nav.page {
-	margin-top: 1.5em;
+    margin-top: 1.5em;
-	border-top: 1px solid #ccc;
+    border-top: 1px solid #ccc;
-	border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+}
+
+
+/* this is the left vertical navigation bar */
+
+.subpages .nav.sub {
+    background-color: #111833;
+    color: #fff;
+    font-size: 0.9em;
+}
+
+.subpages .nav.sub a {}
+
+.subpages .nav.sub a:hover {
+    /* color: #c5c6c7; */
+    text-decoration: underline;
 }
 
 @media (min-width: 16em) {
-
+    .nav li {
-	.nav li {
+        flex: 1 1 50%;
-		flex: 1 1 50%;
+    }
-	}
-
 }
 
-@media (min-width: 32em) {
+main>.content {
-
+    display: flex;
-	header {
+    flex-direction: column;
-		position: fixed;
+    flex-grow: 1;
-		top: 0;
+    padding-top: 0;
-	}
+}
-
+
-	.logo {
+
-		float: left;
+/* styles.css | http://localhost:3000/css/styles.css */
-	}
+
-
+@media (min-width: 50em) {
-	.nav.main {
+    header {
-		float: right;
+        /* header global */
-	}
+        position: fixed;
-
+        flex-direction: row;
-	.nav li {
+        align-items: center;
-		flex: 1 1 auto;
+        width: 100%;
-	}
+        height: 60px;
-
+        top: 0;
-	.nav.main li {
+        padding: 0 1em;
-		width: 6em;
+    }
-	}
+    .nav.main {
-
+        margin-left: auto;
-	main {
+        margin-right: 20px;
-		padding: 3em 0 2em 0;
+    }
-	}
+    .nav li {
-
+        flex: 1 1 auto;
-	.subpages .content {
+    }
-		display: flex;
+    .nav.main li {
-	}
+        padding: 0 0.5em;
-
+    }
-	.subpages article {
+    main {
-		flex: 1 1 70%;
+        /* global template */
-		min-width: 0;
+        padding-top: 60px;
-	}
+    }
-
+    .subpages .content {
-	.subpages .nav.sub {
+        /* article template */
-		flex: 1 1 30%;
+        margin-left: 310px;
-		margin: 0 0 0 2rem;
+    }
-	}
+    .subpages article {
-
+        /* article template */
-	.nav.sub ul {
+        /* min-width for text content, eg "next: xxx" */
-		margin-top: 1em;
+        min-width: 100%;
-		flex-direction: column;
+    }
-		border-top: 1px dotted #ccc;
+    .subpages .nav.sub {
-	}
+        /* article template */
-
+        width: 310px;
-	.nav.sub li {
+        position: fixed;
-		border-bottom: 1px dotted #ccc;
+        top: 60px;
-	}
+        left: 0;
-
+        bottom: 0;
-	.nav.sub a, .nav.sub strong {
+        overflow-x: hidden;
-		text-align: left;
+        overflow-y: scroll;
-		padding-left: 0.75em;
+        padding-top: 35px;
-	}
+        padding-left: 25px
-
+    }
-	.nav.page a {
+    .nav.sub ul {
-		text-align: left;
+        /* margin-top: 1em; */
-		padding-left: 0.5em;
+        flex-direction: column;
-		padding-right: 0.5em;
+        /* border above first link */
-	}
+        /* border-top: 1px solid rgb(185, 27, 27); */
-
+    }
-	.nav.page a.next {
+    .nav.sub li {
-		text-align: right;
+        /* put smth around nav.sub links */
-	}
+        /* border-bottom: 1px solid rgb(58, 17, 17); */
-
+    }
+    .nav.sub a,
+    .nav.sub strong {
+        text-align: left;
+        padding-left: 0.75em;
+        font-family: 'Open Sans', sans-serif;
+        font-size: 1.05em;
+    }
+    .nav.page a {
+        text-align: left;
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+    }
+    .nav.page a.next {
+        text-align: right;
+    }
+    article {
+        padding-left: 4em;
+        padding-right: 4em;
+    }
+}
+
+.theme-orange {
+    --headerColor: #FF6028;
+}
+.theme-magenta {
+    --headerColor: #FD1D56;
+}
+.theme-yellow {
+    --headerColor: #FDA828;
+}
+
+section h1, section h2, section h3 {
+    color: var(--headerColor);
 }

src/html.old/docs/index.md

@@ -1,5 +1,5 @@
 ---
-title: Start
+title: docs
 priority: 0.9
 ---
 

src/html/blog/Welcome.md

@@ -0,0 +1,9 @@
+---
+title: Welcome
+description: A set of articles published on this site.
+priority: 0.59
+---
+
+## Hello World
+
+Welcome to Dash Data-Contracts

src/html/blog/index.md

@@ -0,0 +1,7 @@
+---
+title: Blog
+description: A set of articles published on this site.
+priority: 0.6
+---
+
+A selection of articles is available in this section.

src/html/boxes/Bare Box.md

@@ -0,0 +1,8 @@
+---
+title: Bare Box
+priority: 0.79
+---
+
+# Bare Box
+
+WIP

src/html/boxes/Chrome Extension Example.md

@@ -0,0 +1,8 @@
+---
+title: Chrome Extension Example
+priority: 0.76
+---
+
+# Chrome Extension Example
+
+WIP

src/html/boxes/Chrome Extension.md

@@ -0,0 +1,8 @@
+---
+title: Chrome Extension
+priority: 0.78
+---
+
+# Chrome Extension
+
+WIP

src/html/boxes/DashJS HTML-JS Example.md

@@ -0,0 +1,8 @@
+---
+title: DashJS HTML-JS Example
+priority: 0.77
+---
+
+# DashJS HTML-JS Example
+
+WIP

src/html/boxes/index.md

@@ -0,0 +1,6 @@
+---
+title: boxes
+priority: 0.8
+---
+
+This section provides an overview of core code and concepts.

src/html/contact/index.md

@@ -1,6 +1,6 @@
 ---
 title: Contact
-priority: 0.7
+priority: 0.5
 ---
 
 Any questions?

src/html/docs/blockman.md

@@ -0,0 +1,9 @@
+---
+title: blockman
+description: WIP from the cloud on wheels
+image: images/docs/blockman-docs-pinkish.png
+priority: 0.7
+---
+
+
+WIP from the cloud on wheels

src/html/docs/dashbox.md

@@ -0,0 +1,80 @@
+---
+title: dashbox
+description: Simple development framework for Dash Platform
+image: images/docs/dashbox-docs-white-single.png
+priority: 0.8
+---
+
+
+DashBox - Simple development framework for [Dash](https://www.dash.org) [Platform](https://www.dashdevs.org). Making developers life easier.
+
+
+## Features
+
+- Load Templates, Examples and Tutorials for different use cases and knowledge levels
+- Automated software testing with Mocha and Chai
+- Configurable build pipeline and build processes
+- Scriptable deployment and migrations framework
+
+## Required
+
+- Git
+
+## Install
+
+```
+$ npm install -g dashbox
+``` 
+
+## Usage - Load default box
+
+For a default template-set of contracts, tests and migrations run the following command inside an empty project directory:
+
+```
+$ dashbox init
+``` 
+That's it! This loads the default minimal template (bare-box).
+
+## Usage - Load custom box
+
+For a custom and more advanced Template / Example / Tutorial run following command inside an empty project directory:
+
+```
+$ dashbox load <source-box>
+```
+eg.
+
+```
+$ dashbox load dashjs-html-js-example
+$ dashbox load chrome-extension
+$ dashbox load chrome-extension-example
+$ dashbox load chrome-extension-wallet-tutorial (WIP)
+``` 
+
+View all available boxes on https://github.com/dashdev-box
+
+## Create - Your own box
+
+- Start with an empty directory, [bare-box](https://github.com/dashdev-box/bare-box) or [dashjs-html-js-example-box](https://github.com/dashdev-box/dashjs-html-js-example-box)
+
+- Add everything you need and use [dashbox-init.json](https://github.com/dashdev-box/dashjs-html-js-example-box/blob/master/dashbox-init.json) to add post-installation commands
+
+- Test your box:
+
+```
+dashbox load https://<custom-github-repo>
+```
+
+### Documentation
+
+```
+Usage: dashbox <command> [parameter]
+
+Options:
+  -v, --version    output version number
+  -h, --help       output usage information
+
+Commands:
+  init|i           Load default Template-box (bare-box) into current directory
+  load|l <source>  Load custom Template-box from https://github.com/dashdev-box into current directory
+```

src/html/docs/index.md

@@ -0,0 +1,6 @@
+---
+title: docs
+priority: 0.9
+---
+
+This section provides an overview of core code and concepts.

src/html/index.md

@@ -1,22 +1,8 @@
 ---
 title:
-description: A static HTML-only website generated using Metalsmith.io.
+description: Frontpage 
 priority: 1.0
 ---
 
-[![Node.js]({{ root }}images/nodejs.png)](http://dash.org/)
+<!-- [Get started&hellip;]({{ root }}docs/) -->
-
+<!-- <span style="color:red"> [Get started&hellip;]({{ root }}docs/) </span> -->
-This is a static website generated using the Node.js-powered **[Metalsmith](http://metalsmith.io)** and various published and custom plugins.
-
-This is a demonstration rather than a recommended way to build a static site. Your requirements will be different. Please use any part of the code as you wish.
-
-## Where could you use Metalsmith?
-Metalsmith could be used to create:
-
-* a fast static website with minimal server-side requirements
-* technical documentation
-* an eBook
-* application prototypes
-* build tools or project scaffolding
-
-[Get started&hellip;]({{ root }}start/)

src/html/tutorials/Dash Wallet Chrome Extension.md

@@ -0,0 +1,8 @@
+---
+title: Dash Wallet Chrome Extension
+priority: 0.6
+---
+
+# Dash Wallet Chrome Extension
+
+WIP

src/html/tutorials/index.md

@@ -0,0 +1,8 @@
+---
+title: Tutorials
+priority: 0.7
+---
+
+# Dash Wallet Chrome Extension
+
+WIP

src/layouts/article.hbs

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	{{> meta }}
+</head>
+
+<body>
+
+	{{> header }}
+
+	<main{{#if navsub}} class="subpages" {{/if}}>
+
+		<div class="content">
+
+			{{> navsub }}
+			
+			<article>
+
+				<h1>{{ title }}</h1>
+
+				{{#if isPage}}
+				{{else}}
+
+				<p class="articleinfo">Published {{ dateFormat }}, {{ wordCount }} words, {{ readingTime }}-minute read</p>
+
+				{{/if}}
+
+				{{{ contents }}}
+
+				{{#if isPage}}
+
+				{{> pagelist }}
+
+				{{else}}
+
+				<nav class="nav page">
+					<ul>
+
+						{{#if previous.title }}
+						<li><a href="{{ root }}{{ previous.path }}/" class="back">&laquo; back: {{ previous.title }}</a></li>
+						</p>
+						{{/if}}
+
+						{{#if next.title }}
+						<li><a href="{{ root }}{{ next.path }}/" class="next">next: {{ next.title }} &raquo;</a></li>
+						</p>
+						{{/if}}
+
+					</ul>
+				</nav>
+
+				{{/if}}
+
+			</article>
+
+			{{> footer template='article' }}
+
+		</div>
+
+		</main>
+
+</body>
+
+</html>

src/layouts/blog.hbs

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	{{> meta }}
+</head>
+
+<body>
+
+	{{> header }}
+
+	<main{{#if navsub}} class="subpages" {{/if}}>
+
+		<div class="content">
+
+			{{> navsub }}
+			
+			<article>
+
+				<h1>{{ title }}</h1>
+
+				{{#if isPage}}
+				{{else}}
+
+				<p class="articleinfo">Published {{ dateFormat }}, {{ wordCount }} words, {{ readingTime }}-minute read</p>
+
+				{{/if}}
+
+				{{{ contents }}}
+
+				{{#if isPage}}
+
+				{{> pagelist }}
+
+				{{else}}
+
+				<nav class="nav page">
+					<ul>
+
+						{{#if previous.title }}
+						<li><a href="{{ root }}{{ previous.path }}/" class="back">&laquo; back: {{ previous.title }}</a></li>
+						</p>
+						{{/if}}
+
+						{{#if next.title }}
+						<li><a href="{{ root }}{{ next.path }}/" class="next">next: {{ next.title }} &raquo;</a></li>
+						</p>
+						{{/if}}
+
+					</ul>
+				</nav>
+
+				{{/if}}
+
+			</article>
+
+			{{> footer template='article' }}
+
+		</div>
+
+		</main>
+
+</body>
+
+</html>

src/layouts/boxes.hbs

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	{{> meta }}
+</head>
+
+<body>
+
+	{{> header }}
+
+	{{!-- <main{{#if navsub}} class="subpages" {{/if}}> --}}
+		<main>
+			
+		<div class="content">
+
+			{{!-- {{> navsub }} --}}
+			
+			<article>
+
+				<h1>{{ title }}</h1>
+
+				{{#if isPage}}
+				{{else}}
+
+				<p class="articleinfo">Published {{ dateFormat }}, {{ wordCount }} words, {{ readingTime }}-minute read</p>
+
+				{{/if}}
+
+				{{{ contents }}}
+
+				{{#if isPage}}
+
+				{{> pagelist }}
+
+				{{else}}
+				
+
+				{{/if}}
+
+			</article>
+
+			{{> footer template='article' }}
+
+		</div>
+
+		</main>
+
+</body>
+
+</html>

src/layouts/docs.hbs

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	{{> meta }}
+</head>
+
+<body>
+
+	{{> header }}
+
+	<main{{#if navsub}} class="subpages" {{/if}}>
+
+		<div class="content">
+
+			{{> navsub }}
+			
+			<article>
+
+				<h1>{{ title }}</h1>
+
+				{{#if isPage}}
+				{{else}}
+
+				<p></p>
+
+				{{/if}}
+
+				{{{ contents }}}
+
+				{{#if isPage}}
+
+				{{> pagelist-docs }}
+
+				{{else}}
+
+				<nav class="nav page">
+					<ul>
+
+						{{#if previous.title }}
+						<li><a href="{{ root }}{{ previous.path }}/" class="back">&laquo; back: {{ previous.title }}</a></li>
+						</p>
+						{{/if}}
+
+						{{#if next.title }}
+						<li><a href="{{ root }}{{ next.path }}/" class="next">next: {{ next.title }} &raquo;</a></li>
+						</p>
+						{{/if}}
+
+					</ul>
+				</nav>
+
+				{{/if}}
+
+			</article>
+
+			{{#if isPage}}
+			{{else}}
+			{{> footer template='article' }}
+			{{/if}}
+			
+		</div>
+
+		</main>
+
+</body>
+
+</html>

src/layouts/frontpage.hbs

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	{{> meta }}
+</head>
+<body>
+	{{> header }}
+	<div class="frontpage">
+		<main>
+			<div class="hero">
+				<div class="hero-row">
+					<img class="hero-left-screen" src="{{root}}images/front/data-contract-3d.png" />
+					<div class="hero-title">
+						<h2>Tools, Examples and Inspiration for Data Contracts</h2>
+						<div class="hero-subtitle">Dashdev-Suite Dapp Framework. Making developers life easier.</div>
+					</div>
+					{{!-- <img src="" alt="" class="hero-right-screen"> --}}
+				</div>
+				<div class="hero-row">
+					<a href="{{ root }}docs/">
+						<img class="hero-3d-text" src="{{ root }}images/front/dashbox-front-orange.png" alt="dashbox">
+					</a>
+					<a href="{{ root }}docs/">
+						<img class="hero-3d-text" src="{{ root }}images/front/blockman-front-red.png" alt="blockman">
+					</a>
+					<a href="{{ root }}docs/">
+						<img class="hero-3d-text" src="{{ root }}images/front/reactvue-front-yellow.png" alt="reactvue">
+					</a>
+				</div>
+			</div>
+			{{!-- <section class="theme-orange">
+				<h2>Dashbox</h2>
+				<p>text about dashbox</p>
+			</section>
+			<section class="theme-magenta">
+				<h2>Blockman</h2>
+				<p>text about blockman</p>
+			</section>
+			<section class="theme-yellow">
+				<h2>Dashbox</h2>
+				<p>text about reactvue</p>
+			</section> --}}
+		</main>
+	</div>
+</body>
+</html>

src/layouts/page.hbs

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	{{> meta }}
+</head>
+
+<body>
+
+	{{> header }}
+
+	{{!-- removed since there is no navsub (sidebar) in page layout --}}
+	{{!-- <main{{#if navsub}} class="subpages"{{/if}}> --}}
+	<main>
+
+		<div class="content">
+
+			{{!-- {{> navsub }} --}}
+
+			<article>
+
+				{{#if title}}
+				<h1>{{ title }}</h1>
+				{{/if}}
+
+				{{{ contents }}}
+
+			</article>
+
+		</div>
+
+	</main>
+
+	 {{!-- {{> footer template='page' }} --}}
+
+</body>
+
+</html>

src/layouts/tutorials.hbs

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	{{> meta }}
+</head>
+
+<body>
+
+	{{> header }}
+
+	<main{{#if navsub}} class="subpages" {{/if}}>
+
+		<div class="content">
+
+			{{> navsub }}
+			
+			<article>
+
+				<h1>{{ title }}</h1>
+
+				{{#if isPage}}
+				{{else}}
+
+				<p class="articleinfo">Published {{ dateFormat }}, {{ wordCount }} words, {{ readingTime }}-minute read</p>
+
+				{{/if}}
+
+				{{{ contents }}}
+
+				{{#if isPage}}
+
+				{{> pagelist }}
+
+				{{else}}
+
+				<nav class="nav page">
+					<ul>
+
+						{{#if previous.title }}
+						<li><a href="{{ root }}{{ previous.path }}/" class="back">&laquo; back: {{ previous.title }}</a></li>
+						</p>
+						{{/if}}
+
+						{{#if next.title }}
+						<li><a href="{{ root }}{{ next.path }}/" class="next">next: {{ next.title }} &raquo;</a></li>
+						</p>
+						{{/if}}
+
+					</ul>
+				</nav>
+
+				{{/if}}
+
+			</article>
+
+			{{> footer template='article' }}
+
+		</div>
+
+		</main>
+
+</body>
+
+</html>