Skip to content

Commit 2a13b1a

Browse files
committed
add docs
1 parent 8829caa commit 2a13b1a

File tree

7 files changed

+2012
-34
lines changed

7 files changed

+2012
-34
lines changed

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
# Vitepress
27+
docs/.vitepress/dist
28+
docs/.vitepress/cache

docs/.vitepress/config.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { defineConfig } from 'vitepress'
2+
3+
// https://vitepress.dev/reference/site-config
4+
export default defineConfig({
5+
title: "@tlylt/vue-tree",
6+
description: "@tlylt/vue-tree",
7+
themeConfig: {
8+
// https://vitepress.dev/reference/default-theme-config
9+
nav: [
10+
{ text: 'Home', link: '/' },
11+
{ text: 'Examples', link: '/markdown-examples' }
12+
],
13+
14+
sidebar: [
15+
{
16+
text: 'Examples',
17+
items: [
18+
{ text: 'Markdown Examples', link: '/markdown-examples' },
19+
{ text: 'Runtime API Examples', link: '/api-examples' }
20+
]
21+
}
22+
],
23+
24+
socialLinks: [
25+
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
26+
]
27+
},
28+
vue: {
29+
// @vitejs/plugin-vue options
30+
template: {
31+
compilerOptions: {
32+
whitespace: "preserve",
33+
},
34+
}
35+
}
36+
})

docs/api-examples.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
outline: deep
3+
---
4+
5+
<VueTree>
6+
C:/course/
7+
textbook/
8+
index.md
9+
index.md
10+
reading.md
11+
site.json
12+
</VueTree>
13+
14+
# Runtime API Examples
15+
16+
This page demonstrates usage of some of the runtime APIs provided by VitePress.
17+
18+
The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
19+
20+
21+
22+
```md
23+
<script setup>
24+
import { useData } from 'vitepress'
25+
26+
const { theme, page, frontmatter } = useData()
27+
</script>
28+
29+
30+
31+
## Results
32+
33+
### Theme Data
34+
<pre>{{ theme }}</pre>
35+
36+
### Page Data
37+
<pre>{{ page }}</pre>
38+
39+
### Page Frontmatter
40+
<pre>{{ frontmatter }}</pre>
41+
```
42+
43+
<script setup>
44+
import { useData } from 'vitepress'
45+
import { VueTree } from '@tlylt/vue-tree'
46+
import '@tlylt/vue-tree/style.css'
47+
48+
const { site, theme, page, frontmatter } = useData()
49+
</script>
50+
51+
## Results
52+
53+
### Theme Data
54+
<pre>{{ theme }}</pre>
55+
56+
### Page Data
57+
<pre>{{ page }}</pre>
58+
59+
### Page Frontmatter
60+
<pre>{{ frontmatter }}</pre>
61+
62+
## More
63+
64+
Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

docs/index.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
# https://vitepress.dev/reference/default-theme-home-page
3+
layout: home
4+
5+
hero:
6+
name: "@tlylt/vue-tree"
7+
text: "@tlylt/vue-tree"
8+
tagline: My great project tagline
9+
actions:
10+
- theme: brand
11+
text: Markdown Examples
12+
link: /markdown-examples
13+
- theme: alt
14+
text: API Examples
15+
link: /api-examples
16+
17+
features:
18+
- title: Feature A
19+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
20+
- title: Feature B
21+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
22+
- title: Feature C
23+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
24+
---

docs/markdown-examples.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Markdown Extension Examples
2+
3+
This page demonstrates some of the built-in markdown extensions provided by VitePress.
4+
5+
## Syntax Highlighting
6+
7+
VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
8+
9+
**Input**
10+
11+
````md
12+
```js{4}
13+
export default {
14+
data () {
15+
return {
16+
msg: 'Highlighted!'
17+
}
18+
}
19+
}
20+
```
21+
````
22+
23+
**Output**
24+
25+
```js{4}
26+
export default {
27+
data () {
28+
return {
29+
msg: 'Highlighted!'
30+
}
31+
}
32+
}
33+
```
34+
35+
## Custom Containers
36+
37+
**Input**
38+
39+
```md
40+
::: info
41+
This is an info box.
42+
:::
43+
44+
::: tip
45+
This is a tip.
46+
:::
47+
48+
::: warning
49+
This is a warning.
50+
:::
51+
52+
::: danger
53+
This is a dangerous warning.
54+
:::
55+
56+
::: details
57+
This is a details block.
58+
:::
59+
```
60+
61+
**Output**
62+
63+
::: info
64+
This is an info box.
65+
:::
66+
67+
::: tip
68+
This is a tip.
69+
:::
70+
71+
::: warning
72+
This is a warning.
73+
:::
74+
75+
::: danger
76+
This is a dangerous warning.
77+
:::
78+
79+
::: details
80+
This is a details block.
81+
:::
82+
83+
## More
84+
85+
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

0 commit comments

Comments
 (0)