Merge branch 'MarkBind:master' into portfolioTemplate

MarkBind · Feb 2, 2024 · 7f295f1 · 7f295f1
2 parents aa05707 + 67ae4b1
commit 7f295f1
Show file tree

Hide file tree

Showing 67 changed files with 165 additions and 79 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -680,6 +680,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "jingting1412",
+      "name": "jingting1412",
+      "avatar_url": "https://avatars.githubusercontent.com/u/105090139?v=4",
+      "profile": "https://github.com/jingting1412",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Tim-Siu",
+      "name": "Shuyao \"Tim\" Xu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61866948?v=4",
+      "profile": "http://tim-siu.github.io",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/README.md b/README.md
@@ -124,6 +124,8 @@ 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/SPWwj"><img src="https://avatars.githubusercontent.com/u/30100720?v=4?s=100" width="100px;" alt="SPWwj"/><br /><sub><b>SPWwj</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=SPWwj" title="Documentation">📖</a> <a href="https://github.com/MarkBind/markbind/commits?author=SPWwj" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://jmestxr.github.io/my-portfolio/"><img src="https://avatars.githubusercontent.com/u/87931905?v=4?s=100" width="100px;" alt="James"/><br /><sub><b>James</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=jmestxr" title="Code">💻</a> <a href="https://github.com/MarkBind/markbind/commits?author=jmestxr" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/zlimez"><img src="https://avatars.githubusercontent.com/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://avatars.githubusercontent.com/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://avatars.githubusercontent.com/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>
     </tr>
   </tbody>
 </table>

diff --git a/docs/about.md b/docs/about.md
@@ -129,6 +129,8 @@ 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/SPWwj"><img src="https://avatars.githubusercontent.com/u/30100720?v=4?s=100" width="100px;" alt="SPWwj"/><br /><sub><b>SPWwj</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=SPWwj" title="Documentation">📖</a> <a href="https://github.com/MarkBind/markbind/commits?author=SPWwj" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://jmestxr.github.io/my-portfolio/"><img src="https://avatars.githubusercontent.com/u/87931905?v=4?s=100" width="100px;" alt="James"/><br /><sub><b>James</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=jmestxr" title="Code">💻</a> <a href="https://github.com/MarkBind/markbind/commits?author=jmestxr" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/zlimez"><img src="https://avatars.githubusercontent.com/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://avatars.githubusercontent.com/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://avatars.githubusercontent.com/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>
     </tr>
   </tbody>
 </table>

diff --git a/docs/images/codeDarkTheme.png b/docs/images/codeDarkTheme.png
diff --git a/docs/userGuide/syntax/annotations.md b/docs/userGuide/syntax/annotations.md
@@ -22,15 +22,49 @@ The x and y coordinates of each Annotate Point are relative to the image and are
   <!-- Customize Point Header (default is empty) -->
   <a-point x="75%" y="25%" content="This point is 75% from the left and 25% from the top"  header="This has a header"/>
   <!-- Customize Point Color (default color is green) -->
-  <a-point x="33%" y="50%" content="This point is 33% from the left and 50% from the top"  color="red"/>
+  <a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top"  color="red"/>
   <!-- Customize Point Opacity (default opacity is 0.3) -->
-  <a-point x="66%" y="50%" content="This point is 66% from the left and 50% from the top"  opacity="0.7"/>
+  <a-point x="50%" y="50%" content="This point is 50% from the left and 50% from the top"  opacity="0.7"/>
   <!-- Customize Point Label (default is empty) -->
   <a-point x="25%" y="75%" content="This point is 25% from the left and 75% from the top" label="1"/>
   <!-- Customize Text Color (default color is black) -->
   <a-point x="50%" y="75%" content="This point is 50% from the left and 75% from the top"  textColor="white" color="black" label="2" opacity="1"/>
   <!-- Customize Font Size (default font size is 14) -->
   <a-point x="75%" y="75%" content="This point is 75% from the left and 75% from the top"  fontSize="30" label="3"/>
+  <!-- Customize Label (default is a rounded button) -->
+  <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
+    <span class="badge bg-primary">Badge label</span>
+  </a-point>
+</annotate>
+</variable>
+</include>
+
+**Customising shapes for Annotate Point** <br> 
+
+Annotate Points supports different shapes and customisation. 
+
+The default shape used is a rounded button.
+
+<box type="warning" seamless>
+When using a customised shape, the options shape, color and opacity will not work. 
+
+Style the shape to achieve the same effect.
+</box>
+
+<include src="codeAndOutput.md" boilerplate>
+<variable name="code">
+
+<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+  <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
+    <span class="badge bg-primary">Badge label</span>
+  </a-point>
+  <a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top">
+    <pic src="../../images/deer.jpg" width="50" height="50">
+  </a-point>
+  <!-- Customised Annotate Point with styling-->
+  <a-point x="50%" y="50%" content="This point is 25% from the left and 50% from the top">
+    <div style="opacity: 90%; color: red">Custom</div>
+  </a-point>
 </annotate>
 </variable>
 </include>
@@ -119,21 +153,21 @@ Here we showcase some use cases of the Annotate feature.
 
 ****`<a-point>` Options****
 
-| Name      | Type     | Default     | Description                                                                                                                              |
-| --------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| x         | `String` |        | **This must be specified.**<br>The x-coordinate of the point.<br>Supports range of values from `0%` to `100%`.           |
-| y         | `String` |        | **This must be specified.**<br>The y-coordinate of the point.<br>Supports range of values from `0%` to `100%`.           |
-| content   | `String` | `''`        | Annotate Point content.<br>The annotation content will be omitted if this is not provided. |
-| header    | `String` | `''`        | Annotate Point header.<br>The header will be omitted if this is not provided.                            |
-| trigger   | `String` | `click`     | Popover trigger type.<br>Supports: `click`, `focus`, `hover`, or any space-separated combination of these.                       |
-| placement | `String` | `top`       | Position of the Popover.<br>Supports: `top`, `left`, `right`, `bottom`.                                                              |
-| label     | `String` | `''`        | The label shown on the point itself.<br>The label will be omitted if this is not provided.<br>Note that labels should not be too long as they might overflow out of the point.                                       |
-| size      | `String` | `'40'`      | The size of the point in pixels.                                                                                                         |
-| color     | `String` | `'green'`   | The color of the point.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc.                |
-| opacity   | `String` | `'0.3'`     | The opacity of the point.<br>Supports range of values from `0` to `1`.                                                                   |
-| fontSize  | `String` | `'14'`      | The font size of the label.<br>Supports any pixel size smaller than size of the point.                                                   |
-| textColor | `String` | `'black'`   | The color of the label.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc.                  |
-| legend    | `String` | `'popover'` | The position of the Annotate Point content and header.<br>Supports: `popover`, `bottom`, `both`.                                                      |
+| Name      | Type     | Default     | Description                                                                                                                                                                   |
+| --------- | -------- | ----------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| x         | `String` |        | **This must be specified.**<br>The x-coordinate of the point.<br>Supports range of values from `0%` to `100%`.                                                                |
+| y         | `String` |        | **This must be specified.**<br>The y-coordinate of the point.<br>Supports range of values from `0%` to `100%`.                                                                |
+| content   | `String` | `''`        | Annotate Point content.<br>The annotation content will be omitted if this is not provided.                                                                                    |
+| header    | `String` | `''`        | Annotate Point header.<br>The header will be omitted if this is not provided.                                                                                                 |
+| trigger   | `String` | `click`     | Popover trigger type.<br>Supports: `click`, `focus`, `hover`, or any space-separated combination of these.                                                                    |
+| placement | `String` | `top`       | Position of the Popover.<br>Supports: `top`, `left`, `right`, `bottom`.                                                                                                       |
+| label     | `String` | `''`        | The label shown on the point itself.<br>The label will be omitted if this is not provided.<br>Note that labels should not be too long as they might overflow out of the point. |
+| size      | `String` | `'40'`      | The size of the point in pixels. <br> Does not work with customised shapes                                                                                                                                              |
+| color     | `String` | `'green'`   | The color of the point.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc. <br> Does not work with customised shapes             |
+| opacity   | `String` | `'0.3'`     | The opacity of the point.<br>Supports range of values from `0` to `1`. <br> Does not work with customised shapes                                                                                                        |
+| fontSize  | `String` | `'14'`      | The font size of the label.<br>Supports any pixel size smaller than size of the point.                                                                                        |
+| textColor | `String` | `'black'`   | The color of the label.<br>Supports any color in the CSS color format. E.g. `red`, `#ffffff`, `rgb(66, 135, 245)`, etc.                                                       |
+| legend    | `String` | `'popover'` | The position of the Annotate Point content and header.<br>Supports: `popover`, `bottom`, `both`.                                                                              |
 
 ****`<annotate>` Options****
 

diff --git a/docs/userGuide/syntax/emoji.md b/docs/userGuide/syntax/emoji.md
@@ -11,7 +11,7 @@
 
 <div class="indented">
 
-%%{{ icon_info }} The list of supported [emoji](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) and [emoticon shortcuts](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.js).%%
+%%{{ icon_info }} The list of supported [emoji](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) and [emoticon shortcuts](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/shortcuts.mjs).%%
 </div>
 
 <div id="short" class="d-none">
@@ -24,4 +24,4 @@
 <div id="examples" class="d-none">
 
 :+1: :exclamation: :x: :construction: :) :/ :D
-</div>
+</div>
diff --git a/packages/cli/test/functional/test_site/expected/markbind/css/codeblock-dark.min.css b/packages/cli/test/functional/test_site/expected/markbind/css/codeblock-dark.min.css
diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.html b/packages/cli/test/functional/test_site/expected/testAnnotate.html
@@ -266,6 +266,18 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
           <a-point x="50%" y="50%" content="some test text" label="5" legend="both" header="some test text"></a-point>
           <a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"></a-point>
         </annotate>
+        <p><strong>Annotate Point customised shapes</strong></p>
+        <annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
+          <a-point x="25%" y="25%">
+            <span class="badge rounded-pill bg-primary">Label</span>
+          </a-point>
+          <a-point x="50%" y="25%">
+            <pic src="/test_site/images/deer.jpg" width="50" height="50"></pic>
+          </a-point>
+          <a-point x="75%" y="25%">
+            <div style="background-color: black; color: white; width: 100px; height: 50px;">Text label</div>
+          </a-point>
+        </annotate>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">

diff --git a/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js
diff --git a/packages/cli/test/functional/test_site/testAnnotate.md b/packages/cli/test/functional/test_site/testAnnotate.md
@@ -70,3 +70,16 @@
   <a-point x="50%" y="50%" content="some test text"  label="5" legend="both" header="some test text"/>
   <a-point x="75%" y="50%" content="some test text"  label="6" legend="both" header="some test text"/>
 </annotate>
+
+**Annotate Point customised shapes**
+<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
+    <a-point x="25%" y="25%">
+        <span class="badge rounded-pill bg-primary">Label</span>
+    </a-point>
+    <a-point x="50%" y="25%">
+        <pic src="./images/deer.jpg" width="50" height="50" />
+    </a-point>
+    <a-point x="75%" y="25%">
+        <div style="background-color: black; color: white; width: 100px; height: 50px;">Text label</div>
+    </a-point>
+</annotate>
diff --git a/...cli/test/functional/test_site_algolia_plugin/expected/markbind/css/codeblock-dark.min.css b/...cli/test/functional/test_site_algolia_plugin/expected/markbind/css/codeblock-dark.min.css
diff --git a/packages/cli/test/functional/test_site_convert/test_basic_convert/expected/404.html b/packages/cli/test/functional/test_site_convert/test_basic_convert/expected/404.html
@@ -29,7 +29,7 @@
     <header sticky>
       <navbar placement="top" type="dark">
         <template #brand><a href="/index.html" title="Home" class="navbar-brand">
-            <i class="far fa-file-image"></i></a></template>
+            <i class="fa-solid fa-house"></i></a></template>
         <li><a href="/index.html" class="nav-link">HOME</a></li>
         <li><a href="/about.html" class="nav-link">ABOUT</a></li>
         <template #right>