Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix custom components markdown parsing #1548

Merged
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
fc1127a
Initialize
wxwxwxwx9 Apr 17, 2021
3a8c23d
Remove comments
wxwxwxwx9 Apr 17, 2021
838d849
Fix regex rule
wxwxwxwx9 Apr 17, 2021
f676cc1
Update tests
wxwxwxwx9 Apr 17, 2021
ebaf948
Remove console log
wxwxwxwx9 Apr 17, 2021
b3bdd1f
Update comments
wxwxwxwx9 Apr 17, 2021
4f4e91d
Fix indentation in customComponentPlugin
wxwxwxwx9 Apr 17, 2021
da8e989
Update comment
wxwxwxwx9 Apr 17, 2021
32c83f3
Update "Pic" and "Thumbnail" components to inline
wxwxwxwx9 Apr 20, 2021
04a186e
Shift customComponent folder to patches
wxwxwxwx9 Apr 20, 2021
b08d586
Combine escape-special-tags into customComponent html block rule
wxwxwxwx9 Apr 20, 2021
1be94c9
Delete markdown-it-escape-special-tags.js
wxwxwxwx9 Apr 20, 2021
d5edc4e
Update tests
wxwxwxwx9 Apr 20, 2021
1f2340f
Tweak comments, indentations, and variable names
wxwxwxwx9 Apr 20, 2021
f0c2770
Correct variable name
wxwxwxwx9 Apr 20, 2021
80f6403
Remove script, pre, style from special tags
wxwxwxwx9 Apr 21, 2021
3740e1f
Revert "Update "Pic" and "Thumbnail" components to inline"
wxwxwxwx9 Apr 21, 2021
bec047a
Update tests
wxwxwxwx9 Apr 21, 2021
2cec817
Add pic and thumbnail as inline tags
wxwxwxwx9 Apr 21, 2021
a9ff6a4
Update test
wxwxwxwx9 Apr 21, 2021
948b5ce
Added script, pre, style back to special tags regex
wxwxwxwx9 Apr 21, 2021
6d3d213
Delete index file and shift source file link to customComponentPlugin
wxwxwxwx9 Apr 21, 2021
4105f69
Remove vueReservedTags
wxwxwxwx9 Apr 21, 2021
bde3a4c
Add popover, tooltip, trigger to inlineTags
wxwxwxwx9 Apr 21, 2021
81b65ec
Update tests
wxwxwxwx9 Apr 21, 2021
1bd4447
Update source file comments
wxwxwxwx9 Apr 21, 2021
2161fd0
Update minimizedPanelStringRegex to Zeyu's suggestion
wxwxwxwx9 Apr 21, 2021
116a3b5
Remove vueReservedTags file
wxwxwxwx9 Apr 21, 2021
858aff4
Update regex
wxwxwxwx9 Apr 21, 2021
5d35b63
Add test for panel minimized markdown parsing
wxwxwxwx9 Apr 21, 2021
c35741a
Update test comments
wxwxwxwx9 Apr 21, 2021
0566fb5
Update markdown-it-custom-component.test.js
wxwxwxwx9 Apr 21, 2021
8b63fc0
Update markdown-it-custom-component.test.js
wxwxwxwx9 Apr 21, 2021
0924d5c
Update markdown-it-custom-component.test.js
wxwxwxwx9 Apr 21, 2021
792df05
Update test description
wxwxwxwx9 Apr 21, 2021
29e7614
Add Zeyu's edge case
wxwxwxwx9 Apr 21, 2021
94986bc
Create testPanelMarkdownParsing.md
wxwxwxwx9 Apr 21, 2021
72a55b1
Update site.json
wxwxwxwx9 Apr 21, 2021
7996460
Update testPanelMarkdownParsing.md
wxwxwxwx9 Apr 21, 2021
613636c
Update tests
wxwxwxwx9 Apr 21, 2021
7c15fc3
Delete markdown-it-custom-component.test.js
wxwxwxwx9 Apr 21, 2021
8094748
Update NonFunctionalRequirements.md
wxwxwxwx9 Apr 21, 2021
5443c24
Update NonFunctionalRequirements._include_.html
wxwxwxwx9 Apr 21, 2021
6ae92ca
Update testPanelMarkdownParsing.md
wxwxwxwx9 Apr 21, 2021
0a66760
Update test
wxwxwxwx9 Apr 21, 2021
08541e4
Change seg to span
wxwxwxwx9 Apr 21, 2021
1802120
Update tests
wxwxwxwx9 Apr 21, 2021
a4e1095
Update all seg tag to span
wxwxwxwx9 Apr 21, 2021
5b74bca
Update seg to div
wxwxwxwx9 Apr 21, 2021
3fc4d98
Update tests
wxwxwxwx9 Apr 21, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 37 additions & 58 deletions packages/cli/test/functional/test_site/expected/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -248,14 +248,13 @@ <h1 id="panel-without-heading-with-keyword"><span id="panel-without-heading-with
<h1 id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading"><span id="keyword-should-be-tagged-to-this-heading-not-the-panel-heading" class="anchor"></span>Keyword should be tagged to this heading, not the panel heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading" onclick="event.stopPropagation()"></a></h1>
<p><span class="keyword">panel keyword</span></p>
</panel>
<p></p>
<p><strong>Unexpanded panel with heading with keyword</strong>
<panel id="panel-with-heading-with-keyword"><template #header>
<h1 id="panel-with-heading-with-keyword"><span id="panel-with-heading-with-keyword" class="anchor"></span>Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword" onclick="event.stopPropagation()"></a></h1>
</template></panel>
</p>
<h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading"><span id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading" class="anchor"></span>Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading" onclick="event.stopPropagation()"></a></h1>
<p><span class="keyword">panel keyword</span></p>
<p><strong>Unexpanded panel with heading with keyword</strong></p>
<panel id="panel-with-heading-with-keyword"><template #header>
<h1 id="panel-with-heading-with-keyword"><span id="panel-with-heading-with-keyword" class="anchor"></span>Panel with heading with keyword<a class="fa fa-anchor" href="#panel-with-heading-with-keyword" onclick="event.stopPropagation()"></a></h1>
</template>
<h1 id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading"><span id="keyword-should-be-tagged-to-the-panel-heading-not-this-heading" class="anchor"></span>Keyword should be tagged to the panel heading, not this heading<a class="fa fa-anchor" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading" onclick="event.stopPropagation()"></a></h1>
<p><span class="keyword">panel keyword</span></p>
</panel>
<h1 id="heading-with-included-keyword"><span id="heading-with-included-keyword" class="anchor"></span>Heading with included keyword<a class="fa fa-anchor" href="#heading-with-included-keyword" onclick="event.stopPropagation()"></a></h1>
<div>
<p><span class="keyword">included keyword</span></p>
Expand Down Expand Up @@ -314,11 +313,9 @@ <h1 id="heading-with-hidden-keyword"><span id="heading-with-hidden-keyword" clas
<p><strong>Normal include</strong></p>
<div>
<h3 id="establishing-requirements"><span id="establishing-requirements" class="anchor"></span>Establishing Requirements<a class="fa fa-anchor" href="#establishing-requirements" onclick="event.stopPropagation()"></a></h3>
<p>
<seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
of understanding what a software product should do.</seg>
</p>
<seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm yep, that would be good. On another note, should we update to something else in the SSR PR since we don't "allow" unknown components?

sounds good, over here might be better in fact since you've changed the behaviour of unknown tags

requirements capture are some of the terms commonly **and** interchangeably used to represent the activity
of understanding what a software product should do.</seg>
<p>There are many techniques used during a requirements gathering. The following are some of the techniques.</p>
<h4 id="brainstorming"><span id="brainstorming" class="anchor"></span>Brainstorming<a class="fa fa-anchor" href="#brainstorming" onclick="event.stopPropagation()"></a></h4>
<p>Brainstorming is a group activity designed to generate a large number of diverse and creative ideas for the solution
Expand All @@ -337,7 +334,7 @@ <h4 id="focus-groups"><span id="focus-groups" class="anchor"></span>Focus groups
</div>
<p><strong>Include segment</strong></p>
<div>Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
requirements capture are some of the terms commonly **and** interchangeably used to represent the activity
of understanding what a software product should do.</div>
<p><strong>Boilerplate include</strong></p>
<div name="Boilerplate Referencing">
Expand Down Expand Up @@ -458,53 +455,48 @@ <h2 id="feature-list"><span id="feature-list" class="anchor"></span>Feature list
</box>
</div>
</box>
<p><strong>Include a file using baseUrl</strong>
<p><strong>Include a file using baseUrl</strong></p>
<div>As we establish requirements, they should be recorded in some way for future reference,
usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
and refine requirements based on their feedback. The next phase is to convert requirements into a product
specification that specifies how the product will address the requirements. </div>
<panel src="/test_site/requirements/SpecifyingRequirements._include_.html#preview" type="minimal" fragment="preview"><template #header>
<p><strong>same test with panels</strong></p>
</template></panel>
</p>
<p><strong>Include a file in a sub-folder that uses baseUrl</strong>
<p><strong>Include a file in a sub-folder that uses baseUrl</strong></p>
<div>
<div>Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
requirements capture are some of the terms commonly **and** interchangeably used to represent the activity
of understanding what a software product should do.</div>
</div>
<panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template #header>
<p><strong>same test with panels</strong></p>
</template></panel>
</p>
<p><strong>Include a file in a sub-folder that uses baseUrl using baseUrl</strong>
<p><strong>Include a file in a sub-folder that uses baseUrl using baseUrl</strong></p>
<div>
<div>Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
requirements capture are some of the terms commonly **and** interchangeably used to represent the activity
of understanding what a software product should do.</div>
</div>
<panel src="/test_site/requirements/testBaseUrlInIncludeSrc._include_.html" type="minimal"><template #header>
<p><strong>same test with panels</strong></p>
</template></panel>
</p>
<p><strong>Include a file in a sub-site that uses baseUrl</strong>
<p><strong>Include a file in a sub-site that uses baseUrl</strong></p>
<div>
<div>
<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
</div>
<panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template #header>
<p><strong>same test with panels</strong></p>
</template></panel>
</p>
<p><strong>Include a file in a sub-site that uses baseUrl using baseUrl</strong>
<p><strong>Include a file in a sub-site that uses baseUrl using baseUrl</strong></p>
<div>
<div>
<img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
</div>
<panel src="/test_site/sub_site/testBaseUrlInIncludeSrcSubSite._include_.html" type="minimal"><template #header>
<p><strong>same test with panels</strong></p>
</template></panel>
</p>
<p><strong>Trimmed include</strong></p>
<p><strong><span><br>
Fragment with leading spaces and newline</span></strong></p>
Expand Down Expand Up @@ -608,9 +600,7 @@ <h2 id="panel-with-src-from-another-markbind-site-header-2"><span id="panel-with
</template></panel>
</div>
<p><strong>Modal with panel inside</strong></p>
<p>
<trigger for="modal-with-panel">trigger</trigger>
</p>
<trigger for="modal-with-panel">trigger</trigger>
<b-modal id="modal-with-panel" hide-footer size modal-class="mb-zoom" ref="modal-with-panel"><template #modal-title>modal title with panel inside</template>
<panel expanded id="panel-inside-modal"><template #header>
<h2 id="panel-inside-modal"><span id="panel-inside-modal" class="anchor"></span>Panel inside modal<a class="fa fa-anchor" href="#panel-inside-modal" onclick="event.stopPropagation()"></a></h2>
Expand All @@ -630,42 +620,32 @@ <h2 id="panel-header-inside-unexpanded-panel-should-not-appear-in-search-data"><
</panel>
</panel>
<p><strong>Test search indexing</strong></p>
<p><strong>Test PlantUML live reload without include</strong>
<pic src="/test_site/diagrams/activity.png" alt="activity diagram"></pic>
</p>
<p><strong>Test PlantUML live reload with include</strong>
<p><strong>Test PlantUML live reload without include</strong></p>
<pic src="/test_site/diagrams/activity.png" alt="activity diagram"></pic>
<p><strong>Test PlantUML live reload with include</strong></p>
<div>
<p><strong>PlantUML Test</strong></p>
<pic src="/test_site/inline-output.png"></pic>
<pic src="/test_site/9c9e77fc0a983cb6b592e65733787bec.png"></pic>
<p><strong>Sequence Diagram</strong>
<pic src="/test_site/diagrams/sequence.png"></pic>
</p>
<p><strong>Use Case Diagram</strong>
<pic src="/test_site/diagrams/usecase.png"></pic>
</p>
<p><strong>Class Diagram</strong>
<pic src="/test_site/diagrams/class.png"></pic>
</p>
<p><strong>Sequence Diagram</strong></p>
<pic src="/test_site/diagrams/sequence.png"></pic>
<p><strong>Use Case Diagram</strong></p>
<pic src="/test_site/diagrams/usecase.png"></pic>
<p><strong>Class Diagram</strong></p>
<pic src="/test_site/diagrams/class.png"></pic>
</div>
</p>
<p><strong>Test PlantUML in sub folder</strong>
<p><strong>Test PlantUML in sub folder</strong></p>
<div>
<pic src="/test_site/sub_site/inline-output/inline-puml-image.png"></pic>
<p><strong>Activity Diagram</strong>
<pic src="/test_site/diagrams/activity.png"></pic>
</p>
<p><strong>Component Diagram</strong>
<pic src="/test_site/diagrams/component.png"></pic>
</p>
<p><strong>State Diagram</strong>
<pic src="/test_site/diagrams/state.png"></pic>
</p>
<p><strong>Object Diagram</strong>
<pic src="/test_site/diagrams/object.png"></pic>
</p>
<p><strong>Activity Diagram</strong></p>
<pic src="/test_site/diagrams/activity.png"></pic>
<p><strong>Component Diagram</strong></p>
<pic src="/test_site/diagrams/component.png"></pic>
<p><strong>State Diagram</strong></p>
<pic src="/test_site/diagrams/state.png"></pic>
<p><strong>Object Diagram</strong></p>
<pic src="/test_site/diagrams/object.png"></pic>
</div>
</p>
<h2 class="no-index" id="level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed"><span id="level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed" class="anchor"></span>Level 2 header (inside headingSearchIndex) with no-index attribute should not be indexed<a class="fa fa-anchor" href="#level-2-header-inside-headingsearchindex-with-no-index-attribute-should-not-be-indexed" onclick="event.stopPropagation()"></a></h2>
<h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed"><span id="level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed" class="anchor"></span>Level 6 header (outside headingSearchIndex) with always-index attribute should be indexed<a class="fa fa-anchor" href="#level-6-header-outside-headingsearchindex-with-always-index-attribute-should-be-indexed" onclick="event.stopPropagation()"></a></h6>
<p><strong>Test nunjucks raw tags</strong></p>
Expand Down Expand Up @@ -731,7 +711,6 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
<a class="nav-link py-1" href="#panel-without-heading-with-keyword">Panel without heading with keyword&#x200E;</a>
<a class="nav-link py-1" href="#keyword-should-be-tagged-to-this-heading-not-the-panel-heading">Keyword should be tagged to this heading, not the panel heading&#x200E;</a>
<a class="nav-link py-1" href="#panel-with-heading-with-keyword">Panel with heading with keyword&#x200E;</a>
<a class="nav-link py-1" href="#keyword-should-be-tagged-to-the-panel-heading-not-this-heading">Keyword should be tagged to the panel heading, not this heading&#x200E;</a>
<a class="nav-link py-1" href="#heading-with-included-keyword">Heading with included keyword&#x200E;</a>
<a class="nav-link py-1" href="#included-heading">Included Heading&#x200E;</a>
<a class="nav-link py-1" href="#heading-with-nested-keyword">Heading with nested keyword&#x200E;</a>
Expand Down

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
<p>
<panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
</p>
<panel><span slot="header" class="card-title"><b>header</b></span> Content of panel</panel>
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
<p>In contrast to <strong>Functional Requirements</strong> which specify what the system should do,
<strong>Non-Functional Requirements</strong> specify the constraints under which system is developed and operated.</p>
</div>
<p>
<seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
of understanding what a software product should do.</seg>
</p>
<seg id="preview">Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly **and** interchangeably used to represent the activity
of understanding what a software product should do.</seg>
</seg>
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<h1 id="specifying-requirements"><span id="specifying-requirements" class="anchor"></span>Specifying requirements<a class="fa fa-anchor" href="#specifying-requirements" onclick="event.stopPropagation()"></a></h1>
<p>
<seg id="preview">As we establish requirements, they should be recorded in some way for future reference,
usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
and refine requirements based on their feedback. The next phase is to convert requirements into a product
specification that specifies how the product will address the requirements. </seg>
</p>
<seg id="preview">As we establish requirements, they should be recorded in some way for future reference,
usually called a requirement specification. Furthermore, it is advisable to show these requirements to stakeholders,
and refine requirements based on their feedback. The next phase is to convert requirements into a product
specification that specifies how the product will address the requirements. </seg>
<p>Given next are some tools and techniques that can be used to specify requirements.
Note that they can also be used for establishing requirements too.</p>
<h2 id="textual-descriptions-unstructured-prose"><span id="textual-descriptions-unstructured-prose" class="anchor"></span>Textual descriptions (unstructured prose)<a class="fa fa-anchor" href="#textual-descriptions-unstructured-prose" onclick="event.stopPropagation()"></a></h2>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
</p>
<p>User stories are often written on index cards or sticky notes, and arranged on walls or tables to facilitate
planning and discussion.</p>
<p>
<seg xp-website sup><a href="http://www.extremeprogramming.org/rules/userstories.html">http://www.extremeprogramming.org/rules/userstories.html</a>
This is the main website for eXtreme Programming (XP), an approach to software development currently popular
among practitioners. User stories are commonly used among XP practitioners to capture requirements.
</seg>
</p>
<seg xp-website sup>[http://www.extremeprogramming.org/rules/userstories.html](http://www.extremeprogramming.org/rules/userstories.html)
This is the main website for eXtreme Programming (XP), an approach to software development currently popular
among practitioners. User stories are commonly used among XP practitioners to capture requirements.
</seg>
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div>Requirements gathering, requirements elicitation, requirements analysis,
requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity
requirements capture are some of the terms commonly **and** interchangeably used to represent the activity
of understanding what a software product should do.</div>
7 changes: 3 additions & 4 deletions packages/cli/test/functional/test_site/expected/siteData.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"feature-list": "Feature list",
"heading-with-multiple-keywords": "Heading with multiple keywords",
"heading-with-keyword-in-panel": "Heading with keyword in panel",
"keyword-should-be-tagged-to-the-panel-heading-not-this-heading": "Keyword should be tagged to the panel heading, not this heading",
"heading-with-included-keyword": "Heading with included keyword",
"included-heading": "Included Heading",
"heading-with-nested-keyword": "Heading with nested keyword",
Expand All @@ -57,13 +56,13 @@
"keyword-should-be-tagged-to-this-heading-not-the-panel-heading": [
"panel keyword"
],
"panel-with-heading-with-keyword": [
"panel keyword"
],
"heading-with-multiple-keywords": [
"keyword 1",
"keyword 2"
],
"keyword-should-be-tagged-to-the-panel-heading-not-this-heading": [
"panel keyword"
],
"heading-with-included-keyword": [
"included keyword"
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
</div>
</nav>
<div id="content-wrapper" class="fixed-header-padding">
<p></p>

<p>A page with an empty frontmatter should still build.</p>
<i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
</div>
Expand Down
Loading