diff --git a/docs/images/detailed-d.png b/docs/images/detailed-d.png new file mode 100644 index 0000000000..4d255e8a2f Binary files /dev/null and b/docs/images/detailed-d.png differ diff --git a/docs/images/overview-d.png b/docs/images/overview-d.png new file mode 100644 index 0000000000..35294d85aa Binary files /dev/null and b/docs/images/overview-d.png differ diff --git a/docs/userGuide/syntax/lists.md b/docs/userGuide/syntax/lists.md index 0dfd5be382..2a3304ed19 100644 --- a/docs/userGuide/syntax/lists.md +++ b/docs/userGuide/syntax/lists.md @@ -16,6 +16,105 @@ +****Customizing the Unordered list appearance:**** + +**To customize unordered lists' icons, add the configuration `{icon="icon-name"}` after a specific list item.** + + +markdown + +* Item 1 { icon="glyphicon-education" } +* Item 2 + * Item 2.1 { icon="fas-file-code" } + * Item 2.2 +* Item 3 { icon="fas-code-branch" } + * Item 3.1 +* Item 4 { icon="octicon-git-pull-request" } + * Item 4.1 { icon="mif-perm-media" } +* Item 5 { icon="glyphicon-education" } + * Item 5.1 { icon="notebook_with_decorative_cover" } + + + +You can use any of the [icons](../formattingContents.html#icons) supported by MarkBind. If an item has a specified icon, that icon will be used for it and for subsequent items at that level. + + +If you customize any item on a certain level, you must also customize the first item on that level. If not, the list will revert to its uncustomized form. + + +**You can adjust the icon's size by using the `i-size` attribute.** + + +markdown + + +* Item 1 { icon="fas-file-code" i-size="35px" } +* Item 2 { icon="fas-file-code" i-size="4rem" } +* Item 3 { icon="fas-file-code" i-size="5em" } + + + + +You can utilize any [CSS size unit](https://www.w3schools.com/cssref/css_units.php). + +**You can also use images as icons.** + + +markdown + + +* Item 1 { icon="/images/deer.jpg" i-width="30px" } +* Item 2 { i-width="60px" i-height="44px" } +* Item 3 { i-width="90px" i-height="61px" } + + + + +If either the `i-width` or the `i-height` of an image is not specified, the unspecified dimension will adjust to maintain the image's original aspect ratio. For example, for an image of size 800x600 (4:3), if `i-width` is set to 400px, its height will be 300px. + +**The icon's appearance can be further customized by adding a `i-class` attribute.** + +
+ + +markdown + +* Item 1 { icon="/images/deer.jpg" i-width="60px" height="17px" i-class="rounded" } +* Item 2 + * Item 2.1 { icon="fas-question-circle" i-class="badge rounded-pill my-1 bg-success text-white" } + * Item 2.2 + * Item 2.3 { i-class="badge rounded-pill my-1 bg-primary text-white"} +* Item 3 + * Item 3.1 + * Item 3.2 { icon="fas-question-circle" i-class="badge rounded my-1 bg-danger text-white" } + * Item 3.3 + + + + + +Similar to the `icon` attribute, other icon attributes such as `i-class`, `i-width`, `i-height` apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's `i-class` overrides Item 2.1's and applies up to Item 3.1. + + +
+ +**You can apply Markdown's heading and paragraph syntax within the list.** + + +markdown + + +* #### Heading 1: Overview {icon="/images/overview-d.png" i-width="65px" i-class="rounded" } + Content 1: This section provides a summary of the document or topic. + It sets the context and purpose of the content to follow. +* #### Heading 2: Detailed Description { icon="/images/detailed-d.png" i-width="65px" i-class="rounded" } + Content 2: This section delves deeper into the topic, offering comprehensive information and detailed explanations. + It might also include evidence, examples, or justifications. + + + +Icon specifications should be attached only to the first element of a list item (for the example above, the icon specification should be attached to the heading, not the content below the heading). + ****Ordered lists:**** @@ -23,9 +122,9 @@ 1. Item 1 1. Sub item 1.1 - 1. Sub item 1.2 -1. Item 2 -1. Item 3 + 2. Sub item 1.2 +2. Item 2 +3. Item 3 diff --git a/packages/cli/test/functional/test_site/expected/siteData.json b/packages/cli/test/functional/test_site/expected/siteData.json index 5c1dbd94e4..b3c7a54479 100644 --- a/packages/cli/test/functional/test_site/expected/siteData.json +++ b/packages/cli/test/functional/test_site/expected/siteData.json @@ -415,6 +415,12 @@ "i-am-a-header": "🚀 I am a header" }, "headingKeywords": {} + }, + { + "src": "testList.md", + "title": "web 3 forms", + "headings": {}, + "headingKeywords": {} } ] } diff --git a/packages/cli/test/functional/test_site/expected/testList.html b/packages/cli/test/functional/test_site/expected/testList.html new file mode 100644 index 0000000000..28e33e2d0d --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testList.html @@ -0,0 +1,566 @@ + + + + + + + + + + + + + web 3 forms + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
  • Open Bugs
    • +     +
    +
    + Test Jumbotron
    +
    +
    +
    +

    Relative Link Test This is a relative Intra-Site link in a layout (see link)

    +
    +
    + +
    +
    +
    +

    Default Layout

    +
    +
    +
    +
    +
    + + +
  • +
    Home 🏠
    +
    • +
  • +
    Open Bugs 🐛
    +
    • +
  • +

    Testing Site-Nav

    +
    • +
  • +
    Dropdown title ✏️ + + +
    + +
    +
    + +
    • +
  • +
    Third Link 📋
    +
    • +
  • +
    Filler text Youtube 📺 filler text + + +
    + +
    +
    + +
    • +
  • +
    Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown + +
    + +
    +
    +
      +
    • Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text
      • +
    • +
      Nested Dropdown Title + +
      + +
      +
      +
        +
      • Hello Doge Hello Doge 🐶
        • +
      • +
        NESTED LINK Home 🏠
        +
        • +
      • Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit
        • +
      +
      • +
    +
    • +
  • +
    Test line break in navigation layout + +
    + +
    +
    +
      +
    • Nested line break text ✂️
      • +
    • +
      Nested line break href + +
      + +
      +
      +
        +
      • Nested Nested line break text ✂️
        • +
      +
      • +
    • +
      Nested line break dropdown menu + +
      + +
      +
      +
        +
      • Line break item 2 📘
        • +
      +
      • +
    +
    • +     +     +
    +
    +     +
    + +
      +
    1. One item
      2. +
    +
      +
    • Only 1 item
      • +
    +
      +
    1. One item with customization
      2. +
    +
      +
    • +
      Only 1 item
      +
      • +
    +
      +
    1. One item + nested list
      2. +
    +
      +
    • Only 1 item +
        +
      • Only 1 item
        • +
      +
      • +
    +
      +
    1. One item + nested list with customization
      2. +
    +
      +
    • +
      Only 1 item +
        +
      • +
        Only 1 item
        +
        • +
      +
      +
      • +
    +
      +
    1. Basic structure
      2. +
    +
      +
    • Item A
      • +
    • Item B +
        +
      • Sub-item B1
        • +
      • Sub-item B2
        • +
      • Sub-item B3 +
          +
        • Sub-sub-item B3.1
          • +
        • Sub-sub-item B3.2 +
            +
          • Sub-sub-sub-item B3.2.1
            • +
          +
          • +
        +
        • +
      • Sub-item B4
        • +
      +
      • +
    +
      +
    1. Icon inheritance test
      2. +
    +
      +
    • +
      Item A
      +
      • +
    • +
      Item B +
        +
      • +
        Sub-item B1
        +
        • +
      • +
        Sub-item B2
        +
        • +
      • +
        Sub-item B3 +
          +
        • Icon​​ +
          Sub-sub-item B3.1
          +
          • +
        • Icon​​ +
          Sub-sub-item B3.2 +
            +
          • Sub-sub-sub-item B3.2.1
            • +
          +
          +
          • +
        +
        +
        • +
      • +
        Sub-item B4
        +
        • +
      +
      +
      • +
    +
      +
    1. First item no customization test
      2. +
    +
      +
    • Item A
      • +
    • Item B +
        +
      • Sub-item B1
        • +
      • Sub-item B2
        • +
      • Sub-item B3 +
          +
        • Sub-sub-item B3.1
          • +
        • Sub-sub-item B3.2
          • +
        • Sub-sub-sub-item B3.2.1
          • +
        +
        • +
      • Sub-item B4
        • +
      +
      • +
    +
      +
    1. Correct first item customization test
      2. +
    +
      +
    • +
      Item A
      +
      • +
    • Icon​​ +
      Item B +
        +
      • +
        Sub-item B1
        +
        • +
      • +
        Sub-item B2
        +
        • +
      • +
        Sub-item B3 +
          +
        • Icon​​ +
          Sub-sub-item B3.1
          +
          • +
        • Icon​​ +
          Sub-sub-item B3.2 +
            +
          • Sub-sub-sub-item B3.2.1
            • +
          +
          +
          • +
        +
        +
        • +
      • +
        Sub-item B4
        +
        • +
      +
      +
      • +
    +
      +
    1. Testing with various attributes
      2. +
    +
      +
    • +
      Item A
      +
      • +
    • Icon​​ +
      Item B +
        +
      • +
        Sub-item B1
        +
        • +
      • +
        Sub-item B2
        +
        • +
      • +
        Sub-item B3 +
          +
        • Icon​​ +
          Sub-sub-item B3.1
          +
          • +
        • Icon​​ +
          Sub-sub-item B3.2 +
            +
          • Sub-sub-sub-item B3.2.1
            • +
          +
          +
          • +
        +
        +
        • +
      • +
        Sub-item B4
        +
        • +
      +
      +
      • +
    +
      +
    1. Mixing basic and customized lists
      2. +
    +
      +
    • Item A
      • +
    • Item B +
        +
      • +
        Sub-item B1
        +
        • +
      • +
        Sub-item B2
        +
        • +
      • +
        Sub-item B3 +
          +
        • +
          Sub-sub-item B3.1
          +
          • +
        • +
          Sub-sub-item B3.2 +
            +
          • Icon​​ +
            Sub-sub-sub-item B3.2.1
            +
            • +
          +
          +
          • +
        +
        +
        • +
      • +
        Sub-item B4
        +
        • +
      +
      • +
    +
      +
    1. Reverse mixing basic and customized lists
      2. +
    +
      +
    • +
      Item A
      +
      • +
    • +
      Item B +
        +
      • Sub-item B1
        • +
      • Sub-item B2
        • +
      • Sub-item B3 +
          +
        • Sub-sub-item B3.1
          • +
        • Sub-sub-item B3.2 +
            +
          • Sub-sub-sub-item B3.2.1
            • +
          +
          • +
        +
        • +
      • Sub-item B4
        • +
      +
      +
      • +
    +
      +
    1. Every second list item customized
      2. +
    +
      +
    • +
      Item A
      +
      • +
    • +
      Item B +
        +
      • +
        Sub-item B1
        +
        • +
      • +
        Sub-item B2
        +
        • +
      • Icon​​ +
        Sub-item B3
        +
        • +
      • Icon​​ +
        Sub-item B4
        +
        • +
      +
      +
      • +
    +
    + +
    +
    +     + +
    +
    + +
    +
    + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js new file mode 100644 index 0000000000..dbb4414f52 --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testList.page-vue-render.js @@ -0,0 +1,88 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',[_c('navbar',{attrs:{"type":"dark","default-highlight-on":"sibling-or-child"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind Test Site")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs")])])]),_v(" "),_m(0)],1),_v(" "),_m(1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_c('div',[_c('h2',{attrs:{"id":"default-layout"}},[_v("Default Layout"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#default-layout","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('div',[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Home 🏠")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs 🐛")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-0"},[_c('h3',{attrs:{"id":"testing-site-nav"}},[_v("Testing Site-Nav"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#testing-site-nav","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Dropdown ")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-search",attrs:{"aria-hidden":"true"}}),_v(" title ✏️ "),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Html within site-nav "),_c('span',{staticStyle:{"color":"red"}},[_v("should")]),_v(" be displayed properly")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown title 📐\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('mark',[_v("Third Link")]),_v(" 📋")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Filler text "),_c('a',{attrs:{"href":"https://www.youtube.com/"}},[_c('span',{staticClass:"glyphicon glyphicon-facetime-video",attrs:{"aria-hidden":"true"}}),_v(" Youtube 📺")]),_v(" filler text"),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}},[_v("The answer to everything in the universe")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('mark',[_v("Dropdown title")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-comment",attrs:{"aria-hidden":"true"}}),_v(" ✏️ "),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown Title\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Hello Doge Hello Doge 🐶")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_c('strong',[_v("NESTED LINK")]),_v(" Home 🏠")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Test line break in navigation layout\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Nested line break text ✂️")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Nested line break href")]),_v(" "),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Nested Nested line break text ✂️")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested line break dropdown menu\n\n"),_c('div',{staticClass:"site-nav-dropdown-btn-container"},[_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Line break item 2 📘")])])])])])])],1)],1)])]),_v(" "),_c('div',{attrs:{"id":"content-wrapper"}},[_c('breadcrumb'),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25)],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(26)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{staticClass:"bg-info display-4 text-center text-white"},[_c('br'),_v("\n Test Jumbotron"),_c('br'),_v(" "),_c('br')])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Relative Link Test")]),_v(" This is a relative Intra-Site link in a layout (see "),_c('a',{attrs:{"href":"/test_site/index.html#heading-with-hidden-keyword"}},[_v("link")]),_v(")")])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("One item")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Only 1 item")])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("One item with customization")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Only 1 item")])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("One item + nested list")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Only 1 item\n"),_c('ul',[_c('li',[_v("Only 1 item")])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("One item + nested list with customization")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Only 1 item\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Only 1 item")])])])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Basic structure")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Item A")]),_v(" "),_c('li',[_v("Item B\n"),_c('ul',[_c('li',[_v("Sub-item B1")]),_v(" "),_c('li',[_v("Sub-item B2")]),_v(" "),_c('li',[_v("Sub-item B3\n"),_c('ul',[_c('li',[_v("Sub-sub-item B3.1")]),_v(" "),_c('li',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',[_v("Sub-sub-sub-item B3.2.1")])])])])]),_v(" "),_c('li',[_v("Sub-item B4")])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Icon inheritance test")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("First item no customization test")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Item A")]),_v(" "),_c('li',{attrs:{"icon":"./images/deer.jpg"}},[_v("Item B\n"),_c('ul',[_c('li',[_v("Sub-item B1")]),_v(" "),_c('li',{attrs:{"icon":"fas-file-code"}},[_v("Sub-item B2")]),_v(" "),_c('li',[_v("Sub-item B3\n"),_c('ul',[_c('li',[_v("Sub-sub-item B3.1")]),_v(" "),_c('li',{attrs:{"icon":"./images/deer.jpg","i-width":"50px"}},[_v("Sub-sub-item B3.2")]),_v(" "),_c('li',[_v("Sub-sub-sub-item B3.2.1")])])]),_v(" "),_c('li',[_v("Sub-item B4")])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Correct first item customization test")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Testing with various attributes")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticStyle:{"width":"50px","height":"50px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',{attrs:{"i-class":"text-danger"}},[_v("Sub-sub-sub-item B3.2.1")])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Mixing basic and customized lists")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("Item A")]),_v(" "),_c('li',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B3\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-danger",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-sub-item B3.1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-danger",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-sub-item B3.2\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-sub-sub-item B3.2.1")])])])])])])])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B4")])])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Reverse mixing basic and customized lists")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item B\n"),_c('ul',[_c('li',[_v("Sub-item B1")]),_v(" "),_c('li',[_v("Sub-item B2")]),_v(" "),_c('li',[_v("Sub-item B3\n"),_c('ul',[_c('li',[_v("Sub-sub-item B3.1")]),_v(" "),_c('li',[_v("Sub-sub-item B3.2\n"),_c('ul',[_c('li',[_v("Sub-sub-sub-item B3.2.1")])])])])]),_v(" "),_c('li',[_v("Sub-item B4")])])])])])} +},function anonymous( +) { +with(this){return _c('ol',[_c('li',[_v("Every second list item customized")])])} +},function anonymous( +) { +with(this){return _c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item A")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"glyphicon glyphicon-education text-primary",staticStyle:{"font-size":"20px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Item B\n"),_c('ul',{staticStyle:{"list-style-type":"none","padding-inline-start":"0px"}},[_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B1")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticClass:"fas fa-file-code text-success",staticStyle:{"font-size":"30px","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"},attrs:{"aria-hidden":"true"}},[_v("​")]),_c('div',[_v("Sub-item B2")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-item B3")])]),_v(" "),_c('li',{staticStyle:{"display":"flex"}},[_c('span',{staticStyle:{"padding-bottom":"0.3em","padding-top":"0.3em","font-size":"unset","min-width":"16px","line-height":"unset","margin-inline-end":"0.35em","align-self":"flex-start","flex-shrink":"0"}},[_c('img',{staticClass:"text-warning",staticStyle:{"width":"200px","height":"100px","display":"inline-block"},attrs:{"src":"/test_site/images/deer.jpg","alt":"Icon"}}),_v("​​")]),_c('div',[_v("Sub-item B4")])])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('h1',{attrs:{"id":"heading-in-footer-should-not-be-indexed"}},[_v("Heading in footer should not be indexed"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-in-footer-should-not-be-indexed","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"text-center"},[_v("\n This is a dynamic height footer that supports markdown "),_c('span',[_v("😄")]),_v("!\n ")])])])} +}]; + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/site.json b/packages/cli/test/functional/test_site/site.json index 387173d215..b2053ea460 100644 --- a/packages/cli/test/functional/test_site/site.json +++ b/packages/cli/test/functional/test_site/site.json @@ -169,6 +169,10 @@ { "src": "testWeb3FormPlugin.md", "title": "web 3 forms" + }, + { + "src": "testList.md", + "title": "web 3 forms" } ], "pagesExclude": ["**/*-fragment.md"], diff --git a/packages/cli/test/functional/test_site/testList.md b/packages/cli/test/functional/test_site/testList.md new file mode 100644 index 0000000000..dd7ce4b35c --- /dev/null +++ b/packages/cli/test/functional/test_site/testList.md @@ -0,0 +1,98 @@ +1. One item +- Only 1 item + +1. One item with customization +- Only 1 item { icon="glyphicon-education" } + +1. One item + nested list +- Only 1 item + - Only 1 item + +1. One item + nested list with customization +- Only 1 item { icon="glyphicon-education" } + - Only 1 item { icon="glyphicon-education" } + +1. Basic structure +* Item A +* Item B + * Sub-item B1 + * Sub-item B2 + * Sub-item B3 + * Sub-sub-item B3.1 + * Sub-sub-item B3.2 + * Sub-sub-sub-item B3.2.1 + * Sub-item B4 + +1. Icon inheritance test +* Item A { icon="glyphicon-education" } +* Item B + * Sub-item B1 { icon="fas-file-code" } + * Sub-item B2 + * Sub-item B3 + * Sub-sub-item B3.1 { icon="./images/deer.jpg" i-width="50px" } + * Sub-sub-item B3.2 + * Sub-sub-sub-item B3.2.1 + * Sub-item B4 + +1. First item no customization test +* Item A +* Item B { icon="./images/deer.jpg" } + * Sub-item B1 + * Sub-item B2 { icon="fas-file-code" } + * Sub-item B3 + * Sub-sub-item B3.1 + * Sub-sub-item B3.2 { icon="./images/deer.jpg" i-width="50px" } + * Sub-sub-sub-item B3.2.1 + * Sub-item B4 + +1. Correct first item customization test +* Item A { icon="glyphicon-education" } +* Item B { icon="./images/deer.jpg" } + * Sub-item B1 { icon="fas-file-code" } + * Sub-item B2 + * Sub-item B3 + * Sub-sub-item B3.1 { icon="./images/deer.jpg" i-width="50px" } + * Sub-sub-item B3.2 + * Sub-sub-sub-item B3.2.1 + * Sub-item B4 + +1. Testing with various attributes +* Item A { icon="glyphicon-education" i-size="20px" i-class="text-primary" } +* Item B { icon="./images/deer.jpg" i-width="200px" i-height="100px" i-class="text-warning" } + * Sub-item B1 { icon="fas-file-code" i-size="30px" } + * Sub-item B2 { i-class="text-success" } + * Sub-item B3 + * Sub-sub-item B3.1 { icon="./images/deer.jpg" i-width="50px" i-height="50px" } + * Sub-sub-item B3.2 + * Sub-sub-sub-item B3.2.1 { i-class="text-danger" } + * Sub-item B4 + +1. Mixing basic and customized lists +* Item A +* Item B + * Sub-item B1 {icon="fas-file-code" i-size="20px" i-class="text-success"} + * Sub-item B2 + * Sub-item B3 + * Sub-sub-item B3.1 {icon="glyphicon-education" i-size="30px" i-class="text-danger"} + * Sub-sub-item B3.2 + * Sub-sub-sub-item B3.2.1 {icon="./images/deer.jpg" i-width="200px" i-height="100px" i-class="text-warning"} + * Sub-item B4 + +1. Reverse mixing basic and customized lists +* Item A {icon="glyphicon-education" i-size="20px" i-class="text-primary"} +* Item B + * Sub-item B1 + * Sub-item B2 + * Sub-item B3 + * Sub-sub-item B3.1 + * Sub-sub-item B3.2 + * Sub-sub-sub-item B3.2.1 + * Sub-item B4 + +1. Every second list item customized +* Item A {icon="glyphicon-education" i-size="20px" i-class="text-primary"} +* Item B + * Sub-item B1 {icon="fas-file-code" i-size="30px" i-class="text-success"} + * Sub-item B2 + * Sub-item B3 {icon="./images/deer.jpg" i-width="200px" i-height="100px" i-class="text-warning"} + * Sub-item B4 diff --git a/packages/core/src/html/CustomListIconProcessor.ts b/packages/core/src/html/CustomListIconProcessor.ts new file mode 100644 index 0000000000..db3c3d45b9 --- /dev/null +++ b/packages/core/src/html/CustomListIconProcessor.ts @@ -0,0 +1,182 @@ +import cheerio from 'cheerio'; +import { MbNode, NodeOrText } from '../utils/node'; + +const { processIconString } = require('../lib/markdown-it/plugins/markdown-it-icons'); +const emojiDictionary = require('../lib/markdown-it/patches/markdown-it-emoji-fixed'); + +interface EmojiData { + [key: string]: string; +} + +const emojiData = emojiDictionary as unknown as EmojiData; + +const ICON_ATTRIBUTES = ['icon', 'i-width', 'i-height', 'i-size', 'i-class']; + +interface IconAttributes { + icon?: string; + className?: string; + size?: string; + width?: string; + height?: string; +} + +type IconAttributeDetail = { + isFirst: boolean; + iconAttrs: IconAttributes | null; +}; + +function classifyIcon(icon: string) { + const isEmoji = Object.prototype.hasOwnProperty.call(emojiData, icon); + + return { + isEmoji, + unicodeEmoji: isEmoji + ? emojiData[icon] + : undefined, + }; +} + +function createIconSpan(iconAttrs: IconAttributes): cheerio.Cheerio { + const { + isEmoji, + unicodeEmoji, + } = classifyIcon(iconAttrs.icon!); + + let spanContent; + if (isEmoji) { + spanContent = ``; + } else { + spanContent = processIconString(iconAttrs.icon); + } + + let spanNode; + if (spanContent === null) { + const img = cheerio(`Icon`) + .css({ width: iconAttrs.width, height: iconAttrs.height, display: 'inline-block' }) + .addClass(iconAttrs.className || ''); + img.append('\u200B'); + + spanContent = cheerio('').append(img).css({ + 'padding-bottom': '0.3em', + 'padding-top': '0.3em', + }); + spanNode = cheerio(spanContent).css({ 'font-size': 'unset', 'min-width': '16px' }); + } else { + spanNode = cheerio(spanContent).css({ 'font-size': 'unset', 'min-width': '16px' }); + spanNode = spanNode.css({ 'font-size': iconAttrs.size }).addClass(iconAttrs.className || ''); + } + // Add invisible character to avoid the element from being empty + spanNode.append('\u200B'); + return spanNode.css({ + 'line-height': 'unset', + 'margin-inline-end': '0.35em', + 'align-self': 'flex-start', + 'flex-shrink': '0', + }); +} + +function updateNodeStyle(node: NodeOrText) { + const nodeCheerio = cheerio(node); + + nodeCheerio.css({ + 'list-style-type': 'none', + 'padding-inline-start': '0px', + }); +} + +// If an item has a specified icon, that icon will be used for it and for subsequent +// items at that level to prevent duplication of icons attribute declarations. +const getIconAttributes = (node: MbNode, iconAttrsSoFar?: IconAttributes): +IconAttributes | null => { + if (iconAttrsSoFar?.icon === undefined && node.attribs.icon === undefined) { + return null; + } + + return { + icon: node.attribs.icon !== undefined ? node.attribs.icon : iconAttrsSoFar?.icon, + width: node.attribs['i-width'] !== undefined ? node.attribs['i-width'] : iconAttrsSoFar?.width, + height: node.attribs['i-height'] !== undefined ? node.attribs['i-height'] : iconAttrsSoFar?.height, + size: node.attribs['i-size'] !== undefined ? node.attribs['i-size'] : iconAttrsSoFar?.size, + className: node.attribs['i-class'] !== undefined ? node.attribs['i-class'] : iconAttrsSoFar?.className, + }; +}; + +const deleteAttributes = (node: MbNode, attributes: string[]) => { + attributes.forEach((attr) => { + delete node.attribs[attr]; + }); +}; + +function updateLi(node: MbNode, iconAttributes: IconAttributes) { + if ( + iconAttributes.icon === undefined + ) return; + const curLiIcon = getIconAttributes(node, iconAttributes); + + deleteAttributes(node, ICON_ATTRIBUTES); + + // Create a new div and span + const div = cheerio('
    '); + const iconSpan = createIconSpan(curLiIcon!); + + div.append(cheerio(node.children).remove()); + + // Append iconSpan and div to the child + cheerio(node).append(iconSpan); + cheerio(node).append(div); + + cheerio(node).css({ + display: 'flex', + }); +} + +// This function ensures the first item at that level must also be customized. +// If not, the list will be invalidated and default bullets will be used. +// This is to prevent unintentional mixing of standard and customized lists. +// See https://github.com/MarkBind/markbind/pull/2316#discussion_r1255364486 for more details. +function handleLiNode(node: MbNode, iconAttrValue: IconAttributeDetail) { + if (iconAttrValue.isFirst) { + iconAttrValue.iconAttrs = getIconAttributes(node); + iconAttrValue.isFirst = false; + } else if (iconAttrValue.iconAttrs) { + iconAttrValue.iconAttrs = getIconAttributes(node, iconAttrValue.iconAttrs); + } + updateLi(node, iconAttrValue.iconAttrs ?? {}); +} + +export function processUlNode(node: NodeOrText) { + const nodeAsMbNode = node as MbNode; + if (nodeAsMbNode.attribs.isIconListProcessed === 'true') { + delete nodeAsMbNode.attribs.isIconListProcessed; + return; + } + + const iconAttrs: IconAttributeDetail[] = []; + function dfs(currentNode: NodeOrText, level: number) { + if (!iconAttrs[level]) { + iconAttrs[level] = { isFirst: true, iconAttrs: null }; + } + + const ulNode = currentNode as MbNode; + const liNodes = ulNode.children.filter(child => child.name === 'li'); + + liNodes.forEach((liNode) => { + const ulChildren = liNode.children?.filter(child => child.name === 'ul'); + handleLiNode(liNode as MbNode, iconAttrs[level]); + + ulChildren?.forEach((ulChildNode) => { + // Traverse the children if any + dfs(ulChildNode, level + 1); + + // Insert an `isIconListProcessed` flag attribute to the node. + if (ulChildNode.attribs) { + ulChildNode.attribs.isIconListProcessed = 'true'; + } + }); + }); + if (iconAttrs[level].iconAttrs !== null) { + updateNodeStyle(ulNode); + } + } + dfs(node, 0); +} diff --git a/packages/core/src/html/NodeProcessor.ts b/packages/core/src/html/NodeProcessor.ts index 9158279838..80fef5eb7b 100644 --- a/packages/core/src/html/NodeProcessor.ts +++ b/packages/core/src/html/NodeProcessor.ts @@ -27,6 +27,7 @@ import { highlightCodeBlock, setCodeLineNumbers } from './codeblockProcessor'; import { setHeadingId, assignPanelId } from './headerProcessor'; import { FootnoteProcessor } from './FootnoteProcessor'; import { MbNode, NodeOrText, TextElement } from '../utils/node'; +import { processUlNode } from './CustomListIconProcessor'; const fm = require('fastmatter'); @@ -195,6 +196,9 @@ export class NodeProcessor { case 'question': this.mdAttributeRenderer.processQuestion(node); break; + case 'ul': + processUlNode(node); + break; case 'q-option': this.mdAttributeRenderer.processQOption(node); break; diff --git a/packages/core/src/lib/markdown-it/index.ts b/packages/core/src/lib/markdown-it/index.ts index fe872a410d..6cebb78084 100644 --- a/packages/core/src/lib/markdown-it/index.ts +++ b/packages/core/src/lib/markdown-it/index.ts @@ -36,7 +36,7 @@ markdownIt.use(require('markdown-it-mark')) .use(require('markdown-it-attrs')) .use(require('./plugins/markdown-it-radio-button')) .use(require('./plugins/markdown-it-block-embed')) - .use(require('./plugins/markdown-it-icons')) + .use(require('./plugins/markdown-it-icons').markdownItPlugin) .use(require('./plugins/markdown-it-footnotes')) .use(require('./plugins/markdown-it-center-text')) .use(require('./plugins/markdown-it-colour-text')) diff --git a/packages/core/src/lib/markdown-it/patches/markdown-it-emoji-fixed.js b/packages/core/src/lib/markdown-it/patches/markdown-it-emoji-fixed.js index 9d43c39ef7..c963c4f3ff 100644 --- a/packages/core/src/lib/markdown-it/patches/markdown-it-emoji-fixed.js +++ b/packages/core/src/lib/markdown-it/patches/markdown-it-emoji-fixed.js @@ -14,4 +14,4 @@ emojiData['seven'] = '7️⃣'; emojiData['eight'] = '8️⃣'; emojiData['nine'] = '9️⃣'; -module.exports = emojiData; +module.exports = emojiData; \ No newline at end of file diff --git a/packages/core/src/lib/markdown-it/plugins/markdown-it-icons.ts b/packages/core/src/lib/markdown-it/plugins/markdown-it-icons.ts index 5ac1f143da..96e756d142 100644 --- a/packages/core/src/lib/markdown-it/plugins/markdown-it-icons.ts +++ b/packages/core/src/lib/markdown-it/plugins/markdown-it-icons.ts @@ -1,68 +1,110 @@ -import octicons, { IconName } from '@primer/octicons'; -import cheerio from 'cheerio'; - +// import the necessary packages +const octicons = require('@primer/octicons'); +const cheerio = require('cheerio'); const markdownItRegExp = require('markdown-it-regexp'); +// regular expression to match the icon patterns +const ICON_REGEXP + = /:(fa[brs]|fa-brands|fa-solid|glyphicon|octicon|octiconlight|mi[forst])-([a-z-]+)~?([a-z-]+)?:/; + +// function to get the octicon icons function getOcticonIcon(iconName: string) { - return octicons[iconName as IconName] ?? null; + return octicons[iconName] ?? null; } -const ICON_REGEXP - = /:(fa[brs]|fa-brands|fa-solid|glyphicon|octicon|octiconlight|mi[forst])-([a-z-]+)~?([a-z-]+)?:/; +// handler function for glyphicon icons +const handleGlyphicon = (iconFontName: string) => + ``; -export = markdownItRegExp( - ICON_REGEXP, - (match: string[]) => { - const iconFontType = match[1]; - const iconFontName = match[2]; - const iconClass = match[3]; +// handler function for octicon icons +const handleOcticon = (iconFontName: string, iconClass?: string) => { + const octiconIcon = getOcticonIcon(iconFontName); + // ensure octicons are valid + if (octiconIcon === null) { + return ''; + } + return iconClass ? octiconIcon.toSVG({ class: iconClass }) : octiconIcon.toSVG(); +}; + +// handler function for light octicon icons +const handleOcticonLight = (iconFontName: string, iconClass?: string) => { + const octiconIcon = getOcticonIcon(iconFontName); + // ensure octicons are valid + if (octiconIcon === null) { + return ''; + } + const octiconIconHtml = iconClass ? octiconIcon.toSVG({ class: iconClass }) : octiconIcon.toSVG(); + const $ = cheerio.load(octiconIconHtml); + $('svg').attr('style', 'color: #fff'); + return $.html(); +}; + +// handler function for material icons +const handleMaterialIcon = (iconFontType: string, iconFontName: string) => { + let materialIconsClass = 'material-icons'; + switch (iconFontType) { + case 'mio': + materialIconsClass += '-outlined'; + break; + case 'mir': + materialIconsClass += '-round'; + break; + case 'mis': + materialIconsClass += '-sharp'; + break; + case 'mit': + materialIconsClass += '-two-tone'; + break; + default: + // .material-icons generates 'Filled' style icons; hence, no suffix is needed for 'mif'. + } + // Use .align-middle by default to vertically-align the icon with its surrounding text (if any). + // Also, replace dashes (-) with underscores (_) to format the icon name properly. + return ``; +}; - if (iconFontType === 'glyphicon') { - return ``; - } else if (iconFontType === 'octicon') { - const octiconIcon = getOcticonIcon(iconFontName); - // ensure octicons are valid - if (octiconIcon === null) { - return ''; - } - return iconClass - ? octiconIcon.toSVG({ class: iconClass }) - : octiconIcon.toSVG(); - } else if (iconFontType === 'octiconlight') { - const octiconIcon = getOcticonIcon(iconFontName); - // ensure octicons are valid - if (octiconIcon === null) { - return ''; - } - const octiconIconHtml = iconClass - ? octiconIcon.toSVG({ class: iconClass }) - : octiconIcon.toSVG(); - const $ = cheerio.load(octiconIconHtml); - $('svg').attr('style', 'color: #fff'); - return $.html(); - } else if (iconFontType.startsWith('mi')) { - let materialIconsClass = 'material-icons'; - switch (iconFontType) { - case 'mio': - materialIconsClass += '-outlined'; - break; - case 'mir': - materialIconsClass += '-round'; - break; - case 'mis': - materialIconsClass += '-sharp'; - break; - case 'mit': - materialIconsClass += '-two-tone'; - break; - default: - // .material-icons generates 'Filled' style icons; hence, no suffix is needed for 'mif'. - } - // Use .align-middle by default to vertically-align the icon with its surrounding text (if any). - // Also, replace dashes (-) with underscores (_) to format the icon name properly. - return ``; - } // If icon is a Font Awesome icon - return ``; - }, +// handler function for font awesome icons +const handleFontAwesome = (iconFontType: string, iconFontName: string) => + ``; + +// function to get the respective icon html based on the icon font type +const getIconHtml = (match: string[]) => { + const iconFontType = match[1]; + const iconFontName = match[2]; + const iconClass = match[3]; + + if (iconFontType === 'glyphicon') { + return handleGlyphicon(iconFontName); + } else if (iconFontType === 'octicon') { + return handleOcticon(iconFontName, iconClass); + } else if (iconFontType === 'octiconlight') { + return handleOcticonLight(iconFontName, iconClass); + } else if (iconFontType.startsWith('mi')) { + return handleMaterialIcon(iconFontType, iconFontName); + } + return handleFontAwesome(iconFontType, iconFontName); +}; + +// function to process the icon string and get the icon html +const processIconString = (iconStr: string) => { + let icon = iconStr; + + if (!iconStr.startsWith(':') && !iconStr.endsWith(':')) { + icon = `:${iconStr}:`; + } + + const match = icon.match(ICON_REGEXP); + return match ? getIconHtml(match) : null; +}; + +// create a markdown-it plugin to process the icon strings in the markdown +const markdownItPlugin = markdownItRegExp( + ICON_REGEXP, + (match: string[]) => getIconHtml(match), ); + +module.exports = { + markdownItPlugin, + processIconString, +};