@voidzero-dev/vitepress-theme 4.0.1 → 4.0.2
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.
- package/README.md +50 -22
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,16 +1,44 @@
|
|
|
1
1
|
# @voidzero-dev/vitepress-theme
|
|
2
2
|
|
|
3
|
-
Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and
|
|
3
|
+
Shared VitePress theme for VoidZero projects, including Vite+, Vite, Vitest, Rolldown, and Oxc.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Publishing package
|
|
6
|
+
|
|
7
|
+
Make to sure to in latest commit
|
|
8
|
+
|
|
9
|
+
1. Update version in `package.json`
|
|
10
|
+
2. Add tag locally `git tag vx.y.z` (matching version in package.json)
|
|
11
|
+
3. Push changes `git push origin`
|
|
12
|
+
4. Push to remote `git push origin vx.y.z`
|
|
13
|
+
5. Go to GitHub UI > "Releases" > "Tags" > Click the latest tag > "Create release from tag"
|
|
14
|
+
6. Click "Publish release"
|
|
15
|
+
|
|
16
|
+
## Developing locally
|
|
17
|
+
|
|
18
|
+
For local development, linking is required between this theme directory and the downstream VoidZero project directories.
|
|
19
|
+
|
|
20
|
+
1. Link theme into docs repos
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
# In theme
|
|
24
|
+
pnpm install
|
|
25
|
+
# Make @voidzero-dev/vitepress-theme available for global linking
|
|
26
|
+
pnpm link --global
|
|
27
|
+
|
|
28
|
+
# In project docs
|
|
29
|
+
pnpm install
|
|
30
|
+
# Link to theme
|
|
31
|
+
pnpm link @voidzero-dev/vitepress-theme
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
2. Start VitePress server:
|
|
6
35
|
|
|
7
36
|
```bash
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
pnpm add @voidzero-dev/vitepress-theme
|
|
37
|
+
# In project docs
|
|
38
|
+
pnpm dev
|
|
11
39
|
```
|
|
12
40
|
|
|
13
|
-
|
|
41
|
+
The downstream project will automatically reflect theme changes via HMR.
|
|
14
42
|
|
|
15
43
|
## Usage
|
|
16
44
|
|
|
@@ -19,21 +47,21 @@ If developing locally, run `pnpm link` between the two directories instead.
|
|
|
19
47
|
In your `.vitepress/config.ts`:
|
|
20
48
|
|
|
21
49
|
```ts
|
|
22
|
-
import { defineConfig } from
|
|
23
|
-
import { extendConfig } from
|
|
50
|
+
import { defineConfig } from "vitepress";
|
|
51
|
+
import { extendConfig } from "@voidzero-dev/vitepress-theme/config";
|
|
24
52
|
|
|
25
53
|
const config = defineConfig({
|
|
26
54
|
themeConfig: {
|
|
27
|
-
variant:
|
|
55
|
+
variant: "viteplus", // or 'vite', 'vitest', etc.
|
|
28
56
|
nav: [
|
|
29
|
-
{ text:
|
|
57
|
+
{ text: "Home", link: "/" },
|
|
30
58
|
// ... your navigation
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
})
|
|
59
|
+
],
|
|
60
|
+
},
|
|
61
|
+
});
|
|
34
62
|
|
|
35
63
|
// inject theme specific config
|
|
36
|
-
export default extendConfig(config)
|
|
64
|
+
export default extendConfig(config);
|
|
37
65
|
```
|
|
38
66
|
|
|
39
67
|
Note the theme config injects the Tailwind plugin so the downstream project doesn't have to. If the downstream project
|
|
@@ -43,14 +71,14 @@ Note the theme config injects the Tailwind plugin so the downstream project does
|
|
|
43
71
|
In your `.vitepress/theme/index.ts`:
|
|
44
72
|
|
|
45
73
|
```ts
|
|
46
|
-
import type { Theme } from
|
|
47
|
-
import Theme from
|
|
48
|
-
import
|
|
74
|
+
import type { Theme } from "vitepress";
|
|
75
|
+
import Theme from "@voidzero-dev/vitepress-theme";
|
|
76
|
+
import "./styles.css";
|
|
49
77
|
|
|
50
78
|
export default {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
} satisfies Theme
|
|
79
|
+
extends: BaseTheme as unknown as Theme,
|
|
80
|
+
Layout,
|
|
81
|
+
} satisfies Theme;
|
|
54
82
|
```
|
|
55
83
|
|
|
56
84
|
In the CSS, import the CSS from theme (which imports tailwind):
|
|
@@ -63,7 +91,7 @@ In the CSS, import the CSS from theme (which imports tailwind):
|
|
|
63
91
|
|
|
64
92
|
/* Project specific branding colors */
|
|
65
93
|
:root[data-variant="vite"] {
|
|
66
|
-
--color-brand: #
|
|
94
|
+
--color-brand: #6b1eb9;
|
|
67
95
|
}
|
|
68
96
|
|
|
69
97
|
:root.dark:not([data-theme])[data-variant="vite"],
|
|
@@ -72,6 +100,6 @@ In the CSS, import the CSS from theme (which imports tailwind):
|
|
|
72
100
|
}
|
|
73
101
|
|
|
74
102
|
:root[data-theme="light"][data-variant="vite"] {
|
|
75
|
-
--color-brand: #
|
|
103
|
+
--color-brand: #6b1eb9;
|
|
76
104
|
}
|
|
77
105
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@voidzero-dev/vitepress-theme",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"description": "Shared VitePress theme for VoidZero projects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"*.css"
|
|
16
16
|
],
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"vitepress": "^2.0.0-alpha.
|
|
18
|
+
"vitepress": "^2.0.0-alpha.15",
|
|
19
19
|
"vue": "^3.5.0"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|