diff --git a/.github/workflows/example-layout-slots-deploy.yml b/.github/workflows/example-layout-slots-deploy.yml new file mode 100644 index 00000000..970becdf --- /dev/null +++ b/.github/workflows/example-layout-slots-deploy.yml @@ -0,0 +1,39 @@ +name: Deploy Docs + +on: + workflow_dispatch: + +jobs: + deploy-docs: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Install pnpm + uses: pnpm/action-setup@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: pnpm + + - name: Install deps + run: pnpm install --frozen-lockfile + + - name: Build Packages + run: pnpm build:package + + - name: Docs build + env: + NODE_OPTIONS: --max_old_space_size=8192 + run: cd examples/layout-slots && pnpm docs:build + + - name: Deploy docs + uses: JamesIves/github-pages-deploy-action@v4 + with: + branch: gh-pages-layout-slots + folder: examples/layout-slots/docs/.vuepress/dist + single-commit: true diff --git a/.gitignore b/.gitignore index 7ab039dc..59b93115 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,8 @@ **/node_modules/ -docs/.vuepress/.cache -docs/.vuepress/.temp -docs/.vuepress/dist +**/.vuepress/.cache +**/.vuepress/.temp +**/.vuepress/dist lib/ dist/ diff --git a/examples/layout-slots/docs/.vuepress/client.ts b/examples/layout-slots/docs/.vuepress/client.ts new file mode 100644 index 00000000..1b3b3851 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/client.ts @@ -0,0 +1,89 @@ +import { h } from 'vue' +import { Layout, NotFound } from 'vuepress-theme-plume/client' +import { defineClientConfig } from 'vuepress/client' +import SlotDemo from './theme/components/SlotDemo.vue' + +import './theme/styles/custom.css' + +export default defineClientConfig({ + layouts: { + Layout: () => h(Layout, null, { + 'layout-top': () => h(SlotDemo, { name: 'layout-top' }), + 'layout-bottom': () => h(SlotDemo, { name: 'layout-bottom' }), + + 'nav-bar-title-before': () => h(SlotDemo, { name: 'nav-bar-title-before', w: 64, h: 44, small: true }), + 'nav-bar-title-after': () => h(SlotDemo, { name: 'nav-bar-title-after', w: 64, h: 44, small: true }), + 'nav-bar-content-before': () => h(SlotDemo, { name: 'nav-bar-content-before', h: 44, small: true }), + 'nav-bar-content-after': () => h(SlotDemo, { name: 'nav-bar-content-after', h: 44, small: true }), + 'nav-bar-menu-before': () => h(SlotDemo, { name: 'nav-bar-menu-before', h: 44, small: true }), + 'nav-bar-menu-after': () => h(SlotDemo, { name: 'nav-bar-menu-after', h: 44, small: true }), + 'nav-screen-content-before': () => h(SlotDemo, { name: 'nav-screen-content-before', h: 44, small: true }), + 'nav-screen-content-after': () => h(SlotDemo, { name: 'nav-screen-content-after', h: 44, small: true }), + 'nav-screen-menu-before': () => h(SlotDemo, { name: 'nav-screen-menu-before', h: 44, small: true }), + 'nav-screen-menu-after': () => h(SlotDemo, { name: 'nav-screen-menu-after', h: 44, small: true }), + + 'footer-content': () => h(SlotDemo, { name: 'footer-content' }), + 'bulletin-content': () => h(SlotDemo, { name: 'bulletin-content' }), + + 'doc-top': () => h(SlotDemo, { name: 'doc-top' }), + 'doc-bottom': () => h(SlotDemo, { name: 'doc-bottom' }), + 'doc-footer-before': () => h(SlotDemo, { name: 'doc-footer-before' }), + 'doc-before': () => h(SlotDemo, { name: 'doc-before', mt: 16 }), + 'doc-after': () => h(SlotDemo, { name: 'doc-after' }), + 'doc-meta-before': () => h(SlotDemo, { name: 'doc-meta-before', h: 24 }), + 'doc-meta-after': () => h(SlotDemo, { name: 'doc-meta-after', h: 24 }), + 'doc-meta-top': () => h(SlotDemo, { name: 'doc-meta-top' }), + 'doc-meta-bottom': () => h(SlotDemo, { name: 'doc-meta-bottom' }), + + 'sidebar-nav-before': () => h(SlotDemo, { name: 'sidebar-nav-before' }), + 'sidebar-nav-after': () => h(SlotDemo, { name: 'sidebar-nav-after' }), + 'aside-top': () => h(SlotDemo, { name: 'aside-top' }), + 'aside-bottom': () => h(SlotDemo, { name: 'aside-bottom' }), + 'aside-outline-before': () => h(SlotDemo, { name: 'aside-outline-before', mt: 16 }), + 'aside-outline-after': () => h(SlotDemo, { name: 'aside-outline-after' }), + + 'page-top': () => h(SlotDemo, { name: 'page-top' }), + 'page-bottom': () => h(SlotDemo, { name: 'page-bottom' }), + + 'blog-top': () => h(SlotDemo, { name: 'blog-top' }), + 'blog-bottom': () => h(SlotDemo, { name: 'blog-bottom', mt: 16 }), + 'blog-aside-top': () => h(SlotDemo, { name: 'blog-aside-top', h: 44, mt: 16 }), + 'blog-aside-bottom': () => h(SlotDemo, { name: 'blog-aside-bottom', h: 44 }), + 'blog-extract-before': () => h(SlotDemo, { name: 'blog-extract-before' }), + 'blog-extract-after': () => h(SlotDemo, { name: 'blog-extract-after' }), + 'blog-post-list-before': () => h(SlotDemo, { name: 'blog-post-list-before', mt: 16 }), + 'blog-post-list-after': () => h(SlotDemo, { name: 'blog-post-list-after' }), + 'blog-post-list-pagination-after': () => h(SlotDemo, { + name: 'blog-post-list-pagination-after', + }), + 'blog-tags-before': () => h(SlotDemo, { name: 'blog-tags-before', mt: 16 }), + 'blog-tags-after': () => h(SlotDemo, { name: 'blog-tags-after', mt: 16 }), + 'blog-tags-content-before': () => h(SlotDemo, { name: 'blog-tags-content-before', mt: 16 }), + 'blog-tags-title-after': () => h(SlotDemo, { name: 'blog-tags-title-after' }), + 'blog-archives-before': () => h(SlotDemo, { name: 'blog-archives-before', mt: 16 }), + 'blog-archives-after': () => h(SlotDemo, { name: 'blog-archives-after' }), + 'blog-categories-before': () => h(SlotDemo, { name: 'blog-categories-before' }), + 'blog-categories-content-before': () => h(SlotDemo, { name: 'blog-categories-content-before' }), + 'blog-categories-after': () => h(SlotDemo, { name: 'blog-categories-after' }), + }), + NotFound: () => h(NotFound, null, { + 'layout-top': () => h(SlotDemo, { name: 'layout-top' }), + 'layout-bottom': () => h(SlotDemo, { name: 'layout-bottom' }), + + 'nav-bar-title-before': () => h(SlotDemo, { name: 'nav-bar-title-before', w: 64, h: 44, small: true }), + 'nav-bar-title-after': () => h(SlotDemo, { name: 'nav-bar-title-after', w: 64, h: 44, small: true }), + 'nav-bar-content-before': () => h(SlotDemo, { name: 'nav-bar-content-before', h: 44, small: true }), + 'nav-bar-content-after': () => h(SlotDemo, { name: 'nav-bar-content-after', h: 44, small: true }), + 'nav-bar-menu-before': () => h(SlotDemo, { name: 'nav-bar-menu-before', h: 44, small: true }), + 'nav-bar-menu-after': () => h(SlotDemo, { name: 'nav-bar-menu-after', h: 44, small: true }), + 'nav-screen-content-before': () => h(SlotDemo, { name: 'nav-screen-content-before', h: 44, small: true }), + 'nav-screen-content-after': () => h(SlotDemo, { name: 'nav-screen-content-after', h: 44, small: true }), + 'nav-screen-menu-before': () => h(SlotDemo, { name: 'nav-screen-menu-before', h: 44, small: true }), + 'nav-screen-menu-after': () => h(SlotDemo, { name: 'nav-screen-menu-after', h: 44, small: true }), + + 'footer-content': () => h(SlotDemo, { name: 'footer-content' }), + + 'not-found': () => h(SlotDemo, { name: 'not-found' }), + }), + }, +}) diff --git a/examples/layout-slots/docs/.vuepress/config.ts b/examples/layout-slots/docs/.vuepress/config.ts new file mode 100644 index 00000000..f6ea78bd --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/config.ts @@ -0,0 +1,34 @@ +import { viteBundler } from '@vuepress/bundler-vite' +import { defineUserConfig } from 'vuepress' +import { plumeTheme } from 'vuepress-theme-plume' + +export default defineUserConfig({ + base: '/', + lang: 'zh-CN', + title: 'Plume', + description: 'vuepress-theme-plume', + + head: [ + // 配置站点图标 + ['link', { rel: 'icon', type: 'image/png', href: 'https://theme-plume.vuejs.press/favicon-32x32.png' }], + ], + + bundler: viteBundler(), + shouldPrefetch: false, // 站点较大，页面数量较多时，不建议启用 + + theme: plumeTheme({ + /* 添加您的部署域名, 有助于 SEO, 生成 sitemap */ + // hostname: 'https://your_site_url', + + /* 文档仓库配置，用于 editLink */ + docsRepo: 'pengzhanbo/vuepress-theme-plume', + docsDir: 'examples/layout-slots/docs', + + /* 页内信息 */ + contributors: { mode: 'block' }, + changelog: true, + + /* 本地搜索, 默认启用 */ + search: { provider: 'local' }, + }), +}) diff --git a/examples/layout-slots/docs/.vuepress/navbar.ts b/examples/layout-slots/docs/.vuepress/navbar.ts new file mode 100644 index 00000000..6a5128e1 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/navbar.ts @@ -0,0 +1,8 @@ +import { defineNavbarConfig } from 'vuepress-theme-plume' + +export const navbar = defineNavbarConfig([ + { text: '首页', link: '/' }, + { text: '博客', link: '/blog/' }, + { text: '404', link: '/404/' }, + { text: '笔记', link: '/notes/demo/README.md' }, +]) diff --git a/examples/layout-slots/docs/.vuepress/notes.ts b/examples/layout-slots/docs/.vuepress/notes.ts new file mode 100644 index 00000000..01c39b0c --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/notes.ts @@ -0,0 +1,13 @@ +import { defineNoteConfig, defineNotesConfig } from 'vuepress-theme-plume' + +const demoNote = defineNoteConfig({ + dir: 'demo', + link: '/demo', + sidebar: ['', 'foo', 'bar'], +}) + +export const notes = defineNotesConfig({ + dir: 'notes', + link: '/', + notes: [demoNote], +}) diff --git a/examples/layout-slots/docs/.vuepress/plume.config.ts b/examples/layout-slots/docs/.vuepress/plume.config.ts new file mode 100644 index 00000000..8e4f20cf --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/plume.config.ts @@ -0,0 +1,31 @@ +import { defineThemeConfig } from 'vuepress-theme-plume' +import { navbar } from './navbar' +import { notes } from './notes' + +/** + * @see https://theme-plume.vuejs.press/config/basic/ + */ +export default defineThemeConfig({ + logo: 'https://theme-plume.vuejs.press/plume.png', + + appearance: true, // 配置 深色模式 + + social: [ + { icon: 'github', link: '/' }, + ], + + /** + * @see https://theme-plume.vuejs.press/config/basic/#profile + */ + profile: { + avatar: 'https://theme-plume.vuejs.press/plume.png', + name: 'VuePress Plume', + description: 'vuepress-theme-plume', + // circle: true, + // location: '', + // organization: '', + }, + + navbar, + notes, +}) diff --git a/examples/layout-slots/docs/.vuepress/public/plume.svg b/examples/layout-slots/docs/.vuepress/public/plume.svg new file mode 100644 index 00000000..62ee70c6 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/public/plume.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/examples/layout-slots/docs/.vuepress/theme/components/Custom.vue b/examples/layout-slots/docs/.vuepress/theme/components/Custom.vue new file mode 100644 index 00000000..04bac0a3 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/theme/components/Custom.vue @@ -0,0 +1,11 @@ + + + diff --git a/examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue b/examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue new file mode 100644 index 00000000..04c49732 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue @@ -0,0 +1,68 @@ + + + + + diff --git a/examples/layout-slots/docs/.vuepress/theme/shim.d.ts b/examples/layout-slots/docs/.vuepress/theme/shim.d.ts new file mode 100644 index 00000000..f07bbd33 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/theme/shim.d.ts @@ -0,0 +1,6 @@ +declare module '*.vue' { + import type { ComponentOptions } from 'vue' + + const comp: ComponentOptions + export default comp +} diff --git a/examples/layout-slots/docs/.vuepress/theme/styles/custom.css b/examples/layout-slots/docs/.vuepress/theme/styles/custom.css new file mode 100644 index 00000000..163eed82 --- /dev/null +++ b/examples/layout-slots/docs/.vuepress/theme/styles/custom.css @@ -0,0 +1,3 @@ +:root { + --vp-layout-top-height: 60px; +} diff --git a/examples/layout-slots/docs/README.md b/examples/layout-slots/docs/README.md new file mode 100644 index 00000000..8c2d8057 --- /dev/null +++ b/examples/layout-slots/docs/README.md @@ -0,0 +1,33 @@ +--- +pageLayout: home +config: + - + type: doc-hero + hero: + name: Theme Plume + text: VuePress Next Theme + tagline: 示例用于展示所有的布局插槽 + image: + src: /plume.svg + width: 240 + actions: + - + theme: brand + text: 博客 + link: /blog/ + - + theme: alt + text: Github → + link: https://github.com/pengzhanbo/vuepress-theme-plume +--- + + diff --git a/examples/layout-slots/docs/notes/demo/README.md b/examples/layout-slots/docs/notes/demo/README.md new file mode 100644 index 00000000..2d4320cd --- /dev/null +++ b/examples/layout-slots/docs/notes/demo/README.md @@ -0,0 +1,10 @@ +--- +title: Demo +createTime: 2025/04/17 02:28:30 +permalink: /demo/ +--- + +## Links + +- [bar](./bar.md) +- [foo](./foo.md) diff --git a/examples/layout-slots/docs/notes/demo/bar.md b/examples/layout-slots/docs/notes/demo/bar.md new file mode 100644 index 00000000..f2cedbdf --- /dev/null +++ b/examples/layout-slots/docs/notes/demo/bar.md @@ -0,0 +1,9 @@ +--- +title: bar +createTime: 2025/04/17 02:28:30 +permalink: /demo/yo5telb7/ +--- + +## Links + +[foo](./foo.md) diff --git a/examples/layout-slots/docs/notes/demo/foo.md b/examples/layout-slots/docs/notes/demo/foo.md new file mode 100644 index 00000000..6f87c33f --- /dev/null +++ b/examples/layout-slots/docs/notes/demo/foo.md @@ -0,0 +1,9 @@ +--- +title: foo +createTime: 2025/04/17 02:28:30 +permalink: /demo/nsgytm0i/ +--- + +## Links + +[bar](./bar.md) diff --git a/examples/layout-slots/docs/preview/layout-page.md b/examples/layout-slots/docs/preview/layout-page.md new file mode 100644 index 00000000..4debece2 --- /dev/null +++ b/examples/layout-slots/docs/preview/layout-page.md @@ -0,0 +1,11 @@ +--- +pageLayout: page +title: "Layout: Page" +tags: + - 预览 + - 组件 +createTime: 2025/04/17 02:28:30 +permalink: /article/u2pon1pb/ +--- + +Layout: Page Content diff --git a/examples/layout-slots/docs/preview/markdown.md b/examples/layout-slots/docs/preview/markdown.md new file mode 100644 index 00000000..c4ba7a97 --- /dev/null +++ b/examples/layout-slots/docs/preview/markdown.md @@ -0,0 +1,315 @@ +--- +title: Markdown +tags: + - markdown +createTime: 2025/04/17 02:28:30 +permalink: /article/fs03b2zf/ +--- + +## 标题H2 + +### 标题H3 + +#### 标题H4 + +##### 标题H5 + +###### 标题H6 + +## 标题2 Badge + +### 标题3 Badge + +#### 标题4 Badge + +正文内容。 + +`@property` CSS at-rule是 [CSS Houdini API](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Houdini) +的一部分，它允许开发者显式地定义他们的 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*), +允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 + +`@property` 的出现，极大的增强了 CSS 的能力。 + +加粗：**加粗文字** + +斜体： _斜体文字_ + +~~删除文字~~ + +内容 ==标记== + +数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$ + +$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) += \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$ + +19^th^ + +H~2~O + +::: center +内容居中 +::: + +::: right +内容右对齐 +::: + +- 无序列表1 +- 无序列表2 +- 无序列表3 + +1. 有序列表1 +2. 有序列表2 +3. 有序列表3 + +- [ ] 任务列表1 +- [ ] 任务列表2 +- [x] 任务列表3 +- [x] 任务列表4 + +| Tables | Are | Cool | +| ------------- |:-------------:| -----:| +| col 3 is | right-aligned | $1600 | +| col 2 is | centered | $12 | +| zebra stripes | are neat | $1 | + +> 引用内容 +> +> 引用内容 + +[链接](/) + +[外部链接](https://github.com/pengzhanbo) + +![plume](/plume.svg) + +**Badge：** + +- +- +- +- + +**图标：** + +- home - +- vscode - +- twitter - + +**demo wrapper：** + +::: demo-wrapper title="示例" no-padding height="200px" + + +
+
main
+
aside
+
+ +::: + +**代码：** + +```js whitespace +const a = 1 +const b = 2 +const c = a + b + +// [!code word:obj] +const obj = { + toLong: { + deep: { + deep: { + deep: { + value: 'this is to long text. this is to long text. this is to long text. this is to long text.', // [!code highlight] + } + } + } + } +} +``` + +**代码分组：** + +::: code-tabs +@tab tab1 + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +@tab tab2 + +```ts +const a: number = 1 +const b: number = 2 +const c: number = a + b +``` + +::: + +**代码块高亮：** + +```ts +function foo() { + const a = 1 // [!code highlight] + + console.log(a) + + const b = 2 // [!code ++] + const c = 3 // [!code --] + + console.log(a + b + c) // [!code error] + console.log(a + b) // [!code warning] +} +``` + +**代码块聚焦：** + +```ts +function foo() { + const a = 1 // [!code focus] +} +``` + +::: tip 仅标题 +::: + +::: note 注释 +注释内容 [link](https://github.com/pengzhanbo) `inline code` + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +::: + +::: info 信息 +信息内容 [link](https://github.com/pengzhanbo) `inline code` + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +::: + +::: tip 提示 +提示内容 [link](https://github.com/pengzhanbo) `inline code` + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +::: + +::: warning 警告 +警告内容 [link](https://github.com/pengzhanbo) `inline code` + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +::: + +::: caution 错误 +错误内容 [link](https://github.com/pengzhanbo) `inline code` + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +::: + +::: important 重要 +重要内容 [link](https://github.com/pengzhanbo) `inline code` + +```js +const a = 1 +const b = 2 +const c = a + b +``` + +::: + +::: details 详细标题 + +这里是内容。 +::: + +**GFM alert：** + +> [!note] +> note + +> [!info] +> info + +> [!tip] +> tip + +> [!warning] +> warning + +> [!caution] +> caution + +> [!important] +> important + +**选项卡：** + +::: tabs +@tab 标题1 +内容区块 + +@tab 标题2 +内容区块 +::: + +:::: warning +::: tabs +@tab 标题1 +内容区块 + +@tab 标题2 +内容区块 +::: +:::: + +**脚注：** + +脚注 1 链接[^first]。 + +脚注 2 链接[^second]。 + +行内的脚注^[行内脚注文本] 定义。 + +重复的页脚定义[^second]。 + +[^first]: 脚注 **可以包含特殊标记** + + 也可以由多个段落组成 + +[^second]: 脚注文字。 diff --git a/examples/layout-slots/package.json b/examples/layout-slots/package.json new file mode 100644 index 00000000..de65b922 --- /dev/null +++ b/examples/layout-slots/package.json @@ -0,0 +1,21 @@ +{ + "name": "layout-slots", + "type": "module", + "private": true, + "scripts": { + "docs:build": "vuepress build docs --clean-cache --clean-temp", + "docs:clean": "rimraf .vuepress/.temp .vuepress/.cache .vuepress/dist", + "docs:dev": "vuepress dev docs" + }, + "peerDependencies": { + "vuepress": "catalog:vuepress" + }, + "dependencies": { + "@iconify/json": "catalog:peer", + "@vuepress/bundler-vite": "catalog:vuepress", + "http-server": "catalog:dev", + "sass-embedded": "catalog:peer", + "vue": "catalog:prod", + "vuepress-theme-plume": "workspace:*" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 14070183..08df16a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -544,6 +544,30 @@ importers: specifier: catalog:dev version: 5.0.1 + examples/layout-slots: + dependencies: + '@iconify/json': + specifier: catalog:peer + version: 2.2.329 + '@vuepress/bundler-vite': + specifier: catalog:vuepress + version: 2.0.0-rc.21(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(stylus@0.64.0)(typescript@5.8.3)(yaml@2.7.0) + http-server: + specifier: catalog:dev + version: 14.1.1 + sass-embedded: + specifier: ^1.86.3 + version: 1.86.3 + vue: + specifier: catalog:prod + version: 3.5.13(typescript@5.8.3) + vuepress: + specifier: catalog:vuepress + version: 2.0.0-rc.21(@vuepress/bundler-vite@2.0.0-rc.21(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(sass-embedded@1.86.3)(sass@1.86.3)(stylus@0.64.0)(typescript@5.8.3)(yaml@2.7.0))(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)) + vuepress-theme-plume: + specifier: workspace:* + version: link:../../theme + plugins/plugin-fonts: dependencies: vuepress: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 774a99bf..5682b39b 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -3,6 +3,7 @@ packages: - theme - cli - plugins/* + - examples/* overrides: '@typescript-eslint/utils': ^8.30.1