Refactor baseUrl into variablePreprocessor

BaseUrl processing is done in a separate stage involving repeated and recursive parsing / rendering of the content. This decreases cohesiveness of variable processing, and also performance due to the repeated parsing and rendering. It also necessitates edge-case solutions such as that in MarkBind#1088 when we need to resolve the baseUrl before the resolveBaseUrl stage has been reached. With a framework for variable processing now, let's move baseUrl processing into it, solving the above said problems. Furthermore, rendering of other variables containing html is dependent on the extra htmlparser call in resolveBaseUrl. Let's formally remove the need for this by using only the unescaped nunjucks environment to render variables.
ang-zeyu · Jun 13, 2020 · d019495 · d019495
1 parent 14262d4
commit d019495
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 355 deletions.
diff --git a/src/Page.js b/src/Page.js
@@ -18,7 +18,6 @@ const logger = require('./util/logger');
 const MarkBind = require('./lib/markbind/src/parser');
 const md = require('./lib/markbind/src/lib/markdown-it');
 const utils = require('./lib/markbind/src/utils');
-const urlUtils = require('./lib/markbind/src/utils/urls');
 
 const CLI_VERSION = require('../package.json').version;
 
@@ -594,7 +593,7 @@ class Page {
       // Insert content
       .then(result => njUtil.renderRaw(result, {
         [LAYOUT_PAGE_BODY_VARIABLE]: pageData,
-      }, {}, false));
+      }));
   }
 
 
@@ -708,7 +707,7 @@ class Page {
 
     // Add anchor classes and highlight current page's anchor, if any.
     const currentPageHtmlPath = this.src.replace(/\.(md|mbd)$/, '.html');
-    const currentPageRegex = new RegExp(`{{ *baseUrl *}}/${currentPageHtmlPath}`);
+    const currentPageRegex = new RegExp(`${this.baseUrl}/${currentPageHtmlPath}`);
     $nav('a[href]').each((i, elem) => {
       if (currentPageRegex.test($nav(elem).attr('href'))) {
         $nav(elem).addClass('current');
@@ -850,7 +849,7 @@ class Page {
     }
   }
 
-  collectHeadFiles(baseUrl, hostBaseUrl) {
+  collectHeadFiles() {
     const { head } = this.frontMatter;
     if (head === FRONT_MATTER_NONE_ATTR) {
       this.headFileTopContent = '';
@@ -880,16 +879,11 @@ class Page {
       // Split top and bottom contents
       const $ = cheerio.load(headFileMappedData, { xmlMode: false });
       if ($('head-top').length) {
-        collectedTopContent.push(njUtil.renderRaw($('head-top').html(), {
-          baseUrl,
-          hostBaseUrl,
-        }).trim().replace(/\n\s*\n/g, '\n').replace(/\n/g, '\n    '));
+        collectedTopContent.push($('head-top').html().trim().replace(/\n\s*\n/g, '\n')
+          .replace(/\n/g, '\n    '));
         $('head-top').remove();
       }
-      collectedBottomContent.push(njUtil.renderRaw($.html(), {
-        baseUrl,
-        hostBaseUrl,
-      }).trim().replace(/\n\s*\n/g, '\n').replace(/\n/g, '\n    '));
+      collectedBottomContent.push($.html().trim().replace(/\n\s*\n/g, '\n').replace(/\n/g, '\n    '));
     });
     this.headFileTopContent = collectedTopContent.join('\n    ');
     this.headFileBottomContent = collectedBottomContent.join('\n    ');
@@ -950,6 +944,7 @@ class Page {
      */
     const fileConfig = {
       baseUrlMap: this.baseUrlMap,
+      baseUrl: this.baseUrl,
       rootPath: this.rootPath,
       headerIdMap: this.headerIdMap,
       fixedHeader: this.fixedHeader,
@@ -969,27 +964,16 @@ class Page {
       .then(result => this.insertHeaderFile(result, fileConfig))
       .then(result => this.insertFooterFile(result))
       .then(result => Page.insertTemporaryStyles(result))
-      .then(result => markbinder.resolveBaseUrl(result, fileConfig))
       .then(result => markbinder.render(result, this.sourcePath, fileConfig))
       .then(result => this.postRender(result))
       .then(result => this.collectPluginsAssets(result))
-      .then(result => markbinder.processDynamicResources(this.sourcePath, result))
+      .then(result => MarkBind.processDynamicResources(this.sourcePath, result, fileConfig))
       .then(result => MarkBind.unwrapIncludeSrc(result))
       .then((result) => {
-        this.content = result;
-
-        const { relative } = urlUtils.getParentSiteAbsoluteAndRelativePaths(this.sourcePath, this.rootPath,
-                                                                            this.baseUrlMap);
-        const baseUrl = relative ? `${this.baseUrl}/${utils.ensurePosix(relative)}` : this.baseUrl;
-        const hostBaseUrl = this.baseUrl;
+        this.addLayoutScriptsAndStyles();
+        this.collectHeadFiles();
 
-        this.addLayoutFiles();
-        this.collectHeadFiles(baseUrl, hostBaseUrl);
-
-        this.content = njUtil.renderString(this.content, {
-          baseUrl,
-          hostBaseUrl,
-        });
+        this.content = result;
 
         this.collectAllPageSections();
         this.buildPageNav();
@@ -1077,7 +1061,7 @@ class Page {
           pageContextSources.forEach((src) => {
             if (src === undefined || src === '' || utils.isUrl(src)) {
               return;
-            } else if (utils.isAbsolutePath(src)) {
+            } else if (path.isAbsolute(src)) {
               self.pluginSourceFiles.add(path.resolve(src));
               return;
             }
@@ -1109,7 +1093,7 @@ class Page {
                 src = ensurePosix(src);
                 if (src === '' || utils.isUrl(src)) {
                   return;
-                } else if (utils.isAbsolutePath(src)) {
+                } else if (path.isAbsolute(src)) {
                   self.pluginSourceFiles.add(path.resolve(src));
                   return;
                 }
@@ -1233,7 +1217,7 @@ class Page {
   /**
    * Adds linked layout files to page assets
    */
-  addLayoutFiles() {
+  addLayoutScriptsAndStyles() {
     this.asset.layoutScript = path.join(this.layoutsAssetPath, this.frontMatter.layout, 'scripts.js');
     this.asset.layoutStyle = path.join(this.layoutsAssetPath, this.frontMatter.layout, 'styles.css');
   }
@@ -1260,41 +1244,30 @@ class Page {
       const markbinder = new MarkBind({
         variablePreprocessor: this.variablePreprocessor,
       });
+      /**
+       * @type {FileConfig}
+       */
+      const fileConfig = {
+        baseUrlMap: this.baseUrlMap,
+        baseUrl: this.baseUrl,
+        rootPath: this.rootPath,
+        headerIdMap: {},
+        cwf: file,
+      };
       return fs.readFileAsync(dependency.to, 'utf-8')
-        .then(result => markbinder.includeFile(dependency.to, result, {
-          baseUrlMap: this.baseUrlMap,
-          rootPath: this.rootPath,
-          cwf: file,
-        }))
+        .then(result => markbinder.includeFile(dependency.to, result, fileConfig))
         .then(result => Page.removeFrontMatter(result))
         .then(result => this.collectPluginSources(result))
         .then(result => this.preRender(result))
-        .then(result => markbinder.resolveBaseUrl(result, {
-          baseUrlMap: this.baseUrlMap,
-          rootPath: this.rootPath,
-        }))
-        .then(result => markbinder.render(result, this.sourcePath, {
-          baseUrlMap: this.baseUrlMap,
-          rootPath: this.rootPath,
-          headerIdMap: {},
-        }))
+        .then(result => markbinder.render(result, this.sourcePath, fileConfig))
         .then(result => this.postRender(result))
         .then(result => this.collectPluginsAssets(result))
-        .then(result => markbinder.processDynamicResources(file, result))
+        .then(result => MarkBind.processDynamicResources(file, result, fileConfig))
         .then(result => MarkBind.unwrapIncludeSrc(result))
         .then((result) => {
-          // resolve the site base url here
-          const { relative } = urlUtils.getParentSiteAbsoluteAndRelativePaths(file, this.rootPath,
-                                                                              this.baseUrlMap);
-          const baseUrl = relative ? `${this.baseUrl}/${utils.ensurePosix(relative)}` : this.baseUrl;
-          const hostBaseUrl = this.baseUrl;
-          const content = njUtil.renderString(result, {
-            baseUrl,
-            hostBaseUrl,
-          });
           const outputContentHTML = this.disableHtmlBeautify
-            ? content
-            : htmlBeautify(content, Page.htmlBeautifyOptions);
+            ? result
+            : htmlBeautify(result, Page.htmlBeautifyOptions);
           return fs.outputFileAsync(resultPath, outputContentHTML);
         })
         .then(() => {

diff --git a/src/Site.js b/src/Site.js
@@ -11,6 +11,7 @@ const njUtil = require('./lib/markbind/src/utils/nunjuckUtils');
 const injectHtmlParser2SpecialTags = require('./lib/markbind/src/patches/htmlparser2');
 const injectMarkdownItSpecialTags = require(
   './lib/markbind/src/lib/markdown-it/markdown-it-escape-special-tags');
+const utils = require('./lib/markbind/src/utils');
 
 const _ = {};
 _.difference = require('lodash/difference');
@@ -524,8 +525,6 @@ class Site {
    * 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.variablePreprocessor.resetUserDefinedVariablesMap();
 
     this.baseUrlMap.forEach((base) => {
@@ -540,13 +539,17 @@ class Site {
       }
 
       /*
-       This is to prevent the first nunjuck call from converting {{baseUrl}} to an empty string
-       and let the baseUrl value be injected later.
+       We retrieve the baseUrl of the (sub)site by appending the relative to the configured base url
+       i.e. We ignore the configured baseUrl of the sub sites.
        */
-      this.variablePreprocessor.addUserDefinedVariable(base, 'baseUrl', '{{baseUrl}}');
+      const siteRelativePathFromRoot = utils.ensurePosix(path.relative(this.rootPath, base));
+      const siteBaseUrl = siteRelativePathFromRoot === ''
+        ? this.siteConfig.baseUrl
+        : path.posix.join(this.siteConfig.baseUrl || '/', siteRelativePathFromRoot);
+      this.variablePreprocessor.addUserDefinedVariable(base, 'baseUrl', siteBaseUrl);
       this.variablePreprocessor.addUserDefinedVariable(base, 'MarkBind', MARKBIND_LINK_HTML);
 
-      const $ = cheerio.load(content);
+      const $ = cheerio.load(content, { decodeEntities: false });
       $('variable,span').each((index, element) => {
         const name = $(element).attr('name') || $(element).attr('id');
         const variableSource = $(element).attr('from');

diff --git a/src/lib/markbind/src/constants.js b/src/lib/markbind/src/constants.js
@@ -1,6 +1,5 @@
 module.exports = {
   // src/lib/markbind/src/parser.js
-  ATTRIB_INCLUDE_PATH: 'include-path',
   ATTRIB_CWF: 'cwf',
 
   BOILERPLATE_FOLDER_NAME: '_markbind/boilerplates',