diff --git a/skills/README.md b/skills/README.md new file mode 100644 index 00000000..ff26feda --- /dev/null +++ b/skills/README.md @@ -0,0 +1,156 @@ +# VuePress Plume Skills + +This directory contains specialized skills for VuePress Plume theme, designed to enhance your development experience with AI agents. + +## 1. Skill Introduction + +The `skills` directory currently provides the following skills: + +### 🌟 Available Skills + +| Skill Name | Description | Key Features | +| ---------- | ----------- | ------------ | +| **vuepress-plume-config** | Theme Configuration Generator | • Generates `config.ts`, `plume.config.ts`
• Manages `themeConfig`, `navbar`, `sidebar`
• Supports `locales` and `plugins` configuration | +| **vuepress-plume-markdown** | Markdown Writing Assistant | • Provides syntax for Plume's Markdown extensions
• Supports Charts (Mermaid, ECharts, etc.)
• Supports Embeds (YouTube, Bilibili, PDF) | + +### 🔍 Selection Guide + +- **Use `vuepress-plume-config` when:** + - You are initializing a new VuePress Plume project. + - You need to update the theme configuration, navbar, or sidebar. + - You want to configure complex settings like locales or plugins. + +- **Use `vuepress-plume-markdown` when:** + - You are writing content in Markdown files. + - You want to use advanced features like containers, code groups, or diagrams. + - You need to embed media or external content. + +--- + +## 2. Installation and Configuration + +You can install these skills into your project or globally using the `skills` CLI tool. + +### Prerequisites + +- Node.js installed +- `npx` available + +### Installation Steps + +1. **Install specific skills from this repository:** + + ```bash + # Install into your current project (recommended for teams) + npx skills add https://github.com/pengzhanbo/vuepress-plume + + # Install specific skill only + npx skills add https://github.com/pengzhanbo/vuepress-plume --skill vuepress-plume-config + ``` + +2. **Verify Installation:** + + ```bash + npx skills list + ``` + + You should see the installed skills listed in the output. + +--- + +## 3. Integration Guide + +### 🤖 Claude Code Integration + +Claude Code automatically detects skills in the `.claude/skills` directory or the standard `skills` directory if configured. + +**Setup:** + +```bash +# Install for Claude Code specifically +npx skills add https://github.com/pengzhanbo/vuepress-plume -a claude-code +``` + +**Configuration:** +Ensure your `~/.claude/config.json` or project configuration allows loading skills from the installed location. + +### 🌐 OpenCode Integration + +OpenCode supports the open agent skills standard. + +**Setup:** + +```bash +# Install for OpenCode +npx skills add https://github.com/pengzhanbo/vuepress-plume -a opencode +``` + +**Usage:** +Once installed, OpenCode agents will automatically index the skills and can be invoked using natural language prompts. + +### 🚀 Trae Integration + +Trae is a powerful IDE that can utilize these skills to assist you better. + +**Setup:** + +1. **Project-level:** Clone or install the skills into your project's `skills/` directory. Trae can scan and utilize `SKILL.md` files located in the project workspace. +2. **Usage:** Simply ask Trae to perform tasks related to the skills. + +**Example:** +> "Help me configure the navbar for my VuePress site using the plume config skill." + +**Debugging:** +If Trae doesn't recognize the skill, ensure the `SKILL.md` file is valid and contains the correct frontmatter (name, description). + +--- + +## 4. Usage Examples + +### 🛠️ Using `vuepress-plume-config` + +**Scenario:** Initialize a new configuration file. + +**Prompt:** +> "Generate a `config.ts` for my VuePress Plume site with a blog setup, English and Chinese locales, and the filesystem cache enabled." + +**Outcome:** +The agent will use the skill to create a `src/.vuepress/config.ts` file with the requested configuration structure. + +### 📝 Using `vuepress-plume-markdown` + +**Scenario:** Add a complex diagram to a documentation page. + +**Prompt:** +> "I want to add a timeline of VuePress release history to my markdown file using the Plume timeline extension." + +**Outcome:** +The agent will reference the `vuepress-plume-markdown` skill to provide the correct syntax: + +```markdown +::: timeline 2024 +2024-01-01: **VuePress Plume v1.0.0 Released** +The first official release. + +2024-06-01: **Feature Update** +Added support for new markdown extensions. +::: +``` + +--- + +## 5. Best Practices + +### Recommendations + +- **Version Control:** Commit your `skills/` directory to Git if you are using project-level skills. This ensures all team members have access to the same capabilities. +- **Updates:** Regularly check for updates to the skills to get the latest features and fixes. + + ```bash + npx skills update + ``` + +### Performance & Security + +- **Review Changes:** Always review the configuration files generated by the `vuepress-plume-config` skill before deploying. +- **Safe Execution:** These skills primarily generate text/code. They do not execute system commands directly without user confirmation in most agent environments. diff --git a/skills/README.zh-CN.md b/skills/README.zh-CN.md new file mode 100644 index 00000000..2a0ea031 --- /dev/null +++ b/skills/README.zh-CN.md @@ -0,0 +1,158 @@ +# VuePress Plume Skills + +此目录包含为 VuePress Plume 主题定制的专用技能(Skills),旨在通过 AI 代理提升您的开发体验。 + +## 1. 技能介绍 + +`skills` 目录目前提供以下技能: + +### 🌟 可用技能 + +| 技能名称 | 描述 | 主要特性 | +| ---------- | ----------- | ------------ | +| **vuepress-plume-config** | 主题配置生成器 | • 生成 `config.ts`, `plume.config.ts`
• 管理 `themeConfig`, `navbar`, `sidebar`
• 支持 `locales` 和 `plugins` 配置 | +| **vuepress-plume-markdown** | Markdown 写作助手 | • 提供 Plume Markdown 扩展语法
• 支持图表 (Mermaid, ECharts 等)
• 支持嵌入 (YouTube, Bilibili, PDF) | + +### 🔍 选择指南 + +- **使用 `vuepress-plume-config` 的场景:** + - 初始化一个新的 VuePress Plume 项目。 + - 需要更新主题配置、导航栏或侧边栏。 + - 需要配置复杂设置,如多语言或插件。 + +- **使用 `vuepress-plume-markdown` 的场景:** + - 编写 Markdown 内容文件。 + - 需要使用高级功能,如容器、代码组或图表。 + - 需要嵌入媒体或外部内容。 + +--- + +## 2. 安装与配置 + +您可以使用 `skills` CLI 工具将这些技能安装到您的项目中或全局安装。 + +### 前置要求 + +- 已安装 Node.js +- `npx` 可用 + +### 安装步骤 + +1. **从本仓库安装特定技能:** + + ```bash + # 安装到当前项目(团队协作推荐) + npx skills add https://github.com/pengzhanbo/vuepress-plume + + # 仅安装特定技能 + npx skills add https://github.com/pengzhanbo/vuepress-plume --skill vuepress-plume-config + ``` + +2. **验证安装:** + + ```bash + npx skills list + ``` + + 您应该能看到已安装的技能列在输出中。 + +--- + +## 3. 集成指南 + +### 🤖 Claude Code 集成 + +Claude Code 会自动检测 `.claude/skills` 目录或配置的标准 `skills` 目录中的技能。 + +**设置:** + +```bash +# 专为 Claude Code 安装 +npx skills add https://github.com/pengzhanbo/vuepress-plume -a claude-code +``` + +**配置:** +确保您的 `~/.claude/config.json` 或项目配置允许从安装位置加载技能。 + +### 🌐 OpenCode 集成 + +OpenCode 支持开放代理技能(open agent skills)标准。 + +**设置:** + +```bash +# 为 OpenCode 安装 +npx skills add https://github.com/pengzhanbo/vuepress-plume -a opencode +``` + +**使用:** +安装后,OpenCode 代理将自动索引技能,并可通过自然语言提示调用。 + +### 🚀 Trae 集成 + +Trae 是一个强大的 IDE,可以利用这些技能更好地协助您。 + +**设置:** + +1. **项目级:** 克隆或安装技能到您项目的 `skills/` 目录。Trae 可以扫描并利用项目工作区中的 `SKILL.md` 文件。 +2. **使用:** 直接要求 Trae 执行与技能相关的任务。 + +**示例:** +> "帮我使用 plume config skill 配置 VuePress 站点的导航栏。" + +**调试:** +如果 Trae 无法识别技能,请确保 `SKILL.md` 文件有效且包含正确的 frontmatter(name, description)。 + +--- + +## 4. 使用示例 + +### 🛠️ 使用 `vuepress-plume-config` + +**场景:** 初始化一个新的配置文件。 + +**提示词:** +> "Generate a `config.ts` for my VuePress Plume site with a blog setup, English and Chinese locales, and the filesystem cache enabled." +> ("为我的 VuePress Plume 站点生成一个 `config.ts`,包含博客设置、中英文多语言支持,并启用文件系统缓存。") + +**结果:** +代理将使用技能创建一个包含请求配置结构的 `src/.vuepress/config.ts` 文件。 + +### 📝 使用 `vuepress-plume-markdown` + +**场景:** 向文档页面添加复杂图表。 + +**提示词:** +> "I want to add a timeline of VuePress release history to my markdown file using the Plume timeline extension." +> ("我想使用 Plume 时间轴扩展在 Markdown 文件中添加 VuePress 发布历史的时间轴。") + +**结果:** +代理将引用 `vuepress-plume-markdown` 技能提供正确的语法: + +```markdown +::: timeline 2024 +2024-01-01: **VuePress Plume v1.0.0 Released** +The first official release. + +2024-06-01: **Feature Update** +Added support for new markdown extensions. +::: +``` + +--- + +## 5. 最佳实践 + +### 建议 + +- **版本控制:** 如果使用项目级技能,请将 `skills/` 目录提交到 Git。这确保所有团队成员都能使用相同的功能。 +- **更新:** 定期检查技能更新以获取最新功能和修复。 + + ```bash + npx skills update + ``` + +### 性能与安全 + +- **审查更改:** 在部署之前,始终审查由 `vuepress-plume-config` 技能生成的配置文件。 +- **安全执行:** 这些技能主要生成文本/代码。在大多数代理环境中,未经用户确认,它们不会直接执行系统命令。 diff --git a/skills/vuepress-plume-config/SKILL.md b/skills/vuepress-plume-config/SKILL.md new file mode 100644 index 00000000..95fbe896 --- /dev/null +++ b/skills/vuepress-plume-config/SKILL.md @@ -0,0 +1,361 @@ +--- +name: vuepress-plume-config +description: Generate and write VuePress Plume theme config. Invoke when user asks to init or update theme config. +--- + +# VuePress Plume Config Skill + +This skill generates, manages, and writes VuePress Plume theme configuration files based on the official documentation. It supports `.vuepress/config.ts`, `.vuepress/config.js`, and `.vuepress/plume.config.ts`. + +**When to Invoke** + +- Initialize or update Plume theme configuration +- Dynamically generate themeConfig, collections, navbar, sidebar, locales according to input +- 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) + +## Input Schema + +```json +{ + "type": "object", + "required": ["format", "target_file"], + "properties": { + "format": { + "type": "string", + "enum": ["plume-config-ts", "vuepress-config-ts", "vuepress-config-js"], + "description": "Output file type and configuration style" + }, + "target_file": { + "type": "string", + "description": "Target file path to write (relative to project root or absolute)" + }, + "site": { + "type": "object", + "description": "VuePress site-level config (config.ts/js only)", + "properties": { + "lang": { "type": "string", "description": "Default language" }, + "title": { "type": "string", "description": "Site title" }, + "description": { "type": "string", "description": "Site description" }, + "base": { "type": "string", "description": "Deployment base path like /subpath/" }, + "head": { "type": "array", "description": "Extra tags", "items": { "type": "array" } }, + "locales": { + "type": "object", + "description": "Site locales (config.ts/js only)", + "additionalProperties": { + "type": "object", + "properties": { + "lang": { "type": "string" }, + "title": { "type": "string" }, + "description": { "type": "string" } + } + } + } + } + }, + "theme": { + "type": "object", + "description": "Plume theme configuration (themeConfig)", + "properties": { + "hostname": { "type": "string", "default": "", "description": "Deployment hostname (for sitemap/SEO)" }, + "autoFrontmatter": { + "type": ["object", "boolean"], + "default": { "permalink": true, "createTime": true, "title": true }, + "properties": { + "permalink": { "type": "boolean", "default": true }, + "createTime": { "type": "boolean", "default": true }, + "title": { "type": "boolean", "default": true } + }, + "description": "Automatically add frontmatter to Markdown" + }, + "cache": { + "type": ["string", "boolean"], + "enum": ["memory", "filesystem", false], + "default": "filesystem", + "description": "Compilation cache (config.ts/js only)" + }, + "docsRepo": { "type": "string", "default": "", "description": "Docs repository url" }, + "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)" }, + "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)" + }, + "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)" }, + "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" }, + "appearance": { + "type": ["string", "boolean"], + "enum": [true, false, "dark", "force-dark"], + "default": true, + "description": "Dark mode toggle and default mode" + }, + "profile": { + "type": "object", + "default": {}, + "description": "Site profile info", + "properties": { + "avatar": { "type": "string" }, + "name": { "type": "string" }, + "description": { "type": "string" }, + "circle": { "type": "boolean" }, + "location": { "type": "string" }, + "organization": { "type": "string" }, + "layout": { "type": "string", "enum": ["left", "right"], "default": "right" } + } + }, + "social": { + "type": ["array", "boolean"], + "default": false, + "description": "Social links (Iconify name or custom SVG)", + "items": { + "type": "object", + "properties": { + "icon": { "type": ["string", "object"] }, + "link": { "type": "string" }, + "ariaLabel": { "type": "string" } + }, + "required": ["icon", "link"] + } + }, + "navbarSocialInclude": { + "type": "array", + "default": ["github", "twitter", "discord", "facebook"], + "items": { "type": "string" }, + "description": "Social links allowed to display in navbar (PC)" + }, + "navbar": { + "type": "array", + "default": [], + "description": "Navbar configuration", + "items": { + "type": ["string", "object"], + "properties": { + "text": { "type": "string" }, + "link": { "type": "string" }, + "prefix": { "type": "string" }, + "items": { "type": "array" }, + "icon": { "type": ["string", "object"] }, + "activeMatch": { "type": "string" } + } + } + }, + "collections": { + "type": "array", + "default": [], + "description": "Content collections (post/doc)", + "items": { + "type": "object", + "required": ["type", "dir", "title"], + "properties": { + "type": { "type": "string", "enum": ["post", "doc"] }, + "dir": { "type": "string" }, + "title": { "type": "string" }, + "linkPrefix": { "type": "string" }, + "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" } }, + "pagination": { + "type": ["boolean", "number", "object"], + "properties": { "perPage": { "type": "number", "default": 15 } } + }, + "link": { "type": "string" }, + "postList": { "type": "boolean" }, + "tags": { "type": "boolean" }, + "tagsLink": { "type": "string" }, + "tagsText": { "type": "string" }, + "archives": { "type": "boolean" }, + "archivesLink": { "type": "string" }, + "archivesText": { "type": "string" }, + "categories": { "type": "boolean" }, + "categoriesLink": { "type": "string" }, + "categoriesText": { "type": "string" }, + "categoriesExpand": { "type": ["number", "string"], "enum": ["deep"] }, + "postCover": { + "type": ["string", "object"], + "description": "Layout or style", + "properties": { + "layout": { "type": "string", "enum": ["left", "right", "odd-left", "odd-right", "top"] }, + "ratio": { "type": "string" }, + "width": { "type": "number" }, + "compact": { "type": "boolean" } + } + }, + "profile": { "type": ["object", "boolean"] }, + "social": { "type": ["array", "boolean"] }, + "sidebar": { "type": ["string", "array"], "description": "Doc type only" }, + "sidebarScrollbar": { "type": "boolean" }, + "sidebarCollapsed": { "type": "boolean" } + } + } + }, + "sidebar": { + "type": ["object", "boolean"], + "description": "Global sidebar (prefer configuring in collections)" + }, + "sidebarScrollbar": { "type": "boolean", "default": true }, + "aside": { "type": ["boolean", "string"], "enum": [true, false, "left"], "default": true }, + "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 } } + }, + "locales": { + "type": "object", + "description": "Theme locales (texts and per-locale theme config)", + "additionalProperties": { + "type": "object", + "properties": { + "selectLanguageName": { "type": "string" }, + "selectLanguageText": { "type": "string" }, + "selectLanguageAriaLabel": { "type": "string" }, + "appearanceText": { "type": "string" }, + "homeText": { "type": "string" }, + "postsText": { "type": "string" }, + "tagText": { "type": "string" }, + "categoryText": { "type": "string" }, + "archiveText": { "type": "string" }, + "archiveTotalText": { "type": "string" }, + "sidebarMenuLabel": { "type": "string" }, + "returnToTopLabel": { "type": "string" }, + "outlineLabel": { "type": "string" }, + "editLinkText": { "type": "string" }, + "latestUpdatedText": { "type": "string" }, + "contributorsText": { "type": "string" }, + "changelogText": { "type": "string" }, + "changelogOnText": { "type": "string" }, + "changelogButtonText": { "type": "string" }, + "copyrightText": { "type": "string" }, + "copyrightAuthorText": { "type": "string" }, + "copyrightCreationOriginalText": { "type": "string" }, + "copyrightCreationTranslateText": { "type": "string" }, + "copyrightCreationReprintText": { "type": "string" }, + "copyrightLicenseText": { "type": "string" }, + "prevPageLabel": { "type": "string" }, + "nextPageLabel": { "type": "string" }, + "notFound": { + "type": "object", + "properties": { + "code": { "type": "string" }, + "title": { "type": "string" }, + "quote": { "type": "string" }, + "linkLabel": { "type": "string" }, + "linkText": { "type": "string" } + } + }, + "collections": { "type": "array" } + } + } + }, + "plugins": { + "type": "object", + "description": "Built-in plugin options for the theme (config.ts/js only)" + }, + "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)" } + } + } + } +} +``` + +## Execution Logic + +- 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.) + - Generate `defineThemeConfig({ ...theme })` +- If `format=vuepress-config-ts`: + - Generate `defineUserConfig({ site..., theme: plumeTheme({ ...theme }) })` +- If `format=vuepress-config-js`: + - Generate equivalent JavaScript version (remove types and `import type`) +- Write generated text to `target_file` (create parent dirs if missing) +- Output feedback: path, format, field summary, and ignored fields + +## Templates + +### plume.config.ts + +```ts +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 +}) +``` + +### .vuepress/config.ts + +```ts +import { defineUserConfig } from 'vuepress' +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. + }) +}) +``` + +### .vuepress/config.js + +```js +const { defineUserConfig } = require('vuepress') +const { plumeTheme } = require('vuepress-theme-plume') + +module.exports = defineUserConfig({ + theme: plumeTheme({ + // Same as TS version + }) +}) +``` + +## 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` +- 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/'` + +## Execution Feedback + +- Written file path and format type +- 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 + +## 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) diff --git a/skills/vuepress-plume-markdown/SKILL.md b/skills/vuepress-plume-markdown/SKILL.md new file mode 100644 index 00000000..29644584 --- /dev/null +++ b/skills/vuepress-plume-markdown/SKILL.md @@ -0,0 +1,50 @@ +--- +name: vuepress-plume-markdown +description: Help users write markdown files with VuePress Plume theme extensions, charts, and embeds. +--- + +# VuePress Plume Markdown Skill + +This skill provides assistance with VuePress Plume markdown extensions, charts, and embeds. +It helps users write rich content using the features provided by the theme. + +## 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. +- [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. + +## 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. + +## 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. diff --git a/skills/vuepress-plume-markdown/resources/abbreviation.md b/skills/vuepress-plume-markdown/resources/abbreviation.md new file mode 100644 index 00000000..bf18ae09 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/abbreviation.md @@ -0,0 +1,19 @@ +# Abbreviation + +Use `*[Abbreviation]: Description` to define an abbreviation. +The definition can be placed anywhere in the document, usually at the bottom. + +## Syntax + +```md +*[Abbreviation]: Description +``` + +## Example + +```md +The HTML specification is maintained by the W3C. + +*[HTML]: Hyper Text Markup Language +*[W3C]: World Wide Web Consortium +``` diff --git a/skills/vuepress-plume-markdown/resources/acfun.md b/skills/vuepress-plume-markdown/resources/acfun.md new file mode 100644 index 00000000..e5a7ca56 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/acfun.md @@ -0,0 +1,42 @@ +# AcFun Video + +Embed AcFun videos in your markdown. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + acfun: true, + }, + }) +}) +``` + +## Syntax + +```md +@[acfun](id) +``` + +With options: + +```md +@[acfun width="100%" height="400px" ratio="16:9"](id) +``` + +**Parameters:** + +- `id`: Video ID +- `width`: Video width +- `height`: Video height +- `ratio`: Video aspect ratio (default `16:9`) + +## Example + +```md +@[acfun](ac47431669) +``` diff --git a/skills/vuepress-plume-markdown/resources/annotation.md b/skills/vuepress-plume-markdown/resources/annotation.md new file mode 100644 index 00000000..ec40beff --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/annotation.md @@ -0,0 +1,18 @@ +# Annotation + +Annotation allows adding extra information or hints that are revealed on click. + +## Syntax + +1. **Inline Marker**: `[+label]` (must have a space before `[+`) +2. **Definition**: `[+label]: content` (can be multiline with indentation) + +## Example + +```md +This site is powered by VuePress [+vuepress]. + +[+vuepress]: + VuePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG). + It is specifically designed for building fast, content-centric sites. +``` diff --git a/skills/vuepress-plume-markdown/resources/artplayer.md b/skills/vuepress-plume-markdown/resources/artplayer.md new file mode 100644 index 00000000..b9d4fbef --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/artplayer.md @@ -0,0 +1,60 @@ +# ArtPlayer Video + +Embed custom source videos using ArtPlayer. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + artPlayer: true, + }, + }) +}) +``` + +You must install `artplayer`. Additional dependencies may be needed for specific formats: + +- `dashjs` for `.mpd`, `.dash` +- `hls.js` for `.m3u8`, `.hls` +- `mpegts.js` for `.ts`, `.flv` + +```sh +npm i artplayer +# Optional +npm i dashjs hls.js mpegts.js +``` + +## Syntax + +```md +@[artPlayer](src) +``` + +With options: + +```md +@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src) +``` + +**Parameters:** + +- `src`: Video source URL +- `width`: Video width +- `height`: Video height +- `ratio`: Video aspect ratio (default `16:9`) +- `type`: Video format (auto-detected) +- `autoplay`: Enable autoplay +- `muted`: Mute video (default `true` if autoplay) +- `volume`: Volume (0-1) +- `poster`: Poster image URL +- `auto-mini`: Auto mini-player on scroll + +## Example + +```md +@[artPlayer](https://example.com/video.mp4) +``` diff --git a/skills/vuepress-plume-markdown/resources/attrs.md b/skills/vuepress-plume-markdown/resources/attrs.md new file mode 100644 index 00000000..8149999d --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/attrs.md @@ -0,0 +1,43 @@ +# Attributes + +Add classes, IDs, and attributes to Markdown elements using `{ }`. + +## Syntax + +- **Inline**: Place `{.class #id attr=value}` immediately after the element. +- **Block**: Place `{.class #id attr=value}` on the line immediately following the block. + +## Examples + +### Inline + +```md +__bold__{.red} +[link](https://example.com){target=_blank} +``` + +### Headers + +```md +## Heading{#custom-id} +``` + +### Blocks (List/Table) + +```md +- list item + +{.red} + +| header | +| ------ | +| cell | + +{.table-class} +``` + +### Table Cells (Merge) + +```md +| 1 | 2 {colspan=2} | +``` diff --git a/skills/vuepress-plume-markdown/resources/audio-reader.md b/skills/vuepress-plume-markdown/resources/audio-reader.md new file mode 100644 index 00000000..436e28a0 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/audio-reader.md @@ -0,0 +1,55 @@ +# Audio Reader + +Embed a simple audio player button, useful for pronunciation guides. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + audioReader: true, + }, + }) +}) +``` + +## Syntax + +Inline syntax: + +```md +@[audioReader](src) +``` + +With options: + +```md +@[audioReader type="audio/mpeg" title="title" autoplay start-time="0" end-time="10" volume="0.7"](src) +``` + +**Parameters:** + +- `src`: Audio source URL +- `type`: Audio MIME type (e.g., `audio/mpeg`) +- `title`: Title displayed before the icon +- `autoplay`: Enable autoplay +- `start-time`: Start time in seconds +- `end-time`: End time in seconds +- `volume`: Volume (0-1) + +## Global Component + +You can also use the `` component. + +```md +[ˈɔːdioʊ] +``` + +## Example + +```md +audio 美 [ˈɔːdioʊ] @[audioReader](/audio/audio.mp3) +``` diff --git a/skills/vuepress-plume-markdown/resources/bilibili.md b/skills/vuepress-plume-markdown/resources/bilibili.md new file mode 100644 index 00000000..8a447c05 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/bilibili.md @@ -0,0 +1,49 @@ +# Bilibili Video + +Embed Bilibili videos in your markdown. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + bilibili: true, + }, + }) +}) +``` + +## Syntax + +Simple syntax (using BVID): + +```md +@[bilibili](bvid) +``` + +With options: + +```md +@[bilibili p1 autoplay time="0" width="100%" height="400px" ratio="16:9"](bvid aid cid) +``` + +**Parameters:** + +- `bvid`: Video BV ID (can be omitted if `aid` and `cid` are provided) +- `aid`: Video AID +- `cid`: Video CID +- `pX`: Page number (e.g., `p1`, `p2`) +- `autoplay`: Enable autoplay +- `time`: Start time (seconds or `mm:ss` / `hh:mm:ss`) +- `width`: Video width +- `height`: Video height +- `ratio`: Video aspect ratio (default `16:9`) + +## Example + +```md +@[bilibili](BV1EZ42187Hg) +``` diff --git a/skills/vuepress-plume-markdown/resources/card.md b/skills/vuepress-plume-markdown/resources/card.md new file mode 100644 index 00000000..75982151 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/card.md @@ -0,0 +1,30 @@ +# Card + +Create highlighted content cards using `::: card`. Wrap multiple cards in `:::: card-grid` for layout. + +## Syntax + +```md +::: card title="Title" icon="icon-name" +Content +::: +``` + +## Props + +- `title`: String, card title. +- `icon`: String, iconify name or image URL. + +## Example + +```md +:::: card-grid +::: card title="Feature A" icon="mdi:star" +Description of feature A. +::: + +::: card title="Feature B" icon="mdi:check" +Description of feature B. +::: +:::: +``` diff --git a/skills/vuepress-plume-markdown/resources/chart.md b/skills/vuepress-plume-markdown/resources/chart.md new file mode 100644 index 00000000..4c173caf --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/chart.md @@ -0,0 +1,68 @@ +# Chart.js + +The theme supports embedding [chart.js] charts within articles. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + chartjs: true, + }, + }) +}) +``` + +You also need to install the `chart.js` library: + +```sh +npm install chart.js +``` + +## Syntax + +Use the `chartjs` container with a JSON code block: + +````md +::: chartjs Title +```json +{ + "type": "bar", + "data": { + "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], + "datasets": [{ + "label": "# of Votes", + "data": [12, 19, 3, 5, 2, 3], + "backgroundColor": [ + "rgba(255, 99, 132, 0.2)", + "rgba(54, 162, 235, 0.2)", + "rgba(255, 206, 86, 0.2)", + "rgba(75, 192, 192, 0.2)", + "rgba(153, 102, 255, 0.2)", + "rgba(255, 159, 64, 0.2)" + ], + "borderColor": [ + "rgba(255, 99, 132, 1)", + "rgba(54, 162, 235, 1)", + "rgba(255, 206, 86, 1)", + "rgba(75, 192, 192, 1)", + "rgba(153, 102, 255, 1)", + "rgba(255, 159, 64, 1)" + ], + "borderWidth": 1 + }] + }, + "options": { + "scales": { + "y": { + "beginAtZero": true + } + } + } +} +``` +::: +```` diff --git a/skills/vuepress-plume-markdown/resources/chat.md b/skills/vuepress-plume-markdown/resources/chat.md new file mode 100644 index 00000000..1e492ec6 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/chat.md @@ -0,0 +1,27 @@ +# Chat + +Display chat records using `::: chat` container. + +## Syntax + +- Container: `::: chat title="Title"` +- Timestamp: `{:timestamp}` +- Other User: `{username}` +- Current User: `{.}` + +## Example + +```md +::: chat title="Conversation" +{:2023-10-01 12:00} + +{Alice} +Hello there! + +{.} +Hi Alice! How are you? + +{Alice} +I'm good, thanks. +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/code-tree.md b/skills/vuepress-plume-markdown/resources/code-tree.md new file mode 100644 index 00000000..082774a3 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/code-tree.md @@ -0,0 +1,26 @@ +# Code Tree + +Display a file tree alongside code blocks. + +## Syntax + +````md +::: code-tree title="Project Name" height="400px" entry="src/main.ts" +```lang title="src/main.ts" +// code +``` + +```lang title="package.json" +// code +``` +::: +```` + +- `entry`: Default expanded file path. +- `title` on code blocks: Defines the file path in the tree. + +## Import from Directory + +```md +@[code-tree](dir_path) +``` diff --git a/skills/vuepress-plume-markdown/resources/collapse.md b/skills/vuepress-plume-markdown/resources/collapse.md new file mode 100644 index 00000000..6d23422c --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/collapse.md @@ -0,0 +1,32 @@ +# Collapse + +Create collapsible panels using `::: collapse`. + +## Syntax + +```md +::: collapse [accordion] [expand] +- Title 1 + Content 1 + +- Title 2 + Content 2 +::: +``` + +- `accordion`: Only one panel expanded at a time. +- `expand`: Expand all by default. +- `:+ Title`: Mark specific item as expanded. +- `:- Title`: Mark specific item as collapsed. + +## Example + +```md +::: collapse accordion +- Panel 1 + Content 1 + +- :+ Panel 2 (Initially Expanded) + Content 2 +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/container.md b/skills/vuepress-plume-markdown/resources/container.md new file mode 100644 index 00000000..42ccc709 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/container.md @@ -0,0 +1,32 @@ +# Containers + +Use `::: type [title]` to create alert boxes or collapsible details. + +## Supported Types + +- `note`, `info`, `tip`, `warning`, `caution` (Alerts) +- `details` (Collapsible) + +## Syntax + +```md +::: type [Optional Title] +Content +::: +``` + +## Examples + +```md +::: tip +This is a tip. +::: + +::: warning CAUTION +Custom title for warning. +::: + +::: details Click to expand +Hidden content. +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/echarts.md b/skills/vuepress-plume-markdown/resources/echarts.md new file mode 100644 index 00000000..97a88d97 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/echarts.md @@ -0,0 +1,73 @@ +# ECharts + +The theme supports embedding [ECharts](https://echarts.apache.org/zh/index.html) charts within articles. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + echarts: true, + }, + }) +}) +``` + +You also need to install the `echarts` library: + +```sh +npm install echarts +``` + +## Syntax + +### JSON Configuration + +````md +::: echarts Title +```json +{ + "xAxis": { + "type": "category", + "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + }, + "yAxis": { + "type": "value" + }, + "series": [ + { + "data": [150, 230, 224, 218, 135, 147, 260], + "type": "line" + } + ] +} +``` +::: +```` + +### JavaScript Configuration + +````md +::: echarts Title +```js +const option = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: [150, 230, 224, 218, 135, 147, 260], + type: 'line' + } + ] +} +``` +::: +```` diff --git a/skills/vuepress-plume-markdown/resources/file-tree.md b/skills/vuepress-plume-markdown/resources/file-tree.md new file mode 100644 index 00000000..2aa33114 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/file-tree.md @@ -0,0 +1,27 @@ +# File Tree + +Display directory structure using `::: file-tree`. + +## Syntax + +Use unordered lists. + +- `++`: Added file/dir. +- `--`: Deleted file/dir. +- `**name**`: Bold name. +- `/` at end of dir name: Hide contents (if not listed). +- `...` or `…`: Placeholder. + +## Example + +```md +::: file-tree title="Structure" icon="simple" +- root + - .vuepress + - ++ config.ts + - -- old-file.md + - src/ + - README.md + - ... +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/flex.md b/skills/vuepress-plume-markdown/resources/flex.md new file mode 100644 index 00000000..13f8136c --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/flex.md @@ -0,0 +1,29 @@ +# Flex Container + +Apply Flexbox layout using `::: flex`. + +## Syntax + +```md +::: flex [justify] [align] [gap="20"] [column] +Block 1 + +Block 2 +::: +``` + +- Justify: `center`, `between`, `around` +- Align: `start`, `center`, `end` +- `column`: Vertical direction. + +## Example + +```md +::: flex between center +| Table 1 | +| ------- | + +| Table 2 | +| ------- | +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/flowchart.md b/skills/vuepress-plume-markdown/resources/flowchart.md new file mode 100644 index 00000000..d59bcdb3 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/flowchart.md @@ -0,0 +1,46 @@ +# Flowchart + +The theme supports embedding [flowchart](http://flowchart.js.org/) diagrams within articles. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + flowchart: true, + }, + }) +}) +``` + +You also need to install the `flowchart.ts` library: + +```sh +npm install flowchart.ts +``` + +## Syntax + +Use the `flow` code block with an optional preset (default `vue`, `ant`, `pie`). + +````md +```flow:preset +st=>start: Start|past:>http://www.google.com[blank] +e=>end: End|future:>http://www.google.com +op1=>operation: Operation 1|past +op2=>operation: Operation 2|current +sub1=>subroutine: Subroutine|invalid +cond=>condition: Yes/No?|approved:>http://www.google.com +c2=>condition: Condition 2|rejected +io=>inputoutput: Process input...|future + +st->op1(right)->cond +cond(yes, right)->c2 +cond(no)->sub1(left)->op1 +c2(yes)->io->e +c2(no)->op2->e +``` +```` diff --git a/skills/vuepress-plume-markdown/resources/github-alerts.md b/skills/vuepress-plume-markdown/resources/github-alerts.md new file mode 100644 index 00000000..d10d4685 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/github-alerts.md @@ -0,0 +1,22 @@ +# GitHub Alerts + +Use GitHub-style alerts. + +## Syntax + +```md +> [!NOTE] +> Note content. + +> [!TIP] +> Tip content. + +> [!IMPORTANT] +> Important content. + +> [!WARNING] +> Warning content. + +> [!CAUTION] +> Caution content. +``` diff --git a/skills/vuepress-plume-markdown/resources/icons.md b/skills/vuepress-plume-markdown/resources/icons.md new file mode 100644 index 00000000..8a4bf9c5 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/icons.md @@ -0,0 +1,17 @@ +# Icons + +Insert icons using `::name::`. + +## Syntax + +- Basic: `::name::` (e.g. `::mdi:home::`) +- Size: `::name =size::` (e.g. `::mdi:home =24px::`) +- Color: `::name /color::` (e.g. `::mdi:home /#f00::`) +- Collection: `::collection:name::` (e.g. `::mdi:home::`) + +## Example + +```md +::mdi:home:: +::mdi:home =24px /#ff0000:: +``` diff --git a/skills/vuepress-plume-markdown/resources/include.md b/skills/vuepress-plume-markdown/resources/include.md new file mode 100644 index 00000000..11a6054b --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/include.md @@ -0,0 +1,21 @@ +# File Include + +Include content from other files. + +## Syntax + +```md + +``` + +- **Lines**: `` +- **Region**: `` + - In source file: `` ... `` + +## Example + +```md + + + +``` diff --git a/skills/vuepress-plume-markdown/resources/mark.md b/skills/vuepress-plume-markdown/resources/mark.md new file mode 100644 index 00000000..8c83cd86 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/mark.md @@ -0,0 +1,19 @@ +# Mark + +Highlight text using `==text==`. + +## Syntax + +- **Basic**: `==text==` +- **Custom Color**: `==text=={.class}` + +## Built-in Classes + +`info`, `note`, `tip`, `warning`, `danger`, `caution`, `important`. + +## Example + +```md +This is ==highlighted==. +This is ==warning=={.warning}. +``` diff --git a/skills/vuepress-plume-markdown/resources/markmap.md b/skills/vuepress-plume-markdown/resources/markmap.md new file mode 100644 index 00000000..b362e684 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/markmap.md @@ -0,0 +1,57 @@ +# Markmap + +The theme supports embedding [markmap](https://markmap.js.org/) mind maps within articles. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + markmap: true, + }, + }) +}) +``` + +You also need to install `markmap-lib`, `markmap-toolbar`, and `markmap-view`: + +```sh +npm i markmap-lib markmap-toolbar markmap-view +``` + +## Syntax + +Use the `markmap` code block. Frontmatter configuration is supported within the block. + +````md +```markmap +--- +markmap: + colorFreezeLevel: 2 +--- + +# markmap + +## Links + +- +- [GitHub](https://github.com/markmap/markmap) + +## Features + +- Links +- **Strong** ~~Strikethrough~~ *Italic* ==Highlight== +- Multi-line + text +- `Inline code` +- + ```js + console.log('code block'); + ``` +- Katex + - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ +``` +```` diff --git a/skills/vuepress-plume-markdown/resources/math.md b/skills/vuepress-plume-markdown/resources/math.md new file mode 100644 index 00000000..064e80e4 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/math.md @@ -0,0 +1,19 @@ +# Math + +Render mathematical formulas. + +## Syntax + +- **Inline**: `$formula$` +- **Block**: `$$formula$$` + +## Example + +```md +Inline: $E=mc^2$ + +Block: +$$ +\sum_{i=1}^n i = \frac{n(n+1)}{2} +$$ +``` diff --git a/skills/vuepress-plume-markdown/resources/mermaid.md b/skills/vuepress-plume-markdown/resources/mermaid.md new file mode 100644 index 00000000..6476fbc2 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/mermaid.md @@ -0,0 +1,68 @@ +# Mermaid + +The theme supports embedding diagrams generated by [Mermaid](https://mermaid.js.org/) within articles. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + mermaid: true, + }, + }) +}) +``` + +You also need to install the `mermaid` library: + +```sh +npm install mermaid +``` + +## Syntax + +Use the `mermaid` code block or specific diagram type code blocks (e.g., `sequence`, `class`, `flow`, etc.). + +````md +```mermaid +flowchart TD + A[Start] --> B{Is it?} + B -- Yes --> C[OK] + C --> D[Rethink] + D --> B + B -- No --> E[End] +``` +```` + +### Supported Diagram Types + +You can use these aliases directly: + +- `class` -> `classDiagram` +- `c4c` -> `C4Context` +- `er` -> `erDiagram` +- `gantt` -> `gantt` +- `git-graph` -> `gitGraph` +- `journey` -> `journey` +- `mindmap` -> `mindmap` +- `pie` -> `pie` +- `quadrant` -> `quadrantChart` +- `requirement` -> `requirementDiagram` +- `sankey` -> `sankey-beta` +- `sequence` -> `sequenceDiagram` +- `state` -> `stateDiagram-v2` +- `timeline` -> `timeline` +- `xy` -> `xychart-beta` + +Example with title: + +````md +```sequence Diagram Title +Alice->>John: Hello John, how are you? +John-->>Alice: Great! +Alice-)John: See you later! +``` +```` diff --git a/skills/vuepress-plume-markdown/resources/npm-to.md b/skills/vuepress-plume-markdown/resources/npm-to.md new file mode 100644 index 00000000..dbc1a57e --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/npm-to.md @@ -0,0 +1,19 @@ +# Npm To + +Convert `npm` commands to `pnpm`, `yarn`, `bun`, `deno`. + +## Syntax + +Wrap an `npm` code block in `::: npm-to`. + +````md +::: npm-to +```sh +npm install vuepress +``` +::: +```` + +## Supported Commands + +`install`, `run`, `init`, `create`, `uninstall`, `ci`, `npx`. diff --git a/skills/vuepress-plume-markdown/resources/pdf.md b/skills/vuepress-plume-markdown/resources/pdf.md new file mode 100644 index 00000000..5ef7f70b --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/pdf.md @@ -0,0 +1,47 @@ +# PDF Reader + +Embed PDF files directly in your markdown. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + pdf: true, + }, + }) +}) +``` + +## Syntax + +Simple syntax: + +```md +@[pdf](url) +``` + +With options: + +```md +@[pdf 2 no-toolbar width="100%" height="400px" ratio="16:9" zoom="100"](url) +``` + +**Parameters:** + +- `url`: PDF URL +- `page`: Page number (e.g., `2` in `@[pdf 2]`) +- `no-toolbar`: Hide the toolbar +- `width`: Width (default `100%`) +- `height`: Height (default `auto`) +- `ratio`: Aspect ratio (default `16:9` if height not set) +- `zoom`: Zoom level percentage + +## Example + +```md +@[pdf 2 no-toolbar](https://plume.pengzhanbo.cn/files/sample.pdf) +``` diff --git a/skills/vuepress-plume-markdown/resources/plantuml.md b/skills/vuepress-plume-markdown/resources/plantuml.md new file mode 100644 index 00000000..2869387e --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/plantuml.md @@ -0,0 +1,50 @@ +# PlantUML + +The theme supports embedding [PlantUML](https://plantuml.com/) diagrams within articles. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + plantuml: true, + }, + }) +}) +``` + +## Syntax + +Use the `plantuml` syntax within a markdown file. Note: The example uses a raw code block, +but typically you would use the `@startuml` and `@enduml` tags directly or inside a code block if the plugin supports it. +The documentation shows: + +```md +@startuml +Alice -> Bob: Authentication Request + +alt successful case + + Bob -> Alice: Authentication Accepted + +else some failure case + + Bob -> Alice: Authentication Failed + group My own label + Alice -> Log : Log attack start + loop 1000 times + Alice -> Bob: DNS Attack + end + Alice -> Log : Log attack end + end + +else Another failure + + Bob -> Alice: Please repeat + +end +@enduml +``` diff --git a/skills/vuepress-plume-markdown/resources/qrcode.md b/skills/vuepress-plume-markdown/resources/qrcode.md new file mode 100644 index 00000000..f223f38f --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/qrcode.md @@ -0,0 +1,28 @@ +# QR Code + +Generate QR codes from text. + +## Syntax + +- **Inline**: `@[qrcode](text)` +- **Container**: + + ```md + ::: qrcode [card] [title="..."] + text + ::: + ``` + +## Attributes + +`card`, `svg`, `title="name"`, `align="center"`. + +## Example + +```md +@[qrcode](https://example.com) + +::: qrcode card title="Scan Me" +https://example.com +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/steps.md b/skills/vuepress-plume-markdown/resources/steps.md new file mode 100644 index 00000000..18492e03 --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/steps.md @@ -0,0 +1,17 @@ +# Steps + +Display sequential steps using `::: steps`. + +## Syntax + +Use ordered or unordered lists inside. + +```md +::: steps +1. Step 1 + Content for step 1. + +2. Step 2 + Content for step 2. +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/tabs.md b/skills/vuepress-plume-markdown/resources/tabs.md new file mode 100644 index 00000000..593d8a1a --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/tabs.md @@ -0,0 +1,25 @@ +# Tabs + +Create tabbed content using `::: tabs`. + +## Syntax + +- `::: tabs[#id]`: Container. +- `@tab Title`: Tab separator. +- `@tab:active Title`: Default active tab. + +## Example + +````md +::: tabs +@tab npm +```sh +npm install +``` + +@tab:active pnpm +```sh +pnpm install +``` +::: +```` diff --git a/skills/vuepress-plume-markdown/resources/timeline.md b/skills/vuepress-plume-markdown/resources/timeline.md new file mode 100644 index 00000000..9a72f60c --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/timeline.md @@ -0,0 +1,24 @@ +# Timeline + +Create a timeline using `::: timeline`. + +## Syntax + +- Container config: `horizontal`, `card`, `line="style"`, `placement="right|between"`. +- Item config (line after title): `time="date"`, `type="info|success|..."`, `icon=""`. + +## Example + +```md +::: timeline +- Event 1 + time=2023-01-01 type=success + + Content 1 + +- Event 2 + time=2023-02-01 type=warning icon=mdi:alert + + Content 2 +::: +``` diff --git a/skills/vuepress-plume-markdown/resources/youtube.md b/skills/vuepress-plume-markdown/resources/youtube.md new file mode 100644 index 00000000..9327eccb --- /dev/null +++ b/skills/vuepress-plume-markdown/resources/youtube.md @@ -0,0 +1,48 @@ +# YouTube Video + +Embed YouTube videos in your markdown. + +## Configuration + +Enable the feature in `.vuepress/config.ts`: + +```ts title=".vuepress/config.ts" +export default defineUserConfig({ + theme: plumeTheme({ + markdown: { + youtube: true, + }, + }) +}) +``` + +## Syntax + +Simple syntax: + +```md +@[youtube](id) +``` + +With options: + +```md +@[youtube autoplay loop start="0" end="0" width="100%" height="400px" ratio="16:9"](id) +``` + +**Parameters:** + +- `id`: Video ID +- `autoplay`: Enable autoplay +- `loop`: Enable loop playback +- `start`: Start time +- `end`: End time +- `width`: Video width +- `height`: Video height +- `ratio`: Video aspect ratio (default `16:9`) + +## Example + +```md +@[youtube](0JJPfz5dg20) +```