MarkBind · yihao03 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -802,6 +802,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "harjun751",
+      "name": "Arjun",
+      "avatar_url": "https://avatars.githubusercontent.com/u/57029562?v=4",
+      "profile": "https://github.com/Harjun751",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "MoshiMoshiMochi",
+      "name": "MoshiMoshiMochi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/73746196?v=4",
+      "profile": "https://github.com/MoshiMoshiMochi",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

diff --git a/README.md b/README.md
@@ -141,6 +141,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/IanCheah"><img src="https://avatars.githubusercontent.com/u/103352463?v=4?s=100" width="100px;" alt="IanCheah"/><br /><sub><b>IanCheah</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=IanCheah" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/yyccbb"><img src="https://avatars.githubusercontent.com/u/35594369?v=4?s=100" width="100px;" alt="yyccbb"/><br /><sub><b>yyccbb</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=yyccbb" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Harjun751"><img src="https://avatars.githubusercontent.com/u/57029562?v=4?s=100" width="100px;" alt="Arjun"/><br /><sub><b>Arjun</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=harjun751" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/MoshiMoshiMochi"><img src="https://avatars.githubusercontent.com/u/73746196?v=4?s=100" width="100px;" alt="MoshiMoshiMochi"/><br /><sub><b>MoshiMoshiMochi</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=MoshiMoshiMochi" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/docs/about.md b/docs/about.md
@@ -146,6 +146,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/IanCheah"><img src="https://avatars.githubusercontent.com/u/103352463?v=4?s=100" width="100px;" alt="IanCheah"/><br /><sub><b>IanCheah</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=IanCheah" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/yyccbb"><img src="https://avatars.githubusercontent.com/u/35594369?v=4?s=100" width="100px;" alt="yyccbb"/><br /><sub><b>yyccbb</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=yyccbb" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Harjun751"><img src="https://avatars.githubusercontent.com/u/57029562?v=4?s=100" width="100px;" alt="Arjun"/><br /><sub><b>Arjun</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=harjun751" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/MoshiMoshiMochi"><img src="https://avatars.githubusercontent.com/u/73746196?v=4?s=100" width="100px;" alt="MoshiMoshiMochi"/><br /><sub><b>MoshiMoshiMochi</b></sub></a><br /><a href="https://github.com/MarkBind/markbind/commits?author=MoshiMoshiMochi" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

diff --git a/docs/devGuide/design/architecture.md b/docs/devGuide/design/architecture.md
@@ -60,5 +60,61 @@ Its syntax is also the most compatible and independent of the other stages.
 
 3. Having processed possibly conflicting Nunjucks and Markdown syntax, HTML is then processed last.
 
+### Demonstrating the content processing flow
+To demonstrate the content processing flow, let's take a look at a small toy MarkBind file:
+```markdown
+{% raw %}{% set myVariable = "Item" %}
+
+# A basic level 1 header
+There will be 5 items here:
+<ul>
+{% for item in [1, 2, 3, 4] %}
+   <li>{{ myVariable }} #{{ item }}</li>
+{% endfor %}
+</ul>
+
+A link that gets [converted](contents/topic1.md)
+
+<include src="contents/topic1.md" />{% endraw %}
+```
+
+At the first step of the processing flow, the `VariableProcessor` converts Nunjucks template code into HTML:
+```markdown
+{% raw %}# A basic level 1 header
+There will be 5 items here:
+<ul>
+   <li>Item #1</li>
+   <li>Item #2</li>
+   <li>Item #3</li>
+   <li>Item #4</li>
+</ul>
+
+A link that gets [converted](contents/topic1.md)
+
+<include src="contents/topic1.md" />{% endraw %}
+```
+Notice that `myVariable` is consumed and that the unordered list is expanded.
+
+Next, the NodeProcessor converts Markdown to HTML:
+```markdown
+{% raw %}<h1 id="a-basic-level-1-header">A basic level 1 header<a class="fa fa-anchor" href="#a-basic-level-1-header" onclick="event.stopPropagation()"></a></h1>
+<p>There will be 5 items here:</p>
+<ul>
+   <li>Item #1</li>
+   <li>Item #2</li>
+   <li>Item #3</li>
+   <li>Item #4</li></ul>
+<p>A link that gets <a href="/contents/topic1.html">converted</a></p>
+<div>
+<br>
+<h1 id="topic-1">Topic 1<a class="fa fa-anchor" href="#topic-1" onclick="event.stopPropagation()"></a></h1>
+<blockquote>
+<p>This is a placeholder page - more content to be added.</p></blockquote></div>{% endraw %}
+```
+It does this by traversing the node graph and matching node titles to their HTML equivalents. This includes custom components as well (e.g. `<panel .. />`).
+`include` nodes are recursively traversed and converted.
+
+In the final step, the processed content is injected into the page layout and the final output `.html` file is generated.
+
 {% from "njk/common.njk" import previous_next %}
-{{ previous_next('projectStructure', 'serverSideRendering') }}
+{{ previous_next('projectStructure', 'serverSideRendering') }}
diff --git a/docs/devGuide/design/projectStructure.md b/docs/devGuide/design/projectStructure.md
@@ -122,7 +122,7 @@ Some custom components and directives are also added for MarkBind's use.
 
   * Tooltip.vue (built on floating-vue's [Tooltip](https://floating-vue.starpad.dev/guide/component.html#tooltip) component)
 
-  * Trigger.vue (built on vue-final-modal's [$vfm API](https://vue-final-modal.org/api#api) and Floating Vue's Menus and Tooltips)
+  * Trigger.vue (built on vue-final-modal's [useVfm API](https://vue-final-modal.org/api/composables/use-vfm) and Floating Vue's Menus and Tooltips)
 
 * **MarkBind components ported from [MarkBind/vue-strap](https://github.com/MarkBind/vue-strap)**
 

diff --git a/docs/userGuide/syntax/cardstacks.md b/docs/userGuide/syntax/cardstacks.md
@@ -135,6 +135,113 @@ In the example given below, a Card Stack is used to show a list of questions and
 
 The example above also illustrates how to use the `keywords` attribute to specify additional search terms for a card.
 
+### Custom Tag Order and Colors
+
+You can customize the order and colors of tags by using a `<tags>` element inside the `cardstack`:
+
+<include src="codeAndOutputSeparate.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<cardstack searchable>
+  <tags>
+    <tag name="Success" color="#28a745" />
+    <tag name="Perseverance" color="#17a2b8" />
+    <tag name="Motivation" color="#ffc107" />
+    <tag name="Hard Work" color="#dc3545" />
+    <tag name="Happiness" color="#6f42c1" />
+    <tag name="Mindset" color="#fd7e14" />
+  </tags>
+  <card header="**Winston Churchill**" tag="Success, Perseverance">
+    Success is not final, failure is not fatal: it is the courage to continue that counts
+  </card>
+  <card header="**Albert Einstein**" tag="Success, Perseverance">
+    In the middle of every difficulty lies opportunity
+  </card>
+  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
+    Do what you can, with what you have, where you are
+  </card>
+  <card header="**Steve Jobs**" tag="Happiness, Mindset">
+    Your time is limited, so don't waste it living someone else's life
+  </card>
+</cardstack>
+</variable>
+<variable name="output">
+<cardstack searchable>
+  <tags>
+    <tag name="Success" color="#28a745" />
+    <tag name="Perseverance" color="#17a2b8" />
+    <tag name="Motivation" color="#ffc107" />
+    <tag name="Hard Work" color="#dc3545" />
+    <tag name="Happiness" color="#6f42c1" />
+    <tag name="Mindset" color="#fd7e14" />
+  </tags>
+  <card header="**Winston Churchill**" tag="Success, Perseverance">
+    Success is not final, failure is not fatal: it is the courage to continue that counts
+  </card>
+  <card header="**Albert Einstein**" tag="Success, Perseverance">
+    In the middle of every difficulty lies opportunity
+  </card>
+  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
+    Do what you can, with what you have, where you are
+  </card>
+  <card header="**Steve Jobs**" tag="Happiness, Mindset">
+    Your time is limited, so don't waste it living someone else's life
+  </card>
+</cardstack>
+</variable>
+</include>
+
+You can also use Bootstrap color names instead of hex colors:
+
+<include src="codeAndOutputSeparate.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<cardstack searchable>
+  <tags>
+    <tag name="Success" color="success" />
+    <tag name="Perseverance" color="info" />
+    <tag name="Motivation" color="warning" />
+    <tag name="Hard Work" color="danger" />
+  </tags>
+  <card header="**Winston Churchill**" tag="Success, Perseverance">
+    Success is not final, failure is not fatal: it is the courage to continue that counts
+  </card>
+  <card header="**Albert Einstein**" tag="Success, Perseverance">
+    In the middle of every difficulty lies opportunity
+  </card>
+  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
+    Do what you can, with what you have, where you are
+  </card>
+</cardstack>
+</variable>
+<variable name="output">
+<cardstack searchable>
+  <tags>
+    <tag name="Success" color="success" />
+    <tag name="Perseverance" color="info" />
+    <tag name="Motivation" color="warning" />
+    <tag name="Hard Work" color="danger" />
+  </tags>
+  <card header="**Winston Churchill**" tag="Success, Perseverance">
+    Success is not final, failure is not fatal: it is the courage to continue that counts
+  </card>
+  <card header="**Albert Einstein**" tag="Success, Perseverance">
+    In the middle of every difficulty lies opportunity
+  </card>
+  <card header="**Theodore Roosevelt**" tag="Motivation, Hard Work">
+    Do what you can, with what you have, where you are
+  </card>
+</cardstack>
+</variable>
+</include>
+
+The `<tags>` element allows you to:
+- Specify the order in which tags appear in the filter badges
+- Assign custom colors to each tag using either:
+  - Hex format (e.g., `#28a745`)
+  - Bootstrap color names (e.g., `success`, `danger`, `primary`, `warning`, `info`, `secondary`, `light`, `dark`)
+- Any tags used in cards but not defined in `<tags>` will appear after the defined tags with default colors
+
 ****Options****
 
 `cardstack`:
@@ -143,6 +250,15 @@ Name | Type | Default | Description
 blocks | `String` | `2` | Number of `card` columns per row.<br> Supports: `1`, `2`, `3`, `4`, `6`
 searchable | `Boolean` | `false` | Whether the card stack is searchable.
 
+`tags` (optional):
+A container element inside `cardstack` to define tag ordering and colors.
+
+`tag` (inside `tags` element):
+Name | Type | Default | Description
+--- | --- | --- | ---
+name | `String` | (required) | The name of the tag (must match tags used in cards).
+color | `String` | (auto) | Custom color for the tag.<br>Supports hex format (e.g., `#28a745`) or Bootstrap color names (e.g., `success`, `danger`, `primary`).<br>If not specified, uses default Bootstrap color scheme.
+
 `card`:
 Name | Type | Default | Description
 --- | --- | --- | ---