@sugarat/create-theme 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.js.map +1 -1
  2. package/dist/template/docs/.vitepress/blog-theme.ts +18 -14
  3. package/dist/template/docs/.vitepress/config.mts +4 -8
  4. package/dist/template/docs/sop/{mermaid.md → component.md} +93 -4
  5. package/dist/template/docs/sop/style.md +25 -18
  6. package/dist/template/package.json +2 -2
  7. package/package.json +2 -3
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport path from 'node:path'\nimport process from 'process'\nimport fs from 'fs-extra'\n\nfunction createThemeProject(destination) {\n const templatePath = path.join(__dirname, 'template')\n\n fs.copy(templatePath, destination, async (err) => {\n // 同步创建.gitignore文件和.npmrc文件\n await fs.copy(\n path.join(__dirname, 'move/gitignore'),\n path.join(destination, '.gitignore')\n )\n await fs.copy(\n path.join(__dirname, 'move/npmrc'),\n path.join(destination, '.npmrc')\n )\n if (err) {\n console.error('An error occurred while copying template files:', err)\n }\n else {\n console.log('🎉 🎉 created successfully!')\n console.log()\n\n console.log(`project in ${destination}`)\n\n console.log()\n\n const msg = `Done. Now run:\n\n ① cd ${path.parse(destination).name}\n ② pnpm install\n ③ pnpm run dev`\n\n console.log(msg)\n }\n })\n}\n\nconsole.log('Creating @sugarat/theme project...')\nconsole.log()\n\nconst projectName = process.argv[2] || 'my-blog'\ncreateThemeProject(path.join(process.cwd(), projectName))\n"],"mappings":";wpBAEA,IAAAA,EAAiB,mBACjBC,EAAoB,sBACpBC,EAAe,uBAEf,SAASC,EAAmBC,EAAa,CACvC,IAAMC,EAAe,EAAAC,QAAK,KAAK,UAAW,UAAU,EAEpD,EAAAC,QAAG,KAAKF,EAAcD,EAAoBI,GAAQC,EAAA,sBAUhD,GARA,MAAM,EAAAF,QAAG,KACP,EAAAD,QAAK,KAAK,UAAW,gBAAgB,EACrC,EAAAA,QAAK,KAAKF,EAAa,YAAY,CACrC,EACA,MAAM,EAAAG,QAAG,KACP,EAAAD,QAAK,KAAK,UAAW,YAAY,EACjC,EAAAA,QAAK,KAAKF,EAAa,QAAQ,CACjC,EACII,EACF,QAAQ,MAAM,kDAAmDA,CAAG,MAEjE,CACH,QAAQ,IAAI,2CAA6B,EACzC,QAAQ,IAAI,EAEZ,QAAQ,IAAI,cAAcJ,GAAa,EAEvC,QAAQ,IAAI,EAEZ,IAAMM,EAAM;AAAA;AAAA,eAER,EAAAJ,QAAK,MAAMF,CAAW,EAAE;AAAA;AAAA,wBAI5B,QAAQ,IAAIM,CAAG,CACjB,CACF,EAAC,CACH,CAEA,QAAQ,IAAI,oCAAoC,EAChD,QAAQ,IAAI,EAEZ,IAAMC,EAAc,EAAAC,QAAQ,KAAK,IAAM,UACvCT,EAAmB,EAAAG,QAAK,KAAK,EAAAM,QAAQ,IAAI,EAAGD,CAAW,CAAC","names":["import_node_path","import_process","import_fs_extra","createThemeProject","destination","templatePath","path","fs","err","__async","msg","projectName","process"]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport path from 'node:path'\nimport process from 'process'\nimport fs from 'fs-extra'\n\nfunction createThemeProject(destination) {\n const templatePath = path.join(__dirname, 'template')\n\n fs.copy(templatePath, destination, async (err) => {\n // 同步创建.gitignore文件和.npmrc文件\n await fs.copy(\n path.join(__dirname, 'move/gitignore'),\n path.join(destination, '.gitignore')\n )\n await fs.copy(\n path.join(__dirname, 'move/npmrc'),\n path.join(destination, '.npmrc')\n )\n if (err) {\n console.error('An error occurred while copying template files:', err)\n }\n else {\n console.log('🎉 🎉 created successfully!')\n console.log()\n\n console.log(`project in ${destination}`)\n\n console.log()\n\n const msg = `Done. Now run:\n\n ① cd ${path.parse(destination).name}\n ② pnpm install\n ③ pnpm run dev`\n\n console.log(msg)\n }\n })\n}\n\nconsole.log('Creating @sugarat/theme project...')\nconsole.log()\n\nconst projectName = process.argv[2] || 'my-blog'\ncreateThemeProject(path.join(process.cwd(), projectName))\n"],"mappings":";wpBAEA,IAAAA,EAAiB,mBACjBC,EAAoB,sBACpBC,EAAe,uBAEf,SAASC,EAAmBC,EAAa,CACvC,IAAMC,EAAe,EAAAC,QAAK,KAAK,UAAW,UAAU,EAEpD,EAAAC,QAAG,KAAKF,EAAcD,EAAoBI,GAAQC,EAAA,sBAUhD,GARA,MAAM,EAAAF,QAAG,KACP,EAAAD,QAAK,KAAK,UAAW,gBAAgB,EACrC,EAAAA,QAAK,KAAKF,EAAa,YAAY,CACrC,EACA,MAAM,EAAAG,QAAG,KACP,EAAAD,QAAK,KAAK,UAAW,YAAY,EACjC,EAAAA,QAAK,KAAKF,EAAa,QAAQ,CACjC,EACII,EACF,QAAQ,MAAM,kDAAmDA,CAAG,MAEjE,CACH,QAAQ,IAAI,2CAA6B,EACzC,QAAQ,IAAI,EAEZ,QAAQ,IAAI,cAAcJ,CAAW,EAAE,EAEvC,QAAQ,IAAI,EAEZ,IAAMM,EAAM;AAAA;AAAA,eAER,EAAAJ,QAAK,MAAMF,CAAW,EAAE,IAAI;AAAA;AAAA,wBAIhC,QAAQ,IAAIM,CAAG,CACjB,CACF,EAAC,CACH,CAEA,QAAQ,IAAI,oCAAoC,EAChD,QAAQ,IAAI,EAEZ,IAAMC,EAAc,EAAAC,QAAQ,KAAK,CAAC,GAAK,UACvCT,EAAmB,EAAAG,QAAK,KAAK,EAAAM,QAAQ,IAAI,EAAGD,CAAW,CAAC","names":["import_node_path","import_process","import_fs_extra","createThemeProject","destination","templatePath","path","fs","err","__async","msg","projectName","process"]}
package/dist/template/docs/.vitepress/blog-theme.ts CHANGED
@@ -38,6 +38,7 @@ const blogTheme = getThemeConfig({
38
38
  // link: 'https://www.beian.gov.cn/portal/index.do'
39
39
  // },
40
40
  },
41
+
41
42
  // 主题色修改
42
43
  themeColor: 'el-blue',
43
44
 
@@ -66,32 +67,35 @@ const blogTheme = getThemeConfig({
66
67
  popover: {
67
68
  title: '公告',
68
69
  body: [
70
+ { type: 'text', content: '👇公众号👇---👇 微信 👇' },
69
71
  {
70
- type: 'text',
71
- content:
72
- 'QQ交流群：681489336 🎉🎉',
72
+ type: 'image',
73
+ src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210'
73
74
  },
74
75
  {
75
76
  type: 'text',
76
- content:
77
- '👇公众号👇---👇 微信 👇',
78
- },
79
- {
80
- type: 'image',
81
- src: 'https://img.cdn.sugarat.top/mdImg/MTYxNTAxODc2NTIxMA==615018765210',
77
+ content: '欢迎大家加群&私信交流'
82
78
  },
83
79
  {
84
80
  type: 'text',
85
- content:
86
- '欢迎大家加群&私信交流',
81
+ content: '文章首/文尾有群二维码',
82
+ style: 'padding-top:0'
87
83
  },
88
84
  {
89
85
  type: 'button',
90
- content: '博客',
91
- link: 'https://sugarat.top',
86
+ content: '作者博客',
87
+ link: 'https://sugarat.top'
92
88
  },
89
+ {
90
+ type: 'button',
91
+ content: '加群交流',
92
+ props: {
93
+ type: 'success'
94
+ },
95
+ link: 'https://theme.sugarat.top/group.html',
96
+ }
93
97
  ],
94
- duration: 0,
98
+ duration: 0
95
99
  },
96
100
  })
97
101
 
package/dist/template/docs/.vitepress/config.mts CHANGED
@@ -1,20 +1,16 @@
1
- import { defineConfig } from '@sugarat/theme/node'
1
+ import { defineConfig } from 'vitepress'
2
+
3
+ // 导入主题的配置
2
4
  import { blogTheme } from './blog-theme'
3
5
 
4
6
  // Vitepress 默认配置
5
7
  // 详见文档：https://vitepress.dev/reference/site-config
6
8
  export default defineConfig({
7
- // 继承博客主题配置
9
+ // 继承博客主题(@sugarat/theme)
8
10
  extends: blogTheme,
9
11
  lang: 'zh-cn',
10
12
  title: '@sugarat/theme',
11
13
  description: '粥里有勺糖的博客主题，基于 vitepress 实现',
12
- vite: {
13
- optimizeDeps: {
14
- include: ['element-plus'],
15
- exclude: ['@sugarat/theme']
16
- }
17
- },
18
14
  lastUpdated: true,
19
15
  themeConfig: {
20
16
  lastUpdatedText: '上次更新于',
package/dist/template/docs/sop/{mermaid.md → component.md} RENAMED
@@ -1,7 +1,96 @@
1
1
  ---
2
- description: 通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
2
+ description: 默认支持流程图，tabs面板
3
3
  ---
4
- # Mermaid - 流程图
4
+
5
+ # 内置第三方插件能力
6
+
7
+ ## tabs
8
+ * Type: `boolean`
9
+
10
+ 支持局部的`tabs`面板，**默认开启**
11
+
12
+ :::tip 一点说明
13
+ 基于 [vitepress-plugin-tabs@0.2.0](https://www.npmjs.com/package/vitepress-plugin-tabs) 内置实现
14
+ :::
15
+
16
+ 效果如下
17
+
18
+ :::=tabs
19
+ ::tab1
20
+ 一些内容
21
+
22
+ 一些内容
23
+
24
+ 一些内容
25
+
26
+ ::tab2
27
+ 一些内容 。。。
28
+ :::
29
+
30
+ 简单的使用方式如下（效果如上面的示例）
31
+
32
+ ```md
33
+ :::=tabs
34
+ ::tab1
35
+ 一些内容
36
+
37
+ 一些内容
38
+
39
+ 一些内容
40
+
41
+ ::tab2
42
+ 一些内容 。。。
43
+ :::
44
+ ```
45
+
46
+ 共享状态的使用方式如下
47
+
48
+ ```md
49
+ :::=tabs=ab
50
+ ::a
51
+ a content
52
+
53
+ ::b
54
+ b content
55
+ :::
56
+
57
+ :::=tabs=ab
58
+ ::a
59
+ a content 2
60
+
61
+ ::b
62
+ b content 2
63
+ :::
64
+ ```
65
+
66
+
67
+ :::=tabs=ab
68
+ ::a
69
+ a content
70
+
71
+ ::b
72
+ b content
73
+ :::
74
+
75
+ :::=tabs=ab
76
+ ::a
77
+ a content 2
78
+
79
+ ::b
80
+ b content 2
81
+ :::
82
+
83
+ 不需要也可以关闭
84
+
85
+ ```ts
86
+ // .vitepress/blog-theme.ts
87
+ const blogTheme = getThemeConfig({
88
+ tabs: false
89
+ })
90
+ ```
91
+
92
+ ## Mermaid - 图表
93
+ * Type: `boolean`|`object`
5
94
 
6
95
  >通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
7
96
 
@@ -26,7 +115,7 @@ flowchart TD
26
115
  Start --> Stop
27
116
  ```
28
117
 
29
- 默认开启，可以通过`mermaid`进行进一步配置，或关闭
118
+ **默认开启**，可以通过`mermaid`进行进一步配置，或关闭
30
119
 
31
120
  :::code-group
32
121
  ```ts [① 关闭]
@@ -68,4 +157,4 @@ gantt
68
157
  Parallel 2 : des4, after des1, 1d
69
158
  Parallel 3 : des5, after des3, 1d
70
159
  Parallel 4 : des6, after des4, 1d
71
- ```
160
+ ```
package/dist/template/docs/sop/style.md CHANGED
@@ -17,8 +17,9 @@ recommend: 3
17
17
  博客模板里，提供了一个如下例子
18
18
 
19
19
  ```ts
20
- // .vitepress/theme/index.ts [!code focus]
20
+ // .vitepress/theme/index.ts
21
21
  import BlogTheme from '@sugarat/theme'
22
+
22
23
  // 自定义样式重载 // [!code focus]
23
24
  import './style.scss' // [!code focus]
24
25
 
@@ -93,36 +94,42 @@ vitepress 最新的默认主题色偏紫色，看着感觉有点不习惯
93
94
 
94
95
  如果内置的不满足要求，也可以进行自定义，自定义的方式是通过覆盖变量的方式
95
96
 
97
+ 例如可以创建`user-theme.css`文件，内容如下
96
98
  ```css
97
99
  /* 所有变量：https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
100
+ /* 自定义主题色示例，如下 */
98
101
 
99
- /* 自定义主题色，绿色 */
102
+ /* 浅色模式使用的变量 */
100
103
  html[theme] {
101
- --vp-c-green: #10b981;
102
- --vp-c-green-light: #34d399;
103
- --vp-c-green-lighter: #6ee7b7;
104
- --vp-c-green-dark: #059669;
105
- --vp-c-green-darker: #047857;
106
-
107
- --vp-c-brand-1: var(--vp-c-green);
108
- --vp-c-brand-2: var(--vp-c-green-light);
109
- --vp-c-brand-3: var(--vp-c-green-lighter);
110
- --vp-c-brand-soft: rgba(110, 231, 183, 0.22);
104
+ --vp-c-user-1:red;
105
+ --vp-c-user-2:blue;
106
+ --vp-c-user-3:green;
107
+ --vp-c-user-soft:rgba(255,0,0,.5);
111
108
  }
112
109
 
110
+ /* 深色模式使用的变量 */
113
111
  html[theme].dark {
114
- --vp-c-brand-1: var(--vp-c-green);
115
- --vp-c-brand-2: var(--vp-c-green-dark);
116
- --vp-c-brand-3: var(--vp-c-green-darker);
117
- --vp-c-brand-soft: rgba(4, 120, 87, 0.25);
112
+ --vp-c-user-1:yellow;
113
+ --vp-c-user-2:purple;
114
+ --vp-c-user-3:orange;
115
+ --vp-c-user-soft:rgba(255,255,0,.5);
116
+ }
117
+
118
+ /* 覆盖默认变量 */
119
+ html[theme],html[theme].dark {
120
+ --vp-c-brand-1: var(--vp-c-user-1);
121
+ --vp-c-brand-2: var(--vp-c-user-2);
122
+ --vp-c-brand-3: var(--vp-c-user-3);
123
+ --vp-c-brand-soft: var(--vp-c-user-soft);
118
124
  }
119
125
  ```
120
126
  将其引入到`.vitepress/theme/index.ts`中即可
121
127
 
122
128
  ```ts
123
129
  import BlogTheme from '@sugarat/theme'
124
- // 导入绿色主题
125
- import './green-theme.var.css'
130
+
131
+ // 导入自定义主题色 // [!code focus]
132
+ import './user-theme.css' // [!code focus]
126
133
 
127
134
  export default BlogTheme
128
135
  ```
package/dist/template/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "dependencies": {
13
13
  "@element-plus/icons-vue": "^2.1.0",
14
- "@sugarat/theme": "^0.2.1",
14
+ "@sugarat/theme": "^0.2.2",
15
15
  "element-plus": "^2.3.8",
16
16
  "vue": "^3.3.4"
17
17
  },
@@ -21,6 +21,6 @@
21
21
  "devDependencies": {
22
22
  "sass": "^1.64.1",
23
23
  "typescript": "^5.1.6",
24
- "vitepress": "1.0.0-rc.17"
24
+ "vitepress": "1.0.0-rc.20"
25
25
  }
26
26
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sugarat/create-theme",
3
- "version": "0.0.19",
3
+ "version": "0.0.21",
4
4
  "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
5
5
  "author": "粥里有勺糖",
6
6
  "license": "MIT",
@@ -25,8 +25,7 @@
25
25
  "fs-extra": "^11.1.1"
26
26
  },
27
27
  "devDependencies": {
28
- "rimraf": "^5.0.1",
29
- "tsup": " ^6.5.0"
28
+ "rimraf": "^5.0.1"
30
29
  },
31
30
  "scripts": {
32
31
  "dev": "tsup --watch --publicDir",