Add support for light themes from bootswatch

docs/_markbind/navigation/userGuideSections.md

@@ -15,6 +15,7 @@
   * [Making the Site Searchable]({{baseUrl}}/userGuide/makingTheSiteSearchable.html)
 * [Deploying the Site]({{baseUrl}}/userGuide/deployingTheSite.html)
 * [MarkBind in the Project Workflow]({{baseUrl}}/userGuide/markBindInTheProjectWorkflow.html)
+* [Themes]({{baseUrl}}/userGuide/themes.html)
 * References :expanded:
   * [CLI Commands]({{baseUrl}}/userGuide/cliCommands.html)
   * [Reader-Facing Features]({{baseUrl}}/userGuide/readerFacingFeatures.html)

docs/css/main.css

@@ -8,3 +8,7 @@ mark {
 .indented {
     padding-left: 20px;
 }
+
+.theme-card img {
+    width: 100%;
+}

docs/userGuide/markBindInTheProjectWorkflow.md

@@ -38,4 +38,4 @@ Similarly, you can keep the dev docs in a separate directory (sey `dev-docs`) an
 </div>
 
 {% from "njk/common.njk" import previous_next %}
-{{ previous_next('deployingTheSite', '') }}
+{{ previous_next('deployingTheSite', 'themes') }}

docs/userGuide/siteConfiguration.md

@@ -21,6 +21,7 @@ Here is a typical `site.json` file:
   "baseUrl": "/myproduct",
   "faviconPath": "myfavicon.png",
   "titlePrefix": "FooBar Dev Docs",
+  "theme": "bootswatch-cerulean",
   "pages": [
     {
       "src": "index.md",
@@ -78,6 +79,11 @@ Here is a typical `site.json` file:
 **The prefix for all page titles.** The separator <code>-</code> will be inserted by MarkBind.
 
 
+#### **`theme`**
+
+_(Optional)_ **The theme for the generated site.** Uses the default Bootstrap theme if not specified. See [User Guide: Themes](themes.html) for more details.
+
+
 #### **`pages`**
 
 **An array of pages to be rendered.**

docs/userGuide/themes.md

@@ -0,0 +1,61 @@
+<variable name="title" id="title">Themes</variable>
+<frontmatter>
+  title: "User Guide: {{ title }}"
+  footer: footer.md
+  siteNav: userGuideSections.md
+</frontmatter>
+
+<include src="../common/header.md" />
+
+# {{ title }}
+
+<span class="lead">
+
+**MarkBind supports the ability to style your website with a variety of themes.**
+
+</span>
+
+#### Specifying a Theme
+
+You can specify a theme for your site by using the [`theme` property of the `site.json`](siteConfiguration.html#theme). For example, to apply the Cerulean theme, add `"theme": "bootswatch-cerulean"` to your `site.json`.
+
+If no `theme` property is specified, your site will be styled with default Bootstrap theme.
+
+#### Supported Themes
+
+Currently, MarkBind supports all light themes from [Bootswatch](https://bootswatch.com/). Visit each of the theme pages below to see how different visual components are styled.
+
+{% set bootswatchThemes = [
+  'cerulean',
+  'cosmo',
+  'flatly',
+  'journal',
+  'litera',
+  'lumen',
+  'lux',
+  'materia',
+  'minty',
+  'pulse',
+  'sandstone',
+  'simplex',
+  'sketchy',
+  'spacelab',
+  'united',
+  'yeti'
+] %}
+
+<div class="container-fluid">
+<div class="row">
+  {% for theme in bootswatchThemes %}
+  <div class="theme-card col-sm-6 col-xl-4">
+    <box>
+      <markdown>###### `bootswatch-{{ theme }}`</markdown>
+      <a href="https://bootswatch.com/{{ theme }}/"><img src="../images/bootswatch/{{ theme }}.png" /></a>
+    </box>
+  </div>
+  {% endfor %}
+</div>
+</div>
+
+{% from "njk/common.njk" import previous_next %}
+{{ previous_next('markBindInTheProjectWorkflow', '') }}

package.json

@@ -20,6 +20,7 @@
     "@fortawesome/fontawesome-free": "^5.7.2",
     "@sindresorhus/slugify": "^0.8.0",
     "bluebird": "^3.4.7",
+    "bootswatch": "^4.3.1",
     "chalk": "^1.1.3",
     "cheerio": "^0.22.0",
     "chokidar": "^1.6.1",

src/Site.js

@@ -11,8 +11,10 @@ const walkSync = require('walk-sync');
 
 const _ = {};
 _.difference = require('lodash/difference');
+_.has = require('lodash/has');
 _.isBoolean = require('lodash/isBoolean');
 _.isUndefined = require('lodash/isUndefined');
+_.noop = require('lodash/noop');
 _.omitBy = require('lodash/omitBy');
 _.union = require('lodash/union');
 _.uniq = require('lodash/uniq');
@@ -53,6 +55,29 @@ const LAYOUT_SCRIPTS_PATH = 'scripts.js';
 const LAYOUT_SITE_FOLDER_NAME = 'layouts';
 const USER_VARIABLES_PATH = '_markbind/variables.md';
 
+function getBootswatchThemePath(theme) {
+  return path.join(__dirname, '..', 'node_modules', 'bootswatch', 'dist', theme, 'bootstrap.min.css');
+}
+
+const SUPPORTED_THEMES_PATHS = {
+  'bootswatch-cerulean': getBootswatchThemePath('cerulean'),
+  'bootswatch-cosmo': getBootswatchThemePath('cosmo'),
+  'bootswatch-flatly': getBootswatchThemePath('flatly'),
+  'bootswatch-journal': getBootswatchThemePath('journal'),
+  'bootswatch-litera': getBootswatchThemePath('litera'),
+  'bootswatch-lumen': getBootswatchThemePath('lumen'),
+  'bootswatch-lux': getBootswatchThemePath('lux'),
+  'bootswatch-materia': getBootswatchThemePath('materia'),
+  'bootswatch-minty': getBootswatchThemePath('minty'),
+  'bootswatch-pulse': getBootswatchThemePath('pulse'),
+  'bootswatch-sandstone': getBootswatchThemePath('sandstone'),
+  'bootswatch-simplex': getBootswatchThemePath('simplex'),
+  'bootswatch-sketchy': getBootswatchThemePath('sketchy'),
+  'bootswatch-spacelab': getBootswatchThemePath('spacelab'),
+  'bootswatch-united': getBootswatchThemePath('united'),
+  'bootswatch-yeti': getBootswatchThemePath('yeti'),
+};
+
 const SITE_CONFIG_DEFAULT = {
   baseUrl: '',
   titlePrefix: '',
@@ -830,7 +855,24 @@ Site.prototype.copyFontAwesomeAsset = function () {
  * Copies MarkBind assets to the assets folder
  */
 Site.prototype.copyMarkBindAsset = function () {
-  return fs.copyAsync(this.siteAssetsSrcPath, this.siteAssetsDestPath);
+  const maybeOverrideDefaultBootstrapTheme = () => {
+    const { theme } = this.siteConfig;
+    if (!theme || !_.has(SUPPORTED_THEMES_PATHS, theme)) {
+      return _.noop;
+    }
+
+    const themeSrcPath = SUPPORTED_THEMES_PATHS[theme];
+    const themeDestPath = path.join(this.siteAssetsDestPath, 'css', 'bootstrap.min.css');
+
+    return new Promise((resolve, reject) => {
+      fs.copyAsync(themeSrcPath, themeDestPath)
+        .then(resolve)
+        .catch(reject);
+    });
+  };
+
+  return fs.copyAsync(this.siteAssetsSrcPath, this.siteAssetsDestPath)
+    .then(maybeOverrideDefaultBootstrapTheme);
 };
 
 /**