mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
docs: update agent skills
This commit is contained in:
pengzhanbo
parent
f6da09df54
commit
50fa747ec1
@ -1,6 +1,6 @@
|
||||
---
|
||||
name: vuepress-plume-config
|
||||
description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config.
|
||||
description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config, including collections, navbar, sidebar, locales, plugins, and all theme features like search, comments, watermark, encryption, bulletin, copyright, etc.
|
||||
---
|
||||
|
||||
# VuePress Plume Config Skill
|
||||
@ -10,18 +10,24 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
**When to Invoke**
|
||||
|
||||
- Initialize or update Plume theme configuration
|
||||
- Dynamically generate themeConfig, collections, navbar, sidebar, locales according to input
|
||||
- Configure collections (post/doc types), navbar, sidebar, locales
|
||||
- Setup plugins (search, comments, watermark, etc.)
|
||||
- Configure encryption, bulletin, copyright, and other advanced features
|
||||
- Write the generated configuration into a specified target file
|
||||
|
||||
**Documentation Sources**
|
||||
|
||||
- [Theme Configuration](https://theme-plume.vuejs.press/config/theme/index.md)
|
||||
- [Locales Configuration](https://theme-plume.vuejs.press/config/locales/index.md)
|
||||
- [Collections Configuration](https://theme-plume.vuejs.press/config/collections/index.md)
|
||||
- [Navbar](https://theme-plume.vuejs.press/config/navigation/index.md)
|
||||
- [Sidebar](https://theme-plume.vuejs.press/config/sidebar/index.md)
|
||||
- [Markdown](https://theme-plume.vuejs.press/config/markdown/index.md)
|
||||
- [Plugins](https://theme-plume.vuejs.press/config/plugins/index.md)
|
||||
- [Theme Configuration](https://theme-plume.vuejs.press/config/theme/)
|
||||
- [Locales Configuration](https://theme-plume.vuejs.press/config/locales/)
|
||||
- [Collections Configuration](https://theme-plume.vuejs.press/config/collections/)
|
||||
- [Navbar](https://theme-plume.vuejs.press/config/navigation/)
|
||||
- [Sidebar](https://theme-plume.vuejs.press/config/sidebar/)
|
||||
- [Markdown](https://theme-plume.vuejs.press/config/markdown/)
|
||||
- [Plugins](https://theme-plume.vuejs.press/config/plugins/)
|
||||
- [Frontmatter - Basic](https://theme-plume.vuejs.press/config/frontmatter/basic/)
|
||||
- [Frontmatter - Post](https://theme-plume.vuejs.press/config/frontmatter/post/)
|
||||
- [Frontmatter - Home](https://theme-plume.vuejs.press/config/frontmatter/home/)
|
||||
- [Frontmatter - Friend](https://theme-plume.vuejs.press/config/frontmatter/friend/)
|
||||
|
||||
## Input Schema
|
||||
|
||||
@ -43,7 +49,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"type": "object",
|
||||
"description": "VuePress site-level config (config.ts/js only)",
|
||||
"properties": {
|
||||
"lang": { "type": "string", "description": "Default language" },
|
||||
"lang": { "type": "string", "description": "Default language, e.g., 'zh-CN', 'en-US'", "default": "zh-CN" },
|
||||
"title": { "type": "string", "description": "Site title" },
|
||||
"description": { "type": "string", "description": "Site description" },
|
||||
"base": { "type": "string", "description": "Deployment base path like /subpath/" },
|
||||
@ -66,12 +72,13 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"type": "object",
|
||||
"description": "Plume theme configuration (themeConfig)",
|
||||
"properties": {
|
||||
"hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO)" },
|
||||
"hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO). Not supported in plume.config.ts" },
|
||||
"configFile": { "type": "string", "default": "", "description": "Custom theme config file path. Not supported in plume.config.ts" },
|
||||
"autoFrontmatter": {
|
||||
"type": ["object", "boolean"],
|
||||
"default": { "permalink": true, "createTime": true, "title": true },
|
||||
"properties": {
|
||||
"permalink": { "type": "boolean", "default": true },
|
||||
"permalink": { "type": ["boolean", "string"], "default": true, "description": "true|false|'filepath'" },
|
||||
"createTime": { "type": "boolean", "default": true },
|
||||
"title": { "type": "boolean", "default": true }
|
||||
},
|
||||
@ -81,22 +88,23 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"type": ["string", "boolean"],
|
||||
"enum": ["memory", "filesystem", false],
|
||||
"default": "filesystem",
|
||||
"description": "Compilation cache (config.ts/js only)"
|
||||
"description": "Compilation cache: 'memory', 'filesystem', or false. Not supported in plume.config.ts"
|
||||
},
|
||||
"docsRepo": { "type": "string", "default": "", "description": "Docs repository url" },
|
||||
"docsRepo": { "type": "string", "default": "", "description": "Docs repository url for edit link" },
|
||||
"docsBranch": { "type": "string", "default": "", "description": "Docs repository branch" },
|
||||
"docsDir": { "type": "string", "default": "", "description": "Docs directory (relative to repo root)" },
|
||||
"editLink": { "type": "boolean", "default": true, "description": "Enable edit link (config.ts/js only)" },
|
||||
"editLink": { "type": "boolean", "default": true, "description": "Enable edit link. Not supported in plume.config.ts" },
|
||||
"editLinkPattern": { "type": "string", "default": "", "description": "Edit link pattern, e.g., ':repo/edit/:branch/:path'" },
|
||||
"lastUpdated": {
|
||||
"type": ["object", "boolean"],
|
||||
"default": { "formatOptions": { "dateStyle": "short", "timeStyle": "short" } },
|
||||
"properties": {
|
||||
"formatOptions": { "type": "object", "description": "Intl.DateTimeFormatOptions & { forceLocale?: boolean }" }
|
||||
},
|
||||
"description": "Last updated time (config.ts/js only)"
|
||||
"description": "Last updated time. Not supported in plume.config.ts"
|
||||
},
|
||||
"contributors": { "type": ["boolean", "object"], "default": true, "description": "Show contributors (config.ts/js only)" },
|
||||
"changelog": { "type": ["boolean", "object"], "default": false, "description": "Show page change history (config.ts/js only)" },
|
||||
"contributors": { "type": ["boolean", "object"], "default": true, "description": "Show contributors. Not supported in plume.config.ts" },
|
||||
"changelog": { "type": ["boolean", "object"], "default": false, "description": "Show page change history. Not supported in plume.config.ts" },
|
||||
"home": { "type": ["string", "boolean"], "default": "/", "description": "Home path" },
|
||||
"logo": { "type": ["string", "boolean"], "default": false, "description": "Navbar logo" },
|
||||
"logoDark": { "type": ["string", "boolean"], "default": false, "description": "Navbar logo for dark mode" },
|
||||
@ -104,19 +112,19 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"type": ["string", "boolean"],
|
||||
"enum": [true, false, "dark", "force-dark"],
|
||||
"default": true,
|
||||
"description": "Dark mode toggle and default mode"
|
||||
"description": "Dark mode: true (auto), false (disabled), 'dark' (default dark), 'force-dark' (forced dark)"
|
||||
},
|
||||
"profile": {
|
||||
"type": "object",
|
||||
"default": {},
|
||||
"description": "Site profile info",
|
||||
"description": "Site profile info for blogger display",
|
||||
"properties": {
|
||||
"avatar": { "type": "string" },
|
||||
"name": { "type": "string" },
|
||||
"description": { "type": "string" },
|
||||
"circle": { "type": "boolean" },
|
||||
"location": { "type": "string" },
|
||||
"organization": { "type": "string" },
|
||||
"avatar": { "type": "string", "description": "Avatar URL" },
|
||||
"name": { "type": "string", "description": "Blogger name" },
|
||||
"description": { "type": "string", "description": "Description/motto" },
|
||||
"circle": { "type": "boolean", "description": "Circle avatar" },
|
||||
"location": { "type": "string", "description": "User location" },
|
||||
"organization": { "type": "string", "description": "User organization/company" },
|
||||
"layout": { "type": "string", "enum": ["left", "right"], "default": "right" }
|
||||
}
|
||||
},
|
||||
@ -127,7 +135,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"items": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"icon": { "type": ["string", "object"] },
|
||||
"icon": { "type": ["string", "object"], "description": "Iconify name or { svg: string, name?: string }" },
|
||||
"link": { "type": "string" },
|
||||
"ariaLabel": { "type": "string" }
|
||||
},
|
||||
@ -138,7 +146,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"type": "array",
|
||||
"default": ["github", "twitter", "discord", "facebook"],
|
||||
"items": { "type": "string" },
|
||||
"description": "Social links allowed to display in navbar (PC)"
|
||||
"description": "Social links allowed to display in navbar (PC only)"
|
||||
},
|
||||
"navbar": {
|
||||
"type": "array",
|
||||
@ -149,10 +157,11 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"properties": {
|
||||
"text": { "type": "string" },
|
||||
"link": { "type": "string" },
|
||||
"prefix": { "type": "string" },
|
||||
"items": { "type": "array" },
|
||||
"icon": { "type": ["string", "object"] },
|
||||
"activeMatch": { "type": "string" }
|
||||
"prefix": { "type": "string", "description": "Page prefix for group" },
|
||||
"items": { "type": "array", "description": "Nested nav items (max depth 2)" },
|
||||
"icon": { "type": ["string", "object"], "description": "Iconify icon or { svg: string }" },
|
||||
"badge": { "type": ["string", "object"], "description": "Badge text or { text, type, color, bgColor, borderColor }" },
|
||||
"activeMatch": { "type": "string", "description": "Regex pattern for active state" }
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -164,45 +173,46 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"type": "object",
|
||||
"required": ["type", "dir", "title"],
|
||||
"properties": {
|
||||
"type": { "type": "string", "enum": ["post", "doc"] },
|
||||
"dir": { "type": "string" },
|
||||
"title": { "type": "string" },
|
||||
"linkPrefix": { "type": "string" },
|
||||
"type": { "type": "string", "enum": ["post", "doc"], "description": "Collection type" },
|
||||
"dir": { "type": "string", "description": "Directory relative to source" },
|
||||
"title": { "type": "string", "description": "Collection title for breadcrumb" },
|
||||
"linkPrefix": { "type": "string", "description": "Article link prefix" },
|
||||
"tagsTheme": { "type": "string", "enum": ["colored", "gray", "brand"], "default": "colored" },
|
||||
"autoFrontmatter": { "type": ["object", "boolean"] },
|
||||
"include": { "type": "array", "items": { "type": "string" } },
|
||||
"exclude": { "type": "array", "items": { "type": "string" } },
|
||||
"include": { "type": "array", "items": { "type": "string" }, "description": "Glob patterns for included files" },
|
||||
"exclude": { "type": "array", "items": { "type": "string" }, "description": "Glob patterns for excluded files" },
|
||||
"pagination": {
|
||||
"type": ["boolean", "number", "object"],
|
||||
"properties": { "perPage": { "type": "number", "default": 15 } }
|
||||
},
|
||||
"link": { "type": "string" },
|
||||
"postList": { "type": "boolean" },
|
||||
"tags": { "type": "boolean" },
|
||||
"link": { "type": "string", "description": "Post list page link" },
|
||||
"postList": { "type": "boolean", "default": true, "description": "Enable post list page (post type only)" },
|
||||
"tags": { "type": "boolean", "default": true, "description": "Enable tags page (post type only)" },
|
||||
"tagsLink": { "type": "string" },
|
||||
"tagsText": { "type": "string" },
|
||||
"archives": { "type": "boolean" },
|
||||
"archives": { "type": "boolean", "default": true, "description": "Enable archives page (post type only)" },
|
||||
"archivesLink": { "type": "string" },
|
||||
"archivesText": { "type": "string" },
|
||||
"categories": { "type": "boolean" },
|
||||
"categories": { "type": "boolean", "default": true, "description": "Enable categories (post type only)" },
|
||||
"categoriesLink": { "type": "string" },
|
||||
"categoriesText": { "type": "string" },
|
||||
"categoriesExpand": { "type": ["number", "string"], "enum": ["deep"] },
|
||||
"categoriesExpand": { "type": ["number", "string"], "enum": ["deep"], "default": "deep" },
|
||||
"categoriesTransform": { "type": "string", "description": "Function name for categories transform" },
|
||||
"postCover": {
|
||||
"type": ["string", "object"],
|
||||
"description": "Layout or style",
|
||||
"description": "Post cover layout/style",
|
||||
"properties": {
|
||||
"layout": { "type": "string", "enum": ["left", "right", "odd-left", "odd-right", "top"] },
|
||||
"ratio": { "type": "string" },
|
||||
"width": { "type": "number" },
|
||||
"compact": { "type": "boolean" }
|
||||
"ratio": { "type": ["number", "string"], "description": "Aspect ratio like '16:9' or number" },
|
||||
"width": { "type": "number", "default": 240 },
|
||||
"compact": { "type": "boolean", "default": false }
|
||||
}
|
||||
},
|
||||
"profile": { "type": ["object", "boolean"] },
|
||||
"social": { "type": ["array", "boolean"] },
|
||||
"sidebar": { "type": ["string", "array"], "description": "Doc type only" },
|
||||
"sidebarScrollbar": { "type": "boolean" },
|
||||
"sidebarCollapsed": { "type": "boolean" }
|
||||
"profile": { "type": ["object", "boolean"], "description": "Profile config for this collection" },
|
||||
"social": { "type": ["array", "boolean"], "description": "Social links for this collection" },
|
||||
"sidebar": { "type": ["string", "array"], "description": "Doc type only: 'auto' or sidebar config" },
|
||||
"sidebarScrollbar": { "type": "boolean", "default": true },
|
||||
"sidebarCollapsed": { "type": "boolean", "default": false }
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -211,13 +221,55 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"description": "Global sidebar (prefer configuring in collections)"
|
||||
},
|
||||
"sidebarScrollbar": { "type": "boolean", "default": true },
|
||||
"aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true },
|
||||
"aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true, "description": "Right sidebar/outline display" },
|
||||
"outline": { "type": ["boolean", "number", "array", "string"], "default": [2, 3], "description": "false|n|[min,max]|'deep'" },
|
||||
"transition": {
|
||||
"type": ["boolean", "object"],
|
||||
"default": true,
|
||||
"properties": { "page": { "type": "boolean", "default": true } }
|
||||
"properties": {
|
||||
"page": { "type": "boolean", "default": true, "description": "Page transition animation" },
|
||||
"postList": { "type": "boolean", "default": true, "description": "Post list transition animation" },
|
||||
"appearance": { "type": ["boolean", "string"], "default": "fade", "description": "Theme switch animation: fade, circle-clip, horizontal-clip, vertical-clip, skew-clip, blinds-vertical, blinds-horizontal, soft-blur-fade, diamond-reveal" }
|
||||
}
|
||||
},
|
||||
"footer": {
|
||||
"type": ["boolean", "object"],
|
||||
"default": false,
|
||||
"description": "Footer config",
|
||||
"properties": {
|
||||
"message": { "type": "string" },
|
||||
"copyright": { "type": "string" }
|
||||
}
|
||||
},
|
||||
"bulletin": {
|
||||
"type": ["boolean", "object"],
|
||||
"default": false,
|
||||
"description": "Bulletin/announcement board config",
|
||||
"properties": {
|
||||
"layout": { "type": "string", "enum": ["top-left", "top-right", "bottom-left", "bottom-right", "center"], "default": "top-right" },
|
||||
"border": { "type": "boolean", "default": true },
|
||||
"enablePage": { "type": ["boolean", "string"], "description": "Boolean or function name" },
|
||||
"lifetime": { "type": "string", "enum": ["session", "always", "once"], "default": "always" },
|
||||
"id": { "type": "string", "description": "Bulletin unique ID" },
|
||||
"title": { "type": "string" },
|
||||
"content": { "type": "string" },
|
||||
"contentType": { "type": "string", "enum": ["markdown", "text"], "default": "text" },
|
||||
"contentFile": { "type": "string", "description": "Path to markdown/html file" }
|
||||
}
|
||||
},
|
||||
"copyright": {
|
||||
"type": ["boolean", "string", "object"],
|
||||
"default": false,
|
||||
"description": "Copyright config: true (CC-BY-4.0), license string, or object",
|
||||
"properties": {
|
||||
"license": { "type": ["string", "object"], "description": "License: CC-BY-4.0, CC-BY-SA-4.0, CC-BY-NC-4.0, CC-BY-NC-SA-4.0, CC-BY-ND-4.0, CC-BY-NC-ND-4.0, CC0, or { name, url }" },
|
||||
"author": { "type": ["string", "object"], "description": "Author name or { name, url }" },
|
||||
"creation": { "type": "string", "enum": ["original", "translate", "reprint"], "default": "original" }
|
||||
}
|
||||
},
|
||||
"prevPage": { "type": "boolean", "default": true, "description": "Show previous page link" },
|
||||
"nextPage": { "type": "boolean", "default": true, "description": "Show next page link" },
|
||||
"createTime": { "type": ["boolean", "string"], "enum": [true, false, "only-posts"], "default": true, "description": "Show create time" },
|
||||
"locales": {
|
||||
"type": "object",
|
||||
"description": "Theme locales (texts and per-locale theme config)",
|
||||
@ -251,6 +303,10 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
"copyrightLicenseText": { "type": "string" },
|
||||
"prevPageLabel": { "type": "string" },
|
||||
"nextPageLabel": { "type": "string" },
|
||||
"encryptGlobalText": { "type": "string" },
|
||||
"encryptPageText": { "type": "string" },
|
||||
"encryptButtonText": { "type": "string" },
|
||||
"encryptPlaceholder": { "type": "string" },
|
||||
"notFound": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
@ -267,16 +323,25 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
},
|
||||
"plugins": {
|
||||
"type": "object",
|
||||
"description": "Built-in plugin options for the theme (config.ts/js only)"
|
||||
"description": "Built-in plugin options. Not supported in plume.config.ts"
|
||||
},
|
||||
"markdown": { "type": "object", "description": "Markdown options (config.ts/js only)" },
|
||||
"codeHighlighter": { "type": ["object", "boolean"], "description": "Code highlighter (config.ts/js only)" },
|
||||
"search": { "type": ["object", "boolean"], "description": "Search (config.ts/js only)" },
|
||||
"comment": { "type": ["object", "boolean"], "description": "Comments (config.ts/js only)" },
|
||||
"watermark": { "type": ["object", "boolean"], "description": "Watermark (config.ts/js only)" },
|
||||
"readingTime": { "type": ["object", "boolean"], "description": "Reading time (config.ts/js only)" },
|
||||
"copyCode": { "type": ["object", "boolean"], "description": "Copy code (config.ts/js only)" },
|
||||
"replaceAssets": { "type": ["object", "boolean"], "description": "Replace assets (config.ts/js only)" }
|
||||
"markdown": { "type": "object", "description": "Markdown options. Not supported in plume.config.ts" },
|
||||
"codeHighlighter": { "type": ["object", "boolean"], "description": "Code highlighter options. Not supported in plume.config.ts" },
|
||||
"search": { "type": ["object", "boolean"], "description": "Search config: { provider: 'local'|'algolia', ...options }. Not supported in plume.config.ts" },
|
||||
"comment": { "type": ["object", "boolean"], "description": "Comments config: { provider: 'Giscus'|'Waline'|'Twikoo'|'Artalk', ...options }. Not supported in plume.config.ts" },
|
||||
"watermark": { "type": ["object", "boolean"], "description": "Watermark config. Not supported in plume.config.ts" },
|
||||
"readingTime": { "type": ["object", "boolean"], "description": "Reading time config. Not supported in plume.config.ts" },
|
||||
"copyCode": { "type": ["object", "boolean"], "description": "Copy code config. Not supported in plume.config.ts" },
|
||||
"replaceAssets": { "type": ["object", "boolean"], "description": "Replace assets config. Not supported in plume.config.ts" },
|
||||
"encrypt": {
|
||||
"type": ["object", "boolean"],
|
||||
"description": "Encryption config. Not supported in plume.config.ts",
|
||||
"properties": {
|
||||
"global": { "type": "boolean", "default": false, "description": "Enable global site encryption" },
|
||||
"admin": { "type": "array", "items": { "type": "string" }, "description": "Admin passwords" },
|
||||
"rules": { "type": "object", "description": "Path-based encryption rules: { 'path/or/pattern': 'password' | ['password1', 'password2'] }" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -287,7 +352,7 @@ This skill generates, manages, and writes VuePress Plume theme configuration fil
|
||||
|
||||
- Parse input and validate `format` and fields
|
||||
- If `format=plume-config-ts`:
|
||||
- Only write fields supported in `.vuepress/plume.config.ts` (ignore and report fields like `plugins`, `markdown`, `search`, etc.)
|
||||
- Only write fields supported in `.vuepress/plume.config.ts` (ignore and report fields like `plugins`, `markdown`, `search`, `comment`, `watermark`, `encrypt`, etc.)
|
||||
- Generate `defineThemeConfig({ ...theme })`
|
||||
- If `format=vuepress-config-ts`:
|
||||
- Generate `defineUserConfig({ site..., theme: plumeTheme({ ...theme }) })`
|
||||
@ -305,8 +370,9 @@ import { defineThemeConfig } from 'vuepress-theme-plume'
|
||||
|
||||
export default defineThemeConfig({
|
||||
// Supported fields in plume.config.ts: hostname, home, logo, logoDark, appearance, profile, social,
|
||||
// navbarSocialInclude, navbar, collections, sidebar, sidebarScrollbar,
|
||||
// aside, outline, transition, locales, docsRepo/docsBranch/docsDir, autoFrontmatter
|
||||
// navbarSocialInclude, navbar, collections, sidebar, sidebarScrollbar, aside, outline, transition,
|
||||
// footer, bulletin, copyright, prevPage, nextPage, createTime, locales, docsRepo/docsBranch/docsDir,
|
||||
// autoFrontmatter, editLinkPattern
|
||||
})
|
||||
```
|
||||
|
||||
@ -319,7 +385,7 @@ import { plumeTheme } from 'vuepress-theme-plume'
|
||||
export default defineUserConfig({
|
||||
// Optional site-level config: lang, title, description, base, head, locales
|
||||
theme: plumeTheme({
|
||||
// Full theme config available, including plugins/markdown/search/comment etc.
|
||||
// Full theme config available, including plugins/markdown/search/comment/watermark/encrypt etc.
|
||||
})
|
||||
})
|
||||
```
|
||||
@ -340,12 +406,145 @@ module.exports = defineUserConfig({
|
||||
## Validation and Hints
|
||||
|
||||
- Check consistency between `format` and `target_file` extension
|
||||
- If `format=plume-config-ts` and input contains `plugins/markdown/codeHighlighter/search/comment/watermark/readingTime/copyCode/replaceAssets/editLink/lastUpdated/contributors/changelog/cache`:
|
||||
- Exclude these fields from output
|
||||
- Report they are only supported in `.vuepress/config.ts`/`.js`
|
||||
- If `format=plume-config-ts` and input contains fields only supported in config.ts/js:
|
||||
- Exclude these fields from output: `plugins`, `markdown`, `codeHighlighter`, `search`, `comment`, `watermark`, `readingTime`, `copyCode`, `replaceAssets`, `editLink`, `lastUpdated`, `contributors`, `changelog`, `cache`, `hostname`, `configFile`, `encrypt`
|
||||
- Report them as ignored with reasons
|
||||
- In `collections`, `type` must be `post` or `doc`; `dir` and `title` are required
|
||||
- `navbar` accepts strings (paths) and objects (with `text/link`)
|
||||
- Keys in `locales` should be path prefixes like `'/'`, `'/en/'`, `'/zh/'`
|
||||
- For `encrypt.rules`, keys can be: file paths, directory paths, URL paths, or regex patterns (starting with `^`)
|
||||
- For `copyright`, support both preset licenses (CC-BY-4.0, etc.) and custom { name, url } format
|
||||
|
||||
## Common Configuration Patterns
|
||||
|
||||
### Blog Setup
|
||||
|
||||
```json
|
||||
{
|
||||
"collections": [
|
||||
{
|
||||
"type": "post",
|
||||
"dir": "blog",
|
||||
"title": "博客",
|
||||
"link": "/blog/",
|
||||
"postCover": "right",
|
||||
"tags": true,
|
||||
"archives": true,
|
||||
"categories": true
|
||||
}
|
||||
],
|
||||
"profile": {
|
||||
"name": "博主名称",
|
||||
"description": "博主描述",
|
||||
"avatar": "/avatar.png"
|
||||
},
|
||||
"social": [
|
||||
{ "icon": "github", "link": "https://github.com/username" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Documentation Setup
|
||||
|
||||
```json
|
||||
{
|
||||
"collections": [
|
||||
{
|
||||
"type": "doc",
|
||||
"dir": "guide",
|
||||
"title": "指南",
|
||||
"sidebar": "auto"
|
||||
}
|
||||
],
|
||||
"navbar": [
|
||||
{ "text": "指南", "link": "/guide/", "icon": "mdi:book-open-outline" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Multi-language Setup
|
||||
|
||||
```json
|
||||
{
|
||||
"locales": {
|
||||
"/": {
|
||||
"selectLanguageName": "简体中文",
|
||||
"selectLanguageText": "选择语言"
|
||||
},
|
||||
"/en/": {
|
||||
"selectLanguageName": "English",
|
||||
"selectLanguageText": "Languages"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Search Configuration
|
||||
|
||||
```text
|
||||
// Local search (default)
|
||||
{
|
||||
search: {
|
||||
provider: 'local'
|
||||
}
|
||||
}
|
||||
|
||||
// Algolia DocSearch
|
||||
{
|
||||
search: {
|
||||
provider: 'algolia',
|
||||
appId: 'YOUR_APP_ID',
|
||||
apiKey: 'YOUR_API_KEY',
|
||||
indexName: 'YOUR_INDEX_NAME'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Comments Configuration
|
||||
|
||||
```text
|
||||
// Giscus
|
||||
{
|
||||
comment: {
|
||||
provider: 'Giscus',
|
||||
repo: 'owner/repo',
|
||||
repoId: '...',
|
||||
category: 'Announcements',
|
||||
categoryId: '...'
|
||||
}
|
||||
}
|
||||
|
||||
// Waline
|
||||
{
|
||||
comment: {
|
||||
provider: 'Waline',
|
||||
serverURL: 'https://your-waline-server.vercel.app'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Encryption Configuration
|
||||
|
||||
```text
|
||||
// Global encryption
|
||||
{
|
||||
encrypt: {
|
||||
global: true,
|
||||
admin: ['password1', 'password2']
|
||||
}
|
||||
}
|
||||
|
||||
// Partial encryption
|
||||
{
|
||||
encrypt: {
|
||||
rules: {
|
||||
'secret/': 'password',
|
||||
'/article/secret/': ['pass1', 'pass2'],
|
||||
'^/private/': 'private-pass'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Execution Feedback
|
||||
|
||||
@ -353,9 +552,17 @@ module.exports = defineUserConfig({
|
||||
- Summary of generated fields (collections count, navbar items, locales count)
|
||||
- Ignored fields list with reasons
|
||||
- For cache to take effect, remind removing `--clean-cache` from dev script
|
||||
- For encrypt to work properly, remind HTTPS requirement for partial content encryption
|
||||
|
||||
## References
|
||||
|
||||
- Theme: [theme.md](https://theme-plume.vuejs.press/config/theme/index.md)
|
||||
- Locales: [locales.md](https://theme-plume.vuejs.press/config/locales/index.md)
|
||||
- Collections: [collections.md](https://theme-plume.vuejs.press/config/collections/index.md)
|
||||
- Theme: [theme.md](https://theme-plume.vuejs.press/config/theme/)
|
||||
- Locales: [locales.md](https://theme-plume.vuejs.press/config/locales/)
|
||||
- Collections: [collections.md](https://theme-plume.vuejs.press/config/collections/)
|
||||
- Navbar: [navbar.md](https://theme-plume.vuejs.press/config/navigation/)
|
||||
- Sidebar: [sidebar.md](https://theme-plume.vuejs.press/config/sidebar/)
|
||||
- Markdown: [markdown.md](https://theme-plume.vuejs.press/config/markdown/)
|
||||
- Plugins: [plugins/README.md](https://theme-plume.vuejs.press/config/plugins/)
|
||||
- Encryption: [encryption.md](https://theme-plume.vuejs.press/guide/features/encryption/)
|
||||
- Bulletin: [bulletin.md](https://theme-plume.vuejs.press/guide/features/bulletin/)
|
||||
- Copyright: [copyright.md](https://theme-plume.vuejs.press/guide/features/copyright/)
|
||||
|
||||
@ -1,50 +1,254 @@
|
||||
---
|
||||
name: vuepress-plume-markdown
|
||||
description: Help users write markdown files with VuePress Plume theme extensions, charts, and embeds.
|
||||
description: Help users write markdown files with VuePress Plume theme extensions, including containers, charts, embeds, code features, and all markdown enhancements. Invoke when user writes markdown content or asks about Plume's markdown syntax.
|
||||
---
|
||||
|
||||
# VuePress Plume Markdown Skill
|
||||
|
||||
This skill provides assistance with VuePress Plume markdown extensions, charts, and embeds.
|
||||
This skill provides assistance with VuePress Plume markdown extensions, charts, embeds, and code features.
|
||||
It helps users write rich content using the features provided by the theme.
|
||||
|
||||
## When to Invoke
|
||||
|
||||
- Writing content in Markdown files
|
||||
- Using advanced features like containers, code groups, or diagrams
|
||||
- Embedding media or external content
|
||||
- Configuring code block features (highlight, focus, diff, etc.)
|
||||
- Using markdown enhancement syntax
|
||||
|
||||
## Documentation Sources
|
||||
|
||||
- [Markdown Extensions](https://theme-plume.vuejs.press/guide/markdown/extensions/)
|
||||
- [Markdown Basic](https://theme-plume.vuejs.press/guide/markdown/basic/)
|
||||
- [Code Features](https://theme-plume.vuejs.press/guide/code/features/)
|
||||
- [Code Intro](https://theme-plume.vuejs.press/guide/code/intro/)
|
||||
|
||||
## Markdown Extensions
|
||||
|
||||
- [Abbreviation](resources/abbreviation.md) - Define abbreviations with tooltips.
|
||||
- [Annotation](resources/annotation.md) - Add inline annotations.
|
||||
- [Attributes](resources/attrs.md) - Add custom attributes to elements.
|
||||
- [Card](resources/card.md) - Create card-style layouts.
|
||||
- [Chat](resources/chat.md) - Simulate chat conversations.
|
||||
- [Code Tree](resources/code-tree.md) - Display file trees alongside code blocks.
|
||||
- [Collapse](resources/collapse.md) - Create collapsible details/summary blocks.
|
||||
- [Container](resources/container.md) - Custom containers (info, tip, warning, etc.).
|
||||
- [File Tree](resources/file-tree.md) - Display file directory structures.
|
||||
- [Flex](resources/flex.md) - Create flexible column layouts.
|
||||
- [GitHub Alerts](resources/github-alerts.md) - Use GitHub-style alerts.
|
||||
- [Icons](resources/icons.md) - Embed icons from Iconify.
|
||||
- [Include](resources/include.md) - Include content from other files.
|
||||
- [Mark](resources/mark.md) - Highlight text.
|
||||
- [Math](resources/math.md) - Render mathematical formulas using KaTeX.
|
||||
### Containers
|
||||
|
||||
- [Abbreviation](resources/abbreviation.md) - Define abbreviations with tooltips
|
||||
- [Annotation](resources/annotation.md) - Add inline annotations
|
||||
- [Attributes](resources/attrs.md) - Add custom attributes to elements
|
||||
- [Card](resources/card.md) - Create card-style layouts
|
||||
- [Chat](resources/chat.md) - Simulate chat conversations
|
||||
- [Code Tree](resources/code-tree.md) - Display file trees alongside code blocks
|
||||
- [Collapse](resources/collapse.md) - Create collapsible details/summary blocks
|
||||
- [Container](resources/container.md) - Custom containers (info, tip, warning, etc.)
|
||||
- [Demo Wrapper](resources/demo-wrapper.md) - Demo container for examples
|
||||
- [Field](resources/field.md) - Field/attribute display container
|
||||
- [File Tree](resources/file-tree.md) - Display file directory structures
|
||||
- [Flex](resources/flex.md) - Create flexible column layouts
|
||||
- [GitHub Alerts](resources/github-alerts.md) - Use GitHub-style alerts
|
||||
- [Icons](resources/icons.md) - Embed icons from Iconify
|
||||
- [Include](resources/include.md) - Include content from other files
|
||||
- [Mark](resources/mark.md) - Highlight text with ==mark== syntax
|
||||
- [Math](resources/math.md) - Render mathematical formulas using KaTeX
|
||||
- [NPM To](resources/npm-to.md) - Switch between npm, yarn, pnpm, etc.
|
||||
- [QR Code](resources/qrcode.md) - Generate QR codes.
|
||||
- [Steps](resources/steps.md) - Create step-by-step guides.
|
||||
- [Tabs](resources/tabs.md) - Create tabbed content.
|
||||
- [Timeline](resources/timeline.md) - Create timelines.
|
||||
- [QR Code](resources/qrcode.md) - Generate QR codes
|
||||
- [Steps](resources/steps.md) - Create step-by-step guides
|
||||
- [Table](resources/table.md) - Enhanced table containers
|
||||
- [Tabs](resources/tabs.md) - Create tabbed content
|
||||
- [Timeline](resources/timeline.md) - Create timelines
|
||||
|
||||
## Charts
|
||||
### Charts
|
||||
|
||||
- [Chart.js](resources/chart.md) - Embed Chart.js charts.
|
||||
- [ECharts](resources/echarts.md) - Embed ECharts visualizations.
|
||||
- [Flowchart](resources/flowchart.md) - Create flowcharts.
|
||||
- [Markmap](resources/markmap.md) - Create mind maps.
|
||||
- [Mermaid](resources/mermaid.md) - Create diagrams using Mermaid.
|
||||
- [PlantUML](resources/plantuml.md) - Create UML diagrams.
|
||||
- [Chart.js](resources/chart.md) - Embed Chart.js charts
|
||||
- [ECharts](resources/echarts.md) - Embed ECharts visualizations
|
||||
- [Flowchart](resources/flowchart.md) - Create flowcharts
|
||||
- [Markmap](resources/markmap.md) - Create mind maps
|
||||
- [Mermaid](resources/mermaid.md) - Create diagrams using Mermaid
|
||||
- [PlantUML](resources/plantuml.md) - Create UML diagrams
|
||||
|
||||
## Embeds
|
||||
### Embeds
|
||||
|
||||
- [AcFun Video](resources/acfun.md) - Embed AcFun videos.
|
||||
- [ArtPlayer](resources/artplayer.md) - Embed custom videos with ArtPlayer.
|
||||
- [Audio Reader](resources/audio-reader.md) - Embed audio clips/pronunciation guides.
|
||||
- [Bilibili Video](resources/bilibili.md) - Embed Bilibili videos.
|
||||
- [PDF Reader](resources/pdf.md) - Embed PDF files.
|
||||
- [YouTube Video](resources/youtube.md) - Embed YouTube videos.
|
||||
- [AcFun Video](resources/acfun.md) - Embed AcFun videos
|
||||
- [ArtPlayer](resources/artplayer.md) - Embed custom videos with ArtPlayer
|
||||
- [Audio Reader](resources/audio-reader.md) - Embed audio clips/pronunciation guides
|
||||
- [Bilibili Video](resources/bilibili.md) - Embed Bilibili videos
|
||||
- [CodePen](resources/codepen.md) - Embed CodePen demos
|
||||
- [CodeSandbox](resources/codesandbox.md) - Embed CodeSandbox projects
|
||||
- [JSFiddle](resources/jsfiddle.md) - Embed JSFiddle demos
|
||||
- [PDF Reader](resources/pdf.md) - Embed PDF files
|
||||
- [Replit](resources/replit.md) - Embed Replit projects
|
||||
- [YouTube Video](resources/youtube.md) - Embed YouTube videos
|
||||
|
||||
### Code Features
|
||||
|
||||
See [resources/code-features.md](resources/code-features.md) for detailed code block features:
|
||||
|
||||
- **Line Numbers** - `:line-numbers`, `:no-line-numbers`, `:line-numbers=2`
|
||||
- **Line Highlighting** - `{1,3,5-7}` or `// [!code highlight]`
|
||||
- **Line Focus** - `// [!code focus]` or `// [!code focus:3]`
|
||||
- **Diff Highlighting** - `// [!code ++]` and `// [!code --]`
|
||||
- **Warning/Error** - `// [!code warning]` and `// [!code error]`
|
||||
- **Word Highlight** - `// [!code word:keyword]` or `// [!code word:keyword:2]`
|
||||
- **Whitespace** - `:whitespace` to show tabs/spaces
|
||||
- **Collapsed Lines** - `:collapsed-lines` or `:collapsed-lines=10`
|
||||
- **Code Title** - `title="filename.ext"` after language
|
||||
|
||||
## Enabling Features
|
||||
|
||||
Most markdown extensions need to be enabled in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
// Containers
|
||||
hint: true, // Info, tip, warning, caution containers
|
||||
alert: true, // GitHub-style alerts
|
||||
|
||||
// Code
|
||||
codeTabs: true, // Code block tabs
|
||||
tabs: true, // General tabs
|
||||
|
||||
// Content
|
||||
annotation: true, // Inline annotations
|
||||
abbr: true, // Abbreviations
|
||||
mark: 'eager', // Mark/highlight text
|
||||
|
||||
// Layout
|
||||
fileTree: true, // File tree container
|
||||
flex: true, // Flex layout
|
||||
collapse: true, // Collapsible sections
|
||||
chat: true, // Chat dialog
|
||||
timeline: true, // Timeline
|
||||
|
||||
// Embeds
|
||||
pdf: true, // PDF embed
|
||||
bilibili: true, // Bilibili video
|
||||
youtube: true, // YouTube video
|
||||
artPlayer: true, // ArtPlayer video
|
||||
audioReader: true, // Audio
|
||||
|
||||
// Code demos
|
||||
codepen: true, // CodePen
|
||||
codeSandbox: true, // CodeSandbox
|
||||
jsfiddle: true, // JSFiddle
|
||||
repl: true, // REPL
|
||||
|
||||
// Charts
|
||||
chartjs: true, // Chart.js
|
||||
echarts: true, // ECharts
|
||||
mermaid: true, // Mermaid
|
||||
markmap: true, // Markmap
|
||||
plantuml: true, // PlantUML
|
||||
flowchart: true, // Flowchart
|
||||
|
||||
// Other
|
||||
npmTo: true, // npm/yarn/pnpm switcher
|
||||
caniuse: true, // Can I Use embed
|
||||
icon: { // Icons
|
||||
provider: 'iconify' // or 'iconfont', 'fontawesome'
|
||||
},
|
||||
plot: true, // Hidden text (spoiler)
|
||||
imageSize: true, // Auto image dimensions
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Standard Markdown Extensions
|
||||
|
||||
VuePress Plume supports these standard markdown extensions:
|
||||
|
||||
- **Tables** - GitHub-flavored tables
|
||||
- **Task Lists** - `- [ ]` and `- [x]`
|
||||
- **Footnotes** - `[^1]` and `[^1]: note`
|
||||
- **Superscript** - `19^th^`
|
||||
- **Subscript** - `H~2~O`
|
||||
- **Custom Anchors** - `## Title {#custom-anchor}`
|
||||
- **Alignment** - `::: left/center/right`
|
||||
- **Table of Contents** - `[[TOC]]`
|
||||
|
||||
## Code Block Features
|
||||
|
||||
### Basic Syntax
|
||||
|
||||
````md
|
||||
```language
|
||||
code content
|
||||
```
|
||||
````
|
||||
|
||||
### With Features
|
||||
|
||||
````md
|
||||
```ts:title="example.ts":line-numbers {2,4-6}
|
||||
// [!code highlight]
|
||||
const example = 'highlighted'
|
||||
// [!code ++]
|
||||
const added = 'new code'
|
||||
// [!code --]
|
||||
const removed = 'old code'
|
||||
// [!code warning]
|
||||
const warning = 'be careful'
|
||||
// [!code error]
|
||||
const error = 'something wrong'
|
||||
// [!code focus]
|
||||
const focused = 'focused line'
|
||||
// [!code word:example]
|
||||
console.log(example)
|
||||
```
|
||||
````
|
||||
|
||||
## Frontmatter
|
||||
|
||||
Common frontmatter for markdown files:
|
||||
|
||||
```md
|
||||
---
|
||||
title: Article Title
|
||||
createTime: 2024/01/01 12:00:00
|
||||
permalink: /article/unique-id/
|
||||
tags:
|
||||
- tag1
|
||||
- tag2
|
||||
description: Article description for SEO
|
||||
---
|
||||
```
|
||||
|
||||
### Post-specific Frontmatter
|
||||
|
||||
```md
|
||||
---
|
||||
sticky: true # or number for ordering
|
||||
article: true # false to hide from list
|
||||
draft: true # dev only
|
||||
cover: /image.jpg # Cover image
|
||||
coverStyle:
|
||||
layout: right # left, right, odd-left, odd-right, top
|
||||
ratio: '16:9'
|
||||
width: 240
|
||||
compact: false
|
||||
---
|
||||
```
|
||||
|
||||
### Home Page Frontmatter
|
||||
|
||||
```md
|
||||
---
|
||||
pageLayout: home
|
||||
config:
|
||||
- type: hero
|
||||
hero:
|
||||
name: Site Name
|
||||
tagline: Tagline
|
||||
text: Description
|
||||
actions:
|
||||
- text: Get Started
|
||||
link: /guide/
|
||||
theme: brand
|
||||
- type: features
|
||||
features:
|
||||
- title: Feature 1
|
||||
icon: icon-name
|
||||
details: Description
|
||||
---
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
- [VuePress Markdown](https://v2.vuepress.vuejs.org/guide/markdown.html)
|
||||
- [Plume Theme Docs](https://theme-plume.vuejs.press/)
|
||||
|
||||
193
skills/vuepress-plume-markdown/resources/code-features.md
Normal file
193
skills/vuepress-plume-markdown/resources/code-features.md
Normal file
@ -0,0 +1,193 @@
|
||||
# Code Block Features
|
||||
|
||||
VuePress Plume theme provides rich code block features via Shiki highlighter.
|
||||
|
||||
## Line Numbers
|
||||
|
||||
````md
|
||||
```ts:line-numbers
|
||||
// Enable line numbers (default)
|
||||
```
|
||||
|
||||
```ts:no-line-numbers
|
||||
// Disable line numbers
|
||||
```
|
||||
|
||||
```ts:line-numbers=2
|
||||
// Start from line 2
|
||||
```
|
||||
````
|
||||
|
||||
## Line Highlighting
|
||||
|
||||
### Bracket Syntax
|
||||
|
||||
````md
|
||||
```ts{1,3,5-7}
|
||||
// Line 1 highlighted
|
||||
// Line 2 normal
|
||||
// Line 3 highlighted
|
||||
// Line 4 normal
|
||||
// Line 5-7 highlighted
|
||||
```
|
||||
````
|
||||
|
||||
### Comment Syntax
|
||||
|
||||
````md
|
||||
```ts
|
||||
const a = 1
|
||||
const b = 2 // [!code highlight]
|
||||
const c = 3
|
||||
```
|
||||
````
|
||||
|
||||
## Line Focus
|
||||
|
||||
Focus a line and dim others:
|
||||
|
||||
````md
|
||||
```ts
|
||||
const a = 1
|
||||
const b = 2 // [!code focus]
|
||||
const c = 3
|
||||
```
|
||||
````
|
||||
|
||||
Focus multiple lines:
|
||||
|
||||
````md
|
||||
```ts
|
||||
const a = 1 // [!code focus:3]
|
||||
const b = 2
|
||||
const c = 3
|
||||
const d = 4
|
||||
```
|
||||
````
|
||||
|
||||
## Diff Highlighting
|
||||
|
||||
Show code changes:
|
||||
|
||||
````md
|
||||
```ts
|
||||
const oldVal = 'value' // [!code --]
|
||||
const newVal = 'value' // [!code ++]
|
||||
```
|
||||
````
|
||||
|
||||
## Warning and Error
|
||||
|
||||
````md
|
||||
```ts
|
||||
const warning = 'caution' // [!code warning]
|
||||
const error = 'failed' // [!code error]
|
||||
```
|
||||
````
|
||||
|
||||
## Word Highlight
|
||||
|
||||
Highlight specific words:
|
||||
|
||||
````md
|
||||
```ts
|
||||
// [!code word:config]
|
||||
const config = {}
|
||||
console.log(config)
|
||||
```
|
||||
````
|
||||
|
||||
Highlight with count limit:
|
||||
|
||||
````md
|
||||
```ts
|
||||
// [!code word:api:2]
|
||||
const api = {}
|
||||
const apiClient = {}
|
||||
const apiKey = {} // Not highlighted
|
||||
```
|
||||
````
|
||||
|
||||
## Whitespace Visibility
|
||||
|
||||
Show tabs and spaces:
|
||||
|
||||
````md
|
||||
```ts:whitespace
|
||||
const a = 1
|
||||
```
|
||||
````
|
||||
|
||||
## Collapsed Lines
|
||||
|
||||
Collapse long code blocks:
|
||||
|
||||
````md
|
||||
```ts:collapsed-lines
|
||||
// Lines after 15th will be collapsed
|
||||
```
|
||||
|
||||
```ts:collapsed-lines=10
|
||||
// Lines after 10th will be collapsed
|
||||
```
|
||||
````
|
||||
|
||||
## Code Title
|
||||
|
||||
Add filename to code block:
|
||||
|
||||
````md
|
||||
```ts title="config.ts"
|
||||
const config = {}
|
||||
```
|
||||
|
||||
```ts title="/path/to/file.ts"
|
||||
const code = {}
|
||||
```
|
||||
````
|
||||
|
||||
## Combining Features
|
||||
|
||||
Multiple features can be combined:
|
||||
|
||||
````md
|
||||
```ts:title="example.ts":line-numbers {2,4} // [!code highlight]
|
||||
const a = 1
|
||||
const b = 2 // [!code ++]
|
||||
const c = 3
|
||||
const d = 4 // [!code focus]
|
||||
```
|
||||
````
|
||||
|
||||
## Language-Specific Comments
|
||||
|
||||
Different languages use different comment syntax:
|
||||
|
||||
| Language | Highlight | Focus | Diff Add | Diff Remove |
|
||||
|----------|-----------|-------|----------|-------------|
|
||||
| JS/TS/JSX/TSX | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
|
||||
| Python/Ruby/YAML | `# [!code highlight]` | `# [!code focus]` | `# [!code ++]` | `# [!code --]` |
|
||||
| CSS/SCSS | `/* [!code highlight] */` | `/* [!code focus] */` | `/* [!code ++] */` | `/* [!code --] */` |
|
||||
| HTML/XML | `<!-- [!code highlight] -->` | `<!-- [!code focus] -->` | `<!-- [!code ++] -->` | `<!-- [!code --] -->` |
|
||||
| Bash/Shell | `# [!code highlight]` | `# [!code focus]` | `# [!code ++]` | `# [!code --]` |
|
||||
| SQL | `-- [!code highlight]` | `-- [!code focus]` | `-- [!code ++]` | `-- [!code --]` |
|
||||
| Rust | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
|
||||
| Go | `// [!code highlight]` | `// [!code focus]` | `// [!code ++]` | `// [!code --]` |
|
||||
|
||||
## Global Configuration
|
||||
|
||||
Enable features globally in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
codeHighlighter: {
|
||||
lineNumbers: true, // Enable line numbers globally
|
||||
whitespace: true, // Show whitespace globally
|
||||
collapsedLines: true, // Collapse lines globally
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
When enabled globally, use `:no-line-numbers`, `:no-whitespace`, `:no-collapsed-lines` to disable per block.
|
||||
58
skills/vuepress-plume-markdown/resources/codepen.md
Normal file
58
skills/vuepress-plume-markdown/resources/codepen.md
Normal file
@ -0,0 +1,58 @@
|
||||
# CodePen Embed
|
||||
|
||||
Embed CodePen demos in your markdown files.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
codepen: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
@[codepen](pen_id)
|
||||
|
||||
@[codepen](pen_id title)
|
||||
|
||||
@[codepen](pen_id title tab)
|
||||
```
|
||||
|
||||
## Parameters
|
||||
|
||||
- `pen_id` - The CodePen pen ID (from URL: codepen.io/user/pen/**XXXXXX**)
|
||||
- `title` - Optional title for the embed
|
||||
- `tab` - Optional default tab: `html`, `css`, `js`, `result` (default: `result`)
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
```md
|
||||
@[codepen](VwKZgJG)
|
||||
|
||||
@[codepen](VwKZgJG "My Demo")
|
||||
|
||||
@[codepen](VwKZgJG "My Demo" css)
|
||||
```
|
||||
|
||||
## Getting Pen ID
|
||||
|
||||
1. Open the CodePen pen
|
||||
2. Copy the ID from the URL: `codepen.io/username/pen/XXXXXX`
|
||||
3. Use `XXXXXX` as the pen ID
|
||||
|
||||
## Features
|
||||
|
||||
- Embedded iframe preview
|
||||
- Editable code (if enabled on CodePen)
|
||||
- Responsive sizing
|
||||
- Dark/light theme support
|
||||
53
skills/vuepress-plume-markdown/resources/codesandbox.md
Normal file
53
skills/vuepress-plume-markdown/resources/codesandbox.md
Normal file
@ -0,0 +1,53 @@
|
||||
# CodeSandbox Embed
|
||||
|
||||
Embed CodeSandbox projects in your markdown files.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
codeSandbox: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
@[codesandbox](sandbox_id)
|
||||
|
||||
@[codesandbox](sandbox_id title)
|
||||
```
|
||||
|
||||
## Parameters
|
||||
|
||||
- `sandbox_id` - The CodeSandbox sandbox ID
|
||||
- `title` - Optional title for the embed
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
```md
|
||||
@[codesandbox](react-new)
|
||||
|
||||
@[codesandbox](vue-vue "Vue Demo")
|
||||
```
|
||||
|
||||
## Getting Sandbox ID
|
||||
|
||||
1. Open the CodeSandbox project
|
||||
2. Copy the ID from the URL: `codesandbox.io/s/XXXXXX`
|
||||
3. Use `XXXXXX` as the sandbox ID
|
||||
|
||||
## Features
|
||||
|
||||
- Full IDE embedded
|
||||
- Live preview
|
||||
- File navigation
|
||||
- Code editing capabilities
|
||||
@ -1,32 +1,133 @@
|
||||
# Containers
|
||||
|
||||
Use `::: type [title]` to create alert boxes or collapsible details.
|
||||
Use `::: type [title]` to create alert boxes, collapsible details, and custom containers.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
hint: true, // Enable info, tip, warning, caution, note containers
|
||||
alert: true, // Enable GitHub-style alerts
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Supported Types
|
||||
|
||||
- `note`, `info`, `tip`, `warning`, `caution` (Alerts)
|
||||
- `details` (Collapsible)
|
||||
### Alert Containers
|
||||
|
||||
- `note` - Neutral information
|
||||
- `info` - General information (blue)
|
||||
- `tip` - Helpful advice (green)
|
||||
- `warning` - Caution needed (yellow/orange)
|
||||
- `caution` / `danger` - Critical warning (red)
|
||||
- `important` - Important information (purple)
|
||||
|
||||
### Collapsible Container
|
||||
|
||||
- `details` - Collapsible content block
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
::: type [Optional Title]
|
||||
Content
|
||||
Content here
|
||||
:::
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Alerts
|
||||
|
||||
```md
|
||||
::: tip
|
||||
This is a tip.
|
||||
This is a tip with default title.
|
||||
:::
|
||||
|
||||
::: warning CAUTION
|
||||
Custom title for warning.
|
||||
::: tip Custom Title
|
||||
This tip has a custom title.
|
||||
:::
|
||||
|
||||
::: details Click to expand
|
||||
Hidden content.
|
||||
::: warning
|
||||
Be careful with this step.
|
||||
:::
|
||||
|
||||
::: danger STOP!
|
||||
This action is irreversible.
|
||||
:::
|
||||
```
|
||||
|
||||
### Collapsible Details
|
||||
|
||||
```md
|
||||
::: details Click to expand
|
||||
This content is hidden by default.
|
||||
|
||||
- Can contain
|
||||
- Any markdown
|
||||
- Content
|
||||
:::
|
||||
|
||||
::: details Open by default {open}
|
||||
This content is visible by default.
|
||||
:::
|
||||
```
|
||||
|
||||
### GitHub-Style Alerts
|
||||
|
||||
```md
|
||||
> [!NOTE]
|
||||
> Useful information that users should know.
|
||||
|
||||
> [!TIP]
|
||||
> Helpful advice for better results.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know.
|
||||
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate attention.
|
||||
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes.
|
||||
```
|
||||
|
||||
## Nested Containers
|
||||
|
||||
Containers can be nested:
|
||||
|
||||
```md
|
||||
::: tip Outer Container
|
||||
Some content
|
||||
|
||||
::: warning Inner Container
|
||||
Nested warning inside tip
|
||||
:::
|
||||
|
||||
More outer content
|
||||
:::
|
||||
```
|
||||
|
||||
## Code Inside Containers
|
||||
|
||||
````md
|
||||
::: tip Example Code
|
||||
|
||||
```ts
|
||||
const example = 'code blocks work inside containers'
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
## Styling
|
||||
|
||||
Containers use theme colors and support:
|
||||
- Custom icons (based on type)
|
||||
- Dark/light mode adaptation
|
||||
- Consistent spacing and borders
|
||||
|
||||
73
skills/vuepress-plume-markdown/resources/demo-wrapper.md
Normal file
73
skills/vuepress-plume-markdown/resources/demo-wrapper.md
Normal file
@ -0,0 +1,73 @@
|
||||
# Demo Wrapper
|
||||
|
||||
The `::: demo` container wraps content with a demo preview and code display.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
demo: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
````md
|
||||
::: demo [Title]
|
||||
|
||||
```html
|
||||
<!-- Your HTML/Vue code here -->
|
||||
<div class="example">Demo content</div>
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
`````md
|
||||
::: demo Button Example
|
||||
|
||||
```html
|
||||
<button class="btn">Click me</button>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
`````
|
||||
|
||||
**Output:**
|
||||
|
||||
Displays both the rendered button and the source code with syntax highlighting.
|
||||
|
||||
## Features
|
||||
|
||||
- Live preview of HTML/Vue components
|
||||
- Syntax highlighted source code
|
||||
- Collapsible code section
|
||||
- Supports `<style>` and `<script>` tags
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Component documentation
|
||||
- UI pattern examples
|
||||
- Interactive tutorials
|
||||
- Design system showcases
|
||||
72
skills/vuepress-plume-markdown/resources/field.md
Normal file
72
skills/vuepress-plume-markdown/resources/field.md
Normal file
@ -0,0 +1,72 @@
|
||||
# Field Container
|
||||
|
||||
The `::: field` container displays structured field/attribute information.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
field: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
::: field-group
|
||||
|
||||
::: field name="propertyName" type="string" default="'default'" optional
|
||||
Field description here.
|
||||
:::
|
||||
|
||||
::: field name="anotherProp" type="number" default="0" required
|
||||
Another field description.
|
||||
:::
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
```md
|
||||
:::: field-group
|
||||
|
||||
::: field name="title" type="string" default="''" required
|
||||
The title of the component.
|
||||
:::
|
||||
|
||||
::: field name="disabled" type="boolean" default="false" optional
|
||||
Whether the component is disabled.
|
||||
:::
|
||||
|
||||
::: field name="onClick" type="(event: MouseEvent) => void" optional
|
||||
Click handler callback.
|
||||
:::
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| Attribute | Description |
|
||||
|-----------|-------------|
|
||||
| `name` | Field/property name |
|
||||
| `type` | Type annotation |
|
||||
| `default` | Default value |
|
||||
| `required` | Mark as required |
|
||||
| `optional` | Mark as optional |
|
||||
|
||||
## Use Cases
|
||||
|
||||
- API documentation
|
||||
- Component prop documentation
|
||||
- Configuration reference
|
||||
- Type definitions
|
||||
58
skills/vuepress-plume-markdown/resources/jsfiddle.md
Normal file
58
skills/vuepress-plume-markdown/resources/jsfiddle.md
Normal file
@ -0,0 +1,58 @@
|
||||
# JSFiddle Embed
|
||||
|
||||
Embed JSFiddle demos in your markdown files.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
jsfiddle: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
@[jsfiddle](fiddle_id)
|
||||
|
||||
@[jsfiddle](fiddle_id title)
|
||||
|
||||
@[jsfiddle](fiddle_id title tabs)
|
||||
```
|
||||
|
||||
## Parameters
|
||||
|
||||
- `fiddle_id` - The JSFiddle fiddle ID
|
||||
- `title` - Optional title for the embed
|
||||
- `tabs` - Optional tabs to show: `js`, `css`, `html`, `result` (comma-separated)
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
```md
|
||||
@[jsfiddle](abc123)
|
||||
|
||||
@[jsfiddle](abc123 "My Fiddle")
|
||||
|
||||
@[jsfiddle](abc123 "My Fiddle" html,css,result)
|
||||
```
|
||||
|
||||
## Getting Fiddle ID
|
||||
|
||||
1. Open the JSFiddle
|
||||
2. Copy the ID from the URL: `jsfiddle.net/username/XXXXXX/`
|
||||
3. Use `XXXXXX` as the fiddle ID
|
||||
|
||||
## Features
|
||||
|
||||
- Embedded fiddle preview
|
||||
- Tab-based navigation
|
||||
- Live code editing
|
||||
- Result preview
|
||||
60
skills/vuepress-plume-markdown/resources/replit.md
Normal file
60
skills/vuepress-plume-markdown/resources/replit.md
Normal file
@ -0,0 +1,60 @@
|
||||
# Replit Embed
|
||||
|
||||
Embed Replit projects in your markdown files.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
repl: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
@[replit](replit_url)
|
||||
|
||||
@[replit](replit_url title)
|
||||
```
|
||||
|
||||
## Parameters
|
||||
|
||||
- `replit_url` - The full Replit project URL
|
||||
- `title` - Optional title for the embed
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
```md
|
||||
@[replit](https://replit.com/@username/project-name)
|
||||
|
||||
@[replit](https://replit.com/@username/python-demo "Python Demo")
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Full Replit IDE embedded
|
||||
- Live code editing
|
||||
- Console output
|
||||
- Multi-file support
|
||||
- Run button for execution
|
||||
|
||||
## Supported Languages
|
||||
|
||||
Replit supports 50+ programming languages including:
|
||||
- JavaScript/TypeScript
|
||||
- Python
|
||||
- Java
|
||||
- C/C++
|
||||
- Go
|
||||
- Rust
|
||||
- Ruby
|
||||
- And more...
|
||||
@ -2,16 +2,97 @@
|
||||
|
||||
Display sequential steps using `::: steps`.
|
||||
|
||||
## Syntax
|
||||
## Configuration
|
||||
|
||||
Use ordered or unordered lists inside.
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
steps: true
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
::: steps
|
||||
1. Step 1
|
||||
Content for step 1.
|
||||
|
||||
2. Step 2
|
||||
Content for step 2.
|
||||
1. Step Title
|
||||
Step description content.
|
||||
Can be multi-line.
|
||||
|
||||
2. Another Step
|
||||
More content here.
|
||||
|
||||
3. Final Step
|
||||
Last step content.
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Steps
|
||||
|
||||
````md
|
||||
::: steps
|
||||
|
||||
1. Install
|
||||
Install the package using your preferred package manager.
|
||||
```bash
|
||||
npm install package
|
||||
```
|
||||
|
||||
2. Configure
|
||||
Add configuration to your config file.
|
||||
```ts
|
||||
export default { /* config */ }
|
||||
```
|
||||
|
||||
3. Run
|
||||
Start the development server.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
### Without Numbers
|
||||
|
||||
```md
|
||||
::: steps
|
||||
|
||||
- First Step
|
||||
Content for first step.
|
||||
|
||||
- Second Step
|
||||
Content for second step.
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Numbered steps with visual connector
|
||||
- Supports rich content (code, lists, etc.)
|
||||
- Responsive design
|
||||
- Dark/light mode support
|
||||
- Customizable styling via CSS variables
|
||||
|
||||
## Styling
|
||||
|
||||
Steps use these CSS variables:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--vp-steps-bg-color: var(--vp-c-bg);
|
||||
--vp-steps-border-color: var(--vp-c-divider);
|
||||
--vp-steps-number-bg: var(--vp-c-brand);
|
||||
--vp-steps-number-color: var(--vp-c-white);
|
||||
}
|
||||
```
|
||||
|
||||
60
skills/vuepress-plume-markdown/resources/table.md
Normal file
60
skills/vuepress-plume-markdown/resources/table.md
Normal file
@ -0,0 +1,60 @@
|
||||
# Table Container
|
||||
|
||||
Enhanced table containers with additional styling options.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
table: true // or TableContainerOptions
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
```md
|
||||
::: table [Title]
|
||||
|
||||
| Header 1 | Header 2 | Header 3 |
|
||||
|----------|----------|----------|
|
||||
| Cell 1 | Cell 2 | Cell 3 |
|
||||
| Cell 4 | Cell 5 | Cell 6 |
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
**Input:**
|
||||
|
||||
```md
|
||||
::: table API Endpoints
|
||||
|
||||
| Method | Endpoint | Description |
|
||||
|--------|----------|-------------|
|
||||
| GET | /api/users | List all users |
|
||||
| POST | /api/users | Create new user |
|
||||
| GET | /api/users/:id | Get user by ID |
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Styled container wrapper
|
||||
- Responsive scrolling
|
||||
- Optional title/header
|
||||
- Consistent styling with theme
|
||||
|
||||
## Use Cases
|
||||
|
||||
- API documentation
|
||||
- Comparison tables
|
||||
- Data reference
|
||||
- Configuration options
|
||||
@ -2,24 +2,138 @@
|
||||
|
||||
Create tabbed content using `::: tabs`.
|
||||
|
||||
## Configuration
|
||||
|
||||
Enable in `.vuepress/config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineUserConfig({
|
||||
theme: plumeTheme({
|
||||
markdown: {
|
||||
tabs: true, // General tabs
|
||||
codeTabs: true, // Code block tabs
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
- `::: tabs[#id]`: Container.
|
||||
- `@tab Title`: Tab separator.
|
||||
- `@tab:active Title`: Default active tab.
|
||||
```md
|
||||
::: tabs [id]
|
||||
|
||||
## Example
|
||||
@tab Tab Title 1
|
||||
Content for tab 1
|
||||
|
||||
@tab:active Tab Title 2
|
||||
Content for tab 2 (active by default)
|
||||
|
||||
@tab Tab Title 3
|
||||
Content for tab 3
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Parameters
|
||||
|
||||
- `id` - Optional unique identifier for the tabs group
|
||||
- `@tab` - Tab separator with title
|
||||
- `@tab:active` - Sets this tab as active by default
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Tabs
|
||||
|
||||
````md
|
||||
::: tabs
|
||||
|
||||
@tab npm
|
||||
```sh
|
||||
npm install
|
||||
```bash
|
||||
npm install package
|
||||
```
|
||||
|
||||
@tab:active pnpm
|
||||
```sh
|
||||
pnpm install
|
||||
@tab yarn
|
||||
```bash
|
||||
yarn add package
|
||||
```
|
||||
|
||||
@tab pnpm
|
||||
```bash
|
||||
pnpm add package
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
### With Active Tab
|
||||
|
||||
```md
|
||||
::: tabs
|
||||
|
||||
@tab npm
|
||||
npm install
|
||||
|
||||
@tab:active pnpm
|
||||
pnpm install
|
||||
|
||||
@tab yarn
|
||||
yarn install
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
### Code Tabs
|
||||
|
||||
Special syntax for code blocks:
|
||||
|
||||
````md
|
||||
::: code-tabs
|
||||
|
||||
@tab TypeScript
|
||||
```ts
|
||||
const x: number = 1
|
||||
```
|
||||
|
||||
@tab JavaScript
|
||||
```js
|
||||
const x = 1
|
||||
```
|
||||
|
||||
:::
|
||||
````
|
||||
|
||||
### With ID (Synced Tabs)
|
||||
|
||||
Tabs with the same ID will sync their active state:
|
||||
|
||||
```md
|
||||
::: tabs#install
|
||||
|
||||
@tab npm
|
||||
npm install
|
||||
|
||||
@tab pnpm
|
||||
pnpm install
|
||||
|
||||
:::
|
||||
|
||||
Some other content...
|
||||
|
||||
::: tabs#install
|
||||
|
||||
@tab npm
|
||||
npm run dev
|
||||
|
||||
@tab pnpm
|
||||
pnpm dev
|
||||
|
||||
:::
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Persistent active tab (saved to localStorage)
|
||||
- Synchronized tabs with same ID
|
||||
- Smooth transitions
|
||||
- Responsive design
|
||||
- Dark/light mode support
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user