diff --git a/docs/_markbind/navigation/userGuideSections.md b/docs/_markbind/navigation/userGuideSections.md index cd897cf806..28d8fd835a 100644 --- a/docs/_markbind/navigation/userGuideSections.md +++ b/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) diff --git a/docs/css/main.css b/docs/css/main.css index 555ff7b116..665302c6b6 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -8,3 +8,7 @@ mark { .indented { padding-left: 20px; } + +.theme-card img { + width: 100%; +} diff --git a/docs/images/bootswatch/cerulean.png b/docs/images/bootswatch/cerulean.png new file mode 100644 index 0000000000..141cdcd131 Binary files /dev/null and b/docs/images/bootswatch/cerulean.png differ diff --git a/docs/images/bootswatch/cosmo.png b/docs/images/bootswatch/cosmo.png new file mode 100644 index 0000000000..fef8736c60 Binary files /dev/null and b/docs/images/bootswatch/cosmo.png differ diff --git a/docs/images/bootswatch/flatly.png b/docs/images/bootswatch/flatly.png new file mode 100644 index 0000000000..80ab9487aa Binary files /dev/null and b/docs/images/bootswatch/flatly.png differ diff --git a/docs/images/bootswatch/journal.png b/docs/images/bootswatch/journal.png new file mode 100644 index 0000000000..ad93d59ff3 Binary files /dev/null and b/docs/images/bootswatch/journal.png differ diff --git a/docs/images/bootswatch/litera.png b/docs/images/bootswatch/litera.png new file mode 100644 index 0000000000..3ef6412be7 Binary files /dev/null and b/docs/images/bootswatch/litera.png differ diff --git a/docs/images/bootswatch/lumen.png b/docs/images/bootswatch/lumen.png new file mode 100644 index 0000000000..8eb8e995c7 Binary files /dev/null and b/docs/images/bootswatch/lumen.png differ diff --git a/docs/images/bootswatch/lux.png b/docs/images/bootswatch/lux.png new file mode 100644 index 0000000000..36b0357924 Binary files /dev/null and b/docs/images/bootswatch/lux.png differ diff --git a/docs/images/bootswatch/materia.png b/docs/images/bootswatch/materia.png new file mode 100644 index 0000000000..d8eb4d547a Binary files /dev/null and b/docs/images/bootswatch/materia.png differ diff --git a/docs/images/bootswatch/minty.png b/docs/images/bootswatch/minty.png new file mode 100644 index 0000000000..948d4d3dcb Binary files /dev/null and b/docs/images/bootswatch/minty.png differ diff --git a/docs/images/bootswatch/pulse.png b/docs/images/bootswatch/pulse.png new file mode 100644 index 0000000000..06c5889f38 Binary files /dev/null and b/docs/images/bootswatch/pulse.png differ diff --git a/docs/images/bootswatch/sandstone.png b/docs/images/bootswatch/sandstone.png new file mode 100644 index 0000000000..50baed8290 Binary files /dev/null and b/docs/images/bootswatch/sandstone.png differ diff --git a/docs/images/bootswatch/simplex.png b/docs/images/bootswatch/simplex.png new file mode 100644 index 0000000000..2306fab895 Binary files /dev/null and b/docs/images/bootswatch/simplex.png differ diff --git a/docs/images/bootswatch/sketchy.png b/docs/images/bootswatch/sketchy.png new file mode 100644 index 0000000000..0c972925c4 Binary files /dev/null and b/docs/images/bootswatch/sketchy.png differ diff --git a/docs/images/bootswatch/spacelab.png b/docs/images/bootswatch/spacelab.png new file mode 100644 index 0000000000..d25cad4594 Binary files /dev/null and b/docs/images/bootswatch/spacelab.png differ diff --git a/docs/images/bootswatch/united.png b/docs/images/bootswatch/united.png new file mode 100644 index 0000000000..5996c62ad0 Binary files /dev/null and b/docs/images/bootswatch/united.png differ diff --git a/docs/images/bootswatch/yeti.png b/docs/images/bootswatch/yeti.png new file mode 100644 index 0000000000..96e23e87b9 Binary files /dev/null and b/docs/images/bootswatch/yeti.png differ diff --git a/docs/userGuide/markBindInTheProjectWorkflow.md b/docs/userGuide/markBindInTheProjectWorkflow.md index 1e0c33efd8..4e18772530 100644 --- a/docs/userGuide/markBindInTheProjectWorkflow.md +++ b/docs/userGuide/markBindInTheProjectWorkflow.md @@ -38,4 +38,4 @@ Similarly, you can keep the dev docs in a separate directory (sey `dev-docs`) an {% from "njk/common.njk" import previous_next %} -{{ previous_next('deployingTheSite', '') }} +{{ previous_next('deployingTheSite', 'themes') }} diff --git a/docs/userGuide/siteConfiguration.md b/docs/userGuide/siteConfiguration.md index a4f53949cf..2661e181c7 100644 --- a/docs/userGuide/siteConfiguration.md +++ b/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 - 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.** diff --git a/docs/userGuide/themes.md b/docs/userGuide/themes.md new file mode 100644 index 0000000000..54e2458a68 --- /dev/null +++ b/docs/userGuide/themes.md @@ -0,0 +1,61 @@ +Themes + + title: "User Guide: {{ title }}" + footer: footer.md + siteNav: userGuideSections.md + + + + +# {{ title }} + + + +**MarkBind supports the ability to style your website with a variety of themes.** + + + +#### 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' +] %} + +
+
+ {% for theme in bootswatchThemes %} +
+ + ###### `bootswatch-{{ theme }}` + + +
+ {% endfor %} +
+
+ +{% from "njk/common.njk" import previous_next %} +{{ previous_next('markBindInTheProjectWorkflow', '') }} diff --git a/package-lock.json b/package-lock.json index 82d9f07ad4..6d879302cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -704,6 +704,11 @@ "hoek": "4.2.1" } }, + "bootswatch": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.3.1.tgz", + "integrity": "sha512-kNdpo/TnhO++aic1IODLIe1V0lx6pXwHMpwXMacpANDnuVDtgU1MUgUbVMC3rSWm4UcbImfwPraNYgjKDT0BtA==" + }, "brace-expansion": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", diff --git a/package.json b/package.json index 727055555e..6303751150 100644 --- a/package.json +++ b/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", diff --git a/src/Site.js b/src/Site.js index af8b789823..96ab50b95d 100644 --- a/src/Site.js +++ b/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); }; /**