From 4f2431c3067f7b6dfd72c8f89af8b48840c4be72 Mon Sep 17 00:00:00 2001 From: Soitora Date: Tue, 5 Sep 2023 22:29:44 +0200 Subject: [PATCH] Add early shortcodes --- website/.prettierignore | 1 + website/package.json | 1 + website/pnpm-lock.yaml | 16 ++++-- .../src/.vitepress/config/markdownConfig.ts | 21 +++++--- .../.vitepress/config/navigation/sidebar.ts | 1 + website/src/.vitepress/config/shortcodes.ts | 54 +++++++++++++++++++ website/src/.vitepress/theme/styles/base.styl | 26 +++++++++ website/src/sandbox/index.md | 20 +++++++ 8 files changed, 128 insertions(+), 12 deletions(-) create mode 100644 website/src/.vitepress/config/shortcodes.ts create mode 100644 website/src/sandbox/index.md 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: `dots-horizontal`, + }, + settings: { + name: "Settings", + title: "Settings menu", + icon: `cog`, + dependsOn: "more", + }, + reader: { + name: "Reader", + title: "Reader menu", + icon: `book-open-outline`, + dependsOn: "settings", + }, + advanced: { + name: "Advanced", + title: "Advanced menu", + icon: `code-tags`, + 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