Move markdown-it parsing to /markbind

.eslintignore

@@ -1,4 +1,6 @@
 *.min.*
 src/lib/markbind/src/lib/markdown-it/*
+src/lib/markbind/src/lib/vue-attribute-renderer/*
+src/lib/markbind/src/lib/markdown-it-shared/*
 
 !.eslintrc.js

asset/css/markbind.css

@@ -136,6 +136,11 @@ footer {
     top: 0;
 }
 
+/* TODO move this back to markdown-it-attr if bundling is implemented */
+.dimmed {
+    color: #777;
+}
+
 /* Bootstrap small(sm) responsive breakpoint */
 @media (max-width: 767.98px) {
     .dropdown-menu > li > a {

docs/index.md

@@ -70,7 +70,7 @@ The example paragraph below has the following dynamic elements: a tooltip, a pop
 
 In <tooltip content="Computer Science">CS</tooltip>, a binary tree is a <trigger for="pop:index-tree">tree data structure</trigger> in which each node has at most two children, which are referred to as the _left child_ and the _right child_. <trigger trigger="click" for="modal:index-primitive">Primitive data types</trigger> on the other hand ...
 
-<popover id="pop:index-tree" title="An example tree data structure" placement="top">
+<popover id="pop:index-tree" header="An example tree data structure" placement="top">
   <div slot="content">
 
 ![](https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg)<br>
@@ -79,7 +79,7 @@ In <tooltip content="Computer Science">CS</tooltip>, a binary tree is a <trigger
   </div>
 </popover>
 
-<modal large title="Some examples of primitive data types" id="modal:index-primitive">
+<modal large header="Some examples of primitive data types" id="modal:index-primitive">
   <include src="pages/primitiveDataTypes.md" />
 </modal>
 
@@ -153,7 +153,7 @@ In CS, a binary tree is a tree data structure in which each node has at most two
   <include src="pages/primitiveDataTypes.md" />
 </panel>
 
-<modal large title="Some examples of primitive data types" id="modal:index-primitive2">
+<modal large header="Some examples of primitive data types" id="modal:index-primitive2">
   <include src="pages/primitiveDataTypes.md" />
 </modal>
 

docs/userGuide/addingPages.md

@@ -40,7 +40,7 @@ Here are the steps to add a new page to your site:
 1. Update the [`pages` attribute of the `site.json`](siteConfiguration.html#pages) to cover the new file, if necessary.
 1. Use the <trigger trigger="click" for="modal:addingPages-livePreview">live preview</trigger> to view the generated web page for the new file.
 
-<modal large title="Live Preview" id="modal:addingPages-livePreview">
+<modal large header="Live Preview" id="modal:addingPages-livePreview">
 <include src="glossary.md#live-preview" inline/>
 </modal>
 

docs/userGuide/cliCommands.md

@@ -97,7 +97,7 @@ MarkBind Command Line Interface (CLI) can be run in the following ways:
 1. Starts a web server instance locally and makes the site available at `http://127.0.0.1:8080`.
 1. Opens a <trigger trigger="click" for="modal:cliCommands-livePreview">live preview</trigger> of the website.
 
-<modal large title="Live Preview" id="modal:cliCommands-livePreview">
+<modal large header="Live Preview" id="modal:cliCommands-livePreview">
 <include src="glossary.md#live-preview" inline/>
 </modal>
 

docs/userGuide/components/advanced.md

@@ -74,15 +74,22 @@ Using the normal syntax, you are only able to use markdown formatting on heading
 **Panel Slot Options:**
 Slot name | Default class | Notes
 --- | --- | --- 
-`header` | `card-title` | Aligning text to the center of the panel is not possible, as the header element does not take up the entire container.
+header | `card-title` | Aligning text to the center of the panel is not possible, as the header element does not take up the entire container.
 
 **Modal Slot Options:**
 When using slots for Modals, you need to add a single blank line before each `<modal>` tag, in order for the customization to render correctly.
 
 Slot name | Default class | Notes
 --- | --- | ---
-`modal-header` | `modal-title` |
-`modal-footer` | `modal-footer` | Specifying `modal-footer` will override the `ok-text` attribute, and the OK button will not render.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`modal-header` <br> (deprecated)</small>  | `modal-title` |
+footer <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`modal-footer` <br> (deprecated)</small> | `modal-footer` | Specifying `modal-footer` will override the `ok-text` attribute, and the OK button will not render.
+
+**Popover Slot Options:**
+Slot name | Default class
+--- | --- | ---
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>`title` <br> (deprecated)</small>  | `popover-header`
+content | `popover-body` 
+
 
 ### Inserting custom classes into components
 

docs/userGuide/gettingStarted.md

@@ -73,7 +73,7 @@ By default, you will initialize Markbind with a feature filled [template](https:
 
 Run the following command in the same directory. It will generate a website from your source files, start a web server, and open a <trigger trigger="click" for="modal:quickStart-livePreview">live preview</trigger> of your site in your default Browser.
 
-<modal large title="Live Preview" id="modal:quickStart-livePreview">
+<modal large header="Live Preview" id="modal:quickStart-livePreview">
 <include src="glossary.md#live-preview" inline/>
 </modal>
 

docs/userGuide/makingTheSiteSearchable.md

@@ -18,7 +18,7 @@
 **MarkBind comes with with an in-built _site search_ facility**. You can add a [Search Bar](usingComponents.html#search-bar) component to your pages %%(e.g., into the top navigation bar)%% to allow readers to search your website for keywords.
 </span>
 
-**All headings of levels 1-3 are captured in the search index** by default. You can change this setting using the [`headingIndexLevel` property of the `site.json`](siteConfiguration.html#headingindexinglevel).
+**All markdown and html headings of levels 1-3 are captured in the search index** by default. You can change this setting using the [`headingIndexLevel` property of the `site.json`](siteConfiguration.html#headingindexinglevel).
 
 <box type="info">
 

docs/userGuide/syntax/badges.mbdf

@@ -65,8 +65,8 @@ Buttons:
 
 Headings:
 
-### Feature X <span class="badge badge-danger">beta</span>
-##### Feature Y <span class="badge badge-pill badge-success">stable</span>
+### Feature X <span class="badge badge-danger">beta</span> {.no-index}
+##### Feature Y <span class="badge badge-pill badge-success">stable</span> {.no-index}
 ```
 </span>
 <span id="output">
@@ -82,8 +82,8 @@ Buttons:
 
 Headings:
 
-### Feature X <span class="badge badge-danger">beta</span>
-##### Feature Y <span class="badge badge-pill badge-success">stable</span>
+### Feature X <span class="badge badge-danger">beta</span> {.no-index}
+##### Feature Y <span class="badge badge-pill badge-success">stable</span> {.no-index}
 </span>
 </include>
 
@@ -111,6 +111,6 @@ Headings:
 <span class="badge badge-pill badge-success">Success</span>
 <button type="button" class="btn btn-primary">
   Difficulty Level <span class="badge badge-light">4</span>
-##### Feature Y <span class="badge badge-pill badge-warning">stable</span>
+##### Feature Y <span class="badge badge-pill badge-warning">stable</span> {.no-index}
 </button>
-</span>
+</span>

docs/userGuide/syntax/boxes.mbdf

@@ -33,10 +33,11 @@
 <box type="info" dismissible>
     dismissible info
 </box>
-<box type="success" heading="Tip box heading">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-<box type="warning" heading="Tip box heading" dismissible>
+<box type="success" header="Tip box header">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    <box type="warning" header="Tip box header" dismissible>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </box>
 </box>
 ```
 </span>
@@ -69,10 +70,11 @@
 <box type="info" dismissible>
     dismissible info
 </box>
-<box type="success" heading="Tip box heading">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-<box type="warning" heading="Tip box heading" dismissible>
+<box type="success" header="Tip box header">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    <box type="warning" header="Tip box header" dismissible>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </box>
 </box>
 
 </span>
@@ -166,7 +168,8 @@ border-color | `String` | `null` |
 border-left-color | `String` | `null` | Overrides border-color for the left border.
 color | `String` | `null` | Color of the text.
 dismissible | `Boolean` | `false` | Adds a button to close the box to the top right corner.
-icon | `String` | `null` |
+icon | `String` | `null` | Inline MarkDown text of the icon displayed on the left.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>heading <br> (deprecated)</small> | `String` | `null` | Plain text of the header on the top right corner.
 type | `String` | `'none'` | Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
 light | `Boolean` | `false` | Uses a light color scheme for the box.
 

docs/userGuide/syntax/dropdowns.mbdf

@@ -6,29 +6,29 @@
 <span id="code">
 
 ```html
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
   <li role="separator" class="dropdown-divider"></li>
   <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
 </dropdown>
 
-<!-- For segmented dropdown, ignore text and add a "before" slot -->
+<!-- For segmented dropdown, ignore header and add a "before" slot -->
 <dropdown type="info">
   <button slot="before" type="button" class="btn btn-info">Segmented</button>
   <li><a href="#dropdown" class="dropdown-item">...</a></li>
 </dropdown>
 
 <!-- Right aligned list -->
-<dropdown text="Right aligned list" type="primary" menu-align-right>
+<dropdown header="Right aligned list" type="primary" menu-align-right>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
 </dropdown>
 ```
 </span>
 <span id="output">
 
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
@@ -41,7 +41,7 @@
   <li><a href="#dropdown" class="dropdown-item">...</a></li>
 </dropdown>
 
-<dropdown text="Right aligned list" type="primary" menu-align-right>
+<dropdown header="Right aligned list" type="primary" menu-align-right>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
 </dropdown>
 </span>
@@ -102,7 +102,7 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 disabled | `Boolean` | `false` | Whether Dropdown can be opened.
 menu-align-right | `Boolean` | `false` | Whether the dropdown list will be right-aligned.
-text | `String` | `''` | Dropdown button text.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>text <br> (deprecated)</small> | `String` | `''` | Dropdown button header text.
 type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`, `warning`, `success`.
 
 <div class="indented">
@@ -114,7 +114,7 @@ type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`,
 <span id="short" class="d-none">
 
 ```markdown
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li role="separator" class="dropdown-divider"></li>
@@ -125,15 +125,15 @@ type | `String` | `default` | Supports: `default`, `primary`, `danger`, `info`,
 
 <span id="examples" class="d-none">
 
-<dropdown text="Action" type="primary">
+<dropdown header="Action" type="primary">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Something else here</a></li>
   <li role="separator" class="dropdown-divider"></li>
   <li><a href="#dropdown" class="dropdown-item">Separated link</a></li>
 </dropdown>
 
-<!-- For segmented dropdown, ignore text and add a "before" slot -->
+<!-- For segmented dropdown, ignore header and add a "before" slot -->
 <dropdown type="info">
   <button slot="before" type="button" class="btn btn-info">Segmented</button>
   <li><a href="#dropdown" class="dropdown-item">...</a></li>

docs/userGuide/syntax/indexing.mbdf

@@ -1,6 +1,6 @@
 ## Including or Excluding Headings
 
-**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` attributes.
+**You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature** using the `.always-index` or `.no-index` classes.
 
 If you wish to index a specific heading outside the specified `headingIndexLevel`, you may add the `.always-index` attribute to the heading. Similarly, if you wish for a specific heading inside the specified `headingIndexLevel` not to be indexed, you may add the `.no-index` attribute to the heading.
 
@@ -13,4 +13,11 @@ If you wish to index a specific heading outside the specified `headingIndexLevel
 
 # Heading inside heading index level that will not be indexed {.no-index}
 ```
+
+Equivalently,
+```html
+<h6 class="always-index"> Heading outside heading index level that will be indexed </h6>
+
+<h1 class="no-index"> Heading inside heading index level that will not be indexed </h1>
+```
 </div>

docs/userGuide/syntax/modals.mbdf

@@ -7,7 +7,7 @@
 
 ```html
 More about <trigger for="modal:loremipsum">trigger</trigger>.
-<modal title="**Modal title** :rocket:" id="modal:loremipsum">
+<modal header="**Modal header** :rocket:" id="modal:loremipsum">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
   magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
@@ -18,7 +18,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 
 <trigger for="modal:centered">This is a trigger for a centered modal</trigger>.
 
-<modal title="**Centered** :rocket:" id="modal:centered" center>
+<modal header="**Centered** :rocket:" id="modal:centered" center>
   Centered
 </modal>
 
@@ -27,7 +27,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 <span id="output">
 
   More about <trigger for="modal:loremipsum">trigger</trigger>.
-  <modal title="**Modal title** :rocket:" id="modal:loremipsum">
+  <modal header="**Modal header** :rocket:" id="modal:loremipsum">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
       magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
@@ -38,7 +38,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 
   <trigger for="modal:centered">This is a trigger for a centered modal</trigger>.
 
-  <modal title="**Centered** :rocket:" id="modal:centered" center>
+  <modal header="**Centered** :rocket:" id="modal:centered" center>
     Centered
   </modal>
 </span>
@@ -51,7 +51,7 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
 ****Options****
 Name | type | Default | Description
 --- | --- | --- | ---
-title | `String` | `''` | Title of the Modal component.
+header <hr style="margin-top:0.2rem; margin-bottom:0" /> <small>title <br> (deprecated)</small> | `String` | `''` | Header of the Modal component. Supports inline markdown text.
 ok-text | `String` | `''` | Text for the OK button.
 effect | `String` | `zoom` | Supports: `zoom`, `fade`.
 id | `String` | | Used by [Trigger](#trigger) to activate the Modal by id.
@@ -65,7 +65,7 @@ backdrop | `Boolean` | `true` | Enables closing the Modal by clicking on the bac
 
 ```html
 Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal.
-<modal title="Modal title" id="modal:unused">
+<modal header="Modal header" id="modal:unused">
     Modal content
 </modal>
 ```
@@ -74,7 +74,7 @@ Click <trigger trigger="click" for="modal:unused">here</trigger> to open a modal
 <span id="examples" class="d-none">
 
 Hover <trigger large for="modal:unused">here</trigger> to open a modal.
-<modal title="Modal title" ok-text="OK" id="modal:unused">
+<modal header="Modal header" ok-text="OK" id="modal:unused">
   Modal content
 </modal>
-</span>
+</span>