diff --git a/packages/cli/test/functional/test_site/expected/siteData.json b/packages/cli/test/functional/test_site/expected/siteData.json index cbc796895a..f96fbea6a2 100644 --- a/packages/cli/test/functional/test_site/expected/siteData.json +++ b/packages/cli/test/functional/test_site/expected/siteData.json @@ -268,6 +268,12 @@ }, "headingKeywords": {} }, + { + "src": "testPanels.md", + "title": "Test: Panels", + "headings": {}, + "headingKeywords": {} + }, { "src": "testPanelMarkdownParsing.md", "title": "markdown-it should parse minimized panel as inline element and normal panel as block element", diff --git a/packages/cli/test/functional/test_site/expected/testPanels.html b/packages/cli/test/functional/test_site/expected/testPanels.html new file mode 100644 index 0000000000..3993e917cd --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testPanels.html @@ -0,0 +1,263 @@ + + + + + + + + + + + + + Test: Panels + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
  • 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 📘
        • +
      +
      • +
    +
    • +     +     +
    +
    +     +
    +

    Panel with attributes

    + + Lorem ipsum... + +
    +

    Panel with slots

    + + + Lorem ipsum... + +
    +

    Panel with slots overriding attributes

    + + + Lorem ipsum... + +
    + +
    + +
    +
    +     +
    +
    + +
    +
    + + + + + + + + + + + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/expected/testPanels.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testPanels.page-vue-render.js new file mode 100644 index 0000000000..5989305bf2 --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testPanels.page-vue-render.js @@ -0,0 +1,25 @@ + + 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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.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"}},[_m(2),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Correct header")])]},proxy:true}])},[_v("\n Lorem ipsum...\n")]),_v(" "),_c('br'),_v(" "),_m(3),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('span',[_v("Correct header")])]},proxy:true}])},[_v("\n Lorem ipsum...\n")]),_v(" "),_c('br'),_v(" "),_m(4),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('span',[_v("Correct header")])]},proxy:true}])},[_v("\n Lorem ipsum...\n")]),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(5)])} +}; + 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('p',[_c('strong',[_v("Panel with attributes")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Panel with slots")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Panel with slots overriding attributes")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('h1',{attrs:{"id":"heading-in-footer-should-not-be-indexed"}},[_c('span',{staticClass:"anchor",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 f2f74f4cbf..0c1656eb88 100644 --- a/packages/cli/test/functional/test_site/site.json +++ b/packages/cli/test/functional/test_site/site.json @@ -103,6 +103,10 @@ "src": "testIncludeBoilerplate.md", "title": "Content inside should not be processed by markdown" }, + { + "src": "testPanels.md", + "title": "Test: Panels" + }, { "src": "testPanelMarkdownParsing.md", "title": "markdown-it should parse minimized panel as inline element and normal panel as block element" diff --git a/packages/cli/test/functional/test_site/testPanels.md b/packages/cli/test/functional/test_site/testPanels.md new file mode 100644 index 0000000000..198dec2474 --- /dev/null +++ b/packages/cli/test/functional/test_site/testPanels.md @@ -0,0 +1,25 @@ +**Panel with attributes** + + + Lorem ipsum... + + +
    + +**Panel with slots** + + + Correct header + Lorem ipsum... + + +
    + +**Panel with slots overriding attributes** + + + Correct header + Lorem ipsum... + + +
    diff --git a/packages/core/src/html/MdAttributeRenderer.js b/packages/core/src/html/MdAttributeRenderer.js index 3e6bfe738a..30680d02c4 100644 --- a/packages/core/src/html/MdAttributeRenderer.js +++ b/packages/core/src/html/MdAttributeRenderer.js @@ -106,7 +106,9 @@ class MdAttributeRenderer { processPanelAttributes(node) { this.processAttributeWithoutOverride(node, 'alt', false, '_alt'); - this.processAttributeWithoutOverride(node, 'header', false); + if (!this.hasSlotOverridingAttribute(node, 'header')) { + this.processAttributeWithoutOverride(node, 'header', false); + } } /* diff --git a/packages/core/test/unit/html/NodeProcessor.data.js b/packages/core/test/unit/html/NodeProcessor.data.js index 1a3e1bff22..99da17e38b 100644 --- a/packages/core/test/unit/html/NodeProcessor.data.js +++ b/packages/core/test/unit/html/NodeProcessor.data.js @@ -18,6 +18,24 @@ module.exports.PROCESS_PANEL_ATTRIBUTES_EXPECTED = ` `; +module.exports.PROCESS_PANEL_HEADER_SLOT_TAKES_PRIORITY = ` + +
    + This existing header slot should be preserved in favour over header attribute, with a logger warning for repeated attributes. +
    + Header attribute should be ignored and deleted while header slot is reserved. +     +`; + +module.exports.PROCESS_PANEL_HEADER_SLOT_TAKES_PRIORITY_EXPECTED = ` + + + Header attribute should be ignored and deleted while header slot is reserved. + +`; + module.exports.PROCESS_PANEL_HEADER_NO_OVERRIDE = `
    diff --git a/packages/core/test/unit/html/NodeProcessor.test.js b/packages/core/test/unit/html/NodeProcessor.test.js index 9e3b29f0a2..d0d2c592b8 100644 --- a/packages/core/test/unit/html/NodeProcessor.test.js +++ b/packages/core/test/unit/html/NodeProcessor.test.js @@ -43,6 +43,8 @@ const processAndVerifyTemplate = (template, expectedTemplate, postProcess = fals test('processNode processes panel attributes and inserts into dom as slots correctly', () => { processAndVerifyTemplate(testData.PROCESS_PANEL_ATTRIBUTES, testData.PROCESS_PANEL_ATTRIBUTES_EXPECTED); + processAndVerifyTemplate(testData.PROCESS_PANEL_HEADER_SLOT_TAKES_PRIORITY, + testData.PROCESS_PANEL_HEADER_SLOT_TAKES_PRIORITY_EXPECTED); processAndVerifyTemplate(testData.PROCESS_PANEL_HEADER_NO_OVERRIDE, testData.PROCESS_PANEL_HEADER_NO_OVERRIDE_EXPECTED); });