Add bootswatch theme specific tip box styles

asset/css/bootstrap-markbind.css

@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #ffd960;
+    color: #6d550f;
+}
+
+.alert-info-darker {
+    background-color: #37bbd3;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #53de53bd;
+    color: #181918bd;
+}
+
+.alert-danger-darker {
+    background-color: #f05151db;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}

index.js

@@ -98,6 +98,7 @@ program
   .option('-o, --one-page <file>', 'render and serve only a single page in the site')
   .option('-p, --port <port>', 'port for server to listen on (Default is 8080)')
   .option('-s, --site-config <file>', 'specify the site config file (default: site.json)')
+  .option('-d, --dev', 'enables some developer options')
   .action((userSpecifiedRoot, options) => {
     let rootFolder;
     try {
@@ -114,7 +115,8 @@ program
       options.onePage = ensurePosix(options.onePage);
     }
 
-    const site = new Site(rootFolder, outputFolder, options.onePage, options.forceReload, options.siteConfig);
+    const site = new Site(rootFolder, outputFolder, options.onePage, options.forceReload, options.siteConfig,
+                          options.dev);
 
     const addHandler = (filePath) => {
       logger.info(`[${new Date().toLocaleTimeString()}] Reload for file add: ${filePath}`);

src/Site.js

@@ -64,6 +64,10 @@ function getBootswatchThemePath(theme) {
   return path.join(__dirname, '..', 'node_modules', 'bootswatch', 'dist', theme, 'bootstrap.min.css');
 }
 
+function getExtraBootswatchThemePath(theme) {
+  return path.join(__dirname, 'lib', 'bootswatch', 'src', theme, 'bootstrap-markbind.css');
+}
+
 const SUPPORTED_THEMES_PATHS = {
   'bootswatch-cerulean': getBootswatchThemePath('cerulean'),
   'bootswatch-cosmo': getBootswatchThemePath('cosmo'),
@@ -83,6 +87,25 @@ const SUPPORTED_THEMES_PATHS = {
   'bootswatch-yeti': getBootswatchThemePath('yeti'),
 };
 
+const SUPPORTED_THEMES_EXTRAS_PATHS = {
+  'bootswatch-cerulean': getExtraBootswatchThemePath('cerulean'),
+  'bootswatch-cosmo': getExtraBootswatchThemePath('cosmo'),
+  'bootswatch-flatly': getExtraBootswatchThemePath('flatly'),
+  'bootswatch-journal': getExtraBootswatchThemePath('journal'),
+  'bootswatch-litera': getExtraBootswatchThemePath('litera'),
+  'bootswatch-lumen': getExtraBootswatchThemePath('lumen'),
+  'bootswatch-lux': getExtraBootswatchThemePath('lux'),
+  'bootswatch-materia': getExtraBootswatchThemePath('materia'),
+  'bootswatch-minty': getExtraBootswatchThemePath('minty'),
+  'bootswatch-pulse': getExtraBootswatchThemePath('pulse'),
+  'bootswatch-sandstone': getExtraBootswatchThemePath('sandstone'),
+  'bootswatch-simplex': getExtraBootswatchThemePath('simplex'),
+  'bootswatch-sketchy': getExtraBootswatchThemePath('sketchy'),
+  'bootswatch-spacelab': getExtraBootswatchThemePath('spacelab'),
+  'bootswatch-united': getExtraBootswatchThemePath('united'),
+  'bootswatch-yeti': getExtraBootswatchThemePath('yeti'),
+};
+
 const ABOUT_MARKDOWN_DEFAULT = '# About\n'
   + 'Welcome to your **About Us** page.\n';
 
@@ -101,7 +124,8 @@ const TOP_NAV_DEFAULT = '<header><navbar placement="top" type="inverse">\n'
 
 const MARKBIND_LINK_HTML = `<a href='${MARKBIND_WEBSITE_URL}'>MarkBind ${CLI_VERSION}</a>`;
 
-function Site(rootPath, outputPath, onePagePath, forceReload = false, siteConfigPath = SITE_CONFIG_NAME) {
+function Site(rootPath, outputPath, onePagePath, forceReload = false, siteConfigPath = SITE_CONFIG_NAME,
+              dev = false) {
   this.rootPath = rootPath;
   this.outputPath = outputPath;
   this.tempPath = path.join(rootPath, TEMP_FOLDER_NAME);
@@ -120,6 +144,7 @@ function Site(rootPath, outputPath, onePagePath, forceReload = false, siteConfig
   this.baseUrlMap = new Set();
   this.forceReload = forceReload;
   this.onePagePath = onePagePath;
+  this.dev = dev;
   this.plugins = {};
   this.siteConfig = {};
   this.siteConfigPath = siteConfigPath;
@@ -241,6 +266,9 @@ Site.prototype.createPage = function (config) {
                                 path.join(this.siteAssetsDestPath, 'css', 'page-nav.css')),
       siteNavCss: path.relative(path.dirname(resultPath),
                                 path.join(this.siteAssetsDestPath, 'css', 'site-nav.css')),
+      bootstrapMarkbindCss: path.relative(path.dirname(resultPath),
+                                          path.join(this.siteAssetsDestPath, 'css',
+                                                    'bootstrap-markbind.css')),
       bootstrapUtilityJs: path.relative(path.dirname(resultPath),
                                         path.join(this.siteAssetsDestPath, 'js', 'bootstrap-utility.min.js')),
       bootstrapVueJs: path.relative(path.dirname(resultPath),
@@ -898,6 +926,17 @@ Site.prototype.copyFontAwesomeAsset = function () {
  * Copies MarkBind assets to the assets folder
  */
 Site.prototype.copyMarkBindAsset = function () {
+  const maybeOverrideDefaultBootstrapThemeExtras = (theme) => {
+    if (!_.has(SUPPORTED_THEMES_EXTRAS_PATHS, theme)) {
+      return _.noop;
+    }
+
+    const themeSrcPath = SUPPORTED_THEMES_EXTRAS_PATHS[theme];
+    const themeDestPath = path.join(this.siteAssetsDestPath, 'css', 'bootstrap-markbind.css');
+
+    return fs.copyAsync(themeSrcPath, themeDestPath);
+  };
+
   const maybeOverrideDefaultBootstrapTheme = () => {
     const { theme } = this.siteConfig;
     if (!theme || !_.has(SUPPORTED_THEMES_PATHS, theme)) {
@@ -907,15 +946,39 @@ Site.prototype.copyMarkBindAsset = function () {
     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(themeSrcPath, themeDestPath)
+      .then(maybeOverrideDefaultBootstrapThemeExtras(theme));
+  };
+
+  const maybeDevCopyAllThemes = () => {
+    if (!this.dev) {
+      return;
+    }
+    logger.info('Dev mode enabled, copying all stylesheets');
+
+    const copyBootSwatchThemes = Object.values(SUPPORTED_THEMES_PATHS).map((themeSrcPath, index) => {
+      const themeDestPath = path.join(this.siteAssetsDestPath, 'dev', 'css',
+                                      'bootswatch', (index + 1).toString(10), 'bootstrap.min.css');
+
+      return fs.copyAsync(themeSrcPath, themeDestPath);
     });
+
+    const copyBootSwatchExtraThemes = Object.values(SUPPORTED_THEMES_EXTRAS_PATHS)
+      .map((themeSrcPath, index) => {
+        const themeDestPath = path.join(this.siteAssetsDestPath, 'dev', 'css',
+                                        'bootswatchExtras', (index + 1).toString(10),
+                                        'bootstrap-markbind.css');
+        return fs.copyAsync(themeSrcPath, themeDestPath);
+      });
+
+    const allPromises = copyBootSwatchThemes.concat(copyBootSwatchExtraThemes);
+
+    Promise.all(allPromises);
   };
 
   return fs.copyAsync(this.siteAssetsSrcPath, this.siteAssetsDestPath)
-    .then(maybeOverrideDefaultBootstrapTheme);
+    .then(maybeOverrideDefaultBootstrapTheme)
+    .then(maybeDevCopyAllThemes);
 };
 
 /**

src/lib/bootswatch/src/cerulean/bootstrap-markbind.css

@@ -0,0 +1,22 @@
+.alert-warning-darker {
+    background-color: #fcbe98;
+}
+
+.alert-info-darker {
+    background-color: #75a0cb;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #c5ec9a;
+}
+
+.alert-danger-darker {
+    background-color: #f6494eba;
+    color: #f5f2f2;
+}
+
+.alert-default-darker {
+    background-color: #c6c9cb;
+    color: #2e2f30;
+}

src/lib/bootswatch/src/cosmo/bootstrap-markbind.css

@@ -0,0 +1,23 @@
+.alert-warning-darker {
+    background-color: #fabc94;
+    color: #654937;
+}
+
+.alert-info-darker {
+    background-color: #cb90e3b8;
+    color: #faf8fb;
+}
+
+.alert-success-darker {
+    background-color: #9fe388;
+}
+
+.alert-danger-darker {
+    background-color: #ee5e7db3;
+    color: #f3f1f1;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #454646;
+}

src/lib/bootswatch/src/flatly/bootstrap-markbind.css

@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #d68205;
+    color: #fcfaf8;
+}
+
+.alert-info-darker {
+    background-color: #2180c0;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #118b73;
+    color: #f9fbfa;
+}
+
+.alert-danger-darker {
+    background-color: #c73121ba;
+    color: #f7f5f5;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #000;
+}

src/lib/bootswatch/src/journal/bootstrap-markbind.css

@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f8ee66;
+    color: #5f5b35;
+}
+
+.alert-info-darker {
+    background-color: #87aed9;
+    color: #f5faff;
+}
+
+.alert-success-darker {
+    background-color: #7de399;
+    color: #f9f4f1;
+}
+
+.alert-danger-darker {
+    background-color: #d99f67;
+    color: #f9f4f1;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}

src/lib/bootswatch/src/litera/bootstrap-markbind.css

@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #d58d28;
+    color: #f7f5f3;
+}
+
+.alert-info-darker {
+    background-color: #1c8393d4;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #05935fe3;
+    color: #ecfbf5;
+}
+
+.alert-danger-darker {
+    background-color: #c93b37;
+    color: #f3edec;
+}
+
+.alert-default-darker {
+    background-color: #949698;
+    color: #f9fafb;
+}

src/lib/bootswatch/src/lumen/bootstrap-markbind.css

@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #f27100;
+    color: #f9f8f5;
+}
+
+.alert-info-darker {
+    background-color: #67b5d3;
+    color: #fdf9f9;
+}
+
+.alert-success-darker {
+    background-color: #229925;
+    color: #f5fbf5;
+}
+
+.alert-danger-darker {
+    background-color: #e3392f;
+    color: #fff;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}

src/lib/bootswatch/src/lux/bootstrap-markbind.css

@@ -0,0 +1,24 @@
+.alert-warning-darker {
+    background-color: #fcd295;
+    color: #5a470d;
+}
+
+.alert-info-darker {
+    background-color: #96cfe6;
+    color: #384b52;
+}
+
+.alert-success-darker {
+    background-color: #a5eebe;
+    color: #3b5243;
+}
+
+.alert-danger-darker {
+    background-color: #eea09d;
+    color: #fffafa;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #2e2f30;
+}

src/lib/bootswatch/src/materia/bootstrap-markbind.css

@@ -0,0 +1,33 @@
+.alert-warning-darker {
+    background-color: #f79300;
+    color: #f9f5ef;
+}
+
+.alert-info-darker {
+    background-color: #a120b7;
+    color: #f5f2f2;
+}
+
+.alert-success-darker {
+    background-color: #30a734;
+    color: #f9fbfa;
+}
+
+.alert-danger-darker {
+    background-color: #dc0f17;
+    color: #f7f5f5;
+}
+
+.alert-default-darker {
+    background-color: #afb0b1cc;
+    color: #000;
+}
+
+.alert-border-left {
+    background-image: none;
+}
+
+.tipbox-header-wrapper > .close-with-heading {
+    margin-top: 0.15rem;
+    font-size: 1.8rem;
+}