Render plugins on dynamic resources

src/Page.js

@@ -1054,6 +1054,8 @@ class Page {
         cwf: file,
       })
         .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,
@@ -1066,6 +1068,8 @@ class Page {
           rootPath: this.rootPath,
           headerIdMap: {},
         }))
+        .then(result => this.postRender(result))
+        .then(result => this.collectPluginsAssets(result))
         .then(result => markbinder.processDynamicResources(file, result))
         .then((result) => {
           // resolve the site base url here

test/functional/test_site/expected/needsrenderedplugin._include_.html

@@ -0,0 +1,3 @@
+<p>
+  <panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
+</p>

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

@@ -1,13 +1,13 @@
-<h1 id="specifying-requirements">Specifying requirements</h1>
+<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)</h2>
+<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</h2>
+<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>

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

@@ -1,4 +1,4 @@
-<h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within the boilerplate folder is separately specified</h1>
+<h1 id="path-within-the-boilerplate-folder-is-separately-specified">Path within the boilerplate folder is separately specified<a class="fa fa-anchor" href="#path-within-the-boilerplate-folder-is-separately-specified"></a></h1>
 <p>This is dynamically included.</p>
 <p>Like static include, pages within the site should be able to use files located in folders within boilerplate.</p>
 <p>Also, the boilerplate file name (e.g. <code>inside.md</code>) and the file that it is supposed to act as (<code>notInside.md</code>) can be different.</p>

test/functional/test_site/expected/siteData.json

@@ -266,6 +266,15 @@
       "globalAndFrontMatterOverrideProperty": "Overridden by global override",
       "headings": {},
       "headingKeywords": {}
+    },
+    {
+      "src": "testIncludePluginsRendered.md",
+      "title": "Included files should have plugins rendered on them",
+      "layout": "default",
+      "globalOverrideProperty": "Overridden by global override",
+      "globalAndFrontMatterOverrideProperty": "Overridden by global override",
+      "headings": {},
+      "headingKeywords": {}
     }
   ]
 }

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

@@ -1,5 +1,5 @@
 <p>This is a page from another Markbind site.</p>
-<h2 id="feature-list">Feature list</h2>
+<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>

test/functional/test_site/expected/testImportVariables._include_.html

@@ -3,11 +3,11 @@
 <div></div>
 <p>Test import variables from src specified via variable: This variable comes from <a href="http://variablesToImport.md">variablesToImport.md</a></p>
 <p>Test import variables that itself imports other variables:</p>
-<h2 id="trying-to-access-a-page-variable">Trying to access a page variable:</h2>
+<h2 id="trying-to-access-a-page-variable">Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable"></a></h2>
 <p>There should be something red below:</p>
 <div style="color:red">This is a page variable from <a href="http://variablestoimport.md">variablestoimport.md</a></div>
 Something should have appeared above in red.
-<h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:</h2>
+<h2 id="trying-to-access-an-imported-variable-via-namespace">Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace"></a></h2>
 <p>There should be something blue below:</p>
 <div style="color:blue">This is a deeply imported variable</div>
 Something should have appeared above in blue.

test/functional/test_site/expected/testIncludePluginsRendered.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="default-head-top">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.11.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Included files should have plugins rendered on them</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/octicons.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+  <meta name="default-head-bottom">
+  <link rel="icon" href="/test_site/favicon.png">
+</head>
+
+<body>
+  <div id="app">
+    <div id="flex-body">
+      <div id="content-wrapper">
+        <p>The contents of these two panels should be exactly the same.</p>
+        <p>
+          <panel src="/test_site/needsrenderedplugin._include_.html"></panel>
+        </p>
+        <panel>
+          <panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
+        </panel>
+      </div>
+    </div>
+    <footer>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
+</body>
+<script src="markbind/js/vue.min.js"></script>
+<script src="markbind/js/vue-strap.min.js"></script>
+<script src="markbind/js/bootstrap-utility.min.js"></script>
+<script src="markbind/js/polyfill.min.js"></script>
+<script src="markbind/js/bootstrap-vue.min.js"></script>
+<script>
+  const baseUrl = '/test_site'
+  const enableSearch = true
+</script>
+<script src="markbind/js/setup.js"></script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'TRACKING-ID');
+</script>
+<script src="markbind/layouts/default/scripts.js"></script>
+
+</html>

test/functional/test_site/expected/testPanels/NestedPanel._include_.html

@@ -1 +1 @@
-<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header"><h2 id="nested-panel">Nested Panel</h2></template></panel>
+<panel src="/test_site/testPanels/NormalPanelContent._include_.html" expanded="" id="nested-panel"><template slot="_header"><h2 id="nested-panel">Nested Panel<a class="fa fa-anchor" href="#nested-panel"></a></h2></template></panel>

test/functional/test_site/expected/testPanels/NormalPanelContent._include_.html

@@ -1 +1 @@
-<h3 id="normal-panel-content-heading">Normal panel content heading</h3>
+<h3 id="normal-panel-content-heading">Normal panel content heading<a class="fa fa-anchor" href="#normal-panel-content-heading"></a></h3>

test/functional/test_site/expected/testPanels/PanelNormalSource._include_.html

@@ -1 +1 @@
-<h3 id="panel-normal-source-content-headings">Panel normal source content headings</h3>
+<h3 id="panel-normal-source-content-headings">Panel normal source content headings<a class="fa fa-anchor" href="#panel-normal-source-content-headings"></a></h3>

test/functional/test_site/expected/testPanels/PanelSourceContainsSegment._include_.html

@@ -1,4 +1,4 @@
 <div id="segment">
-  <h3 id="panel-source-segment-content-headings">Panel source segment content headings</h3>
+  <h3 id="panel-source-segment-content-headings">Panel source segment content headings<a class="fa fa-anchor" href="#panel-source-segment-content-headings"></a></h3>
 </div>
-<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data</h3>
+<h3 id="this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data">This heading is not src of any panel, so it should not be in the search data<a class="fa fa-anchor" href="#this-heading-is-not-src-of-any-panel-so-it-should-not-be-in-the-search-data"></a></h3>

test/functional/test_site/expected/testPanels/boilerTestPanel._include_.html

@@ -1 +1 @@
-<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading</h3>
+<h3 id="boilerplate-test-for-panel-heading">boilerplate test for panel heading<a class="fa fa-anchor" href="#boilerplate-test-for-panel-heading"></a></h3>

test/functional/test_site/expected/testPanels/notInside._include_.html

@@ -1 +1 @@
-<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate</h3>
+<h3 id="heading-in-panel-boilerplate">heading in panel boilerplate<a class="fa fa-anchor" href="#heading-in-panel-boilerplate"></a></h3>

test/functional/test_site/needsrenderedplugin.md

@@ -0,0 +1 @@
+<panel><span heading><b>header</b></span> Content of panel</panel>

test/functional/test_site/site.json

@@ -75,6 +75,10 @@
     {
       "src": "testCodeBlocks.md",
       "title": "Code Blocks Line Splitting"
+    },
+    {
+      "src": "testIncludePluginsRendered.md",
+      "title": "Included files should have plugins rendered on them"
     }
   ],
   "ignore": [

test/functional/test_site/testIncludePluginsRendered.md

@@ -0,0 +1,7 @@
+The contents of these two panels should be exactly the same.
+
+<panel src="needsrenderedplugin.md"></panel>
+
+<panel>
+<panel><span heading><b>header</b></span> Content of panel</panel>
+</panel>