MarkBind · itsyme · Apr 1, 2023 · Feb 12, 2023 · Feb 12, 2023 · Feb 22, 2023
diff --git a/docs/_markbind/layouts/devGuide.md b/docs/_markbind/layouts/devGuide.md
@@ -35,6 +35,7 @@
     </div>
   </nav>
   <div id="content-wrapper">
+    <breadcrumb />
     {{ content }}
   </div>
   <nav id="page-nav">

diff --git a/docs/_markbind/layouts/userGuide.md b/docs/_markbind/layouts/userGuide.md
@@ -47,6 +47,7 @@
     </div>
   </nav>
   <div id="content-wrapper">
+    <breadcrumb />
     {{ content }}
   </div>
   <nav id="page-nav">

diff --git a/docs/userGuide/fullSyntaxReference.md b/docs/userGuide/fullSyntaxReference.md
@@ -35,6 +35,7 @@
 
   badges : ['Badges', ['presentation', 'reader-facing']],
   boxes : ['Boxes', ['presentation', 'reader-facing']],
+  breadcrumbs : ['Breadcrumbs', ['navigation', 'reader-facing']],
   panels : ['Panels', ['presentation', 'reader-facing']],
   tabs : ['Tabs', ['presentation', 'reader-facing']],
   pictures : ['Pictures', ['images-diagrams', 'reader-facing']],

diff --git a/docs/userGuide/syntax/breadcrumbs.md b/docs/userGuide/syntax/breadcrumbs.md
@@ -0,0 +1,47 @@
+## Breadcrumbs
+
+Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.
+
+#### Usage
+
+Simply include the breadcrumb component (`<breadcrumb />`) into the page you want and breadcrumbs for that page will be automatically generated.
+
+You can also insert the breadcrumb component into a layout file to generate breadcrumbs for all pages using that layout.
+
+%%CODE:%%
+
+<div class="indented">
+
+```html
+<breadcrumb />
+```
+
+</div>
+
+%%OUTPUT:%%
+
+<div class="indented">
+
+> <breadcrumb />
+
+</div>
+
+<box type="tip" seamless>
+  Breadcrumb components refer to the Site Navigation for the hierarchy of pages.
+
+  **Breadcrumbs will not appear if there is no Site Navigation present on the page!**
+</box>
+
+<!-- Included in syntax cheat sheet -->
+<div id="short" class="d-none">
+
+```html
+<breadcrumb />
+```
+
+</div>
+
+<!-- Included in readerFacingFeatures.md -->
+<div id="examples" class="d-none">
+<breadcrumb />
+</div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/test/functional/test_site/_markbind/layouts/default.md b/packages/cli/test/functional/test_site/_markbind/layouts/default.md
@@ -20,6 +20,7 @@
     </div>
   </nav>
   <div id="content-wrapper">
+    <breadcrumb />
     {{ content }}
   </div>
   <nav id="page-nav">

diff --git a/packages/cli/test/functional/test_site/expected/bugs/index.html b/packages/cli/test/functional/test_site/expected/bugs/index.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
 
         <div class="website-content">
           <p><strong>Bug Description</strong></p>

diff --git a/packages/cli/test/functional/test_site/expected/bugs/index.page-vue-render.js b/packages/cli/test/functional/test_site/expected/bugs/index.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/index.html b/packages/cli/test/functional/test_site/expected/index.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
 
         <div class="website-content">
           <p><strong>Test <code class="line-numbers hljs inline no-lang" v-pre>&lt;markdown&gt;</code> and <code class="line-numbers hljs inline no-lang" v-pre>&lt;md&gt;</code> elements</strong></p>

diff --git a/packages/cli/test/functional/test_site/expected/index.page-vue-render.js b/packages/cli/test/functional/test_site/expected/index.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/index.html b/packages/cli/test/functional/test_site/expected/sub_site/index.html
@@ -207,6 +207,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <p>This is a page from another MarkBind site.</p>
         <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list" onclick="event.stopPropagation()"></a></h2>
         <p>It is a list of features (or functionalities) grouped according to some criteria such as priority

diff --git a/packages/cli/test/functional/test_site/expected/sub_site/index.page-vue-render.js b/packages/cli/test/functional/test_site/expected/sub_site/index.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html b/packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
@@ -207,6 +207,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <p><strong>baseUrl in a nested sub-site should correctly evaluate to the nested sub-site</strong></p>
         <p>The base url in the nested_sub_site is /test_site/sub_site/nested_sub_site.</p>
         <div>

diff --git a/.../cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.page-vue-render.js b/.../cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.page-vue-render.js
diff --git a/...est/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html b/...est/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <p>Test for nunjucks' various functions that use a path.
           By design, nunjucks' relative paths resolve from the configured template root directory.</p>
         <p>Hence, in MarkBind, these paths should also follow this behaviour.

diff --git a/.../test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.page-vue-render.js b/.../test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html b/packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <p>Test for nunjucks' various functions that use a path.
           By design, nunjucks' relative paths resolve from the configured template root directory.</p>
         <p>Hence, in MarkBind, these paths should also follow this behaviour.

diff --git a/.../test/functional/test_site/expected/sub_site/testNunjucksPathResolving.page-vue-render.js b/.../test/functional/test_site/expected/sub_site/testNunjucksPathResolving.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.html b/packages/cli/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <hr>
         <p>This is not a valid key-value syntax. It should be treated as a divider.</p>
         <p>key: value (This should be shown literally)</p>

diff --git a/...i/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.page-vue-render.js b/...i/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.html b/packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
 
         <p>test: This should not be processed.</p>
         <hr>

diff --git a/packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testAnchorGeneration.html b/packages/cli/test/functional/test_site/expected/testAnchorGeneration.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
 
         <h1 id="root-file">Root file<a class="fa fa-anchor" href="#root-file" onclick="event.stopPropagation()"></a></h1>
         <h1 id="should-have-anchor">should have anchor<a class="fa fa-anchor" href="#should-have-anchor" onclick="event.stopPropagation()"></a></h1>

diff --git a/packages/cli/test/functional/test_site/expected/testAnchorGeneration.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAnchorGeneration.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.html b/packages/cli/test/functional/test_site/expected/testAnnotate.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <p><strong>Annotate with saved Image</strong></p>
         <annotate src="./images/annotateSampleImage.png" width="500" alt="sampleImage">
           <a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet"></a-point>

diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html b/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
 
         <navbar type="dark">
           <li><a href="/" class="nav-link">One</a></li>

diff --git a/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testCenterText.html b/packages/cli/test/functional/test_site/expected/testCenterText.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <h1 id="center-text">Center Text<a class="fa fa-anchor" href="#center-text" onclick="event.stopPropagation()"></a></h1>
         <p>This line is not centered.
         <div class="text-center">But this line is</div>

diff --git a/packages/cli/test/functional/test_site/expected/testCenterText.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testCenterText.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testCodeBlocks.html b/packages/cli/test/functional/test_site/expected/testCodeBlocks.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <p><strong>Test: Code blocks</strong></p>
         <p><strong>Normal fenced code should render correctly</strong></p>
         <pre><code class="line-numbers hljs" v-pre><span>Content in a fenced code block

diff --git a/packages/cli/test/functional/test_site/expected/testCodeBlocks.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testCodeBlocks.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testDates.html b/packages/cli/test/functional/test_site/expected/testDates.html
@@ -208,6 +208,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
         </div>
       </overlay-source>
       <div id="content-wrapper">
+        <breadcrumb></breadcrumb>
         <h2 id="dates">Dates<a class="fa fa-anchor" href="#dates" onclick="event.stopPropagation()"></a></h2>
         <p>Mon 12 Aug should be Mon 12 Aug</p>
         <p>12 08 2019 should be 12 08 2019</p>

diff --git a/packages/cli/test/functional/test_site/expected/testDates.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testDates.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.html b/packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.html
@@ -215,6 +215,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
           </div>
         </overlay-source>
         <div id="content-wrapper">
+          <breadcrumb></breadcrumb>
 
           <p>A page with an empty alternate frontmatter should still build.</p>
         </div>

diff --git a/packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html b/packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html
@@ -215,6 +215,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
           </div>
         </overlay-source>
         <div id="content-wrapper">
+          <breadcrumb></breadcrumb>
 
           <p>A page with an empty frontmatter should still build.</p>
         </div>