Add early shortcodes

website/.prettierignore

@@ -8,6 +8,7 @@
 *.styl
 *.vue
 *.xml
+*.otf
 dist
 pnpm-lock.yaml
 cache

website/package.json

@@ -80,6 +80,7 @@
 		"element-plus": "^2.3.12",
 		"lodash.groupby": "^4.6.0",
 		"markdown-it": "^13.0.1",
+		"markdown-it-shortcode-tag": "^1.1.0",
 		"moment": "^2.29.4"
 	}
 }

website/pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@iconify-prerendered/vue-mdi':
     specifier: ^0.23.1689058119
@@ -25,6 +29,9 @@ dependencies:
   markdown-it:
     specifier: ^13.0.1
     version: 13.0.1
+  markdown-it-shortcode-tag:
+    specifier: ^1.1.0
+    version: 1.1.0
   moment:
     specifier: ^2.29.4
     version: 2.29.4
@@ -3385,6 +3392,11 @@ packages:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
     dev: true
 
+  /markdown-it-shortcode-tag@1.1.0:
+    resolution: {integrity: sha512-6qVQHmfVYMYlO2HebbF6ydXoTpOl3jPJvw6RyPnWaGJLSXdxlIJ7ihyzzbXNNHkZlQPfoDehDQYMfqeOv1KwgQ==}
+    engines: {node: '>=4.0'}
+    dev: false
+
   /markdown-it@13.0.1:
     resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
     hasBin: true
@@ -5010,7 +5022,3 @@ packages:
   /yoga-wasm-web@0.3.3:
     resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
     dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false

website/src/.vitepress/config/markdownConfig.ts

@@ -7,19 +7,24 @@ import { imgMark } from "@mdit/plugin-img-mark";
 import { imgSize } from "@mdit/plugin-img-size";
 import { include } from "@mdit/plugin-include";
 import { tabsMarkdownPlugin } from "vitepress-plugin-tabs";
+import shortcode_plugin from "markdown-it-shortcode-tag";
+import shortcodes from "./shortcodes";
 
 const markdownConfig: MarkdownOptions = {
 	config: (md) => {
 		md.use(attrs),
-			md.use(figure),
+		md.use(figure),
-			md.use(imgLazyload),
+		md.use(imgLazyload),
-			md.use(imgMark),
+		md.use(imgMark),
-			md.use(imgSize),
+		md.use(imgSize),
-			md.use(include, {
+		md.use(include, {
-				currentPath: (env) => env.filePath,
+			currentPath: (env) => env.filePath,
-			}),
+		}),
-			md.use(tabsMarkdownPlugin);
+		md.use(tabsMarkdownPlugin);
+
+		md.use(shortcode_plugin, shortcodes);
 	},
+
 };
 
 export default markdownConfig;

website/src/.vitepress/config/navigation/sidebar.ts

@@ -5,6 +5,7 @@ const sidebar = {
 	"/forks/": defaultSidebar(),
 	"/changelogs/": defaultSidebar(),
 	"/news/": defaultSidebar(),
+	"/sandbox/": defaultSidebar(),
 };
 
 function defaultSidebar() {

website/src/.vitepress/config/shortcodes.ts

@@ -0,0 +1,54 @@
+const navigationMappings = {
+    more: {
+        name: "More",
+		title: "More menu",
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>dots-horizontal</title><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>`,
+    },
+    settings: {
+        name: "Settings",
+		title: "Settings menu",
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cog</title><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>`,
+        dependsOn: "more",
+    },
+    reader: {
+        name: "Reader",
+		title: "Reader menu",
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>book-open-outline</title><path d="M21,4H3A2,2 0 0,0 1,6V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V6A2,2 0 0,0 21,4M3,19V6H11V19H3M21,19H13V6H21V19M14,9.5H20V11H14V9.5M14,12H20V13.5H14V12M14,14.5H20V16H14V14.5Z" /></svg>`,
+        dependsOn: "settings",
+    },
+    advanced: {
+        name: "Advanced",
+		title: "Advanced menu",
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>code-tags</title><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" /></svg>`,
+        dependsOn: "settings",
+    },
+};
+
+function generateNavigationHtml(navKey) {
+    const navData = navigationMappings[navKey];
+
+    if (!navData) {
+        return "<strong style='color:var(--vp-c-danger-1)'>Unsupported Navigation!</strong>";
+    }
+
+    const { name, title, icon, dependsOn } = navData;
+
+    let html = `<span class='shortcode navigation ${navKey}' title='${title}'>${icon}<span class="name">${name}</span></span>`;
+
+    if (dependsOn) {
+        html = generateNavigationHtml(dependsOn) + ` → ` + html;
+    }
+
+    return html;
+}
+
+const shortcodes = {
+    nav: {
+        render: function (attrs, env) {
+            const { method, to } = attrs;
+            return generateNavigationHtml(to);
+        },
+    },
+};
+
+export default shortcodes;

website/src/.vitepress/theme/styles/base.styl

@@ -187,3 +187,29 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
 		text-underline-offset: 2px
 	}
 }
+
+/**
+ * Component: Shortcodes
+ * -------------------------------------------------------------------------- */
+.navigation {
+	color: var(--vp-c-text-2)
+	font-weight: 600
+
+	&:hover {
+		color: var(--vp-c-text-1)
+		cursor: help
+	}
+
+	svg,
+	span.name {
+		vertical-align: middle; /* Align both SVG and <span> vertically */
+	}
+
+	svg {
+		fill: currentColor
+		height: 1em
+		width: 1em
+		display: inline-block
+		margin-right: 4px
+	}
+}

website/src/sandbox/index.md

@@ -0,0 +1,20 @@
+---
+title: Sandbox
+description: Area to test and demonstrate different features and capabilities.
+---
+
+# Sandbox
+
+## Shortcodes
+
+::: info Example
+To find all available menus, go to <nav to="more">.
+:::
+
+::: info Example: Deep nesting
+Ensure **Skip filtered chapters** is enabled at <nav to="reader"> under the section Reading.
+:::
+
+::: info Example: Deep nesting 2
+In <nav to="advanced">, try **Clear cache** and **Clear cookies**.
+:::