diff --git a/website/.prettierignore b/website/.prettierignore
index 06e5e2c7..ebcd6143 100644
--- a/website/.prettierignore
+++ b/website/.prettierignore
@@ -8,6 +8,7 @@
*.styl
*.vue
*.xml
+*.otf
dist
pnpm-lock.yaml
cache
diff --git a/website/package.json b/website/package.json
index 75be0ffd..c29ccc16 100644
--- a/website/package.json
+++ b/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"
}
}
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 6eaa4f43..50820e0d 100644
--- a/website/pnpm-lock.yaml
+++ b/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
diff --git a/website/src/.vitepress/config/markdownConfig.ts b/website/src/.vitepress/config/markdownConfig.ts
index fd723c79..5b6e009a 100644
--- a/website/src/.vitepress/config/markdownConfig.ts
+++ b/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(imgLazyload),
- md.use(imgMark),
- md.use(imgSize),
- md.use(include, {
- currentPath: (env) => env.filePath,
- }),
- md.use(tabsMarkdownPlugin);
+ md.use(figure),
+ md.use(imgLazyload),
+ md.use(imgMark),
+ md.use(imgSize),
+ md.use(include, {
+ currentPath: (env) => env.filePath,
+ }),
+ md.use(tabsMarkdownPlugin);
+
+ md.use(shortcode_plugin, shortcodes);
},
+
};
export default markdownConfig;
diff --git a/website/src/.vitepress/config/navigation/sidebar.ts b/website/src/.vitepress/config/navigation/sidebar.ts
index 02093796..00696ce7 100644
--- a/website/src/.vitepress/config/navigation/sidebar.ts
+++ b/website/src/.vitepress/config/navigation/sidebar.ts
@@ -5,6 +5,7 @@ const sidebar = {
"/forks/": defaultSidebar(),
"/changelogs/": defaultSidebar(),
"/news/": defaultSidebar(),
+ "/sandbox/": defaultSidebar(),
};
function defaultSidebar() {
diff --git a/website/src/.vitepress/config/shortcodes.ts b/website/src/.vitepress/config/shortcodes.ts
new file mode 100644
index 00000000..407cead7
--- /dev/null
+++ b/website/src/.vitepress/config/shortcodes.ts
@@ -0,0 +1,54 @@
+const navigationMappings = {
+ more: {
+ name: "More",
+ title: "More menu",
+ icon: ``,
+ },
+ settings: {
+ name: "Settings",
+ title: "Settings menu",
+ icon: ``,
+ dependsOn: "more",
+ },
+ reader: {
+ name: "Reader",
+ title: "Reader menu",
+ icon: ``,
+ dependsOn: "settings",
+ },
+ advanced: {
+ name: "Advanced",
+ title: "Advanced menu",
+ icon: ``,
+ dependsOn: "settings",
+ },
+};
+
+function generateNavigationHtml(navKey) {
+ const navData = navigationMappings[navKey];
+
+ if (!navData) {
+ return "Unsupported Navigation!";
+ }
+
+ const { name, title, icon, dependsOn } = navData;
+
+ let html = `${icon}${name}`;
+
+ 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;
diff --git a/website/src/.vitepress/theme/styles/base.styl b/website/src/.vitepress/theme/styles/base.styl
index 08a06e0e..b89532d8 100644
--- a/website/src/.vitepress/theme/styles/base.styl
+++ b/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 vertically */
+ }
+
+ svg {
+ fill: currentColor
+ height: 1em
+ width: 1em
+ display: inline-block
+ margin-right: 4px
+ }
+}
diff --git a/website/src/sandbox/index.md b/website/src/sandbox/index.md
new file mode 100644
index 00000000..fde50294
--- /dev/null
+++ b/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