Fix baseUrl not working in include src attribute

src/Page.js

@@ -1060,6 +1060,7 @@ class Page {
         .then(result => this.postRender(result))
         .then(result => this.collectPluginsAssets(result))
         .then(result => markbinder.processDynamicResources(file, result))
+        .then(result => MarkBind.unwrapIncludeSrc(result))
         .then((result) => {
           // resolve the site base url here
           const { relative } = urlUtils.getParentSiteAbsoluteAndRelativePaths(file, this.rootPath,

src/lib/markbind/src/preprocessors/componentPreprocessor.js

@@ -108,9 +108,23 @@ function _getSrcFlagsAndFilePaths(element, context, config) {
   // We do this even if the src is not a url to get the hash, if any
   const includeSrc = url.parse(element.attribs.src);
 
-  const filePath = isUrl
-    ? element.attribs.src
-    : path.resolve(path.dirname(context.cwf), decodeURIComponent(includeSrc.path));
+  const baseUrlRegex = new RegExp('^{{\\s*baseUrl\\s*}}[/\\\\]');
+
+  let filePath;
+  if (isUrl) {
+    filePath = element.attribs.src;
+  } else {
+    const includePath = decodeURIComponent(includeSrc.path);
+
+    if (baseUrlRegex.test(includePath)) {
+      // The baseUrl has not been resolved during pre-processing, but we need the source file path
+      const parentSitePath = urlUtils.getParentSiteAbsolutePath(context.cwf, config.rootPath,
+                                                                config.baseUrlMap);
+      filePath = path.resolve(parentSitePath, includePath.replace(baseUrlRegex, ''));
+    } else {
+      filePath = path.resolve(path.dirname(context.cwf), includePath);
+    }
+  }
 
   const boilerplateFilePath = _getBoilerplateFilePath(element, config, filePath);
   const actualFilePath = boilerplateFilePath || filePath;

test/functional/test_site/expected/index.html

@@ -338,7 +338,9 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
               <li>Versus play – Two players can play against each other.</li>
               <li>Timer – Additional fixed time restriction on the player.</li>
             </ol>
-            <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+            <div id="image">
+              <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+          </div>
           <div>
             <p>This is a page from another Markbind site. The purpose of this page is to ensure that reuse works as expected. All the following images should display correctly.</p>
             <p>Some variables:</p>
@@ -401,6 +403,40 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
               </box>
             </div>
           </box>
+          <p><strong>Include a file using baseUrl</strong></p>
+          <div>
+            <p>As we establish requirements, they should be recorded in some way for future reference, usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders, and refine requirements based on their
+              feedback. The next phase is to convert requirements into a product specification that specifies how the product will address the requirements.</p>
+          </div>
+          <panel src="/test_site/requirements/SpecifyingRequirements._include_.html#preview" type="minimal" fragment="preview"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <p><strong>Include a file in a sub-folder that uses baseUrl</strong></p>
+          <div>
+            <div>
+              <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
+                do.</p>
+            </div>
+          </div>
+          <panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <p><strong>Include a file in a sub-folder that uses baseUrl using baseUrl</strong></p>
+          <div>
+            <div>
+              <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
+                do.</p>
+            </div>
+          </div>
+          <panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <p><strong>Include a file in a sub-site that uses baseUrl</strong></p>
+          <div>
+            <div>
+              <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+          </div>
+          <panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
+          <p><strong>Include a file in a sub-site that uses baseUrl using baseUrl</strong></p>
+          <div>
+            <div>
+              <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+          </div>
+          <panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template slot="_header"><p><strong>same test with panels</strong></p></template></panel>
           <p><strong>Trimmed include</strong></p>
           <p><strong><span>Fragment with leading spaces and newline</span></strong></p>
           <p><strong>Trimmed include fragment</strong></p>

test/functional/test_site/expected/requirements/SpecifyingRequirements._include_.html

@@ -0,0 +1,18 @@
+<h1 id="specifying-requirements">Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements"></a></h1>
+<p>
+  <seg id="preview">As we establish requirements, they should be recorded in some way for future reference, usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders, and refine requirements based on their feedback.
+    The next phase is to convert requirements into a product specification that specifies how the product will address the requirements. </seg>
+</p>
+<p>Given next are some tools and techniques that can be used to specify requirements. Note that they can also be used for establishing requirements too.</p>
+<h2 id="textual-descriptions-unstructured-prose">Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose"></a></h2>
+<p>This is the most straight forward way of describing requirements. A textual description can be used to give a quick overview of the domain/system that is understandable to both the users and the development team. Textual descriptions are especially useful
+  when describing the vision of a product. However, lengthy textual descriptions are hard to follow.</p>
+<h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
+<p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
+  list from Minesweeper (only a brief description has been provided to save space).</p>
+<ol>
+  <li>Basic play – Single player play.</li>
+  <li>Difficulty levels – Additional Medium and Advanced levels.</li>
+  <li>Versus play – Two players can play against each other.</li>
+  <li>Timer – Additional fixed time restriction on the player.</li>
+</ol>

test/functional/test_site/expected/requirements/testBaseUrlInIncludeSrc._include_.html

@@ -0,0 +1,3 @@
+<div>
+  <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should do.</p>
+</div>

test/functional/test_site/expected/sub_site/index._include_.html

@@ -8,4 +8,5 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
   <li>Versus play – Two players can play against each other.</li>
   <li>Timer – Additional fixed time restriction on the player.</li>
 </ol>
-<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
+<div id="image">
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>

test/functional/test_site/expected/sub_site/index.html

@@ -35,7 +35,9 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
           <li>Versus play – Two players can play against each other.</li>
           <li>Timer – Additional fixed time restriction on the player.</li>
         </ol>
-        <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+        <div id="image">
+          <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
+      </div>
     </div>
     <footer>
       <div class="text-center">

test/functional/test_site/expected/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html

@@ -0,0 +1,2 @@
+<div>
+  <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>

test/functional/test_site/index.md

@@ -165,6 +165,26 @@ tags: ["tag-frontmatter-shown", "tag-included-file", "+tag-exp*", "-tag-exp-hidd
 <include src="sub_site/testSubsiteAndNestedSubsiteBaseUrl.md" />
 </box>
 
+**Include a file using baseUrl**
+<include src="{{baseUrl}}/requirements/SpecifyingRequirements.md#preview" />
+<panel src="{{baseUrl}}/requirements/SpecifyingRequirements.md#preview" header="**same test with panels**" type="minimal" />
+
+**Include a file in a sub-folder that uses baseUrl**
+<include src="requirements/testBaseUrlInIncludeSrc.md" />
+<panel src="requirements/testBaseUrlInIncludeSrc.md" header="**same test with panels**" type="minimal" />
+
+**Include a file in a sub-folder that uses baseUrl using baseUrl**
+<include src="{{baseUrl}}/requirements/testBaseUrlInIncludeSrc.md" />
+<panel src="{{baseUrl}}/requirements/testBaseUrlInIncludeSrc.md" header="**same test with panels**" type="minimal" />
+
+**Include a file in a sub-site that uses baseUrl**
+<include src="sub_site/testBaseUrlInIncludeSrcSubSite.md" />
+<panel src="sub_site/testBaseUrlInIncludeSrcSubSite.md" header="**same test with panels**" type="minimal" />
+
+**Include a file in a sub-site that uses baseUrl using baseUrl**
+<include src="{{baseUrl}}/sub_site/testBaseUrlInIncludeSrcSubSite.md" />
+<panel src="{{baseUrl}}/sub_site/testBaseUrlInIncludeSrcSubSite.md" header="**same test with panels**" type="minimal" />
+
 **Trimmed include** 
 
 **<include src="testTrimInclude.md" trim inline />**

test/functional/test_site/requirements/testBaseUrlInIncludeSrc.md

@@ -0,0 +1 @@
+<include src="{{baseUrl}}/requirements/EstablishingRequirements.md#preview" />

test/functional/test_site/sub_site/index.md

@@ -11,4 +11,6 @@ Here is a sample feature list from Minesweeper (only a brief description has bee
 3. Versus play – Two players can play against each other.
 4. Timer – Additional fixed time restriction on the player. 
 
+<div id="image">
 <img src="{{baseUrl}}/images/I'm not allowed to use my favorite tool.png">
+</div>

test/functional/test_site/sub_site/testBaseUrlInIncludeSrcSubSite.md

@@ -0,0 +1 @@
+<include src="{{baseUrl}}/index.md#image" />