Refactor initialization code and update typical init

index.js

@@ -47,6 +47,7 @@ program
 program
   .command('init [root]')
   .option('-c, --convert', 'convert a GitHub wiki or docs folder to a MarkBind website')
+  .option('-t, --template <type>', 'initialise markbind with a specified template', 'default')
   .alias('i')
   .description('init a markbind website project')
   .action((root, options) => {
@@ -59,7 +60,7 @@ program
         return;
       }
     }
-    Site.initSite(rootFolder)
+    Site.initSite(rootFolder, options.template)
       .then(() => {
         logger.info('Initialization success.');
       })

src/Site.js

@@ -30,10 +30,10 @@ const delay = require('./util/delay');
 const FsUtil = require('./util/fsUtil');
 const logger = require('./util/logger');
 const Page = require('./Page');
+const Template = require('./template/template');
 
 const CLI_VERSION = require('../package.json').version;
 
-const BOILERPLATE_FOLDER_NAME = '_markbind/boilerplates';
 const CONFIG_FOLDER_NAME = '_markbind';
 const HEADING_INDEXING_LEVEL_DEFAULT = 3;
 const SITE_ASSET_FOLDER_NAME = 'asset';
@@ -46,19 +46,14 @@ const BUILT_IN_PLUGIN_FOLDER_NAME = 'plugins';
 const BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME = 'plugins/default';
 const FAVICON_DEFAULT_PATH = 'favicon.ico';
 const FOOTER_PATH = '_markbind/footers/footer.md';
-const HEADER_PATH = '_markbind/headers/header.md';
-const HEAD_FOLDER_PATH = '_markbind/head';
 const INDEX_MARKDOWN_FILE = 'index.md';
 const MARKBIND_PLUGIN_PREFIX = 'markbind-plugin-';
 const PAGE_TEMPLATE_NAME = 'page.ejs';
 const PROJECT_PLUGIN_FOLDER_NAME = '_markbind/plugins';
 const SITE_CONFIG_NAME = 'site.json';
 const SITE_DATA_NAME = 'siteData.json';
-const SITE_NAV_PATH = '_markbind/navigation/site-nav.md';
 const LAYOUT_DEFAULT_NAME = 'default';
-const LAYOUT_FILES = ['navigation.md', 'head.md', 'footer.md', 'header.md', 'styles.css'];
 const LAYOUT_FOLDER_PATH = '_markbind/layouts';
-const LAYOUT_SCRIPTS_PATH = 'scripts.js';
 const LAYOUT_SITE_FOLDER_NAME = 'layouts';
 const USER_VARIABLES_PATH = '_markbind/variables.md';
 const WIKI_SITE_NAV_PATH = '_Sidebar.md';
@@ -87,72 +82,9 @@ const SUPPORTED_THEMES_PATHS = {
   'bootswatch-yeti': getBootswatchThemePath('yeti'),
 };
 
-const SITE_CONFIG_DEFAULT = {
-  baseUrl: '',
-  titlePrefix: '',
-  ignore: [
-    '_markbind/layouts/*',
-    '_markbind/logs/*',
-    '_site/*',
-    'site.json',
-    '*.md',
-    '*.mbd',
-    '*.mbdf',
-    '*.njk',
-    '.git/*',
-  ],
-  pages: [
-    {
-      src: 'index.md',
-      title: 'Hello World',
-    },
-    {
-      glob: '**/index.md',
-    },
-    {
-      glob: '**/*.+(md|mbd)',
-    },
-  ],
-  deploy: {
-    message: 'Site Update.',
-  },
-};
-
 const ABOUT_MARKDOWN_DEFAULT = '# About\n'
   + 'Welcome to your **About Us** page.\n';
 
-const FOOTER_DEFAULT = '<footer>\n'
-  + '  <div class="text-center">\n'
-  + '    This is a dynamic height footer that supports markdown <md>:smile:</md>!\n'
-  + '  </div>\n'
-  + '  <!-- Support MarkBind by including a link to us on your landing page! -->\n'
-  + '  <div class="text-center">\n'
-  + '    <small>[Generated by {{MarkBind}} on {{timestamp}}]</small>\n'
-  + '  </div>\n'
-  + '</footer>\n';
-
-const HEADER_DEFAULT = '<header>\n'
-  + '  <div class="bg-primary display-4 text-center text-white">\n'
-  + '    <br>\n'
-  + '    Start authoring your MarkBind website.\n'
-  + '    <br>\n'
-  + '    <br>\n'
-  + '  </div>\n'
-  + '</header>\n';
-
-const INDEX_MARKDOWN_DEFAULT = '<frontmatter>\n'
-  + '  title: "Hello World"\n'
-  + '  footer: footer.md\n'
-  + '  header: header.md\n'
-  + '  siteNav: site-nav.md\n'
-  + '</frontmatter>\n\n'
-  + '# Hello world\n'
-  + 'Welcome to your page generated with MarkBind.\n';
-
-const SITE_NAV_DEFAULT = '<navigation>\n'
-  + '* [Home :glyphicon-home:]({{baseUrl}}/index.html)\n'
-  + '</navigation>\n';
-
 const TOP_NAV_DEFAULT = '<header><navbar placement="top" type="inverse">\n'
   + '  <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">'
   + '<i class="far fa-file-image"></i></a>\n'
@@ -166,16 +98,6 @@ const TOP_NAV_DEFAULT = '<header><navbar placement="top" type="inverse">\n'
   + '  </li>\n'
   + '</navbar></header>';
 
-const LAYOUT_SCRIPTS_DEFAULT = '// eslint-disable-next-line no-undef\n'
-  + 'MarkBind.afterSetup(() => {\n'
-  + '  // Include code to be called after MarkBind setup here.\n'
-  + '});\n';
-
-const USER_VARIABLES_DEFAULT = '<variable name="example">\n'
-  + 'To inject this HTML segment in your markbind files, use {{ example }} where you want to place it.\n'
-  + 'More generally, surround the segment\'s id with double curly braces.\n'
-  + '</variable>';
-
 const MARKBIND_WEBSITE_URL = 'https://markbind.org/';
 const MARKBIND_LINK_HTML = `<a href='${MARKBIND_WEBSITE_URL}'>MarkBind ${CLI_VERSION}</a>`;
 
@@ -231,119 +153,15 @@ function setExtension(filename, ext) {
  * Generate the site.json and an index.md file.
  *
  * @param rootPath
+ * @param templatePath
  */
-Site.initSite = function (rootPath) {
-  const boilerplatePath = path.join(rootPath, BOILERPLATE_FOLDER_NAME);
-  const configPath = path.join(rootPath, SITE_CONFIG_NAME);
-  const footerPath = path.join(rootPath, FOOTER_PATH);
-  const headerPath = path.join(rootPath, HEADER_PATH);
-  const headFolderPath = path.join(rootPath, HEAD_FOLDER_PATH);
-  const indexPath = path.join(rootPath, INDEX_MARKDOWN_FILE);
-  const siteNavPath = path.join(rootPath, SITE_NAV_PATH);
-  const siteLayoutPath = path.join(rootPath, LAYOUT_FOLDER_PATH);
-  const siteLayoutDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME);
-  const siteDefaultLayoutScriptsPath = path.join(siteLayoutDefaultPath, LAYOUT_SCRIPTS_PATH);
-  const sitePluginPath = path.join(rootPath, PROJECT_PLUGIN_FOLDER_NAME);
-  const userDefinedVariablesPath = path.join(rootPath, USER_VARIABLES_PATH);
-  // TODO: log the generate info
+Site.initSite = function (rootPath, templatePath) {
   return new Promise((resolve, reject) => {
-    fs.accessAsync(boilerplatePath)
-      .catch(() => {
-        if (fs.existsSync(boilerplatePath)) {
-          return Promise.resolve();
-        }
-        return fs.mkdirp(boilerplatePath);
-      })
-      .then(() => fs.accessAsync(configPath))
-      .catch(() => {
-        if (fs.existsSync(configPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputJsonAsync(configPath, SITE_CONFIG_DEFAULT);
-      })
-      .then(() => fs.accessAsync(indexPath))
-      .catch(() => {
-        if (fs.existsSync(indexPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputFileAsync(indexPath, INDEX_MARKDOWN_DEFAULT);
-      })
-      .then(() => fs.accessAsync(userDefinedVariablesPath))
-      .catch(() => {
-        if (fs.existsSync(userDefinedVariablesPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputFileAsync(userDefinedVariablesPath, USER_VARIABLES_DEFAULT);
-      })
-      .then(() => fs.accessAsync(footerPath))
-      .catch(() => {
-        if (fs.existsSync(footerPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputFileAsync(footerPath, FOOTER_DEFAULT);
-      })
-      .then(() => fs.accessAsync(headerPath))
-      .catch(() => {
-        if (fs.existsSync(headerPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputFileAsync(headerPath, HEADER_DEFAULT);
-      })
-      .then(() => fs.accessAsync(headFolderPath))
-      .catch(() => {
-        if (fs.existsSync(headFolderPath)) {
-          return Promise.resolve();
-        }
-        return fs.mkdirSync(headFolderPath);
-      })
-      .then(() => fs.accessAsync(siteNavPath))
-      .catch(() => {
-        if (fs.existsSync(siteNavPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputFileAsync(siteNavPath, SITE_NAV_DEFAULT);
-      })
-      .then(() => fs.accessAsync(siteLayoutPath))
-      .catch(() => {
-        if (fs.existsSync(siteLayoutPath)) {
-          return Promise.resolve();
-        }
-        return fs.mkdirp(siteLayoutPath);
-      })
-      .then(() => fs.accessAsync(siteLayoutDefaultPath))
-      .catch(() => {
-        if (fs.existsSync(siteLayoutDefaultPath)) {
-          return Promise.resolve();
-        }
-        return fs.mkdirp(siteLayoutDefaultPath);
-      })
-      .then(() => {
-        LAYOUT_FILES.forEach((layoutFile) => {
-          const layoutFilePath = path.join(siteLayoutDefaultPath, layoutFile);
-          fs.accessAsync(layoutFilePath).catch(() => {
-            if (fs.existsSync(layoutFilePath)) {
-              return Promise.resolve();
-            }
-            return fs.outputFileAsync(layoutFilePath, '');
-          });
-        });
-      })
-      .then(() => fs.accessAsync(siteDefaultLayoutScriptsPath))
-      .catch(() => {
-        if (fs.existsSync(siteDefaultLayoutScriptsPath)) {
-          return Promise.resolve();
-        }
-        return fs.outputFileAsync(siteDefaultLayoutScriptsPath, LAYOUT_SCRIPTS_DEFAULT);
-      })
-      .then(() => fs.accessAsync(sitePluginPath))
-      .catch(() => {
-        if (fs.existsSync(sitePluginPath)) {
-          return Promise.resolve();
-        }
-        return fs.mkdirp(sitePluginPath);
-      })
+    new Template(rootPath, templatePath).init()
       .then(resolve)
-      .catch(reject);
+      .catch((err) => {
+        reject(new Error(`Failed to initialize site with given template with error: ${err.message}`));
+      });
   });
 };
 

src/template/default/_markbind/footers/footer.md

@@ -0,0 +1,6 @@
+<footer>
+  <!-- Support MarkBind by including a link to us on your landing page! -->
+  <div class="text-center">
+    <small>[Generated by {{MarkBind}} on {{timestamp}}]</small>
+  </div>
+</footer>

src/template/default/_markbind/headers/header.md

@@ -0,0 +1,16 @@
+<header>
+  <navbar type="dark">
+    <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">Your Logo</a>
+    <li><a href="{{baseUrl}}/contents/topic1.html" class="nav-link">Topic 1</a></li>
+    <li><a href="{{baseUrl}}/contents/topic2.html" class="nav-link">Topic 2</a></li>
+    <dropdown text="Topic 3" class="nav-link">
+      <li><a href="{{baseUrl}}/contents/topic3a.html" class="dropdown-item">Topic 3a</a></li>
+      <li><a href="{{baseUrl}}/contents/topic3b.html" class="dropdown-item">Topic 3b</a></li>
+    </dropdown>
+    <li slot="right">
+      <form class="navbar-form">
+        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+      </form>
+    </li>
+  </navbar>
+</header>

src/template/default/_markbind/layouts/default/scripts.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-undef
+MarkBind.afterSetup(() => {
+  // Include code to be called after MarkBind setup here.
+});

src/template/default/_markbind/navigation/site-nav.md

@@ -0,0 +1,8 @@
+<navigation>
+* [Home :house:]({{ baseUrl }}/index.html)
+* [Topic 1]({{baseUrl}}/contents/topic1.html)
+* [Topic 2]({{baseUrl}}/contents/topic2.html)
+* Topic 3 :expanded:
+  * [Topic 3a]({{baseUrl}}/contents/topic3a.html)
+  * [Topic 3b]({{baseUrl}}/contents/topic3b.html)
+</navigation>

src/template/default/_markbind/variables.md

@@ -0,0 +1,4 @@
+<variable name="example">
+To inject this HTML segment in your markbind files, use {{ example }} where you want to place it.
+More generally, surround the segment's id with double curly braces.
+</variable>

src/template/default/contents/topic1.md

@@ -0,0 +1,10 @@
+<frontmatter>
+  header: header.md
+  siteNav: site-nav.md
+</frontmatter>
+
+<br>
+
+# Topic 1
+
+> More content to be added

src/template/default/contents/topic2.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  header: header.md
+  siteNav: site-nav.md
+</frontmatter>
+
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span>
+</box>

src/template/default/contents/topic3a.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  header: header.md
+  siteNav: site-nav.md
+</frontmatter>
+
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span>
+</box>

src/template/default/contents/topic3b.md

@@ -0,0 +1,9 @@
+<frontmatter>
+  header: header.md
+  siteNav: site-nav.md
+</frontmatter>
+
+<br>
+<box>
+    <span class="fas fa-tools"></span><span> This is a placeholder page</span>
+</box>