diff --git a/src/Page.js b/src/Page.js
index ef8680e7cc..8ec1d80dbd 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -52,1104 +52,1189 @@ const {
 cheerio.prototype.options.xmlMode = true; // Enable xml mode for self-closing tag
 cheerio.prototype.options.decodeEntities = false; // Don't escape HTML entities
 
-function Page(pageConfig) {
-  this.asset = pageConfig.asset;
-  this.baseUrl = pageConfig.baseUrl;
-  this.baseUrlMap = pageConfig.baseUrlMap;
-  this.content = pageConfig.content || '';
-  this.faviconUrl = pageConfig.faviconUrl;
-  this.frontmatterOverride = pageConfig.frontmatter || {};
-  this.layout = pageConfig.layout;
-  this.layoutsAssetPath = pageConfig.layoutsAssetPath;
-  this.rootPath = pageConfig.rootPath;
-  this.enableSearch = pageConfig.enableSearch;
-  this.globalOverride = pageConfig.globalOverride;
-  this.plugins = pageConfig.plugins;
-  this.pluginsContext = pageConfig.pluginsContext;
-  this.searchable = pageConfig.searchable;
-  this.src = pageConfig.src;
-  this.template = pageConfig.pageTemplate;
-  this.title = pageConfig.title || '';
-  this.titlePrefix = pageConfig.titlePrefix;
-  this.userDefinedVariablesMap = pageConfig.userDefinedVariablesMap;
-
-  // the source file for rendering this page
-  this.sourcePath = pageConfig.sourcePath;
-  // the temp path for writing intermediate result
-  this.tempPath = pageConfig.tempPath;
-  // the output path of this page
-  this.resultPath = pageConfig.resultPath;
-
-  this.frontMatter = {};
-  this.headFileBottomContent = '';
-  this.headFileTopContent = '';
-  this.headings = {};
-  this.headingIndexingLevel = pageConfig.headingIndexingLevel;
-  this.includedFiles = new Set();
-  this.pluginSourceFiles = new Set();
-  this.keywords = {};
-  this.navigableHeadings = {};
-  this.pageSectionsHtml = {};
-
-  // Flag to indicate whether this page has a site nav
-  this.hasSiteNav = false;
-}
-
-/**
- * Util Methods
- */
-
-function addContentWrapper(pageData) {
-  const $ = cheerio.load(pageData);
-  $(`#${CONTENT_WRAPPER_ID}`).removeAttr('id');
-  return `<div id="${CONTENT_WRAPPER_ID}">\n\n`
-    + `${$.html()}\n`
-    + '</div>';
-}
-
-function calculateNewBaseUrl(filePath, root, lookUp) {
-  function calculate(file, result) {
-    if (file === root || !pathIsInside(file, root)) {
-      return undefined;
-    }
-    const parent = path.dirname(file);
-    if (lookUp.has(parent) && result.length === 1) {
-      return path.relative(root, result[0]);
-    } else if (lookUp.has(parent)) {
-      return calculate(parent, [parent]);
-    }
-    return calculate(parent, result);
-  }
-
-  return calculate(filePath, []);
-}
+class Page {
+  constructor(pageConfig) {
+    this.asset = pageConfig.asset;
+    this.baseUrl = pageConfig.baseUrl;
+    this.baseUrlMap = pageConfig.baseUrlMap;
+    this.content = pageConfig.content || '';
+    this.faviconUrl = pageConfig.faviconUrl;
+    this.frontmatterOverride = pageConfig.frontmatter || {};
+    this.layout = pageConfig.layout;
+    this.layoutsAssetPath = pageConfig.layoutsAssetPath;
+    this.rootPath = pageConfig.rootPath;
+    this.enableSearch = pageConfig.enableSearch;
+    this.globalOverride = pageConfig.globalOverride;
+    this.plugins = pageConfig.plugins;
+    this.pluginsContext = pageConfig.pluginsContext;
+    this.searchable = pageConfig.searchable;
+    this.src = pageConfig.src;
+    this.template = pageConfig.pageTemplate;
+    this.title = pageConfig.title || '';
+    this.titlePrefix = pageConfig.titlePrefix;
+    this.userDefinedVariablesMap = pageConfig.userDefinedVariablesMap;
+
+    // the source file for rendering this page
+    this.sourcePath = pageConfig.sourcePath;
+    // the temp path for writing intermediate result
+    this.tempPath = pageConfig.tempPath;
+    // the output path of this page
+    this.resultPath = pageConfig.resultPath;
+
+    this.frontMatter = {};
+    this.headFileBottomContent = '';
+    this.headFileTopContent = '';
+    this.headings = {};
+    this.headingIndexingLevel = pageConfig.headingIndexingLevel;
+    this.includedFiles = new Set();
+    this.pluginSourceFiles = new Set();
+    this.keywords = {};
+    this.navigableHeadings = {};
+    this.pageSectionsHtml = {};
 
-function removePageHeaderAndFooter(pageData) {
-  const $ = cheerio.load(pageData);
-  const pageHeaderAndFooter = $('header', 'footer');
-  if (pageHeaderAndFooter.length === 0) {
-    return pageData;
+    // Flag to indicate whether this page has a site nav
+    this.hasSiteNav = false;
   }
-  // Remove preceding footers
-  pageHeaderAndFooter.remove();
-  return $.html();
-}
 
-function formatSiteNav(renderedSiteNav, src) {
-  const $ = cheerio.load(renderedSiteNav);
-  const listItems = $.root().find('ul').first().children();
-  if (listItems.length === 0) {
-    return renderedSiteNav;
+  prepareTemplateData() {
+    const prefixedTitle = this.titlePrefix
+      ? this.titlePrefix + (this.title ? TITLE_PREFIX_SEPARATOR + this.title : '')
+      : this.title;
+    // construct temporary asset object with only POSIX-style paths
+    const asset = {};
+    Object.entries(this.asset)
+      .forEach(([key, value]) => {
+        asset[key] = _.isString(value) ? ensurePosix(value) : value;
+      });
+    return {
+      asset,
+      baseUrl: this.baseUrl,
+      content: this.content,
+      faviconUrl: this.faviconUrl,
+      footerHtml: this.pageSectionsHtml.footer || '',
+      headerHtml: this.pageSectionsHtml.header || '',
+      headFileBottomContent: this.headFileBottomContent,
+      headFileTopContent: this.headFileTopContent,
+      markBindVersion: `MarkBind ${CLI_VERSION}`,
+      pageNav: this.isPageNavigationSpecifierValid(),
+      pageNavHtml: this.pageSectionsHtml[`#${PAGE_NAV_ID}`] || '',
+      siteNav: this.hasSiteNav,
+      siteNavHtml: this.pageSectionsHtml[`#${SITE_NAV_ID}`] || '',
+      title: prefixedTitle,
+      enableSearch: this.enableSearch,
+    };
   }
-  // Tidy up the style of the unordered list <ul>
-  listItems.parent().addClass(`${SITE_NAV_LIST_CLASS}`);
-
-  // Set class of <a> to ${SITE_NAV_ID}__a to style links
-  listItems.find('a[href]').addClass(`${SITE_NAV_ID}__a`);
-
-  // Highlight current page
-  const currentPageHtmlPath = src.replace(/\.(md|mbd)$/, '.html');
-  listItems.find(`a[href='{{baseUrl}}/${currentPageHtmlPath}']`).addClass('current');
-
-  listItems.each(function () {
-    // Tidy up the style of each list item
-    $(this).addClass('mt-2');
-    // Do not render dropdown menu for list items with <a> tag
-    if ($(this).children('a').length) {
-      const nestedList = $(this).children('ul').first();
-      if (nestedList.length) {
-        // Double wrap to counter replaceWith removing <li>
-        nestedList.parent().wrap('<li class="mt-2"></li>');
-        // Recursively format nested lists without dropdown wrapper
-        nestedList.parent().replaceWith(formatSiteNav(nestedList.parent().html(), src));
-      }
-    // Found nested list, render dropdown menu
-    } else if ($(this).children('ul').length) {
-      const nestedList = $(this).children('ul').first();
-      const dropdownTitle = $(this).contents().not('ul');
-      // Replace the title with the dropdown wrapper
-      dropdownTitle.remove();
-      // Check if dropdown is expanded by default or if the current page is in a dropdown
-      const shouldExpandDropdown = dropdownTitle.toString().includes(DROPDOWN_EXPAND_KEYWORD)
-        || Boolean(nestedList.find(`a[href='{{baseUrl}}/${currentPageHtmlPath}']`).text());
-      if (shouldExpandDropdown) {
-        const expandKeywordRegex = new RegExp(DROPDOWN_EXPAND_KEYWORD, 'g');
-        const dropdownTitleWithoutKeyword = dropdownTitle.toString().replace(expandKeywordRegex, '');
-        const rotatedIcon = cheerio.load(DROPDOWN_BUTTON_ICON_HTML, { xmlMode: false })('i')
-          .addClass('rotate-icon');
-        nestedList.wrap('<div class="dropdown-container dropdown-container-open"></div>');
-        $(this).prepend('<button class="dropdown-btn dropdown-btn-open">'
-          + `${dropdownTitleWithoutKeyword} `
-          + `${rotatedIcon}\n`
-          + '</button>');
-      } else {
-        nestedList.wrap('<div class="dropdown-container"></div>');
-        $(this).prepend('<button class="dropdown-btn">'
-          + `${dropdownTitle} `
-          + `${DROPDOWN_BUTTON_ICON_HTML}\n`
-          + '</button>');
-      }
-      // Recursively format nested lists
-      nestedList.replaceWith(formatSiteNav(nestedList.parent().html(), src));
-    }
-  });
-  return $.html();
-}
 
-/**
- * Generates a selector for headings with level inside the headingIndexLevel
- * or with the index attribute, that do not also have the noindex attribute
- * @param headingIndexingLevel to generate
- */
-function generateHeadingSelector(headingIndexingLevel) {
-  let headingsSelectors = ['.always-index:header', 'h1'];
-  for (let i = 2; i <= headingIndexingLevel; i += 1) {
-    headingsSelectors.push(`h${i}`);
+  /**
+   * Checks if page.frontMatter has a valid page navigation specifier
+   */
+  isPageNavigationSpecifierValid() {
+    const { pageNav } = this.frontMatter;
+    return pageNav && (pageNav === 'default' || Number.isInteger(pageNav));
   }
-  headingsSelectors = headingsSelectors.map(selector => `${selector}:not(.no-index)`);
-  return headingsSelectors.join(',');
-}
-
-function unique(array) {
-  return array.filter((item, pos, self) => self.indexOf(item) === pos);
-}
 
-Page.prototype.prepareTemplateData = function () {
-  const prefixedTitle = this.titlePrefix
-    ? this.titlePrefix + (this.title ? TITLE_PREFIX_SEPARATOR + this.title : '')
-    : this.title;
-
-  // construct temporary asset object with only POSIX-style paths
-  const asset = {};
-  Object.entries(this.asset).forEach(([key, value]) => {
-    asset[key] = _.isString(value) ? ensurePosix(value) : value;
-  });
-
-  return {
-    asset,
-    baseUrl: this.baseUrl,
-    content: this.content,
-    faviconUrl: this.faviconUrl,
-    footerHtml: this.pageSectionsHtml.footer || '',
-    headerHtml: this.pageSectionsHtml.header || '',
-    headFileBottomContent: this.headFileBottomContent,
-    headFileTopContent: this.headFileTopContent,
-    markBindVersion: `MarkBind ${CLI_VERSION}`,
-    pageNav: this.isPageNavigationSpecifierValid(),
-    pageNavHtml: this.pageSectionsHtml[`#${PAGE_NAV_ID}`] || '',
-    siteNav: this.hasSiteNav,
-    siteNavHtml: this.pageSectionsHtml[`#${SITE_NAV_ID}`] || '',
-    title: prefixedTitle,
-    enableSearch: this.enableSearch,
-  };
-};
-
-/**
- * Gets the closest heading to an element
- * @param $ a Cheerio object
- * @param headingsSelector jQuery selector for selecting headings
- * @param element to find closest heading
- */
-function getClosestHeading($, headingsSelector, element) {
-  const prevElements = $(element).prevAll();
-  for (let i = 0; i < prevElements.length; i += 1) {
-    const currentElement = $(prevElements[i]);
-    if (currentElement.is(headingsSelector)) {
-      return currentElement;
+  /**
+   * Generates element selector for page navigation, depending on specifier in front matter
+   */
+  generateElementSelectorForPageNav(pageNav) {
+    if (pageNav === 'default') {
+      // Use specified navigation level or default in this.headingIndexingLevel
+      return `${Page.generateHeadingSelector(this.headingIndexingLevel)}, panel`;
+    } else if (Number.isInteger(pageNav)) {
+      return `${Page.generateHeadingSelector(parseInt(pageNav, 10))}, panel`;
     }
-    const childHeadings = currentElement.find(headingsSelector);
-    if (childHeadings.length > 0) {
-      return childHeadings.last();
-    }
-  }
-  if ($(element).parent().length === 0) {
-    return null;
+    // Not a valid specifier
+    return undefined;
   }
-  return getClosestHeading($, headingsSelector, $(element).parent());
-}
-
-/**
- * Checks if page.frontMatter has a valid page navigation specifier
- */
-Page.prototype.isPageNavigationSpecifierValid = function () {
-  const { pageNav } = this.frontMatter;
-  return pageNav && (pageNav === 'default' || Number.isInteger(pageNav));
-};
 
-/**
- * Generates element selector for page navigation, depending on specifier in front matter
- */
-Page.prototype.generateElementSelectorForPageNav = function (pageNav) {
-  if (pageNav === 'default') {
-    // Use specified navigation level or default in this.headingIndexingLevel
-    return `${generateHeadingSelector(this.headingIndexingLevel)}, panel`;
-  } else if (Number.isInteger(pageNav)) {
-    return `${generateHeadingSelector(parseInt(pageNav, 10))}, panel`;
+  /**
+   * Collect headings outside of models and panels
+   * @param content, html content of a page
+   */
+  collectNavigableHeadings(content) {
+    const { pageNav } = this.frontMatter;
+    const elementSelector = this.generateElementSelectorForPageNav(pageNav);
+    if (elementSelector === undefined) {
+      return;
+    }
+    const $ = cheerio.load(content);
+    $('modal')
+      .remove();
+    $(elementSelector)
+      .each((i, elem) => {
+        // Check if heading or panel is already inside an unexpanded panel
+        let isInsideUnexpandedPanel = false;
+        $(elem)
+          .parents('panel')
+          .each((j, elemParent) => {
+            if (elemParent.attribs.expanded === undefined) {
+              isInsideUnexpandedPanel = true;
+              return false;
+            }
+            return true;
+          });
+        if (isInsideUnexpandedPanel) {
+          return;
+        }
+        if (elem.name === 'panel') {
+          // Get heading from Panel header attribute
+          if (elem.attribs.header) {
+            this.collectNavigableHeadings(md.render(elem.attribs.header));
+          }
+        } else if ($(elem)
+          .attr('id') !== undefined) {
+          // Headings already in content, with a valid ID
+          this.navigableHeadings[$(elem)
+            .attr('id')] = {
+            text: $(elem)
+              .text(),
+            level: elem.name.replace('h', ''),
+          };
+        }
+      });
   }
-  // Not a valid specifier
-  return undefined;
-};
 
-/**
- * Collect headings outside of models and panels
- * @param content, html content of a page
- */
-Page.prototype.collectNavigableHeadings = function (content) {
-  const { pageNav } = this.frontMatter;
-  const elementSelector = this.generateElementSelectorForPageNav(pageNav);
-  if (elementSelector === undefined) {
-    return;
+  /**
+   * Records headings and keywords inside rendered page into this.headings and this.keywords respectively
+   */
+  collectHeadingsAndKeywords() {
+    const $ = cheerio.load(fs.readFileSync(this.resultPath));
+    // Re-initialise objects in the event of Site.regenerateAffectedPages
+    this.headings = {};
+    this.keywords = {};
+    // Collect headings and keywords
+    this.collectHeadingsAndKeywordsInContent($(`#${CONTENT_WRAPPER_ID}`)
+      .html(), null, false, []);
   }
-  const $ = cheerio.load(content);
-  $('modal').remove();
-  $(elementSelector).each((i, elem) => {
-    // Check if heading or panel is already inside an unexpanded panel
-    let isInsideUnexpandedPanel = false;
-    $(elem).parents('panel').each((j, elemParent) => {
-      if (elemParent.attribs.expanded === undefined) {
-        isInsideUnexpandedPanel = true;
-        return false;
-      }
-      return true;
-    });
-    if (isInsideUnexpandedPanel) {
-      return;
-    }
-    if (elem.name === 'panel') {
-      // Get heading from Panel header attribute
-      if (elem.attribs.header) {
-        this.collectNavigableHeadings(md.render(elem.attribs.header));
-      }
-    } else if ($(elem).attr('id') !== undefined) {
-      // Headings already in content, with a valid ID
-      this.navigableHeadings[$(elem).attr('id')] = {
-        text: $(elem).text(),
-        level: elem.name.replace('h', ''),
-      };
-    }
-  });
-};
 
-/**
- * Records headings and keywords inside rendered page into this.headings and this.keywords respectively
- */
-Page.prototype.collectHeadingsAndKeywords = function () {
-  const $ = cheerio.load(fs.readFileSync(this.resultPath));
-  // Re-initialise objects in the event of Site.regenerateAffectedPages
-  this.headings = {};
-  this.keywords = {};
-  // Collect headings and keywords
-  this.collectHeadingsAndKeywordsInContent($(`#${CONTENT_WRAPPER_ID}`).html(), null, false, []);
-};
-
-/**
- * Records headings and keywords inside content into this.headings and this.keywords respectively
- * @param content that contains the headings and keywords
- */
-Page.prototype.collectHeadingsAndKeywordsInContent = function (content, lastHeading, excludeHeadings,
-                                                               sourceTraversalStack) {
-  let $ = cheerio.load(content);
-  const headingsSelector = generateHeadingSelector(this.headingIndexingLevel);
-  $('modal').remove();
-  $('panel').not('panel panel')
-    .each((index, panel) => {
-      if (panel.attribs.header) {
-        this.collectHeadingsAndKeywordsInContent(md.render(panel.attribs.header),
-                                                 lastHeading, excludeHeadings, sourceTraversalStack);
-      }
-    })
-    .each((index, panel) => {
-      const shouldExcludeHeadings = excludeHeadings || (panel.attribs.expanded === undefined);
-      let closestHeading = getClosestHeading($, headingsSelector, panel);
-      if (!closestHeading) {
-        closestHeading = lastHeading;
-      }
-      if (panel.attribs.header) {
-        const panelHeader = md.render(panel.attribs.header);
-        if ($(panelHeader).is(headingsSelector)) {
-          closestHeading = $(panelHeader);
+  /**
+   * Records headings and keywords inside content into this.headings and this.keywords respectively
+   * @param content that contains the headings and keywords
+   */
+  collectHeadingsAndKeywordsInContent(content, lastHeading, excludeHeadings, sourceTraversalStack) {
+    let $ = cheerio.load(content);
+    const headingsSelector = Page.generateHeadingSelector(this.headingIndexingLevel);
+    $('modal')
+      .remove();
+    $('panel')
+      .not('panel panel')
+      .each((index, panel) => {
+        if (panel.attribs.header) {
+          this.collectHeadingsAndKeywordsInContent(
+            md.render(panel.attribs.header), lastHeading, excludeHeadings, sourceTraversalStack);
         }
-      }
-      if (panel.attribs.src) {
-        const src = panel.attribs.src.split('#')[0];
-
-        const buildInnerDir = path.dirname(this.sourcePath);
-        const resultInnerDir = path.dirname(this.resultPath);
-        const includeRelativeToBuildRootDirPath
-          = this.baseUrl ? path.relative(this.baseUrl, src) : src.substring(1);
-        const includeAbsoluteToBuildRootDirPath
-          = path.resolve(this.rootPath, includeRelativeToBuildRootDirPath);
-        const includeRelativeToInnerDirPath = path.relative(buildInnerDir, includeAbsoluteToBuildRootDirPath);
-        const includePath = path.resolve(resultInnerDir, includeRelativeToInnerDirPath);
-
-        const includeContent = fs.readFileSync(includePath);
-
-        const childSourceTraversalStack = sourceTraversalStack.slice();
-        childSourceTraversalStack.push(includePath);
-        if (childSourceTraversalStack.length > CyclicReferenceError.MAX_RECURSIVE_DEPTH) {
-          const error = new CyclicReferenceError(childSourceTraversalStack);
-          throw error;
+      })
+      .each((index, panel) => {
+        const shouldExcludeHeadings = excludeHeadings || (panel.attribs.expanded === undefined);
+        let closestHeading = Page.getClosestHeading($, headingsSelector, panel);
+        if (!closestHeading) {
+          closestHeading = lastHeading;
+        }
+        if (panel.attribs.header) {
+          const panelHeader = md.render(panel.attribs.header);
+          if ($(panelHeader)
+            .is(headingsSelector)) {
+            closestHeading = $(panelHeader);
+          }
         }
-        if (panel.attribs.fragment) {
-          $ = cheerio.load(includeContent);
-          this.collectHeadingsAndKeywordsInContent($(`#${panel.attribs.fragment}`).html(),
-                                                   closestHeading, shouldExcludeHeadings,
-                                                   childSourceTraversalStack);
+        if (panel.attribs.src) {
+          const src = panel.attribs.src.split('#')[0];
+          const buildInnerDir = path.dirname(this.sourcePath);
+          const resultInnerDir = path.dirname(this.resultPath);
+          const includeRelativeToBuildRootDirPath
+            = this.baseUrl ? path.relative(this.baseUrl, src) : src.substring(1);
+          const includeAbsoluteToBuildRootDirPath
+            = path.resolve(this.rootPath, includeRelativeToBuildRootDirPath);
+          const includeRelativeToInnerDirPath
+            = path.relative(buildInnerDir, includeAbsoluteToBuildRootDirPath);
+          const includePath = path.resolve(resultInnerDir, includeRelativeToInnerDirPath);
+          const includeContent = fs.readFileSync(includePath);
+          const childSourceTraversalStack = sourceTraversalStack.slice();
+          childSourceTraversalStack.push(includePath);
+          if (childSourceTraversalStack.length > CyclicReferenceError.MAX_RECURSIVE_DEPTH) {
+            const error = new CyclicReferenceError(childSourceTraversalStack);
+            throw error;
+          }
+          if (panel.attribs.fragment) {
+            $ = cheerio.load(includeContent);
+            this.collectHeadingsAndKeywordsInContent(
+              $(`#${panel.attribs.fragment}`)
+                .html(),
+              closestHeading,
+              shouldExcludeHeadings,
+              childSourceTraversalStack);
+          } else {
+            this.collectHeadingsAndKeywordsInContent(
+              includeContent,
+              closestHeading,
+              shouldExcludeHeadings,
+              childSourceTraversalStack);
+          }
         } else {
-          this.collectHeadingsAndKeywordsInContent(includeContent, closestHeading, shouldExcludeHeadings,
-                                                   childSourceTraversalStack);
+          this.collectHeadingsAndKeywordsInContent(
+            $(panel)
+              .html(),
+            closestHeading,
+            shouldExcludeHeadings,
+            sourceTraversalStack);
         }
-      } else {
-        this.collectHeadingsAndKeywordsInContent($(panel).html(), closestHeading, shouldExcludeHeadings,
-                                                 sourceTraversalStack);
-      }
-    });
-  $ = cheerio.load(content);
-  if (this.headingIndexingLevel > 0) {
-    $('modal').remove();
-    $('panel').remove();
-    if (!excludeHeadings) {
-      $(headingsSelector).each((i, heading) => {
-        this.headings[$(heading).attr('id')] = $(heading).text();
       });
-    }
-    $('.keyword').each((i, keyword) => {
-      let closestHeading = getClosestHeading($, headingsSelector, keyword);
-      if (excludeHeadings || !closestHeading) {
-        if (!lastHeading) {
-          logger.warn(`Missing heading for keyword: ${$(keyword).text()}`);
-          return;
-        }
-        closestHeading = lastHeading;
+    $ = cheerio.load(content);
+    if (this.headingIndexingLevel > 0) {
+      $('modal')
+        .remove();
+      $('panel')
+        .remove();
+      if (!excludeHeadings) {
+        $(headingsSelector)
+          .each((i, heading) => {
+            this.headings[$(heading)
+              .attr('id')] = $(heading)
+              .text();
+          });
       }
-      this.linkKeywordToHeading($, keyword, closestHeading);
-    });
+      $('.keyword')
+        .each((i, keyword) => {
+          let closestHeading = Page.getClosestHeading($, headingsSelector, keyword);
+          if (excludeHeadings || !closestHeading) {
+            if (!lastHeading) {
+              logger.warn(`Missing heading for keyword: ${$(keyword)
+                .text()}`);
+              return;
+            }
+            closestHeading = lastHeading;
+          }
+          this.linkKeywordToHeading($, keyword, closestHeading);
+        });
+    }
   }
-};
 
-/**
- * Links a keyword to a heading
- * @param $ a Cheerio object
- * @param keyword to link
- * @param heading to link
- */
-Page.prototype.linkKeywordToHeading = function ($, keyword, heading) {
-  const headingId = $(heading).attr('id');
-  if (!(headingId in this.keywords)) {
-    this.keywords[headingId] = [];
+  /**
+   * Links a keyword to a heading
+   * @param $ a Cheerio object
+   * @param keyword to link
+   * @param heading to link
+   */
+  linkKeywordToHeading($, keyword, heading) {
+    const headingId = $(heading)
+      .attr('id');
+    if (!(headingId in this.keywords)) {
+      this.keywords[headingId] = [];
+    }
+    this.keywords[headingId].push($(keyword)
+      .text());
   }
-  this.keywords[headingId].push($(keyword).text());
-};
-
-/**
- * Concatenates keywords in this.keywords to heading text in this.headings
- */
-Page.prototype.concatenateHeadingsAndKeywords = function () {
-  Object.keys(this.keywords).forEach((headingId) => {
-    const keywordString = this.keywords[headingId].join(', ');
-    this.headings[headingId] += ` | ${keywordString}`;
-  });
-};
-
-/**
- * Records the dynamic or static included files into this.includedFiles
- * @param dependencies array of maps of the external dependency and where it is included
- */
-Page.prototype.collectIncludedFiles = function (dependencies) {
-  dependencies.forEach(dependency => this.includedFiles.add(dependency.to));
-};
 
-/**
- * Records the front matter into this.frontMatter
- * @param includedPage a page with its dependencies included
- */
-Page.prototype.collectFrontMatter = function (includedPage) {
-  const $ = cheerio.load(includedPage);
-  const frontMatter = $('frontmatter');
-  if (frontMatter.text().trim()) {
-    // Retrieves the front matter from either the first frontmatter element
-    // or from a frontmatter element that includes from another file
-    // The latter case will result in the data being wrapped in a div
-    const frontMatterData = frontMatter.find('div').length
-      ? frontMatter.find('div')[0].children[0].data
-      : frontMatter[0].children[0].data;
-    const frontMatterWrapped = `${FRONT_MATTER_FENCE}\n${frontMatterData}\n${FRONT_MATTER_FENCE}`;
-    // Parse front matter data
-    const parsedData = fm(frontMatterWrapped);
-    this.frontMatter = { ...parsedData.attributes };
-    this.frontMatter.src = this.src;
-    // Title specified in site.json will override title specified in front matter
-    this.frontMatter.title = (this.title || this.frontMatter.title || '');
-    // Layout specified in site.json will override layout specified in the front matter
-    this.frontMatter.layout = (this.layout || this.frontMatter.layout || LAYOUT_DEFAULT_NAME);
-    this.frontMatter = { ...this.frontMatter, ...this.globalOverride, ...this.frontmatterOverride };
-  } else {
-    // Page is addressable but no front matter specified
-    const defaultAttributes = {
-      src: this.src,
-      title: this.title || '',
-      layout: LAYOUT_DEFAULT_NAME,
-    };
-    this.frontMatter = {
-      ...defaultAttributes,
-      ...this.globalOverride,
-      ...this.frontmatterOverride,
-    };
+  /**
+   * Concatenates keywords in this.keywords to heading text in this.headings
+   */
+  concatenateHeadingsAndKeywords() {
+    Object.keys(this.keywords)
+      .forEach((headingId) => {
+        const keywordString = this.keywords[headingId].join(', ');
+        this.headings[headingId] += ` | ${keywordString}`;
+      });
   }
-  this.title = this.frontMatter.title;
-};
 
-/**
- * Removes the front matter from an included page
- * @param includedPage a page with its dependencies included
- */
-Page.prototype.removeFrontMatter = function (includedPage) {
-  const $ = cheerio.load(includedPage);
-  const frontMatter = $('frontmatter');
-  frontMatter.remove();
-  return $.html();
-};
-
-/**
- * Produces expressive layouts by inserting page data into pre-specified layout
- * @param pageData a page with its front matter collected
- */
-Page.prototype.generateExpressiveLayout = function (pageData, fileConfig) {
-  const nj = nunjucks;
-  const markbinder = new MarkBind({
-    errorHandler: logger.error,
-  });
-  nj.configure({
-    autoescape: false,
-  });
-  const template = {};
-  template[LAYOUT_PAGE_BODY_VARIABLE] = pageData;
-  const { layout } = this.frontMatter;
-  const layoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH, layout);
-  const layoutPagePath = path.join(layoutPath, LAYOUT_PAGE);
-
-  if (!fs.existsSync(layoutPagePath)) {
-    return pageData;
+  /**
+   * Records the dynamic or static included files into this.includedFiles
+   * @param dependencies array of maps of the external dependency and where it is included
+   */
+  collectIncludedFiles(dependencies) {
+    dependencies.forEach(dependency => this.includedFiles.add(dependency.to));
   }
-  const layoutFileConfig = {
-    ...fileConfig,
-    cwf: layoutPagePath,
-    additionalVariables: {
-    },
-  };
-
-  layoutFileConfig.additionalVariables[LAYOUT_PAGE_BODY_VARIABLE] = `{{${LAYOUT_PAGE_BODY_VARIABLE}}}`;
-
-  // Set expressive layout file as an includedFile
-  this.includedFiles.add(layoutPagePath);
-  return new Promise((resolve, reject) => {
-    // Retrieve Expressive Layouts page and insert content
-    fs.readFileAsync(layoutPagePath, 'utf8')
-      .then(result => markbinder.includeData(layoutPagePath, result, layoutFileConfig))
-      .then(result => nj.renderString(result, template))
-      .then((result) => {
-        this.collectIncludedFiles(markbinder.getDynamicIncludeSrc());
-        this.collectIncludedFiles(markbinder.getStaticIncludeSrc());
-        this.collectIncludedFiles(markbinder.getBoilerplateIncludeSrc());
-        this.collectIncludedFiles(markbinder.getMissingIncludeSrc());
-        return result;
-      })
-      .then(resolve)
-      .catch(reject);
-  });
-};
-
-
-/**
-  * Inserts the page layout's header to the start of the page
-  * @param pageData a page with its front matter collected
-  */
-Page.prototype.insertHeaderFile = function (pageData) {
-  const { header } = this.frontMatter;
-  let headerFile;
-  if (header) {
-    headerFile = path.join(HEADERS_FOLDER_PATH, header);
-  } else {
-    headerFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_HEADER);
+
+  /**
+   * Records the front matter into this.frontMatter
+   * @param includedPage a page with its dependencies included
+   */
+  collectFrontMatter(includedPage) {
+    const $ = cheerio.load(includedPage);
+    const frontMatter = $('frontmatter');
+    if (frontMatter.text()
+      .trim()) {
+      // Retrieves the front matter from either the first frontmatter element
+      // or from a frontmatter element that includes from another file
+      // The latter case will result in the data being wrapped in a div
+      const frontMatterData = frontMatter.find('div').length
+        ? frontMatter.find('div')[0].children[0].data
+        : frontMatter[0].children[0].data;
+      const frontMatterWrapped = `${FRONT_MATTER_FENCE}\n${frontMatterData}\n${FRONT_MATTER_FENCE}`;
+      // Parse front matter data
+      const parsedData = fm(frontMatterWrapped);
+      this.frontMatter = { ...parsedData.attributes };
+      this.frontMatter.src = this.src;
+      // Title specified in site.json will override title specified in front matter
+      this.frontMatter.title = (this.title || this.frontMatter.title || '');
+      // Layout specified in site.json will override layout specified in the front matter
+      this.frontMatter.layout = (this.layout || this.frontMatter.layout || LAYOUT_DEFAULT_NAME);
+      this.frontMatter = { ...this.frontMatter, ...this.globalOverride, ...this.frontmatterOverride };
+    } else {
+      // Page is addressable but no front matter specified
+      const defaultAttributes = {
+        src: this.src,
+        title: this.title || '',
+        layout: LAYOUT_DEFAULT_NAME,
+      };
+      this.frontMatter = {
+        ...defaultAttributes,
+        ...this.globalOverride,
+        ...this.frontmatterOverride,
+      };
+    }
+    this.title = this.frontMatter.title;
   }
-  const headerPath = path.join(this.rootPath, headerFile);
-  if (!fs.existsSync(headerPath)) {
-    return pageData;
+
+  /**
+   * Removes the front matter from an included page
+   * @param includedPage a page with its dependencies included
+   */
+  static removeFrontMatter(includedPage) {
+    const $ = cheerio.load(includedPage);
+    const frontMatter = $('frontmatter');
+    frontMatter.remove();
+    return $.html();
   }
-  // Retrieve Markdown file contents
-  const headerContent = fs.readFileSync(headerPath, 'utf8');
-  // Set header file as an includedFile
-  this.includedFiles.add(headerPath);
-  // Map variables
-  const newBaseUrl = calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
-  const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
-  return `${nunjucks.renderString(headerContent, userDefinedVariables)}\n${pageData}`;
-};
-
-
-/**
- * Inserts the footer specified in front matter to the end of the page
+
+  /**
+ * Produces expressive layouts by inserting page data into pre-specified layout
  * @param pageData a page with its front matter collected
  */
-Page.prototype.insertFooterFile = function (pageData) {
-  const { footer } = this.frontMatter;
-  let footerFile;
-  if (footer) {
-    footerFile = path.join(FOOTERS_FOLDER_PATH, footer);
-  } else {
-    footerFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_FOOTER);
-  }
-  const footerPath = path.join(this.rootPath, footerFile);
-  if (!fs.existsSync(footerPath)) {
-    return pageData;
-  }
-  // Retrieve Markdown file contents
-  const footerContent = fs.readFileSync(footerPath, 'utf8');
-  // Set footer file as an includedFile
-  this.includedFiles.add(footerPath);
-  // Map variables
-  const newBaseUrl = calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
-  const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
-  return `${pageData}\n${nunjucks.renderString(footerContent, userDefinedVariables)}`;
-};
-
-/**
- * Inserts a site navigation bar using the file specified in the front matter
- * @param pageData, a page with its front matter collected
- * @throws (Error) if there is more than one instance of the <navigation> tag
- */
-Page.prototype.insertSiteNav = function (pageData) {
-  const { siteNav } = this.frontMatter;
-  let siteNavFile;
-  if (siteNav) {
-    siteNavFile = path.join(NAVIGATION_FOLDER_PATH, siteNav);
-  } else {
-    siteNavFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_NAVIGATION);
-  }
-  // Retrieve Markdown file contents
-  const siteNavPath = path.join(this.rootPath, siteNavFile);
-  if (!fs.existsSync(siteNavPath)) {
-    this.hasSiteNav = false;
-    return pageData;
+  generateExpressiveLayout(pageData, fileConfig) {
+    const nj = nunjucks;
+    const markbinder = new MarkBind({
+      errorHandler: logger.error,
+    });
+    nj.configure({
+      autoescape: false,
+    });
+    const template = {};
+    template[LAYOUT_PAGE_BODY_VARIABLE] = pageData;
+    const { layout } = this.frontMatter;
+    const layoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH, layout);
+    const layoutPagePath = path.join(layoutPath, LAYOUT_PAGE);
+
+    if (!fs.existsSync(layoutPagePath)) {
+      return pageData;
+    }
+    const layoutFileConfig = {
+      ...fileConfig,
+      cwf: layoutPagePath,
+      additionalVariables: {
+      },
+    };
+
+    layoutFileConfig.additionalVariables[LAYOUT_PAGE_BODY_VARIABLE] = `{{${LAYOUT_PAGE_BODY_VARIABLE}}}`;
+
+    // Set expressive layout file as an includedFile
+    this.includedFiles.add(layoutPagePath);
+    return new Promise((resolve, reject) => {
+    // Retrieve Expressive Layouts page and insert content
+      fs.readFileAsync(layoutPagePath, 'utf8')
+        .then(result => markbinder.includeData(layoutPagePath, result, layoutFileConfig))
+        .then(result => nj.renderString(result, template))
+        .then((result) => {
+          this.collectIncludedFiles(markbinder.getDynamicIncludeSrc());
+          this.collectIncludedFiles(markbinder.getStaticIncludeSrc());
+          this.collectIncludedFiles(markbinder.getBoilerplateIncludeSrc());
+          this.collectIncludedFiles(markbinder.getMissingIncludeSrc());
+          return result;
+        })
+        .then(resolve)
+        .catch(reject);
+    });
   }
-  const siteNavContent = fs.readFileSync(siteNavPath, 'utf8');
-  if (siteNavContent === '') {
-    this.hasSiteNav = false;
-    return pageData;
+
+
+  /**
+   * Inserts the page layout's header to the start of the page
+   * @param pageData a page with its front matter collected
+   */
+  insertHeaderFile(pageData) {
+    const { header } = this.frontMatter;
+    let headerFile;
+    if (header) {
+      headerFile = path.join(HEADERS_FOLDER_PATH, header);
+    } else {
+      headerFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_HEADER);
+    }
+    const headerPath = path.join(this.rootPath, headerFile);
+    if (!fs.existsSync(headerPath)) {
+      return pageData;
+    }
+    // Retrieve Markdown file contents
+    const headerContent = fs.readFileSync(headerPath, 'utf8');
+    // Set header file as an includedFile
+    this.includedFiles.add(headerPath);
+    // Map variables
+    const newBaseUrl = Page.calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
+    const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
+    return `${nunjucks.renderString(headerContent, userDefinedVariables)}\n${pageData}`;
   }
-  this.hasSiteNav = true;
-  // Set siteNav file as an includedFile
-  this.includedFiles.add(siteNavPath);
-  // Map variables
-  const newBaseUrl = calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
-  const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
-  const siteNavMappedData = nunjucks.renderString(siteNavContent, userDefinedVariables);
-  // Convert to HTML
-  const siteNavDataSelector = cheerio.load(siteNavMappedData);
-  if (siteNavDataSelector('navigation').length > 1) {
-    throw new Error(`More than one <navigation> tag found in ${siteNavPath}`);
-  } else if (siteNavDataSelector('navigation').length === 1) {
-    const siteNavHtml = md.render(siteNavDataSelector('navigation').html().trim().replace(/\n\s*\n/g, '\n'));
-    // Add Bootstrap padding class to rendered unordered list
-    const siteNavHtmlSelector = cheerio.load(siteNavHtml, { xmlMode: false });
-    siteNavHtmlSelector('ul').first().addClass('px-0');
-    siteNavHtmlSelector('ul ul').addClass('pl-3');
-    const formattedSiteNav = formatSiteNav(siteNavHtmlSelector.html(), this.src);
-    siteNavDataSelector('navigation').replaceWith(formattedSiteNav);
+
+  /**
+   * Inserts the footer specified in front matter to the end of the page
+   * @param pageData a page with its front matter collected
+   */
+  insertFooterFile(pageData) {
+    const { footer } = this.frontMatter;
+    let footerFile;
+    if (footer) {
+      footerFile = path.join(FOOTERS_FOLDER_PATH, footer);
+    } else {
+      footerFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_FOOTER);
+    }
+    const footerPath = path.join(this.rootPath, footerFile);
+    if (!fs.existsSync(footerPath)) {
+      return pageData;
+    }
+    // Retrieve Markdown file contents
+    const footerContent = fs.readFileSync(footerPath, 'utf8');
+    // Set footer file as an includedFile
+    this.includedFiles.add(footerPath);
+    // Map variables
+    const newBaseUrl = Page.calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
+    const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
+    return `${pageData}\n${nunjucks.renderString(footerContent, userDefinedVariables)}`;
   }
-  // Wrap sections
-  const wrappedSiteNav = `<nav id="${SITE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-    + '<div class="border-right-grey nav-inner position-sticky slim-scroll">'
-    + `${siteNavDataSelector.html()}\n`
-    + '</div>\n'
-    + '</nav>';
-
-  return `${wrappedSiteNav}\n`
-    + `${pageData}`;
-};
-
-/**
- *  Generates page navigation's heading list HTML
- *
- *  A stack is used to maintain proper indentation levels for the headings at different heading levels.
- */
-Page.prototype.generatePageNavHeadingHtml = function () {
-  let headingHTML = '';
-  const headingStack = [];
-  Object.keys(this.navigableHeadings).forEach((key) => {
-    const currentHeadingLevel = this.navigableHeadings[key].level;
-    const currentHeadingHTML = `<a class="nav-link py-1" href="#${key}">`
-      + `${this.navigableHeadings[key].text}&#x200E;</a>\n`;
-    const nestedHeadingHTML = '<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">\n'
-      + `${currentHeadingHTML}`;
-
-    if (headingStack.length === 0 || headingStack[headingStack.length - 1] === currentHeadingLevel) {
-      // Add heading without nesting, into headingHTML
-      headingHTML += currentHeadingHTML;
+
+  /**
+   * Inserts a site navigation bar using the file specified in the front matter
+   * @param pageData, a page with its front matter collected
+   * @throws (Error) if there is more than one instance of the <navigation> tag
+   */
+  insertSiteNav(pageData) {
+    const { siteNav } = this.frontMatter;
+    let siteNavFile;
+    if (siteNav) {
+      siteNavFile = path.join(NAVIGATION_FOLDER_PATH, siteNav);
     } else {
-      // Stack has at least 1 other heading level
-      let topOfHeadingStack = headingStack[headingStack.length - 1];
-      if (topOfHeadingStack < currentHeadingLevel) {
-        // Increase nesting level by 1
-        headingHTML += nestedHeadingHTML;
-      } else {
-        // Close any nested list with heading level higher than current
-        while (headingStack.length > 1 && topOfHeadingStack > currentHeadingLevel) {
-          headingHTML += '</nav>\n';
-          headingStack.pop();
-          topOfHeadingStack = headingStack[headingStack.length - 1];
-        }
-        if (topOfHeadingStack < currentHeadingLevel) {
-          // Increase nesting level by 1
-          headingHTML += nestedHeadingHTML;
-        } else {
+      siteNavFile = path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_NAVIGATION);
+    }
+    // Retrieve Markdown file contents
+    const siteNavPath = path.join(this.rootPath, siteNavFile);
+    if (!fs.existsSync(siteNavPath)) {
+      this.hasSiteNav = false;
+      return pageData;
+    }
+    const siteNavContent = fs.readFileSync(siteNavPath, 'utf8');
+    if (siteNavContent === '') {
+      this.hasSiteNav = false;
+      return pageData;
+    }
+    this.hasSiteNav = true;
+    // Set siteNav file as an includedFile
+    this.includedFiles.add(siteNavPath);
+    // Map variables
+    const newBaseUrl = Page.calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
+    const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
+    const siteNavMappedData = nunjucks.renderString(siteNavContent, userDefinedVariables);
+    // Convert to HTML
+    const siteNavDataSelector = cheerio.load(siteNavMappedData);
+    if (siteNavDataSelector('navigation').length > 1) {
+      throw new Error(`More than one <navigation> tag found in ${siteNavPath}`);
+    } else if (siteNavDataSelector('navigation').length === 1) {
+      const siteNavHtml
+        = md.render(siteNavDataSelector('navigation')
+          .html()
+          .trim()
+          .replace(/\n\s*\n/g, '\n'));
+      // Add Bootstrap padding class to rendered unordered list
+      const siteNavHtmlSelector = cheerio.load(siteNavHtml, { xmlMode: false });
+      siteNavHtmlSelector('ul')
+        .first()
+        .addClass('px-0');
+      siteNavHtmlSelector('ul ul')
+        .addClass('pl-3');
+      const formattedSiteNav = Page.formatSiteNav(siteNavHtmlSelector.html(), this.src);
+      siteNavDataSelector('navigation')
+        .replaceWith(formattedSiteNav);
+    }
+    // Wrap sections
+    const wrappedSiteNav = `<nav id="${SITE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
+      + '<div class="border-right-grey nav-inner position-sticky slim-scroll">'
+      + `${siteNavDataSelector.html()}\n`
+      + '</div>\n'
+      + '</nav>';
+    return `${wrappedSiteNav}\n`
+      + `${pageData}`;
+  }
+
+  /**
+   *  Generates page navigation's heading list HTML
+   *
+   *  A stack is used to maintain proper indentation levels for the headings at different heading levels.
+   */
+  generatePageNavHeadingHtml() {
+    let headingHTML = '';
+    const headingStack = [];
+    Object.keys(this.navigableHeadings)
+      .forEach((key) => {
+        const currentHeadingLevel = this.navigableHeadings[key].level;
+        const currentHeadingHTML = `<a class="nav-link py-1" href="#${key}">`
+          + `${this.navigableHeadings[key].text}&#x200E;</a>\n`;
+        const nestedHeadingHTML = '<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">\n'
+          + `${currentHeadingHTML}`;
+        if (headingStack.length === 0 || headingStack[headingStack.length - 1] === currentHeadingLevel) {
+          // Add heading without nesting, into headingHTML
           headingHTML += currentHeadingHTML;
+        } else {
+          // Stack has at least 1 other heading level
+          let topOfHeadingStack = headingStack[headingStack.length - 1];
+          if (topOfHeadingStack < currentHeadingLevel) {
+            // Increase nesting level by 1
+            headingHTML += nestedHeadingHTML;
+          } else {
+            // Close any nested list with heading level higher than current
+            while (headingStack.length > 1 && topOfHeadingStack > currentHeadingLevel) {
+              headingHTML += '</nav>\n';
+              headingStack.pop();
+              topOfHeadingStack = headingStack[headingStack.length - 1];
+            }
+            if (topOfHeadingStack < currentHeadingLevel) {
+              // Increase nesting level by 1
+              headingHTML += nestedHeadingHTML;
+            } else {
+              headingHTML += currentHeadingHTML;
+            }
+          }
         }
-      }
-    }
-    // Update heading level stack
-    if (headingStack.length === 0 || headingStack[headingStack.length - 1] !== currentHeadingLevel) {
-      headingStack.push(currentHeadingLevel);
+        // Update heading level stack
+        if (headingStack.length === 0 || headingStack[headingStack.length - 1] !== currentHeadingLevel) {
+          headingStack.push(currentHeadingLevel);
+        }
+      });
+    // Ensure proper closing for any nested lists towards the end
+    while (headingStack.length > 1
+    && headingStack[headingStack.length - 1] > headingStack[headingStack.length - 2]) {
+      headingHTML += '</nav>\n';
+      headingStack.pop();
     }
-  });
-  // Ensure proper closing for any nested lists towards the end
-  while (headingStack.length > 1
-  && headingStack[headingStack.length - 1] > headingStack[headingStack.length - 2]) {
-    headingHTML += '</nav>\n';
-    headingStack.pop();
+    return headingHTML;
   }
-  return headingHTML;
-};
 
-/**
- * Generates page navigation's header if specified in this.frontMatter
- * @returns string string
- */
-Page.prototype.generatePageNavTitleHtml = function () {
-  const { pageNavTitle } = this.frontMatter;
-  return pageNavTitle
-    ? `<a class="navbar-brand ${PAGE_NAV_TITLE_CLASS}" href="#">`
+  /**
+   * Generates page navigation's header if specified in this.frontMatter
+   * @returns string string
+   */
+  generatePageNavTitleHtml() {
+    const { pageNavTitle } = this.frontMatter;
+    return pageNavTitle
+      ? `<a class="navbar-brand ${PAGE_NAV_TITLE_CLASS}" href="#">`
       + `${pageNavTitle.toString()}`
       + '</a>'
-    : '';
-};
-
-/**
- *  Builds page navigation bar with headings up to headingIndexingLevel
- */
-Page.prototype.buildPageNav = function () {
-  if (this.isPageNavigationSpecifierValid()) {
-    const $ = cheerio.load(this.content, { xmlMode: false });
-    this.navigableHeadings = {};
-    this.collectNavigableHeadings($(`#${CONTENT_WRAPPER_ID}`).html());
-    const pageNavTitleHtml = this.generatePageNavTitleHtml();
-    const pageNavHeadingHTML = this.generatePageNavHeadingHtml();
-    this.pageSectionsHtml[`#${PAGE_NAV_ID}`] = htmlBeautify(
-      `<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
-      + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
-      + `${pageNavTitleHtml}\n`
-      + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
-      + `${pageNavHeadingHTML}\n`
-      + '</nav>\n'
-      + '</div>\n'
-      + '</nav>\n',
-      { indent_size: 2 });
+      : '';
   }
-};
-
-Page.prototype.collectHeadFiles = function (baseUrl, hostBaseUrl) {
-  const { head } = this.frontMatter;
-  let headFiles;
-  const collectedTopContent = [];
-  const collectedBottomContent = [];
-  if (head) {
-    headFiles = head.replace(/, */g, ',').split(',').map(headFile => path.join(HEAD_FOLDER_PATH, headFile));
-  } else {
-    headFiles = [path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_HEAD)];
+
+  /**
+   *  Builds page navigation bar with headings up to headingIndexingLevel
+   */
+  buildPageNav() {
+    if (this.isPageNavigationSpecifierValid()) {
+      const $ = cheerio.load(this.content, { xmlMode: false });
+      this.navigableHeadings = {};
+      this.collectNavigableHeadings($(`#${CONTENT_WRAPPER_ID}`)
+        .html());
+      const pageNavTitleHtml = this.generatePageNavTitleHtml();
+      const pageNavHeadingHTML = this.generatePageNavHeadingHtml();
+      this.pageSectionsHtml[`#${PAGE_NAV_ID}`]
+        = htmlBeautify(`<nav id="${PAGE_NAV_ID}" class="navbar navbar-light bg-transparent">\n`
+        + '<div class="border-left-grey nav-inner position-sticky slim-scroll">\n'
+        + `${pageNavTitleHtml}\n`
+        + '<nav class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
+        + `${pageNavHeadingHTML}\n`
+        + '</nav>\n'
+        + '</div>\n'
+        + '</nav>\n', { indent_size: 2 });
+    }
   }
-  headFiles.forEach((headFile) => {
-    const headFilePath = path.join(this.rootPath, headFile);
-    if (!fs.existsSync(headFilePath)) {
-      return;
+
+  collectHeadFiles(baseUrl, hostBaseUrl) {
+    const { head } = this.frontMatter;
+    let headFiles;
+    const collectedTopContent = [];
+    const collectedBottomContent = [];
+    if (head) {
+      headFiles = head.replace(/, */g, ',')
+        .split(',')
+        .map(headFile => path.join(HEAD_FOLDER_PATH, headFile));
+    } else {
+      headFiles = [path.join(LAYOUT_FOLDER_PATH, this.frontMatter.layout, LAYOUT_HEAD)];
     }
-    const headFileContent = fs.readFileSync(headFilePath, 'utf8');
-    // Set head file as an includedFile
-    this.includedFiles.add(headFilePath);
-    // Map variables
-    const newBaseUrl = calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
-    const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
-    const headFileMappedData = nunjucks.renderString(headFileContent, userDefinedVariables).trim();
-    // Split top and bottom contents
-    const $ = cheerio.load(headFileMappedData, { xmlMode: false });
-    if ($('head-top').length) {
-      collectedTopContent.push(nunjucks.renderString($('head-top').html(), { baseUrl, hostBaseUrl })
+    headFiles.forEach((headFile) => {
+      const headFilePath = path.join(this.rootPath, headFile);
+      if (!fs.existsSync(headFilePath)) {
+        return;
+      }
+      const headFileContent = fs.readFileSync(headFilePath, 'utf8');
+      // Set head file as an includedFile
+      this.includedFiles.add(headFilePath);
+      // Map variables
+      const newBaseUrl = Page.calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap) || '';
+      const userDefinedVariables = this.userDefinedVariablesMap[path.join(this.rootPath, newBaseUrl)];
+      const headFileMappedData = nunjucks.renderString(headFileContent, userDefinedVariables)
+        .trim();
+      // Split top and bottom contents
+      const $ = cheerio.load(headFileMappedData, { xmlMode: false });
+      if ($('head-top').length) {
+        collectedTopContent.push(nunjucks.renderString($('head-top')
+          .html(), {
+          baseUrl,
+          hostBaseUrl,
+        })
+          .trim()
+          .replace(/\n\s*\n/g, '\n')
+          .replace(/\n/g, '\n    '));
+        $('head-top')
+          .remove();
+      }
+      collectedBottomContent.push(nunjucks.renderString($.html(), {
+        baseUrl,
+        hostBaseUrl,
+      })
         .trim()
         .replace(/\n\s*\n/g, '\n')
         .replace(/\n/g, '\n    '));
-      $('head-top').remove();
-    }
-    collectedBottomContent.push(nunjucks.renderString($.html(), { baseUrl, hostBaseUrl })
-      .trim()
-      .replace(/\n\s*\n/g, '\n')
-      .replace(/\n/g, '\n    '));
-  });
-  this.headFileTopContent = collectedTopContent.join('\n    ');
-  this.headFileBottomContent = collectedBottomContent.join('\n    ');
-};
-
-Page.prototype.insertTemporaryStyles = function (pageData) {
-  const $ = cheerio.load(pageData);
-  // inject temporary navbar styles
-  $('navbar').addClass(TEMP_NAVBAR_CLASS);
-  // inject temporary dropdown styles
-  $('dropdown').each((i, element) => {
-    const attributes = element.attribs;
-    const placeholder = `<div>${attributes.text || ''}</div>`;
-    $(element).before(placeholder);
-    $(element).prev()
-      .addClass(attributes.class)
-      .addClass(TEMP_DROPDOWN_PLACEHOLDER_CLASS);
-    $(element).addClass(TEMP_DROPDOWN_CLASS);
-  });
-  return $.html();
-};
-
-Page.prototype.collectPageSection = function (section) {
-  const $ = cheerio.load(this.content, { xmlMode: false });
-  const pageSection = $(section);
-  if (pageSection.length === 0) {
-    return;
+    });
+    this.headFileTopContent = collectedTopContent.join('\n    ');
+    this.headFileBottomContent = collectedBottomContent.join('\n    ');
+  }
+
+  static insertTemporaryStyles(pageData) {
+    const $ = cheerio.load(pageData);
+    // inject temporary navbar styles
+    $('navbar')
+      .addClass(TEMP_NAVBAR_CLASS);
+    // inject temporary dropdown styles
+    $('dropdown')
+      .each((i, element) => {
+        const attributes = element.attribs;
+        const placeholder = `<div>${attributes.text || ''}</div>`;
+        $(element)
+          .before(placeholder);
+        $(element)
+          .prev()
+          .addClass(attributes.class)
+          .addClass(TEMP_DROPDOWN_PLACEHOLDER_CLASS);
+        $(element)
+          .addClass(TEMP_DROPDOWN_CLASS);
+      });
+    return $.html();
   }
-  this.pageSectionsHtml[section] = htmlBeautify($.html(section), { indent_size: 2 }).trim();
-  pageSection.remove();
-  this.content = htmlBeautify($.html(), { indent_size: 2 });
-};
-
-Page.prototype.collectAllPageSections = function () {
-  this.collectPageSection('header');
-  this.collectPageSection(`#${SITE_NAV_ID}`);
-  this.collectPageSection('footer');
-};
-
-Page.prototype.generate = function (builtFiles) {
-  this.includedFiles = new Set([this.sourcePath]);
-
-  const markbinder = new MarkBind({
-    errorHandler: logger.error,
-  });
-  const fileConfig = {
-    baseUrlMap: this.baseUrlMap,
-    rootPath: this.rootPath,
-    userDefinedVariablesMap: this.userDefinedVariablesMap,
-  };
-  return new Promise((resolve, reject) => {
-    markbinder.includeFile(this.sourcePath, fileConfig)
-      .then((result) => {
-        this.collectFrontMatter(result);
-        return this.removeFrontMatter(result);
-      })
-      .then(result => this.generateExpressiveLayout(result, fileConfig))
-      .then(result => removePageHeaderAndFooter(result))
-      .then(result => addContentWrapper(result))
-      .then(result => this.collectPluginSources(result))
-      .then(result => this.preRender(result))
-      .then(result => this.insertSiteNav((result)))
-      .then(result => this.insertHeaderFile(result))
-      .then(result => this.insertFooterFile(result))
-      .then(result => this.insertTemporaryStyles(result))
-      .then(result => markbinder.resolveBaseUrl(result, fileConfig))
-      .then(result => fs.outputFileAsync(this.tempPath, result))
-      .then(() => markbinder.renderFile(this.tempPath, fileConfig))
-      .then(result => this.postRender(result))
-      .then(result => this.collectPluginsAssets(result))
-      .then(result => markbinder.processDynamicResources(this.sourcePath, result))
-      .then(result => markbinder.unwrapIncludeSrc(result))
-      .then((result) => {
-        this.content = htmlBeautify(result, { indent_size: 2 });
-
-        const newBaseUrl = calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap);
-        const baseUrl = newBaseUrl ? `${this.baseUrl}/${newBaseUrl}` : this.baseUrl;
-        const hostBaseUrl = this.baseUrl;
-
-        this.addLayoutFiles();
-        this.collectHeadFiles(baseUrl, hostBaseUrl);
-
-        this.content = nunjucks.renderString(this.content, { baseUrl, hostBaseUrl });
-
-        this.collectAllPageSections();
-        this.buildPageNav();
-
-        return fs.outputFileAsync(this.resultPath, htmlBeautify(
-          this.template.render(this.prepareTemplateData()),
-          { indent_size: 2 },
-        ));
-      })
-      .then(() => {
-        const resolvingFiles = [];
-        unique(markbinder.getDynamicIncludeSrc()).forEach((source) => {
-          if (!FsUtil.isUrl(source.to)) {
-            resolvingFiles.push(this.resolveDependency(source, builtFiles));
-          }
-        });
-        return Promise.all(resolvingFiles);
-      })
-      .then(() => {
-        this.collectIncludedFiles(markbinder.getDynamicIncludeSrc());
-        this.collectIncludedFiles(markbinder.getStaticIncludeSrc());
-        this.collectIncludedFiles(markbinder.getBoilerplateIncludeSrc());
-        this.collectIncludedFiles(markbinder.getMissingIncludeSrc());
-      })
-      .then(resolve)
-      .catch(reject);
-  });
-};
 
-/**
- * Retrieves page config for plugins
- */
-Page.prototype.getPluginConfig = function () {
-  return {
-    headingIndexingLevel: this.headingIndexingLevel,
-    enableSearch: this.enableSearch,
-    searchable: this.searchable,
-    rootPath: this.rootPath,
-    sourcePath: this.sourcePath,
-    includedFiles: this.includedFiles,
-    resultPath: this.resultPath,
-  };
-};
-
-/**
- * Collects file sources provided by plugins for the page for live reloading
- */
-Page.prototype.collectPluginSources = function (content) {
-  const self = this;
 
-  Object.entries(self.plugins).forEach(([pluginName, plugin]) => {
-    if (!plugin.getSources) {
+  collectPageSection(section) {
+    const $ = cheerio.load(this.content, { xmlMode: false });
+    const pageSection = $(section);
+    if (pageSection.length === 0) {
       return;
     }
+    this.pageSectionsHtml[section] = htmlBeautify($.html(section), { indent_size: 2 })
+      .trim();
+    pageSection.remove();
+    this.content = htmlBeautify($.html(), { indent_size: 2 });
+  }
 
-    const result = plugin.getSources(content, self.pluginsContext[pluginName] || {},
-                                     self.frontMatter, self.getPluginConfig());
+  collectAllPageSections() {
+    this.collectPageSection('header');
+    this.collectPageSection(`#${SITE_NAV_ID}`);
+    this.collectPageSection('footer');
+  }
 
-    let pageContextSources;
-    let domTagSourcesMap;
+  generate(builtFiles) {
+    this.includedFiles = new Set([this.sourcePath]);
+    const markbinder = new MarkBind({
+      errorHandler: logger.error,
+    });
+    const fileConfig = {
+      baseUrlMap: this.baseUrlMap,
+      rootPath: this.rootPath,
+      userDefinedVariablesMap: this.userDefinedVariablesMap,
+    };
+    return new Promise((resolve, reject) => {
+      markbinder.includeFile(this.sourcePath, fileConfig)
+        .then((result) => {
+          this.collectFrontMatter(result);
+          return Page.removeFrontMatter(result);
+        })
+        .then(result => this.generateExpressiveLayout(result, fileConfig))
+        .then(result => Page.removePageHeaderAndFooter(result))
+        .then(result => Page.addContentWrapper(result))
+        .then(result => this.collectPluginSources(result))
+        .then(result => this.preRender(result))
+        .then(result => this.insertSiteNav((result)))
+        .then(result => this.insertHeaderFile(result))
+        .then(result => this.insertFooterFile(result))
+        .then(result => Page.insertTemporaryStyles(result))
+        .then(result => markbinder.resolveBaseUrl(result, fileConfig))
+        .then(result => fs.outputFileAsync(this.tempPath, result))
+        .then(() => markbinder.renderFile(this.tempPath, fileConfig))
+        .then(result => this.postRender(result))
+        .then(result => this.collectPluginsAssets(result))
+        .then(result => markbinder.processDynamicResources(this.sourcePath, result))
+        .then(result => MarkBind.unwrapIncludeSrc(result))
+        .then((result) => {
+          this.content = htmlBeautify(result, { indent_size: 2 });
+
+          const newBaseUrl = Page.calculateNewBaseUrl(this.sourcePath, this.rootPath, this.baseUrlMap);
+          const baseUrl = newBaseUrl ? `${this.baseUrl}/${newBaseUrl}` : this.baseUrl;
+          const hostBaseUrl = this.baseUrl;
+
+          this.addLayoutFiles();
+          this.collectHeadFiles(baseUrl, hostBaseUrl);
+
+          this.content = nunjucks.renderString(this.content, {
+            baseUrl,
+            hostBaseUrl,
+          });
+
+          this.collectAllPageSections();
+          this.buildPageNav();
+
+          return fs.outputFileAsync(this.resultPath, htmlBeautify(
+            this.template.render(this.prepareTemplateData()),
+            { indent_size: 2 },
+          ));
+        })
+        .then(() => {
+          const resolvingFiles = [];
+          Page.unique(markbinder.getDynamicIncludeSrc())
+            .forEach((source) => {
+              if (!FsUtil.isUrl(source.to)) {
+                resolvingFiles.push(this.resolveDependency(source, builtFiles));
+              }
+            });
+          return Promise.all(resolvingFiles);
+        })
+        .then(() => {
+          this.collectIncludedFiles(markbinder.getDynamicIncludeSrc());
+          this.collectIncludedFiles(markbinder.getStaticIncludeSrc());
+          this.collectIncludedFiles(markbinder.getBoilerplateIncludeSrc());
+          this.collectIncludedFiles(markbinder.getMissingIncludeSrc());
+        })
+        .then(resolve)
+        .catch(reject);
+    });
+  }
 
-    if (_.isArray(result)) {
-      pageContextSources = result;
-    } else if (_.isObject(result)) {
-      pageContextSources = result.sources;
-      domTagSourcesMap = result.tagMap;
-    } else {
-      logger.warn(`${pluginName} returned unsupported type for ${self.sourcePath}`);
-      return;
-    }
+  /**
+   * Retrieves page config for plugins
+   */
+  getPluginConfig() {
+    return {
+      headingIndexingLevel: this.headingIndexingLevel,
+      enableSearch: this.enableSearch,
+      searchable: this.searchable,
+      rootPath: this.rootPath,
+      sourcePath: this.sourcePath,
+      includedFiles: this.includedFiles,
+      resultPath: this.resultPath,
+    };
+  }
+
+  /**
+   * Collects file sources provided by plugins for the page for live reloading
+   */
+  collectPluginSources(content) {
+    const self = this;
 
-    if (pageContextSources) {
-      pageContextSources.forEach((src) => {
-        if (src === undefined || src === '' || utils.isUrl(src)) {
+    Object.entries(self.plugins)
+      .forEach(([pluginName, plugin]) => {
+        if (!plugin.getSources) {
           return;
-        } else if (utils.isAbsolutePath(src)) {
-          self.pluginSourceFiles.add(path.resolve(src));
+        }
+
+        const result = plugin.getSources(content, self.pluginsContext[pluginName] || {},
+                                         self.frontMatter, self.getPluginConfig());
+
+        let pageContextSources;
+        let domTagSourcesMap;
+
+        if (_.isArray(result)) {
+          pageContextSources = result;
+        } else if (_.isObject(result)) {
+          pageContextSources = result.sources;
+          domTagSourcesMap = result.tagMap;
+        } else {
+          logger.warn(`${pluginName} returned unsupported type for ${self.sourcePath}`);
           return;
         }
 
-        // Resolve relative paths from the current page source
-        const originalSrcFolder = path.dirname(self.sourcePath);
-        const resolvedResourcePath = path.resolve(originalSrcFolder, src);
+        if (pageContextSources) {
+          pageContextSources.forEach((src) => {
+            if (src === undefined || src === '' || utils.isUrl(src)) {
+              return;
+            } else if (utils.isAbsolutePath(src)) {
+              self.pluginSourceFiles.add(path.resolve(src));
+              return;
+            }
+
+            // Resolve relative paths from the current page source
+            const originalSrcFolder = path.dirname(self.sourcePath);
+            const resolvedResourcePath = path.resolve(originalSrcFolder, src);
+
+            self.pluginSourceFiles.add(resolvedResourcePath);
+          });
+        }
 
-        self.pluginSourceFiles.add(resolvedResourcePath);
+        if (domTagSourcesMap) {
+          const $ = cheerio.load(content, { xmlMode: true });
+
+          domTagSourcesMap.forEach(([tagName, attrName]) => {
+            if (!_.isString(tagName) || !_.isString(attrName)) {
+              logger.warn(`Invalid tag or attribute provided in tagMap by ${pluginName} plugin.`);
+              return;
+            }
+
+            const selector = `${tagName}[${attrName}]`;
+            $(selector)
+              .each((i, el) => {
+                const elem = $(el);
+
+                let src = elem.attr(attrName);
+
+                src = ensurePosix(src);
+                if (src === '' || utils.isUrl(src)) {
+                  return;
+                } else if (utils.isAbsolutePath(src)) {
+                  self.pluginSourceFiles.add(path.resolve(src));
+                  return;
+                }
+
+                // Resolve relative paths from the include page source, or current page source otherwise
+                const firstParent = elem.closest('div[data-included-from], span[data-included-from]');
+                const originalSrc = firstParent.attr('data-included-from') || self.sourcePath;
+                const originalSrcFolder = path.dirname(originalSrc);
+                const resolvedResourcePath = path.resolve(originalSrcFolder, src);
+
+                self.pluginSourceFiles.add(resolvedResourcePath);
+              });
+          });
+        }
       });
-    }
 
-    if (domTagSourcesMap) {
-      const $ = cheerio.load(content, { xmlMode: true });
+    return content;
+  }
 
-      domTagSourcesMap.forEach(([tagName, attrName]) => {
-        if (!_.isString(tagName) || !_.isString(attrName)) {
-          logger.warn(`Invalid tag or attribute provided in tagMap by ${pluginName} plugin.`);
-          return;
+  /**
+   * Entry point for plugin pre-render
+   */
+  preRender(content) {
+    let preRenderedContent = content;
+    Object.entries(this.plugins)
+      .forEach(([pluginName, plugin]) => {
+        if (plugin.preRender) {
+          preRenderedContent
+            = plugin.preRender(preRenderedContent, this.pluginsContext[pluginName] || {},
+                               this.frontMatter, this.getPluginConfig());
         }
+      });
+    return preRenderedContent;
+  }
 
-        const selector = `${tagName}[${attrName}]`;
-        $(selector).each((i, el) => {
-          const elem = $(el);
-
-          let src = elem.attr(attrName);
+  /**
+   * Entry point for plugin post-render
+   */
+  postRender(content) {
+    let postRenderedContent = content;
+    Object.entries(this.plugins)
+      .forEach(([pluginName, plugin]) => {
+        if (plugin.postRender) {
+          postRenderedContent
+            = plugin.postRender(
+              postRenderedContent,
+              this.pluginsContext[pluginName] || {}, this.frontMatter, this.getPluginConfig());
+        }
+      });
+    return postRenderedContent;
+  }
 
-          src = ensurePosix(src);
-          if (src === '' || utils.isUrl(src)) {
-            return;
-          } else if (utils.isAbsolutePath(src)) {
-            self.pluginSourceFiles.add(path.resolve(src));
-            return;
-          }
+  /**
+   * Collect page content inserted by plugins
+   */
+  collectPluginsAssets(content) {
+    let links = [];
+    let scripts = [];
+    const linkUtils = {
+      buildStylesheet: href => `<link rel="stylesheet" href="${href}">`,
+    };
+    const scriptUtils = {
+      buildScript: src => `<script src="${src}"></script>`,
+    };
+    Object.entries(this.plugins)
+      .forEach(([pluginName, plugin]) => {
+        if (plugin.getLinks) {
+          const pluginLinks
+            = plugin.getLinks(content, this.pluginsContext[pluginName], this.frontMatter, linkUtils);
+          links = links.concat(pluginLinks);
+        }
+        if (plugin.getScripts) {
+          const pluginScripts
+            = plugin.getScripts(content, this.pluginsContext[pluginName], this.frontMatter, scriptUtils);
+          scripts = scripts.concat(pluginScripts);
+        }
+      });
+    this.asset.pluginLinks = links;
+    this.asset.pluginScripts = scripts;
+    return content;
+  }
 
-          // Resolve relative paths from the include page source, or current page source otherwise
-          const firstParent = elem.closest('div[data-included-from], span[data-included-from]');
-          const originalSrc = firstParent.attr('data-included-from') || self.sourcePath;
-          const originalSrcFolder = path.dirname(originalSrc);
-          const resolvedResourcePath = path.resolve(originalSrcFolder, src);
+  /**
+   * Adds linked layout files to page assets
+   */
+  addLayoutFiles() {
+    this.asset.layoutScript = path.join(this.layoutsAssetPath, this.frontMatter.layout, 'scripts.js');
+    this.asset.layoutStyle = path.join(this.layoutsAssetPath, this.frontMatter.layout, 'styles.css');
+  }
 
-          self.pluginSourceFiles.add(resolvedResourcePath);
-        });
+  /**
+   * Pre-render an external dynamic dependency
+   * Does not pre-render if file is already pre-rendered by another page during site generation
+   * @param dependency a map of the external dependency and where it is included
+   * @param builtFiles set of files already pre-rendered by another page
+   */
+  resolveDependency(dependency, builtFiles) {
+    const source = dependency.from;
+    const file = dependency.asIfTo;
+    return new Promise((resolve, reject) => {
+      const resultDir = path.dirname(path.resolve(this.resultPath, path.relative(this.sourcePath, file)));
+      const resultPath = path.join(resultDir, FsUtil.setExtension(path.basename(file), '._include_.html'));
+      if (builtFiles.has(resultPath)) {
+        return resolve();
+      }
+      builtFiles.add(resultPath);
+      /*
+       * We create a local instance of Markbind for an empty dynamicIncludeSrc
+       * so that we only recursively rebuild the file's included content
+       */
+      const markbinder = new MarkBind({
+        errorHandler: logger.error,
       });
-    }
-  });
+      let tempPath;
+      if (FsUtil.isInRoot(this.rootPath, file)) {
+        tempPath = path.join(path.dirname(this.tempPath), path.relative(this.rootPath, file));
+      } else {
+        logger.info(`Converting dynamic external resource ${file} to ${resultPath}`);
+        tempPath = path.join(path.dirname(this.tempPath), '.external', path.basename(file));
+      }
+      return markbinder.includeFile(dependency.to, {
+        baseUrlMap: this.baseUrlMap,
+        userDefinedVariablesMap: this.userDefinedVariablesMap,
+        rootPath: this.rootPath,
+        cwf: file,
+      })
+        .then(result => Page.removeFrontMatter(result))
+        .then(result => markbinder.resolveBaseUrl(result, {
+          baseUrlMap: this.baseUrlMap,
+          rootPath: this.rootPath,
+          isDynamic: true,
+          dynamicSource: source,
+        }))
+        .then(result => fs.outputFileAsync(tempPath, result))
+        .then(() => markbinder.renderFile(tempPath, {
+          baseUrlMap: this.baseUrlMap,
+          rootPath: this.rootPath,
+        }))
+        .then(result => markbinder.processDynamicResources(file, result))
+        .then((result) => {
+          // resolve the site base url here
+          const newBaseUrl = Page.calculateNewBaseUrl(file, this.rootPath, this.baseUrlMap);
+          const baseUrl = newBaseUrl ? `${this.baseUrl}/${newBaseUrl}` : this.baseUrl;
+          const hostBaseUrl = this.baseUrl;
+          const content = nunjucks.renderString(result, {
+            baseUrl,
+            hostBaseUrl,
+          });
+          return fs.outputFileAsync(resultPath, htmlBeautify(content, { indent_size: 2 }));
+        })
+        .then(() => {
+          // Recursion call to resolve nested dependency
+          const resolvingFiles = [];
+          Page.unique(markbinder.getDynamicIncludeSrc())
+            .forEach((src) => {
+              if (!FsUtil.isUrl(src.to)) {
+                resolvingFiles.push(this.resolveDependency(src, builtFiles));
+              }
+            });
+          return Promise.all(resolvingFiles);
+        })
+        .then(() => {
+          this.collectIncludedFiles(markbinder.getDynamicIncludeSrc());
+          this.collectIncludedFiles(markbinder.getStaticIncludeSrc());
+          this.collectIncludedFiles(markbinder.getBoilerplateIncludeSrc());
+          this.collectIncludedFiles(markbinder.getMissingIncludeSrc());
+        })
+        .then(resolve)
+        .catch(reject);
+    });
+  }
 
-  return content;
-};
+  static addContentWrapper(pageData) {
+    const $ = cheerio.load(pageData);
+    $(`#${CONTENT_WRAPPER_ID}`)
+      .removeAttr('id');
+    return `<div id="${CONTENT_WRAPPER_ID}">\n\n`
+      + `${$.html()}\n`
+      + '</div>';
+  }
 
-/**
- * Entry point for plugin pre-render
- */
-Page.prototype.preRender = function (content) {
-  let preRenderedContent = content;
-  Object.entries(this.plugins).forEach(([pluginName, plugin]) => {
-    if (plugin.preRender) {
-      preRenderedContent
-        = plugin.preRender(preRenderedContent, this.pluginsContext[pluginName] || {},
-                           this.frontMatter, this.getPluginConfig());
+  static calculateNewBaseUrl(filePath, root, lookUp) {
+    function calculate(file, result) {
+      if (file === root || !pathIsInside(file, root)) {
+        return undefined;
+      }
+      const parent = path.dirname(file);
+      if (lookUp.has(parent) && result.length === 1) {
+        return path.relative(root, result[0]);
+      } else if (lookUp.has(parent)) {
+        return calculate(parent, [parent]);
+      }
+      return calculate(parent, result);
     }
-  });
-  return preRenderedContent;
-};
 
-/**
- * Entry point for plugin post-render
- */
-Page.prototype.postRender = function (content) {
-  let postRenderedContent = content;
-  Object.entries(this.plugins).forEach(([pluginName, plugin]) => {
-    if (plugin.postRender) {
-      postRenderedContent
-        = plugin.postRender(postRenderedContent, this.pluginsContext[pluginName] || {},
-                            this.frontMatter, this.getPluginConfig());
-    }
-  });
-  return postRenderedContent;
-};
+    return calculate(filePath, []);
+  }
 
-/**
- * Collect page content inserted by plugins
- */
-Page.prototype.collectPluginsAssets = function (content) {
-  let links = [];
-  let scripts = [];
-
-  const linkUtils = {
-    buildStylesheet: href => `<link rel="stylesheet" href="${href}">`,
-  };
-  const scriptUtils = {
-    buildScript: src => `<script src="${src}"></script>`,
-  };
-
-  Object.entries(this.plugins).forEach(([pluginName, plugin]) => {
-    if (plugin.getLinks) {
-      const pluginLinks
-            = plugin.getLinks(content, this.pluginsContext[pluginName], this.frontMatter, linkUtils);
-      links = links.concat(pluginLinks);
-    }
-    if (plugin.getScripts) {
-      const pluginScripts
-            = plugin.getScripts(content, this.pluginsContext[pluginName], this.frontMatter, scriptUtils);
-      scripts = scripts.concat(pluginScripts);
+  static removePageHeaderAndFooter(pageData) {
+    const $ = cheerio.load(pageData);
+    const pageHeaderAndFooter = $('header', 'footer');
+    if (pageHeaderAndFooter.length === 0) {
+      return pageData;
     }
-  });
-
-  this.asset.pluginLinks = links;
-  this.asset.pluginScripts = scripts;
-  return content;
-};
+    // Remove preceding footers
+    pageHeaderAndFooter.remove();
+    return $.html();
+  }
 
-/**
- * Adds linked layout files to page assets
- */
-Page.prototype.addLayoutFiles = function () {
-  this.asset.layoutScript = path.join(this.layoutsAssetPath, this.frontMatter.layout, 'scripts.js');
-  this.asset.layoutStyle = path.join(this.layoutsAssetPath, this.frontMatter.layout, 'styles.css');
-};
-
-/**
- * Pre-render an external dynamic dependency
- * Does not pre-render if file is already pre-rendered by another page during site generation
- * @param dependency a map of the external dependency and where it is included
- * @param builtFiles set of files already pre-rendered by another page
- */
-Page.prototype.resolveDependency = function (dependency, builtFiles) {
-  const source = dependency.from;
-  const file = dependency.asIfTo;
-  return new Promise((resolve, reject) => {
-    const resultDir = path.dirname(path.resolve(this.resultPath, path.relative(this.sourcePath, file)));
-    const resultPath = path.join(resultDir, FsUtil.setExtension(path.basename(file), '._include_.html'));
-
-    if (builtFiles.has(resultPath)) {
-      return resolve();
+  static formatSiteNav(renderedSiteNav, src) {
+    const $ = cheerio.load(renderedSiteNav);
+    const listItems = $.root()
+      .find('ul')
+      .first()
+      .children();
+    if (listItems.length === 0) {
+      return renderedSiteNav;
     }
+    // Tidy up the style of the unordered list <ul>
+    listItems.parent()
+      .addClass(`${SITE_NAV_LIST_CLASS}`);
+
+    // Set class of <a> to ${SITE_NAV_ID}__a to style links
+    listItems.find('a[href]')
+      .addClass(`${SITE_NAV_ID}__a`);
+
+    // Highlight current page
+    const currentPageHtmlPath = src.replace(/\.(md|mbd)$/, '.html');
+    listItems.find(`a[href='{{baseUrl}}/${currentPageHtmlPath}']`)
+      .addClass('current');
+
+    listItems.each(function () {
+      // Tidy up the style of each list item
+      $(this)
+        .addClass('mt-2');
+      // Do not render dropdown menu for list items with <a> tag
+      if ($(this)
+        .children('a').length) {
+        const nestedList = $(this)
+          .children('ul')
+          .first();
+        if (nestedList.length) {
+          // Double wrap to counter replaceWith removing <li>
+          nestedList.parent()
+            .wrap('<li class="mt-2"></li>');
+          // Recursively format nested lists without dropdown wrapper
+          nestedList.parent()
+            .replaceWith(Page.formatSiteNav(nestedList.parent()
+              .html(), src));
+        }
+        // Found nested list, render dropdown menu
+      } else if ($(this)
+        .children('ul').length) {
+        const nestedList = $(this)
+          .children('ul')
+          .first();
+        const dropdownTitle = $(this)
+          .contents()
+          .not('ul');
+        // Replace the title with the dropdown wrapper
+        dropdownTitle.remove();
+        // Check if dropdown is expanded by default or if the current page is in a dropdown
+        const shouldExpandDropdown = dropdownTitle.toString()
+          .includes(DROPDOWN_EXPAND_KEYWORD)
+          || Boolean(nestedList.find(`a[href='{{baseUrl}}/${currentPageHtmlPath}']`)
+            .text());
+        if (shouldExpandDropdown) {
+          const expandKeywordRegex = new RegExp(DROPDOWN_EXPAND_KEYWORD, 'g');
+          const dropdownTitleWithoutKeyword = dropdownTitle.toString()
+            .replace(expandKeywordRegex, '');
+          const rotatedIcon = cheerio.load(DROPDOWN_BUTTON_ICON_HTML, { xmlMode: false })('i')
+            .addClass('rotate-icon');
+          nestedList.wrap('<div class="dropdown-container dropdown-container-open"></div>');
+          $(this)
+            .prepend('<button class="dropdown-btn dropdown-btn-open">'
+              + `${dropdownTitleWithoutKeyword} `
+              + `${rotatedIcon}\n`
+              + '</button>');
+        } else {
+          nestedList.wrap('<div class="dropdown-container"></div>');
+          $(this)
+            .prepend('<button class="dropdown-btn">'
+              + `${dropdownTitle} `
+              + `${DROPDOWN_BUTTON_ICON_HTML}\n`
+              + '</button>');
+        }
+        // Recursively format nested lists
+        nestedList.replaceWith(Page.formatSiteNav(nestedList.parent()
+          .html(), src));
+      }
+    });
+    return $.html();
+  }
 
-    builtFiles.add(resultPath);
+  /**
+   * Generates a selector for headings with level inside the headingIndexLevel
+   * or with the index attribute, that do not also have the noindex attribute
+   * @param headingIndexingLevel to generate
+   */
+  static generateHeadingSelector(headingIndexingLevel) {
+    let headingsSelectors = ['.always-index:header', 'h1'];
+    for (let i = 2; i <= headingIndexingLevel; i += 1) {
+      headingsSelectors.push(`h${i}`);
+    }
+    headingsSelectors = headingsSelectors.map(selector => `${selector}:not(.no-index)`);
+    return headingsSelectors.join(',');
+  }
 
-    /*
-     * We create a local instance of Markbind for an empty dynamicIncludeSrc
-     * so that we only recursively rebuild the file's included content
-     */
-    const markbinder = new MarkBind({
-      errorHandler: logger.error,
-    });
+  static unique(array) {
+    return [...new Set(array)];
+  }
 
-    let tempPath;
-    if (FsUtil.isInRoot(this.rootPath, file)) {
-      tempPath = path.join(path.dirname(this.tempPath), path.relative(this.rootPath, file));
-    } else {
-      logger.info(`Converting dynamic external resource ${file} to ${resultPath}`);
-      tempPath = path.join(path.dirname(this.tempPath), '.external', path.basename(file));
+  /**
+   * Gets the closest heading to an element
+   * @param $ a Cheerio object
+   * @param headingsSelector jQuery selector for selecting headings
+   * @param element to find closest heading
+   */
+  static getClosestHeading($, headingsSelector, element) {
+    const prevElements = $(element)
+      .prevAll();
+    for (let i = 0; i < prevElements.length; i += 1) {
+      const currentElement = $(prevElements[i]);
+      if (currentElement.is(headingsSelector)) {
+        return currentElement;
+      }
+      const childHeadings = currentElement.find(headingsSelector);
+      if (childHeadings.length > 0) {
+        return childHeadings.last();
+      }
     }
-    return markbinder.includeFile(dependency.to, {
-      baseUrlMap: this.baseUrlMap,
-      userDefinedVariablesMap: this.userDefinedVariablesMap,
-      rootPath: this.rootPath,
-      cwf: file,
-    })
-      .then(result => this.removeFrontMatter(result))
-      .then(result => markbinder.resolveBaseUrl(result, {
-        baseUrlMap: this.baseUrlMap,
-        rootPath: this.rootPath,
-        isDynamic: true,
-        dynamicSource: source,
-      }))
-      .then(result => fs.outputFileAsync(tempPath, result))
-      .then(() => markbinder.renderFile(tempPath, {
-        baseUrlMap: this.baseUrlMap,
-        rootPath: this.rootPath,
-      }))
-      .then(result => markbinder.processDynamicResources(file, result))
-      .then((result) => {
-        // resolve the site base url here
-        const newBaseUrl = calculateNewBaseUrl(file, this.rootPath, this.baseUrlMap);
-        const baseUrl = newBaseUrl ? `${this.baseUrl}/${newBaseUrl}` : this.baseUrl;
-        const hostBaseUrl = this.baseUrl;
-
-        const content = nunjucks.renderString(result, { baseUrl, hostBaseUrl });
-        return fs.outputFileAsync(resultPath, htmlBeautify(content, { indent_size: 2 }));
-      })
-      .then(() => {
-        // Recursion call to resolve nested dependency
-        const resolvingFiles = [];
-        unique(markbinder.getDynamicIncludeSrc()).forEach((src) => {
-          if (!FsUtil.isUrl(src.to)) resolvingFiles.push(this.resolveDependency(src, builtFiles));
-        });
-        return Promise.all(resolvingFiles);
-      })
-      .then(() => {
-        this.collectIncludedFiles(markbinder.getDynamicIncludeSrc());
-        this.collectIncludedFiles(markbinder.getStaticIncludeSrc());
-        this.collectIncludedFiles(markbinder.getBoilerplateIncludeSrc());
-        this.collectIncludedFiles(markbinder.getMissingIncludeSrc());
-      })
-      .then(resolve)
-      .catch(reject);
-  });
-};
+    if ($(element)
+      .parent().length === 0) {
+      return null;
+    }
+    return Page.getClosestHeading($, headingsSelector, $(element)
+      .parent());
+  }
+}
 
 module.exports = Page;
diff --git a/src/Site.js b/src/Site.js
index 2334f9c7c0..6935ab8f77 100644
--- a/src/Site.js
+++ b/src/Site.js
@@ -34,26 +34,26 @@ const Template = require('./template/template');
 const CLI_VERSION = require('../package.json').version;
 
 const {
-  CONFIG_FOLDER_NAME,
-  HEADING_INDEXING_LEVEL_DEFAULT,
-  SITE_ASSET_FOLDER_NAME,
-  TEMP_FOLDER_NAME,
-  TEMPLATE_SITE_ASSET_FOLDER_NAME,
   ABOUT_MARKDOWN_FILE,
   BUILT_IN_PLUGIN_FOLDER_NAME,
   BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME,
+  CONFIG_FOLDER_NAME,
   FAVICON_DEFAULT_PATH,
   FOOTER_PATH,
+  HEADING_INDEXING_LEVEL_DEFAULT,
   INDEX_MARKDOWN_FILE,
+  LAYOUT_DEFAULT_NAME,
+  LAYOUT_FOLDER_PATH,
+  LAYOUT_SITE_FOLDER_NAME,
   MARKBIND_PLUGIN_PREFIX,
   MARKBIND_WEBSITE_URL,
   PAGE_TEMPLATE_NAME,
   PROJECT_PLUGIN_FOLDER_NAME,
+  SITE_ASSET_FOLDER_NAME,
   SITE_CONFIG_NAME,
   SITE_DATA_NAME,
-  LAYOUT_DEFAULT_NAME,
-  LAYOUT_FOLDER_PATH,
-  LAYOUT_SITE_FOLDER_NAME,
+  TEMP_FOLDER_NAME,
+  TEMPLATE_SITE_ASSET_FOLDER_NAME,
   USER_VARIABLES_PATH,
   WIKI_SITE_NAV_PATH,
   WIKI_FOOTER_PATH,
@@ -100,928 +100,928 @@ 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) {
-  this.rootPath = rootPath;
-  this.outputPath = outputPath;
-  this.tempPath = path.join(rootPath, TEMP_FOLDER_NAME);
-
-  // MarkBind assets to be copied
-  this.siteAssetsSrcPath = path.resolve(__dirname, '..', SITE_ASSET_FOLDER_NAME);
-  this.siteAssetsDestPath = path.join(outputPath, TEMPLATE_SITE_ASSET_FOLDER_NAME);
-
-  // Page template path
-  this.pageTemplatePath = path.join(__dirname, PAGE_TEMPLATE_NAME);
-  const env = nunjucks.configure({ autoescape: false });
-  this.pageTemplate = nunjucks.compile(fs.readFileSync(this.pageTemplatePath, 'utf8'), env);
-  this.pages = [];
-
-  // Other properties
-  this.addressablePages = [];
-  this.baseUrlMap = new Set();
-  this.forceReload = forceReload;
-  this.onePagePath = onePagePath;
-  this.plugins = {};
-  this.siteConfig = {};
-  this.siteConfigPath = siteConfigPath;
-  this.userDefinedVariablesMap = {};
-}
-
-/**
- * Util Methods
- */
-
-function rejectHandler(reject, error, removeFolders) {
-  logger.warn(error);
-  Promise.all(removeFolders.map(folder => fs.removeAsync(folder)))
-    .then(() => {
-      reject(error);
-    })
-    .catch((err) => {
-      reject(new Error(`${error.message}\n${err.message}`));
-    });
-}
-
-function setExtension(filename, ext) {
-  return path.join(
-    path.dirname(filename),
-    path.basename(filename, path.extname(filename)) + ext,
-  );
-}
+class Site {
+  constructor(rootPath, outputPath, onePagePath, forceReload = false, siteConfigPath = SITE_CONFIG_NAME) {
+    this.rootPath = rootPath;
+    this.outputPath = outputPath;
+    this.tempPath = path.join(rootPath, TEMP_FOLDER_NAME);
+
+    // MarkBind assets to be copied
+    this.siteAssetsSrcPath = path.resolve(__dirname, '..', SITE_ASSET_FOLDER_NAME);
+    this.siteAssetsDestPath = path.join(outputPath, TEMPLATE_SITE_ASSET_FOLDER_NAME);
+
+    // Page template path
+    this.pageTemplatePath = path.join(__dirname, PAGE_TEMPLATE_NAME);
+    const env = nunjucks.configure({ autoescape: false });
+    this.pageTemplate = nunjucks.compile(fs.readFileSync(this.pageTemplatePath, 'utf8'), env);
+    this.pages = [];
+
+    // Other properties
+    this.addressablePages = [];
+    this.baseUrlMap = new Set();
+    this.forceReload = forceReload;
+    this.onePagePath = onePagePath;
+    this.plugins = {};
+    this.siteConfig = {};
+    this.siteConfigPath = siteConfigPath;
+    this.userDefinedVariablesMap = {};
+  }
 
-/**
- * Static method for initializing a markbind site.
- * Generate the site.json and an index.md file.
- *
- * @param rootPath
- * @param templatePath
- */
-Site.initSite = function (rootPath, templatePath) {
-  return new Promise((resolve, reject) => {
-    new Template(rootPath, templatePath).init()
-      .then(resolve)
-      .catch((err) => {
-        reject(new Error(`Failed to initialize site with given template with error: ${err.message}`));
-      });
-  });
-};
+  /**
+   * Util Methods
+   */
 
-Site.prototype.readSiteConfig = function (baseUrl) {
-  return new Promise((resolve, reject) => {
-    const siteConfigPath = path.join(this.rootPath, this.siteConfigPath);
-    fs.readJsonAsync(siteConfigPath)
-      .then((config) => {
-        this.siteConfig = config;
-        this.siteConfig.baseUrl = (baseUrl === undefined) ? this.siteConfig.baseUrl : baseUrl;
-        this.siteConfig.enableSearch = (config.enableSearch === undefined) || config.enableSearch;
-        resolve(this.siteConfig);
+  static rejectHandler(reject, error, removeFolders) {
+    logger.warn(error);
+    Promise.all(removeFolders.map(folder => fs.removeAsync(folder)))
+      .then(() => {
+        reject(error);
       })
       .catch((err) => {
-        reject(new Error(`Failed to read the site config file '${this.siteConfigPath}' at`
-          + `${this.rootPath}:\n${err.message}\nPlease ensure the file exist or is valid`));
+        reject(new Error(`${error.message}\n${err.message}`));
       });
-  });
-};
-
-Site.prototype.listAssets = function (fileIgnore) {
-  return new Promise((resolve, reject) => {
-    let files;
-    try {
-      files = walkSync(this.rootPath, { directories: false });
-      resolve(fileIgnore.filter(files));
-    } catch (error) {
-      reject(error);
-    }
-  });
-};
+  }
 
-Site.prototype.createPage = function (config) {
-  const sourcePath = path.join(this.rootPath, config.pageSrc);
-  const tempPath = path.join(this.tempPath, config.pageSrc);
-  const resultPath = path.join(this.outputPath, setExtension(config.pageSrc, '.html'));
-  return new Page({
-    baseUrl: this.siteConfig.baseUrl,
-    baseUrlMap: this.baseUrlMap,
-    content: '',
-    pluginsContext: this.siteConfig.pluginsContext || {},
-    faviconUrl: config.faviconUrl,
-    frontmatter: config.frontmatter,
-    globalOverride: this.siteConfig.globalOverride || {},
-    pageTemplate: this.pageTemplate,
-    plugins: this.plugins || {},
-    rootPath: this.rootPath,
-    enableSearch: this.siteConfig.enableSearch,
-    searchable: this.siteConfig.enableSearch && config.searchable,
-    src: config.pageSrc,
-    layoutsAssetPath: path.relative(path.dirname(resultPath),
-                                    path.join(this.siteAssetsDestPath, LAYOUT_SITE_FOLDER_NAME)),
-    layout: config.layout,
-    title: config.title || '',
-    titlePrefix: this.siteConfig.titlePrefix,
-    headingIndexingLevel: this.siteConfig.headingIndexingLevel || HEADING_INDEXING_LEVEL_DEFAULT,
-    userDefinedVariablesMap: this.userDefinedVariablesMap,
-    sourcePath,
-    tempPath,
-    resultPath,
-    asset: {
-      bootstrap: path.relative(path.dirname(resultPath),
-                               path.join(this.siteAssetsDestPath, 'css', 'bootstrap.min.css')),
-      bootstrapVue: path.relative(path.dirname(resultPath),
-                                  path.join(this.siteAssetsDestPath, 'css', 'bootstrap-vue.min.css')),
-      externalScripts: _.union(this.siteConfig.externalScripts, config.externalScripts),
-      fontAwesome: path.relative(path.dirname(resultPath),
-                                 path.join(this.siteAssetsDestPath, 'fontawesome', 'css', 'all.min.css')),
-      glyphicons: path.relative(path.dirname(resultPath),
-                                path.join(this.siteAssetsDestPath, 'glyphicons', 'css',
-                                          'bootstrap-glyphicons.min.css')),
-      highlight: path.relative(path.dirname(resultPath),
-                               path.join(this.siteAssetsDestPath, 'css', 'github.min.css')),
-      markbind: path.relative(path.dirname(resultPath),
-                              path.join(this.siteAssetsDestPath, 'css', 'markbind.css')),
-      pageNavCss: path.relative(path.dirname(resultPath),
-                                path.join(this.siteAssetsDestPath, 'css', 'page-nav.css')),
-      siteNavCss: path.relative(path.dirname(resultPath),
-                                path.join(this.siteAssetsDestPath, 'css', 'site-nav.css')),
-      bootstrapUtilityJs: path.relative(path.dirname(resultPath),
-                                        path.join(this.siteAssetsDestPath, 'js', 'bootstrap-utility.min.js')),
-      bootstrapVueJs: path.relative(path.dirname(resultPath),
-                                    path.join(this.siteAssetsDestPath, 'js', 'bootstrap-vue.min.js')),
-      polyfillJs: path.relative(path.dirname(resultPath),
-                                path.join(this.siteAssetsDestPath, 'js', 'polyfill.min.js')),
-      setup: path.relative(path.dirname(resultPath),
-                           path.join(this.siteAssetsDestPath, 'js', 'setup.js')),
-      vue: path.relative(path.dirname(resultPath),
-                         path.join(this.siteAssetsDestPath, 'js', 'vue.min.js')),
-      vueStrap: path.relative(path.dirname(resultPath),
-                              path.join(this.siteAssetsDestPath, 'js', 'vue-strap.min.js')),
-    },
-  });
-};
+  static setExtension(filename, ext) {
+    return path.join(
+      path.dirname(filename),
+      path.basename(filename, path.extname(filename)) + ext,
+    );
+  }
 
-/**
- * Converts an existing Github wiki or docs folder to a MarkBind website.
- */
-Site.prototype.convert = function () {
-  return this.readSiteConfig()
-    .then(() => this.collectAddressablePages())
-    .then(() => this.addIndexPage())
-    .then(() => this.addAboutPage())
-    .then(() => this.addTopNavToDefaultLayout())
-    .then(() => this.addFooterToDefaultLayout())
-    .then(() => this.addSiteNavToDefaultLayout())
-    .then(() => this.addDefaultLayoutToSiteConfig())
-    .then(() => this.printBaseUrlMessage());
-};
+  /**
+   * Static method for initializing a markbind site.
+   * Generate the site.json and an index.md file.
+   *
+   * @param rootPath
+   * @param templatePath
+   */
+  static initSite(rootPath, templatePath) {
+    return new Promise((resolve, reject) => {
+      new Template(rootPath, templatePath).init()
+        .then(resolve)
+        .catch((err) => {
+          reject(new Error(`Failed to initialize site with given template with error: ${err.message}`));
+        });
+    });
+  }
 
-/**
- * Copies over README.md or Home.md to default index.md if present.
- */
-Site.prototype.addIndexPage = function () {
-  const indexPagePath = path.join(this.rootPath, INDEX_MARKDOWN_FILE);
-  const fileNames = ['README.md', 'Home.md'];
-  const filePath = fileNames.find(fileName => fs.existsSync(path.join(this.rootPath, fileName)));
-  // if none of the files exist, do nothing
-  if (_.isUndefined(filePath)) return Promise.resolve();
-  return fs.copyAsync(path.join(this.rootPath, filePath), indexPagePath)
-    .catch(() => Promise.reject(new Error(`Failed to copy over ${filePath}`)));
-};
+  readSiteConfig(baseUrl) {
+    return new Promise((resolve, reject) => {
+      const siteConfigPath = path.join(this.rootPath, this.siteConfigPath);
+      fs.readJsonAsync(siteConfigPath)
+        .then((config) => {
+          this.siteConfig = config;
+          this.siteConfig.baseUrl = (baseUrl === undefined) ? this.siteConfig.baseUrl : baseUrl;
+          this.siteConfig.enableSearch = (config.enableSearch === undefined) || config.enableSearch;
+          resolve(this.siteConfig);
+        })
+        .catch((err) => {
+          reject(new Error(`Failed to read the site config file '${this.siteConfigPath}' at`
+            + `${this.rootPath}:\n${err.message}\nPlease ensure the file exist or is valid`));
+        });
+    });
+  }
 
-/**
- * Adds an about page to site if not present.
- */
-Site.prototype.addAboutPage = function () {
-  const aboutPath = path.join(this.rootPath, ABOUT_MARKDOWN_FILE);
-  return fs.accessAsync(aboutPath)
-    .catch(() => {
-      if (fs.existsSync(aboutPath)) {
-        return Promise.resolve();
+  listAssets(fileIgnore) {
+    return new Promise((resolve, reject) => {
+      let files;
+      try {
+        files = walkSync(this.rootPath, { directories: false });
+        resolve(fileIgnore.filter(files));
+      } catch (error) {
+        reject(error);
       }
-      return fs.outputFileAsync(aboutPath, ABOUT_MARKDOWN_DEFAULT);
     });
-};
-
-/**
- * Adds top navigation menu to default layout of site.
- */
-Site.prototype.addTopNavToDefaultLayout = function () {
-  const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
-  const siteLayoutHeaderDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME, 'header.md');
-
-  return fs.outputFileAsync(siteLayoutHeaderDefaultPath, TOP_NAV_DEFAULT);
-};
+  }
 
-/**
- * Adds a footer to default layout of site.
- */
-Site.prototype.addFooterToDefaultLayout = function () {
-  const footerPath = path.join(this.rootPath, FOOTER_PATH);
-  const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
-  const siteLayoutFooterDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME, 'footer.md');
-  const wikiFooterPath = path.join(this.rootPath, WIKI_FOOTER_PATH);
-
-  return fs.accessAsync(wikiFooterPath)
-    .then(() => {
-      const footerContent = fs.readFileSync(wikiFooterPath, 'utf8');
-      const wrappedFooterContent = `<footer>\n\t${footerContent}\n</footer>`;
-      return fs.outputFileAsync(siteLayoutFooterDefaultPath, wrappedFooterContent);
-    })
-    .catch(() => {
-      if (fs.existsSync(footerPath)) {
-        return fs.copyAsync(footerPath, siteLayoutFooterDefaultPath);
-      }
-      return Promise.resolve();
+  createPage(config) {
+    const sourcePath = path.join(this.rootPath, config.pageSrc);
+    const tempPath = path.join(this.tempPath, config.pageSrc);
+    const resultPath = path.join(this.outputPath, Site.setExtension(config.pageSrc, '.html'));
+    return new Page({
+      baseUrl: this.siteConfig.baseUrl,
+      baseUrlMap: this.baseUrlMap,
+      content: '',
+      pluginsContext: this.siteConfig.pluginsContext || {},
+      faviconUrl: config.faviconUrl,
+      frontmatter: config.frontmatter,
+      globalOverride: this.siteConfig.globalOverride || {},
+      pageTemplate: this.pageTemplate,
+      plugins: this.plugins || {},
+      rootPath: this.rootPath,
+      enableSearch: this.siteConfig.enableSearch,
+      searchable: this.siteConfig.enableSearch && config.searchable,
+      src: config.pageSrc,
+      layoutsAssetPath: path.relative(path.dirname(resultPath),
+                                      path.join(this.siteAssetsDestPath, LAYOUT_SITE_FOLDER_NAME)),
+      layout: config.layout,
+      title: config.title || '',
+      titlePrefix: this.siteConfig.titlePrefix,
+      headingIndexingLevel: this.siteConfig.headingIndexingLevel || HEADING_INDEXING_LEVEL_DEFAULT,
+      userDefinedVariablesMap: this.userDefinedVariablesMap,
+      sourcePath,
+      tempPath,
+      resultPath,
+      asset: {
+        bootstrap: path.relative(path.dirname(resultPath),
+                                 path.join(this.siteAssetsDestPath, 'css', 'bootstrap.min.css')),
+        bootstrapVue: path.relative(path.dirname(resultPath),
+                                    path.join(this.siteAssetsDestPath, 'css', 'bootstrap-vue.min.css')),
+        externalScripts: _.union(this.siteConfig.externalScripts, config.externalScripts),
+        fontAwesome: path.relative(path.dirname(resultPath),
+                                   path.join(this.siteAssetsDestPath, 'fontawesome', 'css', 'all.min.css')),
+        glyphicons: path.relative(path.dirname(resultPath),
+                                  path.join(this.siteAssetsDestPath, 'glyphicons', 'css',
+                                            'bootstrap-glyphicons.min.css')),
+        highlight: path.relative(path.dirname(resultPath),
+                                 path.join(this.siteAssetsDestPath, 'css', 'github.min.css')),
+        markbind: path.relative(path.dirname(resultPath),
+                                path.join(this.siteAssetsDestPath, 'css', 'markbind.css')),
+        pageNavCss: path.relative(path.dirname(resultPath),
+                                  path.join(this.siteAssetsDestPath, 'css', 'page-nav.css')),
+        siteNavCss: path.relative(path.dirname(resultPath),
+                                  path.join(this.siteAssetsDestPath, 'css', 'site-nav.css')),
+        bootstrapUtilityJs: path.relative(path.dirname(resultPath),
+                                          path.join(this.siteAssetsDestPath,
+                                                    'js', 'bootstrap-utility.min.js')),
+        bootstrapVueJs: path.relative(path.dirname(resultPath),
+                                      path.join(this.siteAssetsDestPath, 'js', 'bootstrap-vue.min.js')),
+        polyfillJs: path.relative(path.dirname(resultPath),
+                                  path.join(this.siteAssetsDestPath, 'js', 'polyfill.min.js')),
+        setup: path.relative(path.dirname(resultPath),
+                             path.join(this.siteAssetsDestPath, 'js', 'setup.js')),
+        vue: path.relative(path.dirname(resultPath),
+                           path.join(this.siteAssetsDestPath, 'js', 'vue.min.js')),
+        vueStrap: path.relative(path.dirname(resultPath),
+                                path.join(this.siteAssetsDestPath, 'js', 'vue-strap.min.js')),
+      },
     });
-};
+  }
 
-/**
- * Adds a site navigation bar to the default layout of the site.
- */
-Site.prototype.addSiteNavToDefaultLayout = function () {
-  const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
-  const siteLayoutSiteNavDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME, 'navigation.md');
-  const wikiSiteNavPath = path.join(this.rootPath, WIKI_SITE_NAV_PATH);
-
-  return fs.accessAsync(wikiSiteNavPath)
-    .then(() => {
-      const siteNavContent = fs.readFileSync(wikiSiteNavPath, 'utf8');
-      const wrappedSiteNavContent = `<navigation>\n${siteNavContent}\n</navigation>`;
-      logger.info(`Copied over the existing _Sidebar.md file to ${path.relative(
-        this.rootPath, siteLayoutSiteNavDefaultPath)}`
-        + 'Check https://markbind.org/userGuide/tweakingThePageStructure.html#site-navigation-menus\n'
-        + 'for information on site navigation menus.');
-      return fs.outputFileSync(siteLayoutSiteNavDefaultPath, wrappedSiteNavContent);
-    })
-    .catch(() => this.buildSiteNav(siteLayoutSiteNavDefaultPath));
-};
+  /**
+   * Converts an existing Github wiki or docs folder to a MarkBind website.
+   */
+  convert() {
+    return this.readSiteConfig()
+      .then(() => this.collectAddressablePages())
+      .then(() => this.addIndexPage())
+      .then(() => this.addAboutPage())
+      .then(() => this.addTopNavToDefaultLayout())
+      .then(() => this.addFooterToDefaultLayout())
+      .then(() => this.addSiteNavToDefaultLayout())
+      .then(() => this.addDefaultLayoutToSiteConfig())
+      .then(() => Site.printBaseUrlMessage());
+  }
 
-/**
- * Builds a site navigation file from the directory structure of the site.
- * @param siteLayoutSiteNavDefaultPath
- */
-Site.prototype.buildSiteNav = function (siteLayoutSiteNavDefaultPath) {
-  let siteNavContent = '';
-  this.addressablePages
-    .filter(addressablePage => !addressablePage.src.startsWith('_'))
-    .forEach((page) => {
-      const addressablePagePath = path.join(this.rootPath, page.src);
-      const relativePagePathWithoutExt = FsUtil.removeExtension(
-        path.relative(this.rootPath, addressablePagePath));
-      const pageName = _.startCase(FsUtil.removeExtension(path.basename(addressablePagePath)));
-      const pageUrl = `{{ baseUrl }}/${relativePagePathWithoutExt}.html`;
-      siteNavContent += `* [${pageName}](${pageUrl})\n`;
-    });
-  const wrappedSiteNavContent = `<navigation>\n${siteNavContent}\n</navigation>`;
-  return fs.outputFileAsync(siteLayoutSiteNavDefaultPath, wrappedSiteNavContent);
-};
+  /**
+   * Copies over README.md or Home.md to default index.md if present.
+   */
+  addIndexPage() {
+    const indexPagePath = path.join(this.rootPath, INDEX_MARKDOWN_FILE);
+    const fileNames = ['README.md', 'Home.md'];
+    const filePath = fileNames.find(fileName => fs.existsSync(path.join(this.rootPath, fileName)));
+    // if none of the files exist, do nothing
+    if (_.isUndefined(filePath)) return Promise.resolve();
+    return fs.copyAsync(path.join(this.rootPath, filePath), indexPagePath)
+      .catch(() => Promise.reject(new Error(`Failed to copy over ${filePath}`)));
+  }
 
-/**
- * Applies the default layout to all addressable pages by modifying the site config file.
- */
-Site.prototype.addDefaultLayoutToSiteConfig = function () {
-  const configPath = path.join(this.rootPath, SITE_CONFIG_NAME);
-  return fs.readJsonAsync(configPath)
-    .then((config) => {
-      const layoutObj = { glob: '**/*.+(md|mbd)', layout: LAYOUT_DEFAULT_NAME };
-      config.pages.push(layoutObj);
-      return fs.outputJsonAsync(configPath, config);
-    });
-};
+  /**
+   * Adds an about page to site if not present.
+   */
+  addAboutPage() {
+    const aboutPath = path.join(this.rootPath, ABOUT_MARKDOWN_FILE);
+    return fs.accessAsync(aboutPath)
+      .catch(() => {
+        if (fs.existsSync(aboutPath)) {
+          return Promise.resolve();
+        }
+        return fs.outputFileAsync(aboutPath, ABOUT_MARKDOWN_DEFAULT);
+      });
+  }
 
-Site.prototype.printBaseUrlMessage = function () {
-  logger.info('The default base URL of your site is set to /\n'
-    + 'You can change the base URL of your site by editing site.json\n'
-    + 'Check https://markbind.org/userGuide/siteConfiguration.html for more information.');
-  return Promise.resolve();
-};
+  /**
+   * Adds top navigation menu to default layout of site.
+   */
+  addTopNavToDefaultLayout() {
+    const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
+    const siteLayoutHeaderDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME, 'header.md');
 
-/**
- * Updates the paths to be traversed as addressable pages and returns a list of filepaths to be deleted
- */
-Site.prototype.updateAddressablePages = function () {
-  const oldAddressablePages = this.addressablePages.slice();
-  this.collectAddressablePages();
-  return _.difference(oldAddressablePages.map(page => page.src),
-                      this.addressablePages.map(page => page.src))
-    .map(filePath => setExtension(filePath, '.html'));
-};
+    return fs.outputFileAsync(siteLayoutHeaderDefaultPath, TOP_NAV_DEFAULT);
+  }
 
-/**
- * Collects the paths to be traversed as addressable pages
- */
-Site.prototype.collectAddressablePages = function () {
-  const { pages } = this.siteConfig;
-  const addressableGlobs = pages.filter(page => page.glob);
-  this.addressablePages = pages.filter(page => page.src);
-  const set = new Set();
-  const duplicatePages = this.addressablePages
-    .filter(page => set.size === set.add(page.src).size)
-    .map(page => page.src);
-  if (duplicatePages.length > 0) {
-    return Promise.reject(
-      new Error(`Duplicate page entries found in site config: ${_.uniq(duplicatePages).join(', ')}`));
+  /**
+   * Adds a footer to default layout of site.
+   */
+  addFooterToDefaultLayout() {
+    const footerPath = path.join(this.rootPath, FOOTER_PATH);
+    const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
+    const siteLayoutFooterDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME, 'footer.md');
+    const wikiFooterPath = path.join(this.rootPath, WIKI_FOOTER_PATH);
+
+    return fs.accessAsync(wikiFooterPath)
+      .then(() => {
+        const footerContent = fs.readFileSync(wikiFooterPath, 'utf8');
+        const wrappedFooterContent = `<footer>\n\t${footerContent}\n</footer>`;
+        return fs.outputFileAsync(siteLayoutFooterDefaultPath, wrappedFooterContent);
+      })
+      .catch(() => {
+        if (fs.existsSync(footerPath)) {
+          return fs.copyAsync(footerPath, siteLayoutFooterDefaultPath);
+        }
+        return Promise.resolve();
+      });
   }
-  const globPaths = addressableGlobs.reduce((globPages, addressableGlob) =>
-    globPages.concat(walkSync(this.rootPath, {
-      directories: false,
-      globs: [addressableGlob.glob],
-      ignore: [CONFIG_FOLDER_NAME],
-    }).map(globPath => ({
-      src: globPath,
-      searchable: addressableGlob.searchable,
-      layout: addressableGlob.layout,
-      frontmatter: addressableGlob.frontmatter,
-    }))), []);
-  // Add pages collected by walkSync and merge properties for pages
-  const filteredPages = {};
-  globPaths.concat(this.addressablePages).forEach((page) => {
-    const filteredPage = _.omitBy(page, _.isUndefined);
-    if (page.src in filteredPages) {
-      filteredPages[page.src] = { ...filteredPages[page.src], ...filteredPage };
-    } else {
-      filteredPages[page.src] = filteredPage;
-    }
-  });
-  this.addressablePages = Object.values(filteredPages);
 
-  return Promise.resolve();
-};
+  /**
+   * Adds a site navigation bar to the default layout of the site.
+   */
+  addSiteNavToDefaultLayout() {
+    const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
+    const siteLayoutSiteNavDefaultPath = path.join(siteLayoutPath, LAYOUT_DEFAULT_NAME, 'navigation.md');
+    const wikiSiteNavPath = path.join(this.rootPath, WIKI_SITE_NAV_PATH);
 
-Site.prototype.collectBaseUrl = function () {
-  const candidates
-    = walkSync(this.rootPath, { directories: false })
-      .filter(x => x.endsWith(this.siteConfigPath))
-      .map(x => path.resolve(this.rootPath, x));
+    return fs.accessAsync(wikiSiteNavPath)
+      .then(() => {
+        const siteNavContent = fs.readFileSync(wikiSiteNavPath, 'utf8');
+        const wrappedSiteNavContent = `<navigation>\n${siteNavContent}\n</navigation>`;
+        logger.info(`Copied over the existing _Sidebar.md file to ${path.relative(
+          this.rootPath, siteLayoutSiteNavDefaultPath)}`
+          + 'Check https://markbind.org/userGuide/tweakingThePageStructure.html#site-navigation-menus\n'
+          + 'for information on site navigation menus.');
+        return fs.outputFileSync(siteLayoutSiteNavDefaultPath, wrappedSiteNavContent);
+      })
+      .catch(() => this.buildSiteNav(siteLayoutSiteNavDefaultPath));
+  }
 
-  this.baseUrlMap = new Set(candidates.map(candidate => path.dirname(candidate)));
+  /**
+   * Builds a site navigation file from the directory structure of the site.
+   * @param siteLayoutSiteNavDefaultPath
+   */
+  buildSiteNav(siteLayoutSiteNavDefaultPath) {
+    let siteNavContent = '';
+    this.addressablePages
+      .filter(addressablePage => !addressablePage.src.startsWith('_'))
+      .forEach((page) => {
+        const addressablePagePath = path.join(this.rootPath, page.src);
+        const relativePagePathWithoutExt = FsUtil.removeExtension(
+          path.relative(this.rootPath, addressablePagePath));
+        const pageName = _.startCase(FsUtil.removeExtension(path.basename(addressablePagePath)));
+        const pageUrl = `{{ baseUrl }}/${relativePagePathWithoutExt}.html`;
+        siteNavContent += `* [${pageName}](${pageUrl})\n`;
+      });
+    const wrappedSiteNavContent = `<navigation>\n${siteNavContent}\n</navigation>`;
+    return fs.outputFileAsync(siteLayoutSiteNavDefaultPath, wrappedSiteNavContent);
+  }
 
-  return Promise.resolve();
-};
+  /**
+   * Applies the default layout to all addressable pages by modifying the site config file.
+   */
+  addDefaultLayoutToSiteConfig() {
+    const configPath = path.join(this.rootPath, SITE_CONFIG_NAME);
+    return fs.readJsonAsync(configPath)
+      .then((config) => {
+        const layoutObj = { glob: '**/*.+(md|mbd)', layout: LAYOUT_DEFAULT_NAME };
+        config.pages.push(layoutObj);
+        return fs.outputJsonAsync(configPath, config);
+      });
+  }
 
-/**
- * Collects the user defined variables map in the site/subsites
- */
-Site.prototype.collectUserDefinedVariablesMap = function () {
-  // The key is the base directory of the site/subsites,
-  // while the value is a mapping of user defined variables
-  this.userDefinedVariablesMap = {};
-  const markbindVariable = { MarkBind: MARKBIND_LINK_HTML };
+  static printBaseUrlMessage() {
+    logger.info('The default base URL of your site is set to /\n'
+      + 'You can change the base URL of your site by editing site.json\n'
+      + 'Check https://markbind.org/userGuide/siteConfiguration.html for more information.');
+    return Promise.resolve();
+  }
 
-  this.baseUrlMap.forEach((base) => {
-    const userDefinedVariables = {};
-    Object.assign(userDefinedVariables, markbindVariable);
+  /**
+   * Updates the paths to be traversed as addressable pages and returns a list of filepaths to be deleted
+   */
+  updateAddressablePages() {
+    const oldAddressablePages = this.addressablePages.slice();
+    this.collectAddressablePages();
+    return _.difference(oldAddressablePages.map(page => page.src),
+                        this.addressablePages.map(page => page.src))
+      .map(filePath => Site.setExtension(filePath, '.html'));
+  }
 
-    let content;
-    try {
-      const userDefinedVariablesPath = path.resolve(base, USER_VARIABLES_PATH);
-      content = fs.readFileSync(userDefinedVariablesPath, 'utf8');
-    } catch (e) {
-      content = '';
-      logger.warn(e.message);
+  /**
+   * Collects the paths to be traversed as addressable pages
+   */
+  collectAddressablePages() {
+    const { pages } = this.siteConfig;
+    const addressableGlobs = pages.filter(page => page.glob);
+    this.addressablePages = pages.filter(page => page.src);
+    const set = new Set();
+    const duplicatePages = this.addressablePages
+      .filter(page => set.size === set.add(page.src).size)
+      .map(page => page.src);
+    if (duplicatePages.length > 0) {
+      return Promise.reject(
+        new Error(`Duplicate page entries found in site config: ${_.uniq(duplicatePages).join(', ')}`));
     }
-
-    // This is to prevent the first nunjuck call from converting {{baseUrl}} to an empty string
-    // and let the baseUrl value be injected later.
-    userDefinedVariables.baseUrl = '{{baseUrl}}';
-    this.userDefinedVariablesMap[base] = userDefinedVariables;
-
-    const $ = cheerio.load(content);
-    $('variable,span').each(function () {
-      const name = $(this).attr('name') || $(this).attr('id');
-      // Process the content of the variable with nunjucks, in case it refers to other variables.
-      const html = nunjucks.renderString($(this).html(), userDefinedVariables);
-      userDefinedVariables[name] = html;
+    const globPaths = addressableGlobs.reduce((globPages, addressableGlob) =>
+      globPages.concat(walkSync(this.rootPath, {
+        directories: false,
+        globs: [addressableGlob.glob],
+        ignore: [CONFIG_FOLDER_NAME],
+      }).map(globPath => ({
+        src: globPath,
+        searchable: addressableGlob.searchable,
+        layout: addressableGlob.layout,
+        frontmatter: addressableGlob.frontmatter,
+      }))), []);
+    // Add pages collected by walkSync and merge properties for pages
+    const filteredPages = {};
+    globPaths.concat(this.addressablePages).forEach((page) => {
+      const filteredPage = _.omitBy(page, _.isUndefined);
+      if (page.src in filteredPages) {
+        filteredPages[page.src] = { ...filteredPages[page.src], ...filteredPage };
+      } else {
+        filteredPages[page.src] = filteredPage;
+      }
     });
-  });
-};
+    this.addressablePages = Object.values(filteredPages);
 
-/**
- * Collects the user defined variables map in the site/subsites
- * if there is a change in the variables file
- * @param filePaths array of paths corresponding to files that have changed
- */
-Site.prototype.collectUserDefinedVariablesMapIfNeeded = function (filePaths) {
-  const variablesPath = path.resolve(this.rootPath, USER_VARIABLES_PATH);
-  if (filePaths.includes(variablesPath)) {
-    this.collectUserDefinedVariablesMap();
-    return true;
+    return Promise.resolve();
   }
-  return false;
-};
 
-Site.prototype.generate = function (baseUrl) {
-  const startTime = new Date();
-  // Create the .tmp folder for storing intermediate results.
-  fs.emptydirSync(this.tempPath);
-  // Clean the output folder; create it if not exist.
-  fs.emptydirSync(this.outputPath);
-  logger.info(`Website generation started at ${startTime.toLocaleTimeString()}`);
-  return new Promise((resolve, reject) => {
-    this.readSiteConfig(baseUrl)
-      .then(() => this.collectAddressablePages())
-      .then(() => this.collectBaseUrl())
-      .then(() => this.collectUserDefinedVariablesMap())
-      .then(() => this.collectPlugins())
-      .then(() => this.buildAssets())
-      .then(() => this.buildSourceFiles())
-      .then(() => this.copyMarkBindAsset())
-      .then(() => this.copyFontAwesomeAsset())
-      .then(() => this.copyLayouts())
-      .then(() => this.updateSiteData())
-      .then(() => {
-        const endTime = new Date();
-        const totalBuildTime = (endTime - startTime) / 1000;
-        logger.info(`Website generation complete! Total build time: ${totalBuildTime}s`);
-      })
-      .then(resolve)
-      .catch((error) => {
-        rejectHandler(reject, error, [this.tempPath, this.outputPath]);
-      });
-  });
-};
+  collectBaseUrl() {
+    const candidates
+      = walkSync(this.rootPath, { directories: false })
+        .filter(x => x.endsWith(this.siteConfigPath))
+        .map(x => path.resolve(this.rootPath, x));
 
-/**
- * Build all pages of the site
- */
-Site.prototype.buildSourceFiles = function () {
-  return new Promise((resolve, reject) => {
-    logger.info('Generating pages...');
-    this.generatePages()
-      .then(() => fs.removeAsync(this.tempPath))
-      .then(() => logger.info('Pages built'))
-      .then(resolve)
-      .catch((error) => {
-        // if error, remove the site and temp folders
-        rejectHandler(reject, error, [this.tempPath, this.outputPath]);
-      });
-  });
-};
+    this.baseUrlMap = new Set(candidates.map(candidate => path.dirname(candidate)));
 
-Site.prototype._rebuildAffectedSourceFiles = function (filePaths) {
-  const filePathArray = Array.isArray(filePaths) ? filePaths : [filePaths];
-  const uniquePaths = _.uniq(filePathArray);
-  logger.info('Rebuilding affected source files');
-  MarkBind.resetVariables();
-  return new Promise((resolve, reject) => {
-    this.regenerateAffectedPages(uniquePaths)
-      .then(() => fs.removeAsync(this.tempPath))
-      .then(resolve)
-      .catch((error) => {
-        // if error, remove the site and temp folders
-        rejectHandler(reject, error, [this.tempPath, this.outputPath]);
-      });
-  });
-};
+    return Promise.resolve();
+  }
 
-/**
- * Rebuild pages that are affected by changes in filePaths
- * @param filePaths a single path or an array of paths corresponding to the files that have changed
- */
-Site.prototype.rebuildAffectedSourceFiles
-  = delay(Site.prototype._rebuildAffectedSourceFiles, 1000);
+  /**
+   * Collects the user defined variables map in the site/subsites
+   */
+  collectUserDefinedVariablesMap() {
+    // The key is the base directory of the site/subsites,
+    // while the value is a mapping of user defined variables
+    this.userDefinedVariablesMap = {};
+    const markbindVariable = { MarkBind: MARKBIND_LINK_HTML };
+
+    this.baseUrlMap.forEach((base) => {
+      const userDefinedVariables = {};
+      Object.assign(userDefinedVariables, markbindVariable);
+
+      let content;
+      try {
+        const userDefinedVariablesPath = path.resolve(base, USER_VARIABLES_PATH);
+        content = fs.readFileSync(userDefinedVariablesPath, 'utf8');
+      } catch (e) {
+        content = '';
+        logger.warn(e.message);
+      }
 
-Site.prototype._rebuildSourceFiles = function () {
-  logger.warn('Rebuilding all source files');
-  return new Promise((resolve, reject) => {
-    Promise.resolve('')
-      .then(() => this.updateAddressablePages())
-      .then(filesToRemove => this.removeAsset(filesToRemove))
-      .then(() => this.buildSourceFiles())
-      .then(resolve)
-      .catch((error) => {
-        // if error, remove the site and temp folders
-        rejectHandler(reject, error, [this.tempPath, this.outputPath]);
+      // This is to prevent the first nunjuck call from converting {{baseUrl}} to an empty string
+      // and let the baseUrl value be injected later.
+      userDefinedVariables.baseUrl = '{{baseUrl}}';
+      this.userDefinedVariablesMap[base] = userDefinedVariables;
+
+      const $ = cheerio.load(content);
+      $('variable,span').each(function () {
+        const name = $(this).attr('name') || $(this).attr('id');
+        // Process the content of the variable with nunjucks, in case it refers to other variables.
+        const html = nunjucks.renderString($(this).html(), userDefinedVariables);
+        userDefinedVariables[name] = html;
       });
-  });
-};
-
-/**
- * Rebuild all pages
- * @param filePaths a single path or an array of paths corresponding to the files that have changed
- */
-Site.prototype.rebuildSourceFiles
-  = delay(Site.prototype._rebuildSourceFiles, 1000);
-
-Site.prototype._buildMultipleAssets = function (filePaths) {
-  const filePathArray = Array.isArray(filePaths) ? filePaths : [filePaths];
-  const uniquePaths = _.uniq(filePathArray);
-  const ignoreConfig = this.siteConfig.ignore || [];
-  const fileIgnore = ignore().add(ignoreConfig);
-  const fileRelativePaths = uniquePaths.map(filePath => path.relative(this.rootPath, filePath));
-  const copyAssets = fileIgnore.filter(fileRelativePaths)
-    .map(asset => fs.copyAsync(path.join(this.rootPath, asset), path.join(this.outputPath, asset)));
-  return Promise.all(copyAssets)
-    .then(() => logger.info('Assets built'));
-};
+    });
+  }
 
-/**
- * Build/copy assets that are specified in filePaths
- * @param filePaths a single path or an array of paths corresponding to the assets to build
- */
-Site.prototype.buildAsset
-  = delay(Site.prototype._buildMultipleAssets, 1000);
-
-Site.prototype._removeMultipleAssets = function (filePaths) {
-  const filePathArray = Array.isArray(filePaths) ? filePaths : [filePaths];
-  const uniquePaths = _.uniq(filePathArray);
-  const fileRelativePaths = uniquePaths.map(filePath => path.relative(this.rootPath, filePath));
-  const filesToRemove = fileRelativePaths.map(
-    fileRelativePath => path.join(this.outputPath, fileRelativePath));
-  const removeFiles = filesToRemove.map(asset => fs.removeAsync(asset));
-  return Promise.all(removeFiles)
-    .then(() => logger.info('Assets removed'));
-};
+  /**
+   * Collects the user defined variables map in the site/subsites
+   * if there is a change in the variables file
+   * @param filePaths array of paths corresponding to files that have changed
+   */
+  collectUserDefinedVariablesMapIfNeeded(filePaths) {
+    const variablesPath = path.resolve(this.rootPath, USER_VARIABLES_PATH);
+    if (filePaths.includes(variablesPath)) {
+      this.collectUserDefinedVariablesMap();
+      return true;
+    }
+    return false;
+  }
 
-/**
- * Remove assets that are specified in filePaths
- * @param filePaths a single path or an array of paths corresponding to the assets to remove
- */
-Site.prototype.removeAsset
-  = delay(Site.prototype._removeMultipleAssets, 1000);
+  generate(baseUrl) {
+    const startTime = new Date();
+    // Create the .tmp folder for storing intermediate results.
+    fs.emptydirSync(this.tempPath);
+    // Clean the output folder; create it if not exist.
+    fs.emptydirSync(this.outputPath);
+    logger.info(`Website generation started at ${startTime.toLocaleTimeString()}`);
+    return new Promise((resolve, reject) => {
+      this.readSiteConfig(baseUrl)
+        .then(() => this.collectAddressablePages())
+        .then(() => this.collectBaseUrl())
+        .then(() => this.collectUserDefinedVariablesMap())
+        .then(() => this.collectPlugins())
+        .then(() => this.buildAssets())
+        .then(() => this.buildSourceFiles())
+        .then(() => this.copyMarkBindAsset())
+        .then(() => this.copyFontAwesomeAsset())
+        .then(() => this.copyLayouts())
+        .then(() => this.updateSiteData())
+        .then(() => {
+          const endTime = new Date();
+          const totalBuildTime = (endTime - startTime) / 1000;
+          logger.info(`Website generation complete! Total build time: ${totalBuildTime}s`);
+        })
+        .then(resolve)
+        .catch((error) => {
+          Site.rejectHandler(reject, error, [this.tempPath, this.outputPath]);
+        });
+    });
+  }
 
-Site.prototype.buildAssets = function () {
-  logger.info('Building assets...');
-  return new Promise((resolve, reject) => {
-    const ignoreConfig = this.siteConfig.ignore || [];
-    const outputFolder = path.relative(this.rootPath, this.outputPath);
-    ignoreConfig.push(outputFolder); // ignore generated site folder
-    const fileIgnore = ignore().add(ignoreConfig);
-    // Scan and copy assets (excluding ignore files).
-    this.listAssets(fileIgnore)
-      .then(assets =>
-        assets.map(asset => fs.copyAsync(path.join(this.rootPath, asset), path.join(this.outputPath, asset))),
-      )
-      .then(copyAssets => Promise.all(copyAssets))
-      .then(() => logger.info('Assets built'))
-      .then(resolve)
-      .catch((error) => {
-        rejectHandler(reject, error, []); // assets won't affect deletion
-      });
-  });
-};
+  /**
+   * Build all pages of the site
+   */
+  buildSourceFiles() {
+    return new Promise((resolve, reject) => {
+      logger.info('Generating pages...');
+      this.generatePages()
+        .then(() => fs.removeAsync(this.tempPath))
+        .then(() => logger.info('Pages built'))
+        .then(resolve)
+        .catch((error) => {
+          // if error, remove the site and temp folders
+          Site.rejectHandler(reject, error, [this.tempPath, this.outputPath]);
+        });
+    });
+  }
 
-/**
- * Retrieves the correct plugin path for a plugin name, if not in node_modules
- * @param rootPath root of the project
- * @param plugin name of the plugin
- */
-function getPluginPath(rootPath, plugin) {
-  // Check in project folder
-  const pluginPath = path.join(rootPath, PROJECT_PLUGIN_FOLDER_NAME, `${plugin}.js`);
-  if (fs.existsSync(pluginPath)) {
-    return pluginPath;
+  _rebuildAffectedSourceFiles(filePaths) {
+    const filePathArray = Array.isArray(filePaths) ? filePaths : [filePaths];
+    const uniquePaths = _.uniq(filePathArray);
+    logger.info('Rebuilding affected source files');
+    MarkBind.resetVariables();
+    return new Promise((resolve, reject) => {
+      this.regenerateAffectedPages(uniquePaths)
+        .then(() => fs.removeAsync(this.tempPath))
+        .then(resolve)
+        .catch((error) => {
+          // if error, remove the site and temp folders
+          Site.rejectHandler(reject, error, [this.tempPath, this.outputPath]);
+        });
+    });
   }
 
-  // Check in src folder
-  const srcPath = path.join(__dirname, BUILT_IN_PLUGIN_FOLDER_NAME, `${plugin}.js`);
-  if (fs.existsSync(srcPath)) {
-    return srcPath;
+  _rebuildSourceFiles() {
+    logger.warn('Rebuilding all source files');
+    return new Promise((resolve, reject) => {
+      Promise.resolve('')
+        .then(() => this.updateAddressablePages())
+        // ignore the warning on next line as IDE doesn't understand `delay` very well
+        .then(filesToRemove => this.removeAsset(filesToRemove))
+        .then(() => this.buildSourceFiles())
+        .then(resolve)
+        .catch((error) => {
+          // if error, remove the site and temp folders
+          Site.rejectHandler(reject, error, [this.tempPath, this.outputPath]);
+        });
+    });
   }
 
-  // Check in default folder
-  const defaultPath = path.join(__dirname, BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME, `${plugin}.js`);
-  if (fs.existsSync(defaultPath)) {
-    return defaultPath;
+  _buildMultipleAssets(filePaths) {
+    const filePathArray = Array.isArray(filePaths) ? filePaths : [filePaths];
+    const uniquePaths = _.uniq(filePathArray);
+    const ignoreConfig = this.siteConfig.ignore || [];
+    const fileIgnore = ignore().add(ignoreConfig);
+    const fileRelativePaths = uniquePaths.map(filePath => path.relative(this.rootPath, filePath));
+    const copyAssets = fileIgnore.filter(fileRelativePaths)
+      .map(asset => fs.copyAsync(path.join(this.rootPath, asset), path.join(this.outputPath, asset)));
+    return Promise.all(copyAssets)
+      .then(() => logger.info('Assets built'));
   }
 
-  return '';
-}
+  _removeMultipleAssets(filePaths) {
+    const filePathArray = Array.isArray(filePaths) ? filePaths : [filePaths];
+    const uniquePaths = _.uniq(filePathArray);
+    const fileRelativePaths = uniquePaths.map(filePath => path.relative(this.rootPath, filePath));
+    const filesToRemove = fileRelativePaths.map(
+      fileRelativePath => path.join(this.outputPath, fileRelativePath));
+    const removeFiles = filesToRemove.map(asset => fs.removeAsync(asset));
+    return Promise.all(removeFiles)
+      .then(() => logger.info('Assets removed'));
+  }
 
-/**
- * Finds plugins in the site's default plugin folder
- */
-function findDefaultPlugins() {
-  const globPath = path.join(__dirname, BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME);
-  if (!fs.existsSync(globPath)) {
-    return [];
+  buildAssets() {
+    logger.info('Building assets...');
+    return new Promise((resolve, reject) => {
+      const ignoreConfig = this.siteConfig.ignore || [];
+      const outputFolder = path.relative(this.rootPath, this.outputPath);
+      ignoreConfig.push(outputFolder); // ignore generated site folder
+      const fileIgnore = ignore().add(ignoreConfig);
+      // Scan and copy assets (excluding ignore files).
+      this.listAssets(fileIgnore)
+        .then(assets =>
+          assets.map(asset =>
+            fs.copyAsync(path.join(this.rootPath, asset), path.join(this.outputPath, asset))),
+        )
+        .then(copyAssets => Promise.all(copyAssets))
+        .then(() => logger.info('Assets built'))
+        .then(resolve)
+        .catch((error) => {
+          Site.rejectHandler(reject, error, []); // assets won't affect deletion
+        });
+    });
   }
-  return walkSync(globPath, {
-    directories: false,
-    globs: [`${MARKBIND_PLUGIN_PREFIX}*.js`],
-  }).map(file => path.parse(file).name);
-}
 
-/**
- * Checks if a specified file path is a plugin source file
- * @param filePath file path to check
- * @returns {boolean} whether the file path matches a plugin source file path
- */
-Site.prototype.isPluginSourceFile = function (filePath) {
-  return this.pages.some(page => page.pluginSourceFiles.has(filePath));
-};
+  /**
+   * Retrieves the correct plugin path for a plugin name, if not in node_modules
+   * @param rootPath root of the project
+   * @param plugin name of the plugin
+   */
+  static getPluginPath(rootPath, plugin) {
+    // Check in project folder
+    const pluginPath = path.join(rootPath, PROJECT_PLUGIN_FOLDER_NAME, `${plugin}.js`);
+    if (fs.existsSync(pluginPath)) {
+      return pluginPath;
+    }
 
-/**
- * Loads a plugin
- * @param plugin name of the plugin
- * @param isDefault whether the plugin is a default plugin
- */
-Site.prototype.loadPlugin = function (plugin, isDefault) {
-  try {
-    // Check if already loaded
-    if (this.plugins[plugin]) {
-      return;
+    // Check in src folder
+    const srcPath = path.join(__dirname, BUILT_IN_PLUGIN_FOLDER_NAME, `${plugin}.js`);
+    if (fs.existsSync(srcPath)) {
+      return srcPath;
     }
 
-    const pluginPath = getPluginPath(this.rootPath, plugin);
-    if (isDefault && !pluginPath.startsWith(path.join(__dirname, BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME))) {
-      logger.warn(`Default plugin ${plugin} will be overridden`);
+    // Check in default folder
+    const defaultPath = path.join(__dirname, BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME, `${plugin}.js`);
+    if (fs.existsSync(defaultPath)) {
+      return defaultPath;
     }
 
-    // eslint-disable-next-line global-require, import/no-dynamic-require
-    this.plugins[plugin] = require(pluginPath || plugin);
-  } catch (e) {
-    logger.warn(`Unable to load plugin ${plugin}, skipping`);
+    return '';
   }
-};
 
-/**
- * Load all plugins of the site
- */
-Site.prototype.collectPlugins = function () {
-  if (!this.siteConfig.plugins) {
-    this.siteConfig.plugins = [];
+  /**
+   * Finds plugins in the site's default plugin folder
+   */
+  static findDefaultPlugins() {
+    const globPath = path.join(__dirname, BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME);
+    if (!fs.existsSync(globPath)) {
+      return [];
+    }
+    return walkSync(globPath, {
+      directories: false,
+      globs: [`${MARKBIND_PLUGIN_PREFIX}*.js`],
+    }).map(file => path.parse(file).name);
   }
 
-  module.paths.push(path.join(this.rootPath, 'node_modules'));
-
-  const defaultPlugins = findDefaultPlugins();
+  /**
+   * Checks if a specified file path is a plugin source file
+   * @param filePath file path to check
+   * @returns {boolean} whether the file path matches a plugin source file path
+   */
+  isPluginSourceFile(filePath) {
+    return this.pages.some(page => page.pluginSourceFiles.has(filePath));
+  }
 
-  this.siteConfig.plugins
-    .filter(plugin => !_.includes(defaultPlugins, plugin))
-    .forEach(plugin => this.loadPlugin(plugin, false));
+  /**
+   * Loads a plugin
+   * @param plugin name of the plugin
+   * @param isDefault whether the plugin is a default plugin
+   */
+  loadPlugin(plugin, isDefault) {
+    try {
+      // Check if already loaded
+      if (this.plugins[plugin]) {
+        return;
+      }
 
-  const markbindPrefixRegex = new RegExp(`^${MARKBIND_PLUGIN_PREFIX}`);
-  defaultPlugins
-    .filter(plugin => !_.get(this.siteConfig,
-                             ['pluginsContext', plugin.replace(markbindPrefixRegex, ''), 'off'],
-                             false))
-    .forEach(plugin => this.loadPlugin(plugin, true));
-};
+      const pluginPath = Site.getPluginPath(this.rootPath, plugin);
+      if (isDefault && !pluginPath.startsWith(path.join(__dirname, BUILT_IN_DEFAULT_PLUGIN_FOLDER_NAME))) {
+        logger.warn(`Default plugin ${plugin} will be overridden`);
+      }
 
-/**
- * Renders all pages specified in site configuration file to the output folder
- */
-Site.prototype.generatePages = function () {
-  // Run MarkBind include and render on each source file.
-  // Render the final rendered page to the output folder.
-  const { baseUrl, faviconPath } = this.siteConfig;
-  const addressablePages = this.addressablePages || [];
-  const builtFiles = new Set();
-  const processingFiles = [];
-
-  let faviconUrl;
-  if (faviconPath) {
-    faviconUrl = url.join('/', baseUrl, faviconPath);
-    if (!fs.existsSync(path.join(this.rootPath, faviconPath))) {
-      logger.warn(`${faviconPath} does not exist`);
+      // eslint-disable-next-line global-require, import/no-dynamic-require
+      this.plugins[plugin] = require(pluginPath || plugin);
+    } catch (e) {
+      logger.warn(`Unable to load plugin ${plugin}, skipping`);
     }
-  } else if (fs.existsSync(path.join(this.rootPath, FAVICON_DEFAULT_PATH))) {
-    faviconUrl = url.join('/', baseUrl, FAVICON_DEFAULT_PATH);
   }
 
-  this._setTimestampVariable();
-  if (this.onePagePath) {
-    const page = addressablePages.find(p => p.src === this.onePagePath);
-    if (!page) {
-      return Promise.reject(new Error(`${this.onePagePath} is not specified in the site configuration.`));
+  /**
+   * Load all plugins of the site
+   */
+  collectPlugins() {
+    if (!this.siteConfig.plugins) {
+      this.siteConfig.plugins = [];
     }
-    this.pages.push(this.createPage({
-      faviconUrl,
-      pageSrc: page.src,
-      title: page.title,
-      layout: page.layout,
-      frontmatter: page.frontmatter,
-      searchable: page.searchable !== 'no',
-      externalScripts: page.externalScripts,
-    }));
-  } else {
-    this.pages = addressablePages.map(page => this.createPage({
-      faviconUrl,
-      pageSrc: page.src,
-      title: page.title,
-      layout: page.layout,
-      frontmatter: page.frontmatter,
-      searchable: page.searchable !== 'no',
-      externalScripts: page.externalScripts,
-    }));
+
+    module.paths.push(path.join(this.rootPath, 'node_modules'));
+
+    const defaultPlugins = Site.findDefaultPlugins();
+
+    this.siteConfig.plugins
+      .filter(plugin => !_.includes(defaultPlugins, plugin))
+      .forEach(plugin => this.loadPlugin(plugin, false));
+
+    const markbindPrefixRegex = new RegExp(`^${MARKBIND_PLUGIN_PREFIX}`);
+    defaultPlugins
+      .filter(plugin => !_.get(this.siteConfig,
+                               ['pluginsContext', plugin.replace(markbindPrefixRegex, ''), 'off'],
+                               false))
+      .forEach(plugin => this.loadPlugin(plugin, true));
   }
 
-  const progressBar = new ProgressBar(`[:bar] :current / ${this.pages.length} pages built`,
-                                      { total: this.pages.length });
-  progressBar.render();
-  this.pages.forEach((page) => {
-    processingFiles.push(page.generate(builtFiles)
-      .then(() => progressBar.tick())
-      .catch((err) => {
-        logger.error(err);
-        return Promise.reject(new Error(`Error while generating ${page.sourcePath}`));
+  /**
+   * Renders all pages specified in site configuration file to the output folder
+   */
+  generatePages() {
+    // Run MarkBind include and render on each source file.
+    // Render the final rendered page to the output folder.
+    const { baseUrl, faviconPath } = this.siteConfig;
+    const addressablePages = this.addressablePages || [];
+    const builtFiles = new Set();
+    const processingFiles = [];
+
+    let faviconUrl;
+    if (faviconPath) {
+      faviconUrl = url.join('/', baseUrl, faviconPath);
+      if (!fs.existsSync(path.join(this.rootPath, faviconPath))) {
+        logger.warn(`${faviconPath} does not exist`);
+      }
+    } else if (fs.existsSync(path.join(this.rootPath, FAVICON_DEFAULT_PATH))) {
+      faviconUrl = url.join('/', baseUrl, FAVICON_DEFAULT_PATH);
+    }
+
+    this._setTimestampVariable();
+    if (this.onePagePath) {
+      const page = addressablePages.find(p => p.src === this.onePagePath);
+      if (!page) {
+        return Promise.reject(new Error(`${this.onePagePath} is not specified in the site configuration.`));
+      }
+      this.pages.push(this.createPage({
+        faviconUrl,
+        pageSrc: page.src,
+        title: page.title,
+        layout: page.layout,
+        frontmatter: page.frontmatter,
+        searchable: page.searchable !== 'no',
+        externalScripts: page.externalScripts,
       }));
-  });
-  return new Promise((resolve, reject) => {
-    Promise.all(processingFiles)
-      .then(resolve)
-      .catch(reject);
-  });
-};
+    } else {
+      this.pages = addressablePages.map(page => this.createPage({
+        faviconUrl,
+        pageSrc: page.src,
+        title: page.title,
+        layout: page.layout,
+        frontmatter: page.frontmatter,
+        searchable: page.searchable !== 'no',
+        externalScripts: page.externalScripts,
+      }));
+    }
 
-/**
- * Re-renders pages that contain the original file path
- * as the source file or as a static/dynamic included file
- * @param filePaths array of paths corresponding to files that have changed
- */
-Site.prototype.regenerateAffectedPages = function (filePaths) {
-  const builtFiles = new Set();
-  const processingFiles = [];
-  const shouldRebuildAllPages = this.collectUserDefinedVariablesMapIfNeeded(filePaths) || this.forceReload;
-  if (shouldRebuildAllPages) {
-    logger.warn('Rebuilding all pages as variables file was changed, or the --force-reload flag was set');
-  }
-  this._setTimestampVariable();
-  this.pages.forEach((page) => {
-    if (shouldRebuildAllPages || filePaths.some((filePath) => {
-      const isIncludedFile = page.includedFiles.has(filePath);
-      const isPluginSourceFile = page.pluginSourceFiles.has(filePath);
-
-      return isIncludedFile || isPluginSourceFile;
-    })) {
-      // eslint-disable-next-line no-param-reassign
-      page.userDefinedVariablesMap = this.userDefinedVariablesMap;
+    const progressBar = new ProgressBar(`[:bar] :current / ${this.pages.length} pages built`,
+                                        { total: this.pages.length });
+    progressBar.render();
+    this.pages.forEach((page) => {
       processingFiles.push(page.generate(builtFiles)
+        .then(() => progressBar.tick())
         .catch((err) => {
           logger.error(err);
           return Promise.reject(new Error(`Error while generating ${page.sourcePath}`));
         }));
+    });
+    return new Promise((resolve, reject) => {
+      Promise.all(processingFiles)
+        .then(resolve)
+        .catch(reject);
+    });
+  }
+
+  regenerateAffectedPages(filePaths) {
+    const builtFiles = new Set();
+    const processingFiles = [];
+    const shouldRebuildAllPages = this.collectUserDefinedVariablesMapIfNeeded(filePaths) || this.forceReload;
+    if (shouldRebuildAllPages) {
+      logger.warn('Rebuilding all pages as variables file was changed, or the --force-reload flag was set');
     }
-  });
+    this._setTimestampVariable();
+    this.pages.forEach((page) => {
+      if (shouldRebuildAllPages || filePaths.some((filePath) => {
+        const isIncludedFile = page.includedFiles.has(filePath);
+        const isPluginSourceFile = page.pluginSourceFiles.has(filePath);
+
+        return isIncludedFile || isPluginSourceFile;
+      })) {
+      // eslint-disable-next-line no-param-reassign
+        page.userDefinedVariablesMap = this.userDefinedVariablesMap;
+        processingFiles.push(page.generate(builtFiles)
+          .catch((err) => {
+            logger.error(err);
+            return Promise.reject(new Error(`Error while generating ${page.sourcePath}`));
+          }));
+      }
+    });
 
-  logger.info(`Rebuilding ${processingFiles.length} pages`);
+    logger.info(`Rebuilding ${processingFiles.length} pages`);
 
-  return new Promise((resolve, reject) => {
-    Promise.all(processingFiles)
-      .then(() => this.updateSiteData(shouldRebuildAllPages ? undefined : filePaths))
-      .then(() => logger.info('Pages rebuilt'))
-      .then(resolve)
-      .catch(reject);
-  });
-};
+    return new Promise((resolve, reject) => {
+      Promise.all(processingFiles)
+        .then(() => this.updateSiteData(shouldRebuildAllPages ? undefined : filePaths))
+        .then(() => logger.info('Pages rebuilt'))
+        .then(resolve)
+        .catch(reject);
+    });
+  }
 
 
-/**
- * Uses heading data in built pages to generate heading and keyword information for siteData
- * Subsequently writes to siteData.json
- * @param filePaths optional array of updated file paths during live preview.
- *                  If undefined, generate site data for all pages
- */
-Site.prototype.updateSiteData = function (filePaths) {
-  const generateForAllPages = filePaths === undefined;
-  this.pages.forEach((page) => {
-    if (generateForAllPages || filePaths.some(filePath => page.includedFiles.has(filePath))) {
-      page.collectHeadingsAndKeywords();
-      page.concatenateHeadingsAndKeywords();
-    }
-  });
-  this.writeSiteData();
-};
+  /**
+   * Uses heading data in built pages to generate heading and keyword information for siteData
+   * Subsequently writes to siteData.json
+   * @param filePaths optional array of updated file paths during live preview.
+   *                  If undefined, generate site data for all pages
+   */
+  updateSiteData(filePaths) {
+    const generateForAllPages = filePaths === undefined;
+    this.pages.forEach((page) => {
+      if (generateForAllPages || filePaths.some(filePath => page.includedFiles.has(filePath))) {
+        page.collectHeadingsAndKeywords();
+        page.concatenateHeadingsAndKeywords();
+      }
+    });
+    this.writeSiteData();
+  }
 
-/**
- * Copies Font Awesome assets to the assets folder
- */
-Site.prototype.copyFontAwesomeAsset = function () {
-  const faRootSrcPath = path.join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free');
-  const faCssSrcPath = path.join(faRootSrcPath, 'css', 'all.min.css');
-  const faCssDestPath = path.join(this.siteAssetsDestPath, 'fontawesome', 'css', 'all.min.css');
-  const faFontsSrcPath = path.join(faRootSrcPath, 'webfonts');
-  const faFontsDestPath = path.join(this.siteAssetsDestPath, 'fontawesome', 'webfonts');
-
-  return fs.copyAsync(faCssSrcPath, faCssDestPath).then(fs.copyAsync(faFontsSrcPath, faFontsDestPath));
-};
+  /**
+   * Copies Font Awesome assets to the assets folder
+   */
+  copyFontAwesomeAsset() {
+    const faRootSrcPath = path.join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free');
+    const faCssSrcPath = path.join(faRootSrcPath, 'css', 'all.min.css');
+    const faCssDestPath = path.join(this.siteAssetsDestPath, 'fontawesome', 'css', 'all.min.css');
+    const faFontsSrcPath = path.join(faRootSrcPath, 'webfonts');
+    const faFontsDestPath = path.join(this.siteAssetsDestPath, 'fontawesome', 'webfonts');
+
+    return fs.copyAsync(faCssSrcPath, faCssDestPath).then(fs.copyAsync(faFontsSrcPath, faFontsDestPath));
+  }
 
-/**
- * Copies MarkBind assets to the assets folder
- */
-Site.prototype.copyMarkBindAsset = function () {
-  const maybeOverrideDefaultBootstrapTheme = () => {
-    const { theme } = this.siteConfig;
-    if (!theme || !_.has(SUPPORTED_THEMES_PATHS, theme)) {
-      return _.noop;
-    }
+  /**
+   * Copies MarkBind assets to the assets folder
+   */
+  copyMarkBindAsset() {
+    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');
+      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);
+  }
+
+  /**
+   * Copies layouts to the assets folder
+   */
+  copyLayouts() {
+    const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
+    const layoutsDestPath = path.join(this.siteAssetsDestPath, LAYOUT_SITE_FOLDER_NAME);
+    if (!fs.existsSync(siteLayoutPath)) {
+      return Promise.resolve();
+    }
     return new Promise((resolve, reject) => {
-      fs.copyAsync(themeSrcPath, themeDestPath)
+      fs.copyAsync(siteLayoutPath, layoutsDestPath)
         .then(resolve)
         .catch(reject);
     });
-  };
-
-  return fs.copyAsync(this.siteAssetsSrcPath, this.siteAssetsDestPath)
-    .then(maybeOverrideDefaultBootstrapTheme);
-};
+  }
 
-/**
- * Copies layouts to the assets folder
- */
-Site.prototype.copyLayouts = function () {
-  const siteLayoutPath = path.join(this.rootPath, LAYOUT_FOLDER_PATH);
-  const layoutsDestPath = path.join(this.siteAssetsDestPath, LAYOUT_SITE_FOLDER_NAME);
-  if (!fs.existsSync(siteLayoutPath)) {
-    return Promise.resolve();
+  /**
+   * Writes the site data to a file
+   */
+  writeSiteData() {
+    return new Promise((resolve, reject) => {
+      const siteDataPath = path.join(this.outputPath, SITE_DATA_NAME);
+      const siteData = {
+        enableSearch: this.siteConfig.enableSearch,
+        pages: this.pages.filter(page => page.searchable)
+          .map(page => ({ headings: page.headings, ...page.frontMatter })),
+      };
+
+      fs.outputJsonAsync(siteDataPath, siteData)
+        .then(() => logger.info('Site data built'))
+        .then(resolve)
+        .catch((error) => {
+          Site.rejectHandler(reject, error, [this.tempPath, this.outputPath]);
+        });
+    });
   }
-  return new Promise((resolve, reject) => {
-    fs.copyAsync(siteLayoutPath, layoutsDestPath)
-      .then(resolve)
-      .catch(reject);
-  });
-};
 
-/**
- * Writes the site data to a file
- */
-Site.prototype.writeSiteData = function () {
-  return new Promise((resolve, reject) => {
-    const siteDataPath = path.join(this.outputPath, SITE_DATA_NAME);
-    const siteData = {
-      enableSearch: this.siteConfig.enableSearch,
-      pages: this.pages.filter(page => page.searchable)
-        .map(page => ({ headings: page.headings, ...page.frontMatter })),
+  deploy(travisTokenVar) {
+    const defaultDeployConfig = {
+      branch: 'gh-pages',
+      message: 'Site Update.',
+      repo: '',
     };
-
-    fs.outputJsonAsync(siteDataPath, siteData)
-      .then(() => logger.info('Site data built'))
-      .then(resolve)
-      .catch((error) => {
-        rejectHandler(reject, error, [this.tempPath, this.outputPath]);
-      });
-  });
-};
-
-Site.prototype.deploy = function (travisTokenVar) {
-  const defaultDeployConfig = {
-    branch: 'gh-pages',
-    message: 'Site Update.',
-    repo: '',
-  };
-  process.env.NODE_DEBUG = 'gh-pages';
-  return new Promise((resolve, reject) => {
-    const publish = Promise.promisify(ghpages.publish);
-    this.readSiteConfig()
-      .then(() => {
-        this.siteConfig.deploy = this.siteConfig.deploy || {};
-        const basePath = this.siteConfig.deploy.baseDir || this.outputPath;
-        if (!fs.existsSync(basePath)) {
-          reject(new Error('The site directory does not exist. Please build the site first before deploy.'));
-          return undefined;
-        }
-        const options = {};
-        options.branch = this.siteConfig.deploy.branch || defaultDeployConfig.branch;
-        options.message = this.siteConfig.deploy.message || defaultDeployConfig.message;
-        options.repo = this.siteConfig.deploy.repo || defaultDeployConfig.repo;
-
-        if (travisTokenVar) {
-          if (!process.env.TRAVIS) {
-            reject(new Error('-t/--travis should only be run in Travis CI.'));
-            return undefined;
-          }
-          // eslint-disable-next-line no-param-reassign
-          travisTokenVar = _.isBoolean(travisTokenVar) ? 'GITHUB_TOKEN' : travisTokenVar;
-          if (!process.env[travisTokenVar]) {
-            reject(new Error(`The environment variable ${travisTokenVar} does not exist.`));
+    process.env.NODE_DEBUG = 'gh-pages';
+    return new Promise((resolve, reject) => {
+      const publish = Promise.promisify(ghpages.publish);
+      this.readSiteConfig()
+        .then(() => {
+          this.siteConfig.deploy = this.siteConfig.deploy || {};
+          const basePath = this.siteConfig.deploy.baseDir || this.outputPath;
+          if (!fs.existsSync(basePath)) {
+            reject(
+              new Error('The site directory does not exist. Please build the site first before deploy.'));
             return undefined;
           }
-
-          const githubToken = process.env[travisTokenVar];
-          let repoSlug = process.env.TRAVIS_REPO_SLUG;
-          if (options.repo) {
-            // Extract repo slug from user-specified repo URL so that we can include the access token
-            const repoSlugRegex = /github\.com[:/]([\w-]+\/[\w-.]+)\.git$/;
-            const repoSlugMatch = repoSlugRegex.exec(options.repo);
-            if (!repoSlugMatch) {
-              reject(new Error('-t/--travis expects a GitHub repository.\n'
-                + `The specified repository ${options.repo} is not valid.`));
+          const options = {};
+          options.branch = this.siteConfig.deploy.branch || defaultDeployConfig.branch;
+          options.message = this.siteConfig.deploy.message || defaultDeployConfig.message;
+          options.repo = this.siteConfig.deploy.repo || defaultDeployConfig.repo;
+
+          if (travisTokenVar) {
+            if (!process.env.TRAVIS) {
+              reject(new Error('-t/--travis should only be run in Travis CI.'));
+              return undefined;
+            }
+            // eslint-disable-next-line no-param-reassign
+            travisTokenVar = _.isBoolean(travisTokenVar) ? 'GITHUB_TOKEN' : travisTokenVar;
+            if (!process.env[travisTokenVar]) {
+              reject(new Error(`The environment variable ${travisTokenVar} does not exist.`));
               return undefined;
             }
-            [, repoSlug] = repoSlugMatch;
+
+            const githubToken = process.env[travisTokenVar];
+            let repoSlug = process.env.TRAVIS_REPO_SLUG;
+            if (options.repo) {
+              // Extract repo slug from user-specified repo URL so that we can include the access token
+              const repoSlugRegex = /github\.com[:/]([\w-]+\/[\w-.]+)\.git$/;
+              const repoSlugMatch = repoSlugRegex.exec(options.repo);
+              if (!repoSlugMatch) {
+                reject(new Error('-t/--travis expects a GitHub repository.\n'
+                  + `The specified repository ${options.repo} is not valid.`));
+                return undefined;
+              }
+              [, repoSlug] = repoSlugMatch;
+            }
+            options.repo = `https://${githubToken}@github.com/${repoSlug}.git`;
+            options.user = {
+              name: 'Deployment Bot',
+              email: 'deploy@travis-ci.org',
+            };
           }
-          options.repo = `https://${githubToken}@github.com/${repoSlug}.git`;
-          options.user = {
-            name: 'Deployment Bot',
-            email: 'deploy@travis-ci.org',
-          };
-        }
 
-        return publish(basePath, options);
-      })
-      .then(resolve)
-      .catch(reject);
-  });
-};
+          return publish(basePath, options);
+        })
+        .then(resolve)
+        .catch(reject);
+    });
+  }
 
-Site.prototype._setTimestampVariable = function () {
-  const time = new Date().toUTCString();
-  Object.keys(this.userDefinedVariablesMap).forEach((base) => {
-    this.userDefinedVariablesMap[base].timestamp = time;
-  });
-  return Promise.resolve();
-};
+  _setTimestampVariable() {
+    const time = new Date().toUTCString();
+    Object.keys(this.userDefinedVariablesMap).forEach((base) => {
+      this.userDefinedVariablesMap[base].timestamp = time;
+    });
+    return Promise.resolve();
+  }
+}
+
+/**
+ * Build/copy assets that are specified in filePaths
+ * @param filePaths a single path or an array of paths corresponding to the assets to build
+ */
+Site.prototype.buildAsset = delay(Site.prototype._buildMultipleAssets, 1000);
+
+/**
+ * Rebuild pages that are affected by changes in filePaths
+ * @param filePaths a single path or an array of paths corresponding to the files that have changed
+ */
+Site.prototype.rebuildAffectedSourceFiles
+  = delay(Site.prototype._rebuildAffectedSourceFiles, 1000);
+
+/**
+ * Rebuild all pages
+ * @param filePaths a single path or an array of paths corresponding to the files that have changed
+ */
+Site.prototype.rebuildSourceFiles
+  = delay(Site.prototype._rebuildSourceFiles, 1000);
+
+/**
+ * Remove assets that are specified in filePaths
+ * @param filePaths a single path or an array of paths corresponding to the assets to remove
+ */
+Site.prototype.removeAsset
+  = delay(Site.prototype._removeMultipleAssets, 1000);
 
 module.exports = Site;
diff --git a/src/lib/markbind/src/parser.js b/src/lib/markbind/src/parser.js
index d0686ffb7e..179dbce9db 100644
--- a/src/lib/markbind/src/parser.js
+++ b/src/lib/markbind/src/parser.js
@@ -3,9 +3,9 @@ const fs = require('fs');
 const htmlparser = require('htmlparser2'); require('./patches/htmlparser2');
 const nunjucks = require('nunjucks');
 const path = require('path');
-const pathIsInside = require('path-is-inside');
 const Promise = require('bluebird');
 const url = require('url');
+const pathIsInside = require('path-is-inside');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -29,915 +29,905 @@ const {
   IMPORTED_VARIABLE_PREFIX,
 } = require('./constants');
 
-const VARIABLE_LOOKUP = new Map();
-const FILE_ALIASES = new Map();
-const PROCESSED_INNER_VARIABLES = new Set();
-
-/*
- * Utils
- */
-
-/**
-* @throws Will throw an error if a non-absolute path or path outside the root is given
-*/
-function calculateNewBaseUrls(filePath, root, lookUp) {
-  if (!path.isAbsolute(filePath)) {
-    throw new Error(`Non-absolute path given to calculateNewBaseUrls: '${filePath}'`);
-  }
-  if (!pathIsInside(filePath, root)) {
-    throw new Error(`Path given '${filePath}' is not in root '${root}'`);
+class Parser {
+  constructor(options) {
+    this._options = options || {};
+    // eslint-disable-next-line no-console
+    this._onError = this._options.errorHandler || console.error;
+    this._fileCache = {};
+    this.dynamicIncludeSrc = [];
+    this.staticIncludeSrc = [];
+    this.boilerplateIncludeSrc = [];
+    this.missingIncludeSrc = [];
   }
-  function calculate(file, result) {
-    if (file === root) {
-      return { relative: path.relative(root, root), parent: root };
-    }
-    const parent = path.dirname(file);
-    if (lookUp.has(parent) && result.length === 1) {
-      return { relative: path.relative(parent, result[0]), parent };
-    } else if (lookUp.has(parent)) {
-      return calculate(parent, [parent]);
-    }
-    return calculate(parent, result);
-  }
-
-  return calculate(filePath, []);
-}
 
-function calculateBoilerplateFilePath(pathInBoilerplates, asIfAt, config) {
-  const { parent, relative } = calculateNewBaseUrls(asIfAt, config.rootPath, config.baseUrlMap);
-  return path.resolve(parent, relative, BOILERPLATE_FOLDER_NAME, pathInBoilerplates);
-}
-
-function createErrorNode(element, error) {
-  const errorElement = cheerio.parseHTML(utils.createErrorElement(error), true)[0];
-  return Object.assign(element, _.pick(errorElement, ['name', 'attribs', 'children']));
-}
-
-function createEmptyNode() {
-  const emptyElement = cheerio.parseHTML('<div></div>', true)[0];
-  return emptyElement;
-}
-
-function isText(element) {
-  return element.type === 'text' || element.type === 'comment';
-}
-
-function Parser(options) {
-  this._options = options || {};
-  // eslint-disable-next-line no-console
-  this._onError = this._options.errorHandler || console.error;
-  this._fileCache = {};
-  this.dynamicIncludeSrc = [];
-  this.staticIncludeSrc = [];
-  this.boilerplateIncludeSrc = [];
-  this.missingIncludeSrc = [];
-}
+  /**
+   * Returns an object containing the imported variables for specified file
+   * @param file file name to get the imported variables for
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getImportedVariableMap(file) {
+    const innerVariables = {};
+    Parser.FILE_ALIASES.get(file).forEach((actualPath, alias) => {
+      innerVariables[alias] = {};
+      const variables = Parser.VARIABLE_LOOKUP.get(actualPath);
+      variables.forEach((value, name) => {
+        innerVariables[alias][name] = value;
+      });
+    });
+    return innerVariables;
+  }
 
-Parser.resetVariables = function () {
-  VARIABLE_LOOKUP.clear();
-  FILE_ALIASES.clear();
-  PROCESSED_INNER_VARIABLES.clear();
-};
-
-/**
- * Extract variables from an include element
- * @param includeElement include element to extract variables from
- * @param contextVariables variables defined by parent pages
- */
-function extractIncludeVariables(includeElement, contextVariables) {
-  const includedVariables = { ...contextVariables };
-  Object.keys(includeElement.attribs).forEach((attribute) => {
-    if (!attribute.startsWith('var-')) {
-      return;
-    }
-    const variableName = attribute.replace(/^var-/, '');
-    if (!includedVariables[variableName]) {
-      includedVariables[variableName] = includeElement.attribs[attribute];
-    }
-  });
-  if (includeElement.children) {
-    includeElement.children.forEach((child) => {
-      if (child.name !== 'variable' && child.name !== 'span') {
-        return;
-      }
-      const variableName = child.attribs.name || child.attribs.id;
+  /**
+   * Extract page variables from a page
+   * @param filename for error printing
+   * @param data to extract variables from
+   * @param userDefinedVariables global variables
+   * @param includedVariables variables from parent include
+   */
+  // eslint-disable-next-line class-methods-use-this
+  extractPageVariables(fileName, data, userDefinedVariables, includedVariables) {
+    const $ = cheerio.load(data);
+    const pageVariables = {};
+    Parser.VARIABLE_LOOKUP.set(fileName, new Map());
+    /**
+     * <import>ed variables have not been processed yet, we replace such variables with itself first.
+     */
+    const importedVariables = {};
+    $('import[from]').each((index, element) => {
+      const variableNames = Object.keys(element.attribs)
+        .filter(name => name !== 'from' && name !== 'as');
+      // If no namespace is provided, we use the smallest name as one...
+      const largestName = variableNames.sort()[0];
+      // ... and prepend it with $__MARKBIND__ to reduce collisions.
+      const generatedAlias = IMPORTED_VARIABLE_PREFIX + largestName;
+      const hasAlias = _.hasIn(element.attribs, 'as');
+      const alias = hasAlias ? element.attribs.as : generatedAlias;
+      importedVariables[alias] = new Proxy({}, {
+        get(obj, prop) {
+          return `{{${alias}.${prop}}}`;
+        },
+      });
+      variableNames.forEach((name) => {
+        importedVariables[name] = `{{${alias}.${name}}}`;
+      });
+    });
+    $('variable').each(function () {
+      const variableElement = $(this);
+      const variableName = variableElement.attr('name');
       if (!variableName) {
         // eslint-disable-next-line no-console
-        console.warn(`Missing reference in ${includeElement.attribs[ATTRIB_CWF]}\n`
-                   + `Missing 'name' or 'id' in variable for ${includeElement.attribs.src} include.`);
+        console.warn(`Missing 'name' for variable in ${fileName}\n`);
         return;
       }
-      if (!includedVariables[variableName]) {
-        includedVariables[variableName] = cheerio.html(child.children);
+      if (!pageVariables[variableName]) {
+        const variableValue = nunjucks.renderString(md.renderInline(variableElement.html()), {
+          ...importedVariables, ...pageVariables, ...userDefinedVariables, ...includedVariables,
+        });
+        pageVariables[variableName] = variableValue;
+        Parser.VARIABLE_LOOKUP.get(fileName).set(variableName, variableValue);
       }
     });
+    return { ...importedVariables, ...pageVariables };
   }
-  return includedVariables;
-}
-
-/**
- * Returns an object containing the imported variables for specified file
- * @param file file name to get the imported variables for
- */
-function getImportedVariableMap(file) {
-  const innerVariables = {};
-  FILE_ALIASES.get(file).forEach((actualPath, alias) => {
-    innerVariables[alias] = {};
-    const variables = VARIABLE_LOOKUP.get(actualPath);
-    variables.forEach((value, name) => {
-      innerVariables[alias][name] = value;
-    });
-  });
-  return innerVariables;
-}
 
-/**
- * Extract page variables from a page
- * @param filename for error printing
- * @param data to extract variables from
- * @param userDefinedVariables global variables
- * @param includedVariables variables from parent include
- */
-function extractPageVariables(fileName, data, userDefinedVariables, includedVariables) {
-  const $ = cheerio.load(data);
-  const pageVariables = { };
-  VARIABLE_LOOKUP.set(fileName, new Map());
-  /**
-   * <import>ed variables have not been processed yet, we replace such variables with itself first.
-   */
-  const importedVariables = {};
-  $('import[from]').each((index, element) => {
-    const variableNames = Object.keys(element.attribs)
-      .filter(name => name !== 'from' && name !== 'as');
-    // If no namespace is provided, we use the smallest name as one...
-    const largestName = variableNames.sort()[0];
-    // ... and prepend it with $__MARKBIND__ to reduce collisions.
-    const generatedAlias = IMPORTED_VARIABLE_PREFIX + largestName;
-    const hasAlias = _.hasIn(element.attribs, 'as');
-    const alias = hasAlias ? element.attribs.as : generatedAlias;
-    importedVariables[alias] = new Proxy({}, {
-      get(obj, prop) {
-        return `{{${alias}.${prop}}}`;
-      },
-    });
-    variableNames.forEach((name) => {
-      importedVariables[name] = `{{${alias}.${name}}}`;
-    });
-  });
-  $('variable').each(function () {
-    const variableElement = $(this);
-    const variableName = variableElement.attr('name');
-    if (!variableName) {
-      // eslint-disable-next-line no-console
-      console.warn(`Missing 'name' for variable in ${fileName}\n`);
-      return;
-    }
-    if (!pageVariables[variableName]) {
-      const variableValue
-        = nunjucks.renderString(
-          md.renderInline(variableElement.html()),
-          {
-            ...importedVariables, ...pageVariables, ...userDefinedVariables, ...includedVariables,
-          },
-        );
-      pageVariables[variableName] = variableValue;
-      VARIABLE_LOOKUP.get(fileName).set(variableName, variableValue);
-    }
-  });
-  return { ...importedVariables, ...pageVariables };
-}
-
-Parser.prototype.getDynamicIncludeSrc = function () {
-  return _.clone(this.dynamicIncludeSrc);
-};
-
-Parser.prototype.getStaticIncludeSrc = function () {
-  return _.clone(this.staticIncludeSrc);
-};
-
-Parser.prototype.getBoilerplateIncludeSrc = function () {
-  return _.clone(this.boilerplateIncludeSrc);
-};
-
-Parser.prototype.getMissingIncludeSrc = function () {
-  return _.clone(this.missingIncludeSrc);
-};
-
-Parser.prototype._preprocessThumbnails = function (element) {
-  const isImage = _.hasIn(element.attribs, 'src') && element.attribs.src !== '';
-  if (isImage) {
-    return element;
-  }
-  const text = _.hasIn(element.attribs, 'text') ? element.attribs.text : '';
-  if (text === '') {
-    return element;
-  }
-  const renderedText = md.renderInline(text);
-  // eslint-disable-next-line no-param-reassign
-  element.children = cheerio.parseHTML(renderedText);
-  return element;
-};
-
-Parser.prototype._renderIncludeFile = function (filePath, element, context, config, asIfAt = filePath) {
-  try {
-    this._fileCache[filePath] = this._fileCache[filePath]
-      ? this._fileCache[filePath] : fs.readFileSync(filePath, 'utf8');
-  } catch (e) {
-    // Read file fail
-    const missingReferenceErrorMessage = `Missing reference in: ${element.attribs[ATTRIB_CWF]}`;
-    e.message += `\n${missingReferenceErrorMessage}`;
-    this._onError(e);
-    return createErrorNode(element, e);
+  getDynamicIncludeSrc() {
+    return _.clone(this.dynamicIncludeSrc);
   }
 
-  const fileContent = this._fileCache[filePath]; // cache the file contents to save some I/O
-  const { parent, relative }
-    = calculateNewBaseUrls(asIfAt, config.rootPath, config.baseUrlMap);
-  const userDefinedVariables = config.userDefinedVariablesMap[path.resolve(parent, relative)];
-
-  // Extract included variables from the PARENT file
-  const includeVariables = extractIncludeVariables(element, context.variables);
-
-  // Extract page variables from the CHILD file
-  const pageVariables = extractPageVariables(asIfAt, fileContent,
-                                             userDefinedVariables, includeVariables);
-
-  const content = nunjucks.renderString(fileContent,
-                                        { ...pageVariables, ...includeVariables, ...userDefinedVariables },
-                                        { path: filePath });
-
-  const childContext = _.cloneDeep(context);
-  childContext.cwf = asIfAt;
-  childContext.variables = includeVariables;
-
-  return { content, childContext, userDefinedVariables };
-};
-
-Parser.prototype._extractInnerVariables = function (content, context, config) {
-  const { cwf } = context;
-  const $ = cheerio.load(content, {
-    xmlMode: false,
-    decodeEntities: false,
-  });
-  const aliases = new Map();
-  FILE_ALIASES.set(cwf, aliases);
-  $('import[from]').each((index, element) => {
-    const filePath = path.resolve(path.dirname(cwf), element.attribs.from);
-    const variableNames = Object.keys(element.attribs)
-      .filter(name => name !== 'from' && name !== 'as');
-    // If no namespace is provided, we use the smallest name as one
-    const largestName = variableNames.sort()[0];
-    // ... and prepend it with $__MARKBIND__ to reduce collisions.
-    const generatedAlias = IMPORTED_VARIABLE_PREFIX + largestName;
-    const alias = _.hasIn(element.attribs, 'as')
-      ? element.attribs.as
-      : generatedAlias;
-
-    aliases.set(alias, filePath);
-    this.staticIncludeSrc.push({ from: context.cwf, to: filePath });
-
-    // Render inner file content
-    const { content: renderedContent, childContext, userDefinedVariables }
-      = this._renderIncludeFile(filePath, element, context, config);
-
-    if (!PROCESSED_INNER_VARIABLES.has(filePath)) {
-      PROCESSED_INNER_VARIABLES.add(filePath);
-      this._extractInnerVariables(renderedContent, childContext, config);
-    }
-    const innerVariables = getImportedVariableMap(filePath);
-    VARIABLE_LOOKUP.get(filePath).forEach((value, variableName, map) => {
-      map.set(variableName, nunjucks.renderString(value, { ...userDefinedVariables, ...innerVariables }));
-    });
-  });
-};
-
-Parser.prototype._preprocess = function (node, context, config) {
-  const element = node;
-  const self = this;
-  element.attribs = element.attribs || {};
-  element.attribs[ATTRIB_CWF] = path.resolve(context.cwf);
-
-  if (element.name === 'thumbnail') {
-    return this._preprocessThumbnails(element);
+  getStaticIncludeSrc() {
+    return _.clone(this.staticIncludeSrc);
   }
 
-  const requiresSrc = ['include'].includes(element.name);
-  if (requiresSrc && _.isEmpty(element.attribs.src)) {
-    const error = new Error(`Empty src attribute in ${element.name} in: ${element.attribs[ATTRIB_CWF]}`);
-    this._onError(error);
-    return createErrorNode(element, error);
+  getBoilerplateIncludeSrc() {
+    return _.clone(this.boilerplateIncludeSrc);
   }
-  const shouldProcessSrc = ['include', 'panel'].includes(element.name);
-  const hasSrc = _.hasIn(element.attribs, 'src');
-  let isUrl;
-  let includeSrc;
-  let filePath;
-  let actualFilePath;
-  if (hasSrc && shouldProcessSrc) {
-    isUrl = utils.isUrl(element.attribs.src);
-    includeSrc = url.parse(element.attribs.src);
-    filePath = isUrl
-      ? element.attribs.src
-      : path.resolve(path.dirname(context.cwf), decodeURIComponent(includeSrc.path));
-    actualFilePath = filePath;
-    const isBoilerplate = _.hasIn(element.attribs, 'boilerplate');
-    if (isBoilerplate) {
-      element.attribs.boilerplate = element.attribs.boilerplate || path.basename(filePath);
-      actualFilePath = calculateBoilerplateFilePath(element.attribs.boilerplate, filePath, config);
-      this.boilerplateIncludeSrc.push({ from: context.cwf, to: actualFilePath });
-    }
-    const isOptional = element.name === 'include' && _.hasIn(element.attribs, 'optional');
-    if (!utils.fileExists(actualFilePath)) {
-      if (isOptional) {
-        return createEmptyNode();
-      }
-      this.missingIncludeSrc.push({ from: context.cwf, to: actualFilePath });
-      const error = new Error(
-        `No such file: ${actualFilePath}\nMissing reference in ${element.attribs[ATTRIB_CWF]}`,
-      );
-      this._onError(error);
-      return createErrorNode(element, error);
-    }
-  }
-
-  if (element.name === 'include') {
-    const isInline = _.hasIn(element.attribs, 'inline');
-    const isDynamic = _.hasIn(element.attribs, 'dynamic');
-    const isOptional = _.hasIn(element.attribs, 'optional');
-    const isTrim = _.hasIn(element.attribs, 'trim');
-    element.name = isInline ? 'span' : 'div';
-    element.attribs[ATTRIB_INCLUDE_PATH] = filePath;
-
-    if (isOptional && !includeSrc.hash) {
-      // optional includes of whole files have been handled, but segments still need to be processed
-      delete element.attribs.optional;
-    }
 
-    if (isDynamic) {
-      element.name = 'panel';
-      element.attribs.src = filePath;
-      element.attribs['no-close'] = true;
-      element.attribs['no-switch'] = true;
-      if (includeSrc.hash) {
-        element.attribs.fragment = includeSrc.hash.substring(1);
-      }
+  getMissingIncludeSrc() {
+    return _.clone(this.missingIncludeSrc);
+  }
 
-      element.attribs.header = element.attribs.name || '';
-      delete element.attribs.dynamic;
-      this.dynamicIncludeSrc.push({ from: context.cwf, to: actualFilePath, asIfTo: element.attribs.src });
+  static _preprocessThumbnails(element) {
+    const isImage = _.hasIn(element.attribs, 'src') && element.attribs.src !== '';
+    if (isImage) {
       return element;
     }
-
-    if (isUrl) {
-      return element; // only keep url path for dynamic
-    }
-
-    this.staticIncludeSrc.push({ from: context.cwf, to: actualFilePath });
-
-    const isIncludeSrcMd = utils.isMarkdownFileExt(utils.getExt(filePath));
-
-    if (isIncludeSrcMd && context.source === 'html') {
-      // HTML include markdown, use special tag to indicate markdown code.
-      element.name = 'markdown';
+    const text = _.hasIn(element.attribs, 'text') ? element.attribs.text : '';
+    if (text === '') {
+      return element;
     }
-    const { content, childContext, userDefinedVariables }
-      = this._renderIncludeFile(actualFilePath, element, context, config, filePath);
-    childContext.source = isIncludeSrcMd ? 'md' : 'html';
-    childContext.callStack.push(context.cwf);
+    const renderedText = md.renderInline(text);
+    // eslint-disable-next-line no-param-reassign
+    element.children = cheerio.parseHTML(renderedText);
+    return element;
+  }
 
-    if (!PROCESSED_INNER_VARIABLES.has(filePath)) {
-      PROCESSED_INNER_VARIABLES.add(filePath);
-      this._extractInnerVariables(content, childContext, config);
-    }
-    const innerVariables = getImportedVariableMap(filePath);
-    const fileContent = nunjucks.renderString(content, { ...userDefinedVariables, ...innerVariables });
+  _renderIncludeFile(filePath, element, context, config, asIfAt = filePath) {
+    try {
+      this._fileCache[filePath] = this._fileCache[filePath]
+        ? this._fileCache[filePath] : fs.readFileSync(filePath, 'utf8');
+    } catch (e) {
+      // Read file fail
+      const missingReferenceErrorMessage = `Missing reference in: ${element.attribs[ATTRIB_CWF]}`;
+      e.message += `\n${missingReferenceErrorMessage}`;
+      this._onError(e);
+      return Parser.createErrorNode(element, e);
+    }
+    const fileContent = this._fileCache[filePath]; // cache the file contents to save some I/O
+    const { parent, relative } = Parser.calculateNewBaseUrls(asIfAt, config.rootPath, config.baseUrlMap);
+    const userDefinedVariables = config.userDefinedVariablesMap[path.resolve(parent, relative)];
+    // Extract included variables from the PARENT file
+    const includeVariables = Parser.extractIncludeVariables(element, context.variables);
+    // Extract page variables from the CHILD file
+    const pageVariables
+      = this.extractPageVariables(asIfAt, fileContent, userDefinedVariables, includeVariables);
+    const content
+      = nunjucks.renderString(fileContent,
+                              { ...pageVariables, ...includeVariables, ...userDefinedVariables },
+                              { path: filePath });
+    const childContext = _.cloneDeep(context);
+    childContext.cwf = asIfAt;
+    childContext.variables = includeVariables;
+    return { content, childContext, userDefinedVariables };
+  }
 
-    // Delete variable attributes in include
-    Object.keys(element.attribs).forEach((attribute) => {
-      if (attribute.startsWith('var-')) {
-        delete element.attribs[attribute];
+  _extractInnerVariables(content, context, config) {
+    const { cwf } = context;
+    const $ = cheerio.load(content, {
+      xmlMode: false,
+      decodeEntities: false,
+    });
+    const aliases = new Map();
+    Parser.FILE_ALIASES.set(cwf, aliases);
+    $('import[from]').each((index, element) => {
+      const filePath = path.resolve(path.dirname(cwf), element.attribs.from);
+      const variableNames = Object.keys(element.attribs)
+        .filter(name => name !== 'from' && name !== 'as');
+      // If no namespace is provided, we use the smallest name as one
+      const largestName = variableNames.sort()[0];
+      // ... and prepend it with $__MARKBIND__ to reduce collisions.
+      const generatedAlias = IMPORTED_VARIABLE_PREFIX + largestName;
+      const alias = _.hasIn(element.attribs, 'as')
+        ? element.attribs.as
+        : generatedAlias;
+      aliases.set(alias, filePath);
+      this.staticIncludeSrc.push({ from: context.cwf, to: filePath });
+      // Render inner file content
+      const { content: renderedContent, childContext, userDefinedVariables }
+        = this._renderIncludeFile(filePath, element, context, config);
+      if (!Parser.PROCESSED_INNER_VARIABLES.has(filePath)) {
+        Parser.PROCESSED_INNER_VARIABLES.add(filePath);
+        this._extractInnerVariables(renderedContent, childContext, config);
       }
+      const innerVariables = this.getImportedVariableMap(filePath);
+      Parser.VARIABLE_LOOKUP.get(filePath).forEach((value, variableName, map) => {
+        map.set(variableName, nunjucks.renderString(value, { ...userDefinedVariables, ...innerVariables }));
+      });
     });
+  }
 
-    delete element.attribs.boilerplate;
-    delete element.attribs.src;
-    delete element.attribs.inline;
-    delete element.attribs.trim;
-
-    if (includeSrc.hash) {
-      // directly get segment from the src
-      const segmentSrc = cheerio.parseHTML(fileContent, true);
-      const $ = cheerio.load(segmentSrc);
-      const hashContent = $(includeSrc.hash).html();
-      let actualContent = (hashContent && isTrim) ? hashContent.trim() : hashContent;
-
-      if (actualContent === null) {
+  _preprocess(node, context, config) {
+    const element = node;
+    const self = this;
+    element.attribs = element.attribs || {};
+    element.attribs[ATTRIB_CWF] = path.resolve(context.cwf);
+    if (element.name === 'thumbnail') {
+      return Parser._preprocessThumbnails(element);
+    }
+    const requiresSrc = ['include'].includes(element.name);
+    if (requiresSrc && _.isEmpty(element.attribs.src)) {
+      const error = new Error(`Empty src attribute in ${element.name} in: ${element.attribs[ATTRIB_CWF]}`);
+      this._onError(error);
+      return Parser.createErrorNode(element, error);
+    }
+    const shouldProcessSrc = ['include', 'panel'].includes(element.name);
+    const hasSrc = _.hasIn(element.attribs, 'src');
+    let isUrl;
+    let includeSrc;
+    let filePath;
+    let actualFilePath;
+    if (hasSrc && shouldProcessSrc) {
+      isUrl = utils.isUrl(element.attribs.src);
+      includeSrc = url.parse(element.attribs.src);
+      filePath = isUrl
+        ? element.attribs.src
+        : path.resolve(path.dirname(context.cwf), decodeURIComponent(includeSrc.path));
+      actualFilePath = filePath;
+      const isBoilerplate = _.hasIn(element.attribs, 'boilerplate');
+      if (isBoilerplate) {
+        element.attribs.boilerplate = element.attribs.boilerplate || path.basename(filePath);
+        actualFilePath
+          = Parser.calculateBoilerplateFilePath(element.attribs.boilerplate, filePath, config);
+        this.boilerplateIncludeSrc.push({ from: context.cwf, to: actualFilePath });
+      }
+      const isOptional = element.name === 'include' && _.hasIn(element.attribs, 'optional');
+      if (!utils.fileExists(actualFilePath)) {
         if (isOptional) {
-          // set empty content for optional segment include that does not exist
-          actualContent = '';
-        } else {
-          const error = new Error(
-            `No such segment '${includeSrc.hash.substring(1)}' in file: ${actualFilePath}`
-              + `\nMissing reference in ${element.attribs[ATTRIB_CWF]}`,
-          );
-          this._onError(error);
-          return createErrorNode(element, error);
+          return Parser.createEmptyNode();
         }
+        this.missingIncludeSrc.push({ from: context.cwf, to: actualFilePath });
+        const error
+        = new Error(`No such file: ${actualFilePath}\nMissing reference in ${element.attribs[ATTRIB_CWF]}`);
+        this._onError(error);
+        return Parser.createErrorNode(element, error);
       }
-
-      if (isOptional) {
-        // optional includes of segments have now been handled, so delete the attribute
+    }
+    if (element.name === 'include') {
+      const isInline = _.hasIn(element.attribs, 'inline');
+      const isDynamic = _.hasIn(element.attribs, 'dynamic');
+      const isOptional = _.hasIn(element.attribs, 'optional');
+      const isTrim = _.hasIn(element.attribs, 'trim');
+      element.name = isInline ? 'span' : 'div';
+      element.attribs[ATTRIB_INCLUDE_PATH] = filePath;
+      if (isOptional && !includeSrc.hash) {
+        // optional includes of whole files have been handled, but segments still need to be processed
         delete element.attribs.optional;
       }
-
-      if (isIncludeSrcMd) {
-        if (context.mode === 'include') {
-          actualContent = isInline ? actualContent : utils.wrapContent(actualContent, '\n\n', '\n');
-        } else {
-          actualContent = md.render(actualContent);
+      if (isDynamic) {
+        element.name = 'panel';
+        element.attribs.src = filePath;
+        element.attribs['no-close'] = true;
+        element.attribs['no-switch'] = true;
+        if (includeSrc.hash) {
+          element.attribs.fragment = includeSrc.hash.substring(1);
         }
-        actualContent = self._rebaseReferenceForStaticIncludes(actualContent, element, config);
+        element.attribs.header = element.attribs.name || '';
+        delete element.attribs.dynamic;
+        this.dynamicIncludeSrc.push({ from: context.cwf, to: actualFilePath, asIfTo: element.attribs.src });
+        return element;
       }
-      const wrapperType = isInline ? 'span' : 'div';
-      element.children = cheerio.parseHTML(
-        `<${wrapperType} data-included-from="${filePath}">${actualContent}</${wrapperType}>`,
-        true,
-      );
-    } else {
-      let actualContent = (fileContent && isTrim) ? fileContent.trim() : fileContent;
-      if (isIncludeSrcMd) {
-        if (context.mode === 'include') {
-          actualContent = isInline ? actualContent : utils.wrapContent(actualContent, '\n\n', '\n');
-        } else {
-          actualContent = md.render(actualContent);
+      if (isUrl) {
+        return element; // only keep url path for dynamic
+      }
+      this.staticIncludeSrc.push({ from: context.cwf, to: actualFilePath });
+      const isIncludeSrcMd = utils.isMarkdownFileExt(utils.getExt(filePath));
+      if (isIncludeSrcMd && context.source === 'html') {
+        // HTML include markdown, use special tag to indicate markdown code.
+        element.name = 'markdown';
+      }
+      const { content, childContext, userDefinedVariables }
+      = this._renderIncludeFile(actualFilePath, element, context, config, filePath);
+      childContext.source = isIncludeSrcMd ? 'md' : 'html';
+      childContext.callStack.push(context.cwf);
+      if (!Parser.PROCESSED_INNER_VARIABLES.has(filePath)) {
+        Parser.PROCESSED_INNER_VARIABLES.add(filePath);
+        this._extractInnerVariables(content, childContext, config);
+      }
+      const innerVariables = this.getImportedVariableMap(filePath);
+      const fileContent = nunjucks.renderString(content, { ...userDefinedVariables, ...innerVariables });
+      // Delete variable attributes in include
+      Object.keys(element.attribs).forEach((attribute) => {
+        if (attribute.startsWith('var-')) {
+          delete element.attribs[attribute];
+        }
+      });
+      delete element.attribs.boilerplate;
+      delete element.attribs.src;
+      delete element.attribs.inline;
+      delete element.attribs.trim;
+      if (includeSrc.hash) {
+        // directly get segment from the src
+        const segmentSrc = cheerio.parseHTML(fileContent, true);
+        const $ = cheerio.load(segmentSrc);
+        const hashContent = $(includeSrc.hash).html();
+        let actualContent = (hashContent && isTrim) ? hashContent.trim() : hashContent;
+        if (actualContent === null) {
+          if (isOptional) {
+            // set empty content for optional segment include that does not exist
+            actualContent = '';
+          } else {
+            const error
+              = new Error(`No such segment '${includeSrc.hash.substring(1)}' in file: ${actualFilePath}`
+              + `\nMissing reference in ${element.attribs[ATTRIB_CWF]}`);
+            this._onError(error);
+            return Parser.createErrorNode(element, error);
+          }
+        }
+        if (isOptional) {
+          // optional includes of segments have now been handled, so delete the attribute
+          delete element.attribs.optional;
+        }
+        if (isIncludeSrcMd) {
+          if (context.mode === 'include') {
+            actualContent = isInline ? actualContent : utils.wrapContent(actualContent, '\n\n', '\n');
+          } else {
+            actualContent = md.render(actualContent);
+          }
+          actualContent = Parser._rebaseReferenceForStaticIncludes(actualContent, element, config);
         }
+        const wrapperType = isInline ? 'span' : 'div';
+        element.children
+          = cheerio.parseHTML(
+            `<${wrapperType} data-included-from="${filePath}">${actualContent}</${wrapperType}>`,
+            true);
+      } else {
+        let actualContent = (fileContent && isTrim) ? fileContent.trim() : fileContent;
+        if (isIncludeSrcMd) {
+          if (context.mode === 'include') {
+            actualContent = isInline ? actualContent : utils.wrapContent(actualContent, '\n\n', '\n');
+          } else {
+            actualContent = md.render(actualContent);
+          }
+        }
+        const wrapperType = isInline ? 'span' : 'div';
+        element.children
+          = cheerio.parseHTML(
+            `<${wrapperType} data-included-from="${filePath}">${actualContent}</${wrapperType}>`,
+            true);
       }
-      const wrapperType = isInline ? 'span' : 'div';
-      element.children = cheerio.parseHTML(
-        `<${wrapperType} data-included-from="${filePath}">${actualContent}</${wrapperType}>`,
-        true,
-      );
-    }
-
-    if (element.children && element.children.length > 0) {
-      if (childContext.callStack.length > CyclicReferenceError.MAX_RECURSIVE_DEPTH) {
-        const error = new CyclicReferenceError(childContext.callStack);
-        this._onError(error);
-        return createErrorNode(element, error);
+      if (element.children && element.children.length > 0) {
+        if (childContext.callStack.length > CyclicReferenceError.MAX_RECURSIVE_DEPTH) {
+          const error = new CyclicReferenceError(childContext.callStack);
+          this._onError(error);
+          return Parser.createErrorNode(element, error);
+        }
+        element.children = element.children.map(e => self._preprocess(e, childContext, config));
+      }
+    } else if ((element.name === 'panel') && hasSrc) {
+      if (!isUrl && includeSrc.hash) {
+        element.attribs.fragment = includeSrc.hash.substring(1); // save hash to fragment attribute
+      }
+      element.attribs.src = filePath;
+      this.dynamicIncludeSrc.push({ from: context.cwf, to: actualFilePath, asIfTo: filePath });
+      return element;
+    } else if (element.name === 'variable' || element.name === 'import') {
+      return Parser.createEmptyNode();
+    } else {
+      if (element.name === 'body') {
+        // eslint-disable-next-line no-console
+        console.warn(`<body> tag found in ${element.attribs[ATTRIB_CWF]}. This may cause formatting errors.`);
+      }
+      if (element.children && element.children.length > 0) {
+        element.children = element.children.map(e => self._preprocess(e, context, config));
       }
-      element.children = element.children.map(e => self._preprocess(e, childContext, config));
-    }
-  } else if ((element.name === 'panel') && hasSrc) {
-    if (!isUrl && includeSrc.hash) {
-      element.attribs.fragment = includeSrc.hash.substring(1); // save hash to fragment attribute
     }
-    element.attribs.src = filePath;
-    this.dynamicIncludeSrc.push({ from: context.cwf, to: actualFilePath, asIfTo: filePath });
     return element;
-  } else if (element.name === 'variable' || element.name === 'import') {
-    return createEmptyNode();
-  } else {
-    if (element.name === 'body') {
-      // eslint-disable-next-line no-console
-      console.warn(`<body> tag found in ${element.attribs[ATTRIB_CWF]}. This may cause formatting errors.`);
-    }
-    if (element.children && element.children.length > 0) {
-      element.children = element.children.map(e => self._preprocess(e, context, config));
-    }
   }
 
-  return element;
-};
-
-Parser.prototype.processDynamicResources = function (context, html) {
-  const self = this;
-  const $ = cheerio.load(html, {
-    xmlMode: false,
-    decodeEntities: false,
-  });
-  $('img, pic, thumbnail').each(function () {
-    const elem = $(this);
-    if (elem[0].name === 'thumbnail' && elem.attr('src') === undefined) {
-      // Thumbnail tag without src
-      return;
+  processDynamicResources(context, html) {
+    const self = this;
+    const $ = cheerio.load(html, {
+      xmlMode: false,
+      decodeEntities: false,
+    });
+    $('img, pic, thumbnail').each(function () {
+      const elem = $(this);
+      if (elem[0].name === 'thumbnail' && elem.attr('src') === undefined) {
+        // Thumbnail tag without src
+        return;
+      }
+      const resourcePath = utils.ensurePosix(elem.attr('src'));
+      if (resourcePath === undefined || resourcePath === '') {
+        // Found empty img/pic resource in resourcePath
+        return;
+      }
+      if (utils.isAbsolutePath(resourcePath) || utils.isUrl(resourcePath)) {
+        // Do not rewrite.
+        return;
+      }
+      const firstParent = elem.closest('div[data-included-from], span[data-included-from]');
+      const originalSrc = utils.ensurePosix(firstParent.attr('data-included-from') || context);
+      const originalSrcFolder = path.posix.dirname(originalSrc);
+      const fullResourcePath = path.posix.join(originalSrcFolder, resourcePath);
+      const resolvedResourcePath = path.posix.relative(utils.ensurePosix(self.rootPath), fullResourcePath);
+      const absoluteResourcePath = path.posix.join('{{hostBaseUrl}}', resolvedResourcePath);
+      $(this).attr('src', absoluteResourcePath);
+    });
+    $('a, link').each(function () {
+      const elem = $(this);
+      const resourcePath = elem.attr('href');
+      if (resourcePath === undefined || resourcePath === '') {
+        // Found empty href resource in resourcePath
+        return;
+      }
+      if (utils.isAbsolutePath(resourcePath) || utils.isUrl(resourcePath) || resourcePath.startsWith('#')) {
+        // Do not rewrite.
+        return;
+      }
+      const firstParent = elem.closest('div[data-included-from], span[data-included-from]');
+      const originalSrc = utils.ensurePosix(firstParent.attr('data-included-from') || context);
+      const originalSrcFolder = path.posix.dirname(originalSrc);
+      const fullResourcePath = path.posix.join(originalSrcFolder, resourcePath);
+      const resolvedResourcePath = path.posix.relative(utils.ensurePosix(self.rootPath), fullResourcePath);
+      const absoluteResourcePath = path.posix.join('{{hostBaseUrl}}', resolvedResourcePath);
+      $(this).attr('href', absoluteResourcePath);
+    });
+    return $.html();
+  }
+
+  static unwrapIncludeSrc(html) {
+    const $ = cheerio.load(html, {
+      xmlMode: false,
+      decodeEntities: false,
+    });
+    $('div[data-included-from], span[data-included-from]').each(function () {
+      $(this).replaceWith($(this).contents());
+    });
+    return $.html();
+  }
+
+  _parse(node, context, config) {
+    const element = node;
+    const self = this;
+    if (_.isArray(element)) {
+      return element.map(el => self._parse(el, context, config));
     }
-    const resourcePath = utils.ensurePosix(elem.attr('src'));
-    if (resourcePath === undefined || resourcePath === '') {
-      // Found empty img/pic resource in resourcePath
-      return;
+    if (Parser.isText(element)) {
+      return element;
     }
-    if (utils.isAbsolutePath(resourcePath) || utils.isUrl(resourcePath)) {
-      // Do not rewrite.
-      return;
+    if (element.name) {
+      element.name = element.name.toLowerCase();
     }
-    const firstParent = elem.closest('div[data-included-from], span[data-included-from]');
-    const originalSrc = utils.ensurePosix(firstParent.attr('data-included-from') || context);
-
-    const originalSrcFolder = path.posix.dirname(originalSrc);
-    const fullResourcePath = path.posix.join(originalSrcFolder, resourcePath);
-    const resolvedResourcePath = path.posix.relative(utils.ensurePosix(self.rootPath), fullResourcePath);
-    const absoluteResourcePath = path.posix.join('{{hostBaseUrl}}', resolvedResourcePath);
-
-    $(this).attr('src', absoluteResourcePath);
-  });
-  $('a, link').each(function () {
-    const elem = $(this);
-    const resourcePath = elem.attr('href');
-    if (resourcePath === undefined || resourcePath === '') {
-      // Found empty href resource in resourcePath
-      return;
+    switch (element.name) {
+    case 'md':
+      element.name = 'span';
+      cheerio.prototype.options.xmlMode = false;
+      element.children = cheerio.parseHTML(md.renderInline(cheerio.html(element.children)), true);
+      cheerio.prototype.options.xmlMode = true;
+      break;
+    case 'markdown':
+      element.name = 'div';
+      cheerio.prototype.options.xmlMode = false;
+      element.children = cheerio.parseHTML(md.render(cheerio.html(element.children)), true);
+      cheerio.prototype.options.xmlMode = true;
+      break;
+    case 'panel': {
+      if (!_.hasIn(element.attribs, 'src')) { // dynamic panel
+        break;
+      }
+      const fileExists = utils.fileExists(element.attribs.src)
+          || utils.fileExists(
+            Parser.calculateBoilerplateFilePath(
+              element.attribs.boilerplate,
+              element.attribs.src, config));
+      if (fileExists) {
+        const { src, fragment } = element.attribs;
+        const resultDir = path.dirname(path.join('{{hostBaseUrl}}', path.relative(config.rootPath, src)));
+        const resultPath = path.join(resultDir, utils.setExtension(path.basename(src), '._include_.html'));
+        element.attribs.src = utils.ensurePosix(fragment ? `${resultPath}#${fragment}` : resultPath);
+      }
+      delete element.attribs.boilerplate;
+      break;
     }
-    if (utils.isAbsolutePath(resourcePath) || utils.isUrl(resourcePath) || resourcePath.startsWith('#')) {
-      // Do not rewrite.
-      return;
+    default:
+      break;
+    }
+    if (element.children) {
+      element.children.forEach((child) => {
+        self._parse(child, context, config);
+      });
     }
-
-    const firstParent = elem.closest('div[data-included-from], span[data-included-from]');
-    const originalSrc = utils.ensurePosix(firstParent.attr('data-included-from') || context);
-
-    const originalSrcFolder = path.posix.dirname(originalSrc);
-    const fullResourcePath = path.posix.join(originalSrcFolder, resourcePath);
-    const resolvedResourcePath = path.posix.relative(utils.ensurePosix(self.rootPath), fullResourcePath);
-    const absoluteResourcePath = path.posix.join('{{hostBaseUrl}}', resolvedResourcePath);
-
-    $(this).attr('href', absoluteResourcePath);
-  });
-  return $.html();
-};
-
-Parser.prototype.unwrapIncludeSrc = function (html) {
-  const $ = cheerio.load(html, {
-    xmlMode: false,
-    decodeEntities: false,
-  });
-  $('div[data-included-from], span[data-included-from]').each(function () {
-    $(this).replaceWith($(this).contents());
-  });
-  return $.html();
-};
-
-Parser.prototype._parse = function (node, context, config) {
-  const element = node;
-  const self = this;
-  if (_.isArray(element)) {
-    return element.map(el => self._parse(el, context, config));
-  }
-
-  if (isText(element)) {
     return element;
   }
-  if (element.name) {
-    element.name = element.name.toLowerCase();
-  }
 
-  switch (element.name) {
-  case 'md':
-    element.name = 'span';
-    cheerio.prototype.options.xmlMode = false;
-    element.children = cheerio.parseHTML(md.renderInline(cheerio.html(element.children)), true);
-    cheerio.prototype.options.xmlMode = true;
-    break;
-  case 'markdown':
-    element.name = 'div';
-    cheerio.prototype.options.xmlMode = false;
-    element.children = cheerio.parseHTML(md.render(cheerio.html(element.children)), true);
-    cheerio.prototype.options.xmlMode = true;
-    break;
-  case 'panel': {
-    if (!_.hasIn(element.attribs, 'src')) { // dynamic panel
-      break;
+  _trimNodes(node) {
+    const self = this;
+    if (node.name === 'pre' || node.name === 'code') {
+      return;
     }
-    const fileExists = utils.fileExists(element.attribs.src)
-                    || utils.fileExists(calculateBoilerplateFilePath(element.attribs.boilerplate,
-                                                                     element.attribs.src, config));
-    if (fileExists) {
-      const { src, fragment } = element.attribs;
-      const resultDir = path.dirname(path.join('{{hostBaseUrl}}', path.relative(config.rootPath, src)));
-      const resultPath = path.join(resultDir, utils.setExtension(path.basename(src), '._include_.html'));
-      element.attribs.src = utils.ensurePosix(fragment ? `${resultPath}#${fragment}` : resultPath);
+    if (node.children) {
+      /* eslint-disable no-plusplus */
+      for (let n = 0; n < node.children.length; n++) {
+        const child = node.children[n];
+        if (child.type === 'comment'
+          || (child.type === 'text' && n === node.children.length - 1 && !/\S/.test(child.data))) {
+          node.children.splice(n, 1);
+          n--;
+        } else if (child.type === 'tag') {
+          self._trimNodes(child);
+        }
+      }
+      /* eslint-enable no-plusplus */
     }
-    delete element.attribs.boilerplate;
-    break;
-  }
-  default:
-    break;
   }
 
-  if (element.children) {
-    element.children.forEach((child) => {
-      self._parse(child, context, config);
-    });
-  }
+  preprocess(file, pageData, context, config) {
+    const currentContext = context;
+    currentContext.mode = 'include';
+    currentContext.callStack = [];
 
-  return element;
-};
+    return new Promise((resolve, reject) => {
+      const handler = new htmlparser.DomHandler((error, dom) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        const nodes = dom.map((d) => {
+          let processed;
+          try {
+            processed = this._preprocess(d, currentContext, config);
+          } catch (err) {
+            err.message += `\nError while preprocessing '${file}'`;
+            this._onError(err);
+            processed = Parser.createErrorNode(d, err);
+          }
+          return processed;
+        });
+        resolve(cheerio.html(nodes));
+      });
 
-Parser.prototype._trimNodes = function (node) {
-  const self = this;
-  if (node.name === 'pre' || node.name === 'code') {
-    return;
-  }
-  if (node.children) {
-    /* eslint-disable no-plusplus */
-    for (let n = 0; n < node.children.length; n++) {
-      const child = node.children[n];
-      if (
-        child.type === 'comment'
-        || (child.type === 'text' && n === node.children.length - 1 && !/\S/.test(child.data))
-      ) {
-        node.children.splice(n, 1);
-        n--;
-      } else if (child.type === 'tag') {
-        self._trimNodes(child);
+      const parser = new htmlparser.Parser(handler, {
+        xmlMode: true,
+        decodeEntities: true,
+      });
+
+      const { parent, relative } = Parser.calculateNewBaseUrls(file, config.rootPath, config.baseUrlMap);
+      const userDefinedVariables = config.userDefinedVariablesMap[path.resolve(parent, relative)];
+      const { additionalVariables } = config;
+      const pageVariables = this.extractPageVariables(file, pageData, userDefinedVariables, {});
+
+      let fileContent = nunjucks.renderString(pageData,
+                                              {
+                                                ...pageVariables,
+                                                ...userDefinedVariables,
+                                                ...additionalVariables,
+                                              },
+                                              { path: file });
+      this._extractInnerVariables(fileContent, currentContext, config);
+      const innerVariables = this.getImportedVariableMap(currentContext.cwf);
+      fileContent = nunjucks.renderString(fileContent, {
+        ...userDefinedVariables,
+        ...additionalVariables,
+        ...innerVariables,
+      });
+      const fileExt = utils.getExt(file);
+      if (utils.isMarkdownFileExt(fileExt)) {
+        currentContext.source = 'md';
+        parser.parseComplete(fileContent.toString());
+      } else if (fileExt === 'html') {
+        currentContext.source = 'html';
+        parser.parseComplete(fileContent);
+      } else {
+        const error = new Error(`Unsupported File Extension: '${fileExt}'`);
+        reject(error);
       }
-    }
-    /* eslint-enable no-plusplus */
+    });
   }
-};
 
-Parser.prototype.preprocess = function (file, pageData, context, config) {
-  const currentContext = context;
-  currentContext.mode = 'include';
-  currentContext.callStack = [];
-
-  return new Promise((resolve, reject) => {
-    const handler = new htmlparser.DomHandler((error, dom) => {
-      if (error) {
-        reject(error);
-        return;
+  includeFile(file, config) {
+    const context = {};
+    context.cwf = config.cwf || file; // current working file
+    context.mode = 'include';
+    context.callStack = [];
+    return new Promise((resolve, reject) => {
+      const handler = new htmlparser.DomHandler((error, dom) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        const nodes = dom.map((d) => {
+          let processed;
+          try {
+            processed = this._preprocess(d, context, config);
+          } catch (err) {
+            err.message += `\nError while preprocessing '${file}'`;
+            this._onError(err);
+            processed = Parser.createErrorNode(d, err);
+          }
+          return processed;
+        });
+        resolve(cheerio.html(nodes));
+      });
+      const parser = new htmlparser.Parser(handler, {
+        xmlMode: true,
+        decodeEntities: true,
+      });
+      let actualFilePath = file;
+      if (!utils.fileExists(file)) {
+        const boilerplateFilePath
+          = Parser.calculateBoilerplateFilePath(path.basename(file), file, config);
+        if (utils.fileExists(boilerplateFilePath)) {
+          actualFilePath = boilerplateFilePath;
+        }
       }
-      const nodes = dom.map((d) => {
-        let processed;
-        try {
-          processed = this._preprocess(d, currentContext, config);
-        } catch (err) {
-          err.message += `\nError while preprocessing '${file}'`;
-          this._onError(err);
-          processed = createErrorNode(d, err);
+      // Read files
+      fs.readFile(actualFilePath, 'utf-8', (err, data) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        const { parent, relative }
+          = Parser.calculateNewBaseUrls(file, config.rootPath, config.baseUrlMap);
+        const userDefinedVariables = config.userDefinedVariablesMap[path.resolve(parent, relative)];
+        const pageVariables = this.extractPageVariables(file, data, userDefinedVariables, {});
+        let fileContent
+          = nunjucks.renderString(
+            data,
+            { ...pageVariables, ...userDefinedVariables },
+            { path: actualFilePath });
+        this._extractInnerVariables(fileContent, context, config);
+        const innerVariables = this.getImportedVariableMap(context.cwf);
+        fileContent = nunjucks.renderString(fileContent, { ...userDefinedVariables, ...innerVariables });
+        const fileExt = utils.getExt(file);
+        if (utils.isMarkdownFileExt(fileExt)) {
+          context.source = 'md';
+          parser.parseComplete(fileContent.toString());
+        } else if (fileExt === 'html') {
+          context.source = 'html';
+          parser.parseComplete(fileContent);
+        } else {
+          const error = new Error(`Unsupported File Extension: '${fileExt}'`);
+          reject(error);
         }
-        return processed;
       });
-      resolve(cheerio.html(nodes));
-    });
-
-    const parser = new htmlparser.Parser(handler, {
-      xmlMode: true,
-      decodeEntities: true,
     });
+  }
 
-    const { parent, relative } = calculateNewBaseUrls(file, config.rootPath, config.baseUrlMap);
-    const userDefinedVariables = config.userDefinedVariablesMap[path.resolve(parent, relative)];
-    const { additionalVariables } = config;
-    const pageVariables = extractPageVariables(file, pageData, userDefinedVariables, {});
-
-    let fileContent = nunjucks.renderString(pageData,
-                                            {
-                                              ...pageVariables,
-                                              ...userDefinedVariables,
-                                              ...additionalVariables,
-                                            },
-                                            { path: file });
-    this._extractInnerVariables(fileContent, currentContext, config);
-    const innerVariables = getImportedVariableMap(currentContext.cwf);
-    fileContent = nunjucks.renderString(fileContent, {
-      ...userDefinedVariables,
-      ...additionalVariables,
-      ...innerVariables,
-    });
-    const fileExt = utils.getExt(file);
-    if (utils.isMarkdownFileExt(fileExt)) {
-      currentContext.source = 'md';
-      parser.parseComplete(fileContent.toString());
-    } else if (fileExt === 'html') {
-      currentContext.source = 'html';
-      parser.parseComplete(fileContent);
-    } else {
-      const error = new Error(`Unsupported File Extension: '${fileExt}'`);
-      reject(error);
-    }
-  });
-};
-
-Parser.prototype.includeFile = function (file, config) {
-  const context = {};
-  context.cwf = config.cwf || file; // current working file
+  includeData(file, pageData, config) {
+    const context = {};
+    context.cwf = config.cwf || file; // current working file
 
-  return new Promise((resolve, reject) => {
-    let actualFilePath = file;
-    if (!utils.fileExists(file)) {
-      const boilerplateFilePath = calculateBoilerplateFilePath(path.basename(file), file, config);
-      if (utils.fileExists(boilerplateFilePath)) {
-        actualFilePath = boilerplateFilePath;
+    return new Promise((resolve, reject) => {
+      let actualFilePath = file;
+      if (!utils.fileExists(file)) {
+        const boilerplateFilePath = Parser.calculateBoilerplateFilePath(path.basename(file), file, config);
+        if (utils.fileExists(boilerplateFilePath)) {
+          actualFilePath = boilerplateFilePath;
+        }
       }
-    }
 
-    // Read files
-    fs.readFile(actualFilePath, 'utf-8', (err, data) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-      this.preprocess(actualFilePath, data, context, config)
+      this.preprocess(actualFilePath, pageData, context, config)
         .then(resolve)
         .catch(reject);
     });
-  });
-};
-
-Parser.prototype.includeData = function (file, pageData, config) {
-  const context = {};
-  context.cwf = config.cwf || file; // current working file
-
-  return new Promise((resolve, reject) => {
-    let actualFilePath = file;
-    if (!utils.fileExists(file)) {
-      const boilerplateFilePath = calculateBoilerplateFilePath(path.basename(file), file, config);
-      if (utils.fileExists(boilerplateFilePath)) {
-        actualFilePath = boilerplateFilePath;
-      }
-    }
+  }
 
-    this.preprocess(actualFilePath, pageData, context, config)
-      .then(resolve)
-      .catch(reject);
-  });
-};
-
-Parser.prototype.renderFile = function (file, config) {
-  const context = {};
-  context.cwf = file; // current working file
-  context.mode = 'render';
-  return new Promise((resolve, reject) => {
-    const handler = new htmlparser.DomHandler((error, dom) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-      const nodes = dom.map((d) => {
-        let parsed;
-        try {
-          parsed = this._parse(d, context, config);
-        } catch (err) {
-          err.message += `\nError while rendering '${file}'`;
-          this._onError(err);
-          parsed = createErrorNode(d, err);
+  renderFile(file, config) {
+    const context = {};
+    context.cwf = file; // current working file
+    context.mode = 'render';
+    return new Promise((resolve, reject) => {
+      const handler = new htmlparser.DomHandler((error, dom) => {
+        if (error) {
+          reject(error);
+          return;
         }
-        return parsed;
+        const nodes = dom.map((d) => {
+          let parsed;
+          try {
+            parsed = this._parse(d, context, config);
+          } catch (err) {
+            err.message += `\nError while rendering '${file}'`;
+            this._onError(err);
+            parsed = Parser.createErrorNode(d, err);
+          }
+          return parsed;
+        });
+        nodes.forEach((d) => {
+          this._trimNodes(d);
+        });
+        cheerio.prototype.options.xmlMode = false;
+        resolve(cheerio.html(nodes));
+        cheerio.prototype.options.xmlMode = true;
       });
-      nodes.forEach((d) => {
-        this._trimNodes(d);
+      const parser = new htmlparser.Parser(handler, {
+        xmlMode: true,
+        decodeEntities: false,
+      });
+      // Read files
+      fs.readFile(file, (err, data) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        const fileExt = utils.getExt(file);
+        if (utils.isMarkdownFileExt(fileExt)) {
+          const inputData = md.render(data.toString());
+          context.source = 'md';
+          parser.parseComplete(inputData);
+        } else if (fileExt === 'html') {
+          context.source = 'html';
+          parser.parseComplete(data);
+        } else {
+          const error = new Error(`Unsupported File Extension: '${fileExt}'`);
+          reject(error);
+        }
       });
-      cheerio.prototype.options.xmlMode = false;
-      resolve(cheerio.html(nodes));
-      cheerio.prototype.options.xmlMode = true;
     });
+  }
 
-    const parser = new htmlparser.Parser(handler, {
-      xmlMode: true,
-      decodeEntities: false,
+  resolveBaseUrl(pageData, config) {
+    const { baseUrlMap, rootPath, isDynamic } = config;
+    this.baseUrlMap = baseUrlMap;
+    this.rootPath = rootPath;
+    this.isDynamic = isDynamic || false;
+    if (this.isDynamic) {
+      this.dynamicSource = config.dynamicSource;
+    }
+    return new Promise((resolve, reject) => {
+      const handler = new htmlparser.DomHandler((error, dom) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        const nodes = dom.map((d) => {
+          const node = d;
+          const childrenBase = {};
+          if (this.isDynamic) {
+            // Change CWF for each top level element
+            if (node.attribs) {
+              node.attribs[ATTRIB_CWF] = this.dynamicSource;
+            }
+          }
+          return this._rebaseReference(node, childrenBase);
+        });
+        cheerio.prototype.options.xmlMode = false;
+        resolve(cheerio.html(nodes));
+        cheerio.prototype.options.xmlMode = true;
+      });
+      const parser = new htmlparser.Parser(handler, {
+        xmlMode: true,
+        decodeEntities: true,
+      });
+      parser.parseComplete(pageData);
     });
+  }
 
-    // Read files
-    fs.readFile(file, (err, data) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-      const fileExt = utils.getExt(file);
-      if (utils.isMarkdownFileExt(fileExt)) {
-        const inputData = md.render(data.toString());
-        context.source = 'md';
-        parser.parseComplete(inputData);
-      } else if (fileExt === 'html') {
-        context.source = 'html';
-        parser.parseComplete(data);
-      } else {
-        const error = new Error(`Unsupported File Extension: '${fileExt}'`);
-        reject(error);
-      }
+  _rebaseReference(node, foundBase) {
+    const element = node;
+    if (_.isArray(element)) {
+      return element.map(el => this._rebaseReference(el, foundBase));
+    }
+    if (Parser.isText(element)) {
+      return element;
+    }
+    // Rebase children element
+    const childrenBase = {};
+    element.children.forEach((el) => {
+      this._rebaseReference(el, childrenBase);
     });
-  });
-};
-
-Parser.prototype.resolveBaseUrl = function (pageData, config) {
-  const { baseUrlMap, rootPath, isDynamic } = config;
-  this.baseUrlMap = baseUrlMap;
-  this.rootPath = rootPath;
-  this.isDynamic = isDynamic || false;
-  if (this.isDynamic) {
-    this.dynamicSource = config.dynamicSource;
-  }
-  return new Promise((resolve, reject) => {
-    const handler = new htmlparser.DomHandler((error, dom) => {
-      if (error) {
-        reject(error);
-        return;
+    // rebase current element
+    if (element.attribs[ATTRIB_INCLUDE_PATH]) {
+      const filePath = element.attribs[ATTRIB_INCLUDE_PATH];
+      let newBase = Parser.calculateNewBaseUrls(filePath, this.rootPath, this.baseUrlMap);
+      if (newBase) {
+        const { relative, parent } = newBase;
+        // eslint-disable-next-line no-param-reassign
+        foundBase[parent] = relative;
       }
-      const nodes = dom.map((d) => {
-        const node = d;
-        const childrenBase = {};
-        if (this.isDynamic) {
-          // Change CWF for each top level element
-          if (node.attribs) {
-            node.attribs[ATTRIB_CWF] = this.dynamicSource;
+      const combinedBases = { ...childrenBase, ...foundBase };
+      const bases = Object.keys(combinedBases);
+      if (bases.length !== 0) {
+        // need to rebase
+        newBase = combinedBases[bases[0]];
+        const { children } = element;
+        if (children) {
+          const currentBase
+            = Parser.calculateNewBaseUrls(element.attribs[ATTRIB_CWF], this.rootPath, this.baseUrlMap);
+          if (currentBase) {
+            if (currentBase.relative !== newBase) {
+              cheerio.prototype.options.xmlMode = false;
+              const newBaseUrl = `{{hostBaseUrl}}/${newBase}`;
+              const rendered = nunjucks.renderString(cheerio.html(children), {
+                // This is to prevent the nunjuck call from converting {{hostBaseUrl}} to an empty string
+                // and let the hostBaseUrl value be injected later.
+                hostBaseUrl: '{{hostBaseUrl}}',
+                baseUrl: newBaseUrl,
+              }, { path: filePath });
+              element.children = cheerio.parseHTML(rendered, true);
+              cheerio.prototype.options.xmlMode = true;
+            }
           }
         }
-        return this._rebaseReference(node, childrenBase);
-      });
-      cheerio.prototype.options.xmlMode = false;
-      resolve(cheerio.html(nodes));
-      cheerio.prototype.options.xmlMode = true;
-    });
-
-    const parser = new htmlparser.Parser(handler, {
-      xmlMode: true,
-      decodeEntities: true,
-    });
-
-    parser.parseComplete(pageData);
-  });
-};
-
-Parser.prototype._rebaseReference = function (node, foundBase) {
-  const element = node;
+      }
+      delete element.attribs[ATTRIB_INCLUDE_PATH];
+    }
+    delete element.attribs[ATTRIB_CWF];
+    return element;
+  }
 
-  if (_.isArray(element)) {
-    return element.map(el => this._rebaseReference(el, foundBase));
+  static _rebaseReferenceForStaticIncludes(pageData, element, config) {
+    if (!config) {
+      return pageData;
+    }
+    if (!pageData.includes('{{baseUrl}}')) {
+      return pageData;
+    }
+    const filePath = element.attribs[ATTRIB_INCLUDE_PATH];
+    const fileBase = Parser.calculateNewBaseUrls(filePath, config.rootPath, config.baseUrlMap);
+    if (!fileBase.relative) {
+      return pageData;
+    }
+    const currentPath = element.attribs[ATTRIB_CWF];
+    const currentBase = Parser.calculateNewBaseUrls(currentPath, config.rootPath, config.baseUrlMap);
+    if (currentBase.relative === fileBase.relative) {
+      return pageData;
+    }
+    const newBase = fileBase.relative;
+    const newBaseUrl = `{{hostBaseUrl}}/${newBase}`;
+    return nunjucks.renderString(pageData, { baseUrl: newBaseUrl }, { path: filePath });
   }
 
-  if (isText(element)) {
-    return element;
+  static resetVariables() {
+    Parser.VARIABLE_LOOKUP.clear();
+    Parser.FILE_ALIASES.clear();
+    Parser.PROCESSED_INNER_VARIABLES.clear();
   }
-  // Rebase children element
-  const childrenBase = {};
-  element.children.forEach((el) => {
-    this._rebaseReference(el, childrenBase);
-  });
-
-  // rebase current element
-  if (element.attribs[ATTRIB_INCLUDE_PATH]) {
-    const filePath = element.attribs[ATTRIB_INCLUDE_PATH];
-    let newBase = calculateNewBaseUrls(filePath, this.rootPath, this.baseUrlMap);
-    if (newBase) {
-      const { relative, parent } = newBase;
-      // eslint-disable-next-line no-param-reassign
-      foundBase[parent] = relative;
-    }
 
-    const combinedBases = { ...childrenBase, ...foundBase };
-    const bases = Object.keys(combinedBases);
-    if (bases.length !== 0) {
-      // need to rebase
-      newBase = combinedBases[bases[0]];
-      const { children } = element;
-      if (children) {
-        const currentBase = calculateNewBaseUrls(element.attribs[ATTRIB_CWF], this.rootPath, this.baseUrlMap);
-        if (currentBase) {
-          if (currentBase.relative !== newBase) {
-            cheerio.prototype.options.xmlMode = false;
-            const newBaseUrl = `{{hostBaseUrl}}/${newBase}`;
-            const rendered = nunjucks.renderString(cheerio.html(children), {
-              // This is to prevent the nunjuck call from converting {{hostBaseUrl}} to an empty string
-              // and let the hostBaseUrl value be injected later.
-              hostBaseUrl: '{{hostBaseUrl}}',
-              baseUrl: newBaseUrl,
-            }, { path: filePath });
-            element.children = cheerio.parseHTML(rendered, true);
-            cheerio.prototype.options.xmlMode = true;
-          }
-        }
+  /**
+   * @throws Will throw an error if a non-absolute path or path outside the root is given
+   */
+  static calculateNewBaseUrls(filePath, root, lookUp) {
+    if (!path.isAbsolute(filePath)) {
+      throw new Error(`Non-absolute path given to calculateNewBaseUrls: '${filePath}'`);
+    }
+    if (!pathIsInside(filePath, root)) {
+      throw new Error(`Path given '${filePath}' is not in root '${root}'`);
+    }
+    function calculate(file, result) {
+      if (file === root) {
+        return { relative: path.relative(root, root), parent: root };
+      }
+      const parent = path.dirname(file);
+      if (lookUp.has(parent) && result.length === 1) {
+        return { relative: path.relative(parent, result[0]), parent };
+      } else if (lookUp.has(parent)) {
+        return calculate(parent, [parent]);
       }
+      return calculate(parent, result);
     }
-    delete element.attribs[ATTRIB_INCLUDE_PATH];
+
+    return calculate(filePath, []);
+  }
+
+  static calculateBoilerplateFilePath(pathInBoilerplates, asIfAt, config) {
+    const { parent, relative } = Parser.calculateNewBaseUrls(asIfAt, config.rootPath, config.baseUrlMap);
+    return path.resolve(parent, relative, BOILERPLATE_FOLDER_NAME, pathInBoilerplates);
   }
-  delete element.attribs[ATTRIB_CWF];
-  return element;
-};
 
-Parser.prototype._rebaseReferenceForStaticIncludes = function (pageData, element, config) {
-  if (!config) {
-    return pageData;
+  static createErrorNode(element, error) {
+    const errorElement = cheerio.parseHTML(utils.createErrorElement(error), true)[0];
+    return Object.assign(element, _.pick(errorElement, ['name', 'attribs', 'children']));
   }
 
-  if (!pageData.includes('{{baseUrl}}')) {
-    return pageData;
+  static createEmptyNode() {
+    const emptyElement = cheerio.parseHTML('<div></div>', true)[0];
+    return emptyElement;
   }
 
-  const filePath = element.attribs[ATTRIB_INCLUDE_PATH];
-  const fileBase = calculateNewBaseUrls(filePath, config.rootPath, config.baseUrlMap);
-  if (!fileBase.relative) {
-    return pageData;
+  static isText(element) {
+    return element.type === 'text' || element.type === 'comment';
   }
 
-  const currentPath = element.attribs[ATTRIB_CWF];
-  const currentBase = calculateNewBaseUrls(currentPath, config.rootPath, config.baseUrlMap);
-  if (currentBase.relative === fileBase.relative) {
-    return pageData;
+  /**
+   * Extract variables from an include element
+   * @param includeElement include element to extract variables from
+   * @param contextVariables variables defined by parent pages
+   */
+  static extractIncludeVariables(includeElement, contextVariables) {
+    const includedVariables = { ...contextVariables };
+    Object.keys(includeElement.attribs).forEach((attribute) => {
+      if (!attribute.startsWith('var-')) {
+        return;
+      }
+      const variableName = attribute.replace(/^var-/, '');
+      if (!includedVariables[variableName]) {
+        includedVariables[variableName] = includeElement.attribs[attribute];
+      }
+    });
+    if (includeElement.children) {
+      includeElement.children.forEach((child) => {
+        if (child.name !== 'variable' && child.name !== 'span') {
+          return;
+        }
+        const variableName = child.attribs.name || child.attribs.id;
+        if (!variableName) {
+          // eslint-disable-next-line no-console
+          console.warn(`Missing reference in ${includeElement.attribs[ATTRIB_CWF]}\n`
+            + `Missing 'name' or 'id' in variable for ${includeElement.attribs.src} include.`);
+          return;
+        }
+        if (!includedVariables[variableName]) {
+          includedVariables[variableName] = cheerio.html(child.children);
+        }
+      });
+    }
+    return includedVariables;
   }
+}
 
-  const newBase = fileBase.relative;
-  const newBaseUrl = `{{hostBaseUrl}}/${newBase}`;
-  return nunjucks.renderString(pageData, { baseUrl: newBaseUrl }, { path: filePath });
-};
+Parser.VARIABLE_LOOKUP = new Map();
+Parser.FILE_ALIASES = new Map();
+Parser.PROCESSED_INNER_VARIABLES = new Set();
 
 module.exports = Parser;