Merge branch 'master' of https://github.com/MarkBind/markbind into fi…

…x-pageNav * 'master' of https://github.com/MarkBind/markbind: Update test files (MarkBind#1138) Remove OK button from modals (MarkBind#1134) Add start from line number functionality to code blocks (MarkBind#1115) Allow special tags to be self-closing (MarkBind#1101) Simplify baseUrl resolving process (MarkBind#1087) Remove redundant file writing (MarkBind#1090) Bump acorn from 5.7.3 to 5.7.4 (MarkBind#1121) Bump acorn from 7.1.0 to 7.1.1 in /src/lib/markbind (MarkBind#1120) Unify markdown-it parser variants (MarkBind#1056) Remove dynamic include feature (MarkBind#1037) Fix flex shrink not applying in content wrapper (MarkBind#1135) Escape Nunjucks for special tags (MarkBind#1049) Update documentation on icon slot for boxes (MarkBind#1123) Convert code in boxes to code block (MarkBind#1086)
Tejas2805 · Mar 23, 2020 · 2d9534a · 2d9534a
2 parents e2713ef + 2bbe32b
commit 2d9534a
Show file tree

Hide file tree

Showing 60 changed files with 761 additions and 517 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,6 +1,5 @@
 *.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
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -142,10 +142,10 @@ header.header-fixed {
 #content-wrapper {
     flex: 1;
     margin: 0 auto;
+    min-width: 0;
     max-width: 1000px;
     padding: 0 20px;
     transition: 0.4s;
-    width: 100%;
     -webkit-transition: 0.4s;
 }
 

diff --git a/docs/userGuide/components/advanced.md b/docs/userGuide/components/advanced.md
@@ -71,6 +71,55 @@ Using the normal syntax, you are only able to use markdown formatting on heading
 </tip-box>
 <br>
 
+**Box Slot Options:**
+
+Slot name | Default class |
+--- | --- |
+icon | depends on box's `type` attribute |
+
+{{ icon_example }} Override the default icon for a certain type of box.
+
+```html
+<box type="info">
+    <span slot="icon" class="text-danger"><md>:fas-home:</md></span>
+    info
+</box>
+```
+
+<box type="info">
+    <span slot="icon" class="text-danger"><md>:fas-home:</md></span>
+    info
+</box>
+
+{{ icon_example }} Use pictures (or even gifs) as the icon for a box.
+
+```html
+<box type="info" seamless>
+    <img slot="icon" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
+    some very useful info
+</box>
+```
+
+<box type="info" seamless>
+    <img slot="icon" width="75%" src="https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"></img>
+    some very useful info
+</box>
+
+{{ icon_example }} Use [thumbnail]({{ baseUrl }}/userGuide/usingComponents.html#thumbnails) as the icon. 
+
+
+```html
+<box type="info" light>
+    <thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
+    use thumbnail as the icon
+</box>
+```
+
+<box type="info" light>
+    <thumbnail circle slot="icon" text=":book:" background="#dff5ff" size="50"/>
+    use thumbnail as the icon
+</box>
+
 **Panel Slot Options:**
 Slot name | Default class | Notes
 --- | --- | --- 

diff --git a/docs/userGuide/plugins/tags.mbdf b/docs/userGuide/plugins/tags.mbdf
@@ -112,9 +112,7 @@ Using `-` at the start of a tag hides all tags matching the expression. This is
 <div class="indented">
 
 {{ icon_example }} Using general tags:
-```html
-index.md
-
+```html {heading="index.md"}
 <frontmatter>
   title: "Hello World"
   tags: ["language--java"]
@@ -125,9 +123,7 @@ index.md
 <p tags="language--python">print("Hello world")</p>
 ```
 
-```json
-site.json
-
+```json {heading="site.json"}
 {
   ...
   "plugins" : [

diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
@@ -70,7 +70,7 @@
 <box type="info" dismissible>
     dismissible info
 </box>
-<box type="success" header="#### Header :rocket:" icon-size="2x">
+<box type="success" header="#### Header :rocket: { .no-index }" icon-size="2x">
     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="You can use **markdown** here! :pizza:" 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.

diff --git a/docs/userGuide/syntax/code.mbdf b/docs/userGuide/syntax/code.mbdf
@@ -38,7 +38,7 @@ To enable syntax coloring, specify a language next to the backticks before the f
 </span>
 
 ##### Line numbering
-Line numbers are automatically provided by default. To hide line numbers, add the class `no-line-numbers ` to the code block as below
+Line numbers are provided by default. To hide line numbers, add the class `no-line-numbers` to the code block as below
 
 <include src="outputBox.md" boilerplate >
 <span id="code">
@@ -61,6 +61,30 @@ Line numbers are automatically provided by default. To hide line numbers, add th
 </span>
 </include>
 
+You can have your line numbers start with a value other than `1` with the `start-from` attribute.
+
+<include src="outputBox.md" boilerplate >
+<span id="code">
+
+```` {.no-line-numbers}
+```js {start-from=6}
+function add(a, b) {
+    return a + b;
+}
+```
+````
+</span>
+<span id="output">
+
+```js {start-from=6}
+function add(a, b) {
+    return a + b;
+}
+```
+</span>
+</include>
+
+
 ##### Line highlighting
 To highlight lines, add the attribute `highlight-lines` with the line numbers as value, as shown below. You can specify ranges or individual line numbers.
 

diff --git a/docs/userGuide/syntax/footnotes.mbdf b/docs/userGuide/syntax/footnotes.mbdf
@@ -44,6 +44,13 @@ note.]
 </include>
 </span>
 
+<box type="warning">
+
+Normal footnotes won't work when used inside the attributes of markbind components!
+<br>
+For example, it won't work in the `header` attribute of [panels](../usingComponents.html#panels).
+</box>
+
 <span id="short" class="d-none">
 
 ```html

diff --git a/docs/userGuide/syntax/modals.mbdf b/docs/userGuide/syntax/modals.mbdf
@@ -22,6 +22,15 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
   Centered
 </modal>
 
+<trigger for="modal:ok-text">This is a trigger for a modal with a custom OK button</trigger>.
+
+<modal header="OK button visible!" id="modal:ok-text" ok-text="Custom OK">
+  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.
+  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</modal>
+
 ```
 </span>
 <span id="output">
@@ -41,6 +50,15 @@ This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
   <modal header="**Centered** :rocket:" id="modal:centered" center>
     Centered
   </modal>
+
+  <trigger for="modal:ok-text">This is a trigger for a modal with a custom OK button</trigger>.
+
+  <modal header="OK button visible!" id="modal:ok-text" ok-text="Custom OK">
+    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.
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </modal>
 </span>
 </include>
 

diff --git a/docs/userGuide/syntax/pageHead.mbdf b/docs/userGuide/syntax/pageHead.mbdf
@@ -10,13 +10,11 @@ Steps:
 
 {{ icon_example }} Suppose you want to insert the code below into the `<head>` of a page, and you have saved the code as **`_markbind/head/`**`myCustomLinks.md`:
 
-<box>
-
-`<script src="`{{ showBaseUrlCode }}`/js/myCustomScript.js"></script>`<br>
-`<link rel="stylesheet" href="`{{ showBaseUrlCode }}`/css/main.css">`<br>
-`<link rel="stylesheet" href="`{{ showBaseUrlCode }}`/css/extra.css">`
-
-</box>
+```html{.no-line-numbers}
+<script src="{{ baseUrl }}/js/myCustomScript.js"></script>
+<link rel="stylesheet" href="{{ baseUrl }}/css/main.css">
+<link rel="stylesheet" href="{{ baseUrl }}/css/extra.css">
+```
 
 To specify that you want to insert `myCustomLinks.md` into the `<head>` of `myPage.html`, update the front matter of the `myPage.md` as follows:
  ```html
@@ -34,15 +32,13 @@ To specify that you want to insert `myCustomLinks.md` into the `<head>` of `myPa
 
 {{ icon_example }} Here's how you can force the line `<script ... > ... </script>` to be inserted at the top of the `<head>` section.
 
-<box>
-
-**`<head-top>`**<br>
-&nbsp;&nbsp;`<script src="`{{ showBaseUrlCode }}`/js/myCustomScript.js"></script>`<br>
-**`</head-top>`**<br>
-`<link rel="stylesheet" href="`{{ showBaseUrlCode }}`/css/main.css">`<br>
-`<link rel="stylesheet" href="`{{ showBaseUrlCode }}`/css/extra.css">`
-
-</box>
+```html {.no-line-numbers highlight-lines="1,3"}
+<head-top>
+  <script src="{{ baseUrl }}/js/myCustomScript.js"></script>
+</head-top>
+<link rel="stylesheet" href="{{ baseUrl }}/css/main.css">
+<link rel="stylesheet" href="{{ baseUrl }}/css/extra.css">
+```
 
 </div>
 
@@ -62,15 +58,13 @@ To specify that you want to insert `myCustomLinks.md` into the `<head>` of `myPa
 
 `_markbind/head/myCustomLinks.md`:
 
-<box>
-
-**`<head-top>`**<br>
-&nbsp;&nbsp;`<script src="`{{ showBaseUrlCode }}`/js/myCustomScript.js"></script>`<br>
-**`</head-top>`**<br>
-`<link rel="stylesheet" href="`{{ showBaseUrlCode }}`/css/main.css">`<br>
-`<link rel="stylesheet" href="`{{ showBaseUrlCode }}`/css/extra.css">`
-
-</box>
+```html{.no-line-numbers highlight-lines="1,3"}
+<head-top>
+<script src="`{{ baseUrl }}`/js/myCustomScript.js"></script>
+</head-top>
+<link rel="stylesheet" href="`{{ baseUrl }}`/css/main.css">
+<link rel="stylesheet" href="`{{ baseUrl }}`/css/extra.css">
+```
 
 ```html
  <frontmatter>

diff --git a/docs/userGuide/syntax/pageLayouts.mbdf b/docs/userGuide/syntax/pageLayouts.mbdf
@@ -1,3 +1,6 @@
+<!---
+TODO: Change to a proper escape tag once PR#1049 is ready. 
+-->
 <variable name="mainContentBody">
 <code>{<span></span>{ MAIN_CONTENT_BODY }}</code>
 </variable>
@@ -11,7 +14,7 @@ A layout consists of the following files:
 1. A footer (filename: `footer.md`)
 1. Tweaks to the `<head>` (`head.md`)
 1. A site navigation menu (`navigation.md`)
-1. An expressive layout template to embed your content (`page.md`) 
+1. An expressive layout template to embed your content (`page.md`)
 1. Custom styles (`styles.css`)
 1. Custom scripts (`scripts.js`)
 
@@ -114,27 +117,18 @@ which injects the actual page content in every page. This allows you to build la
 
 {{ icon_example }} Adding statistics formula to the bottom of every page
 
-<box>
-<i>index.md</i>
-<br><br>
-
-  ```html
+  ```html {heading="index.md"}
   #### Main content of your page
 
   Content of your page
   ```
-</box>
 
-<box>
-<i>page.md</i>
-<br><br>
-  {{ mainContentBody }}
-  ```html
+  ```html {heading="page.md"}
+    {{ mainContentBody }}
     <panel header="Statistics Formula for the class" type="primary">
       <img src="path_to_your_formula.png" />
     </panel>
   ```
-</box>
 
 Here's how the above content would appear:
 

diff --git a/docs/userGuide/syntax/siteNavigationMenus.mbdf b/docs/userGuide/syntax/siteNavigationMenus.mbdf
@@ -72,19 +72,17 @@ You may have additional HTML and Markdown content in a <tooltip content="the fil
 
 {{ icon_example }} A siteNav code using a `<navigation>` tag.
 
-<box>
-
-<code>
-# Site Map<br>
-<strong><<span></span>navigation></strong><br>
-* [:house: Home]({{ showBaseUrlText }}/index.html)<br>
-* Docs<br>
-&nbsp;&nbsp;* [User Guide]({{ showBaseUrlText }}/ug.html)<br>
-&nbsp;&nbsp;* [Dev Guide]({{ showBaseUrlText }}/dg.html)<br>
-* [Search]({{ showBaseUrlText }}/search.html)<br>
-<strong><<span></span>/navigation></strong><br>
-</code>
-</box>
+```{.no-line-numbers}
+# Site Map
+<navigation>
+* [:house: Home]({{ baseUr }}/index.html)
+* Docs
+  * [User Guide]({{ baseUrl }}/ug.html)
+  * [Dev Guide]({{ baseUrl }}/dg.html)
+* [Search]({{ baseUrl }}/search.html)
+</navigation>
+```
+
 </div>
 
 More than one siteNav file can be in `_markbind/navigation/` directory but a page may not have more than one siteNav.
@@ -98,17 +96,16 @@ If you wish to use a Layout but exclude its navigation file, specify `siteNav: n
 
 <span id="short" class="d-none">
 
-<code>
-# Site Map<br>
-<strong><<span></span>navigation></strong><br>
-* [:house: Home]({{ showBaseUrlText }}/index.html)<br>
-* Docs :expanded:<br>
-&nbsp;&nbsp;* [User Guide]({{ showBaseUrlText }}/ug.html)<br>
-&nbsp;&nbsp;* [Dev Guide]({{ showBaseUrlText }}/dg.html)<br>
-* [Search]({{ showBaseUrlText }}/search.html)<br>
-<strong><<span></span>/navigation></strong><br>
-</code>
-</box>
+```{.no-line-numbers}
+# Site Map
+<navigation>
+* [:house: Home]({{ baseUrl }}/index.html)
+* Docs :expanded:
+  * [User Guide]({{ baseUrl }}/ug.html)
+  * [Dev Guide]({{ baseUrl }}/dg.html)
+* [Search]({{ baseUrl }}/search.html)
+</navigation>
+```
 
 ```html
 <frontmatter>

diff --git a/docs/userGuide/syntax/textStyles.mbdf b/docs/userGuide/syntax/textStyles.mbdf
@@ -41,12 +41,12 @@ Syntax added by MarkBind:
 <span id="code">
 
 ```markdown
-****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%
+****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~
 ```
 </span>
 <span id="output">
 
-****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%
+****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~
 
 </span>
 </include>
@@ -57,11 +57,11 @@ Syntax added by MarkBind:
 <span id="short" class="d-none">
 ```markdown
 **Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
-~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%
+~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~
 ```
 </span>
 <span id="examples" class="d-none">
 
 **Bold**, _Italic_, ___Bold and Italic___, `Inline Code`
-~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%
-</span>
+~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~
+</span>