Skip to content

Commit 263f7e0

Browse files
nekomeowwwnekomeowww
committed
docs(ui): added detailed documentations for NuLazyTeleportRiveCanvas with twoslash support
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
1 parent e1dbef5 commit 263f7e0

12 files changed

Lines changed: 1207 additions & 122 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@
1212
"iconify",
1313
"Logseq",
1414
"mkdist",
15+
"Nisekoi5",
1516
"nolebase",
1617
"Nólëbase",
1718
"quotepath",
1819
"Rehype",
1920
"resvg",
21+
"Twoslash",
2022
"unconfig",
21-
"uncrypto",
22-
"Nisekoi5"
23+
"uncrypto"
2324
],
2425
"editor.formatOnSave": false,
2526
"editor.codeActionsOnSave": {

‎docs/.vitepress/config.ts‎

Lines changed: 157 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,163 @@
11
import { cwd, env } from 'node:process'
22
import { join, relative } from 'node:path'
33
import { type DefaultTheme, defineConfig } from 'vitepress'
4+
import MarkdownItFootnote from 'markdown-it-footnote'
5+
6+
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
47
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
58
import type { Options as ElementTransformOptions } from '@nolebase/markdown-it-element-transform'
69
import { ElementTransform } from '@nolebase/markdown-it-element-transform'
710
import { buildEndGenerateOpenGraphImages } from '@nolebase/vitepress-plugin-og-image'
811

912
export const sidebars: Record<string, DefaultTheme.Sidebar> = {
10-
'en': [
11-
{
12-
text: 'Introduction',
13-
items: [
14-
{ text: 'Getting Started', link: '/pages/en/guide/getting-started' },
15-
],
16-
},
17-
{
18-
text: 'Integrations',
19-
items: [
20-
{ text: 'Overview', link: '/pages/en/integrations/' },
21-
],
22-
},
23-
{
24-
text: 'Obsidian Plugins',
25-
items: [
26-
{ text: 'UnoCSS', link: '/pages/en/integrations/obsidian-plugin-unocss/' },
27-
],
28-
},
29-
{
30-
text: 'Markdown It Plugins',
31-
items: [
32-
{ text: 'Bi-directional links', link: '/pages/en/integrations/markdown-it-bi-directional-links/' },
33-
{ text: 'Elements Transformation', link: '/pages/en/integrations/markdown-it-element-transform/' },
34-
],
35-
},
36-
{
37-
text: 'VitePress Plugins',
38-
items: [
39-
{ text: 'Enhanced Readabilities', link: '/pages/en/integrations/vitepress-plugin-enhanced-readabilities/' },
40-
{ text: 'Inline Links Previewing', link: '/pages/en/integrations/vitepress-plugin-inline-link-preview/' },
41-
{ text: 'Blinking highlight targeted heading', link: '/pages/en/integrations/vitepress-plugin-highlight-targeted-heading/' },
42-
{ text: 'Changelog & File history', link: '/pages/en/integrations/vitepress-plugin-git-changelog/' },
43-
{ text: 'Page properties', link: '/pages/en/integrations/vitepress-plugin-page-properties/' },
44-
{ text: 'Previewing image (social media card) generation', link: '/pages/en/integrations/vitepress-plugin-og-image/' },
45-
],
46-
},
47-
],
48-
'zh-CN': [
49-
{
50-
text: '指南',
51-
items: [
52-
{ text: '如何开始', link: '/pages/zh-CN/guide/getting-started' },
53-
],
54-
},
55-
{
56-
text: '集成',
57-
items: [
58-
{ text: '概览', link: '/pages/zh-CN/integrations/' },
59-
],
60-
},
61-
{
62-
text: 'Obsidian 插件',
63-
items: [
64-
{ text: 'UnoCSS', link: '/pages/zh-CN/integrations/obsidian-plugin-unocss/' },
65-
],
66-
},
67-
{
68-
text: 'Markdown It 插件',
69-
items: [
70-
{ text: '双向链接', link: '/pages/zh-CN/integrations/markdown-it-bi-directional-links/' },
71-
{ text: '元素转换', link: '/pages/zh-CN/integrations/markdown-it-element-transform/' },
72-
],
73-
},
74-
{
75-
text: 'VitePress 插件',
76-
items: [
77-
{ text: '阅读增强', link: '/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/' },
78-
{ text: '行内链接预览', link: '/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/' },
79-
{ text: '闪烁高亮当前的目标标题', link: '/pages/zh-CN/integrations/vitepress-plugin-highlight-targeted-heading/' },
80-
{ text: '变更日志 及 文件历史', link: '/pages/zh-CN/integrations/vitepress-plugin-git-changelog/' },
81-
{ text: '页面属性', link: '/pages/zh-CN/integrations/vitepress-plugin-page-properties/' },
82-
{ text: '预览图片（社交媒体卡片）图片生成', link: '/pages/zh-CN/integrations/vitepress-plugin-og-image/' },
83-
],
84-
},
85-
],
13+
'en': {
14+
'/': [
15+
{
16+
text: 'Guides',
17+
items: [
18+
{ text: 'Getting Started', link: '/pages/en/guide/getting-started' },
19+
],
20+
},
21+
{
22+
text: 'Integrations',
23+
items: [
24+
{ text: 'Overview', link: '/pages/en/integrations/' },
25+
],
26+
},
27+
{
28+
text: 'UI Components',
29+
items: [
30+
{ text: 'Overview', link: '/pages/en/ui/' },
31+
],
32+
},
33+
],
34+
'/pages/en/integrations/': [
35+
{
36+
text: 'Integrations',
37+
items: [
38+
{ text: 'Overview', link: '/pages/en/integrations/' },
39+
],
40+
},
41+
{
42+
text: 'Obsidian Plugins',
43+
items: [
44+
{ text: 'UnoCSS', link: '/pages/en/integrations/obsidian-plugin-unocss/' },
45+
],
46+
},
47+
{
48+
text: 'Markdown It Plugins',
49+
items: [
50+
{ text: 'Bi-directional links', link: '/pages/en/integrations/markdown-it-bi-directional-links/' },
51+
{ text: 'Elements Transformation', link: '/pages/en/integrations/markdown-it-element-transform/' },
52+
],
53+
},
54+
{
55+
text: 'VitePress Plugins',
56+
items: [
57+
{ text: 'Enhanced Readabilities', link: '/pages/en/integrations/vitepress-plugin-enhanced-readabilities/' },
58+
{ text: 'Inline Links Previewing', link: '/pages/en/integrations/vitepress-plugin-inline-link-preview/' },
59+
{ text: 'Blinking highlight targeted heading', link: '/pages/en/integrations/vitepress-plugin-highlight-targeted-heading/' },
60+
{ text: 'Changelog & File history', link: '/pages/en/integrations/vitepress-plugin-git-changelog/' },
61+
{ text: 'Page properties', link: '/pages/en/integrations/vitepress-plugin-page-properties/' },
62+
{ text: 'Previewing image (social media card) generation', link: '/pages/en/integrations/vitepress-plugin-og-image/' },
63+
],
64+
},
65+
],
66+
'/pages/en/ui/': [
67+
{
68+
text: 'UI Components',
69+
items: [
70+
{ text: 'Overview', link: '/pages/en/ui/' },
71+
],
72+
},
73+
{
74+
text: 'Actions',
75+
items: [
76+
{ text: 'Button', link: '/pages/en/ui/button/' },
77+
],
78+
},
79+
{
80+
text: 'Animations',
81+
items: [
82+
{ text: 'Rive Canvas (Lazy Teleport)', link: '/pages/en/ui/lazyteleportrivecanvas/' },
83+
],
84+
},
85+
],
86+
},
87+
'zh-CN': {
88+
'/': [
89+
{
90+
text: '指南',
91+
items: [
92+
{ text: '如何开始', link: '/pages/zh-CN/guide/getting-started' },
93+
],
94+
},
95+
{
96+
text: '集成',
97+
items: [
98+
{ text: '概览', link: '/pages/zh-CN/integrations/' },
99+
],
100+
},
101+
{
102+
text: 'UI 组件',
103+
items: [
104+
{ text: '概览', link: '/pages/zh-CN/ui/' },
105+
],
106+
},
107+
],
108+
'/pages/zh-CN/integrations/': [
109+
{
110+
text: '集成',
111+
items: [
112+
{ text: '概览', link: '/pages/zh-CN/integrations/' },
113+
],
114+
},
115+
{
116+
text: 'Obsidian 插件',
117+
items: [
118+
{ text: 'UnoCSS', link: '/pages/zh-CN/integrations/obsidian-plugin-unocss/' },
119+
],
120+
},
121+
{
122+
text: 'Markdown It 插件',
123+
items: [
124+
{ text: '双向链接', link: '/pages/zh-CN/integrations/markdown-it-bi-directional-links/' },
125+
{ text: '元素转换', link: '/pages/zh-CN/integrations/markdown-it-element-transform/' },
126+
],
127+
},
128+
{
129+
text: 'VitePress 插件',
130+
items: [
131+
{ text: '阅读增强', link: '/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/' },
132+
{ text: '行内链接预览', link: '/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/' },
133+
{ text: '闪烁高亮当前的目标标题', link: '/pages/zh-CN/integrations/vitepress-plugin-highlight-targeted-heading/' },
134+
{ text: '变更日志 及 文件历史', link: '/pages/zh-CN/integrations/vitepress-plugin-git-changelog/' },
135+
{ text: '页面属性', link: '/pages/zh-CN/integrations/vitepress-plugin-page-properties/' },
136+
{ text: '预览图片（社交媒体卡片）图片生成', link: '/pages/zh-CN/integrations/vitepress-plugin-og-image/' },
137+
],
138+
},
139+
],
140+
'/pages/zh-CN/ui/': [
141+
{
142+
text: 'UI 组件',
143+
items: [
144+
{ text: '概览', link: '/pages/zh-CN/ui/' },
145+
],
146+
},
147+
{
148+
text: '操作',
149+
items: [
150+
{ text: '按钮', link: '/pages/zh-CN/ui/button/' },
151+
],
152+
},
153+
{
154+
text: '动画',
155+
items: [
156+
{ text: 'Rive Canvas（懒加载）', link: '/pages/zh-CN/ui/lazyteleportrivecanvas/' },
157+
],
158+
},
159+
],
160+
},
86161
}
87162

88163
function getVueProdHydrationMismatchDetailsFlag() {
@@ -166,6 +241,7 @@ export default defineConfig({
166241
},
167242
markdown: {
168243
config(md) {
244+
md.use(MarkdownItFootnote)
169245
md.use(BiDirectionalLinks({
170246
dir: cwd(),
171247
}))
@@ -194,6 +270,11 @@ export default defineConfig({
194270
} as ElementTransformOptions
195271
})())
196272
},
273+
codeTransformers: [
274+
transformerTwoslash({
275+
errorRendering: 'hover',
276+
}),
277+
],
197278
},
198279
async buildEnd(siteConfig) {
199280
await buildEndGenerateOpenGraphImages({

‎docs/.vitepress/theme/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { h } from 'vue'
1+
import { type Plugin, h } from 'vue'
2+
import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
23

34
import { NuLazyTeleportRiveCanvas } from '@nolebase/ui'
45
import { NolebasePluginSet, defineThemeUnconfig } from '@nolebase/unconfig-vitepress'
@@ -8,6 +9,8 @@ import HomeContent from './components/HomeContent.vue'
89

910
import 'virtual:uno.css'
1011

12+
import '@shikijs/vitepress-twoslash/style.css'
13+
1114
import './styles/vars.css'
1215
import './styles/main.css'
1316

@@ -24,6 +27,7 @@ export default defineThemeUnconfig({
2427
enhanceApp: ({ app }) => {
2528
app.component('IntegrationCard', IntegrationCard)
2629
app.component('HomeContent', HomeContent)
30+
app.use(TwoslashFloatingVue as Plugin)
2731
},
2832
pluginSets: [
2933
NolebasePluginSet({

‎docs/.vitepress/theme/styles/main.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,16 @@ html, body {
1919
.vp-doc a:hover {
2020
text-decoration: underline;
2121
}
22+
23+
/* 脚注 */
24+
.footnotes > .footnotes-list {
25+
margin-top: 32px;
26+
opacity: 0.9;
27+
font-size: 12px;
28+
/* 确保脚注上的返回链接符号 ↩ 不会被 body 的 Emoji 字体覆盖渲染为 ↩️ */
29+
font-family: sans-serif;
30+
}
31+
32+
.footnotes > .footnotes-list > .footnote-item > p {
33+
line-height: 18px;
34+
}

‎docs/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
"@nolebase/vitepress-plugin-og-image": "workspace:^",
2020
"@nolebase/vitepress-plugin-page-properties": "workspace:^",
2121
"@rive-app/canvas": "^2.11.1",
22-
"@rollup/plugin-yaml": "^4.1.2"
22+
"@rollup/plugin-yaml": "^4.1.2",
23+
"@shikijs/vitepress-twoslash": "^1.2.1",
24+
"@types/markdown-it-footnote": "^3.0.4",
25+
"markdown-it-footnote": "^4.0.0"
2326
}
2427
}

‎docs/pages/en/ui/button/index.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup>
2+
import { NuButton } from '@nolebase/ui'
3+
</script>
4+
5+
# Buttons <Badge type="danger" text="Alpha" />
6+
7+
::: danger 🛑 This package is in Alpha stage.
8+
This package is still in the Alpha stage, and it is not recommended to use it in production. The API may change in the future, and there may be bugs in the current version. Please use it with caution.
9+
:::
10+
11+
::: warning 🚧 Constructing
12+
Nice to meet you! But sorry, this page is still under construction. If you don’t find the information you are interested in, you can first find the content you are interested in in the navigation in the sidebar to start reading.
13+
:::
14+
15+
<div>
16+
<NuButton>
17+
ABCD
18+
</NuButton>
19+
</div>

‎docs/pages/en/ui/index.md‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,15 @@ Therefore, if you would ever want to install `@nolebase/ui` as one of your depen
2626

2727
Since `<NuLazyTeleportRiveCanvas />` depends on `@rive-app/canvas`. If you also use Vite as your bundler, you will need to add the following configurations to your `vite.config.ts` file like this:
2828

29-
```typescript
29+
```typescript twoslash
30+
import { defineConfig } from 'vite'
31+
3032
export default defineConfig(() => {
3133
return {
3234
optimizeDeps: { // [!code ++]
3335
include: [ // [!code ++]
3436
// Add this line to your vite.config.ts's optimizeDeps.include array // [!code ++]
35-
'@nolebase/ui @rive-app/canvas', // [!code ++]
37+
'@nolebase/ui > @rive-app/canvas', // [!code ++]
3638
], // [!code ++]
3739
}, // [!code ++]
3840
}
@@ -45,7 +47,9 @@ For more information about why configure this, please refer to the [Dep Optimiza
4547

4648
If you are using VitePress, and imported components relies on VitePress, you will need to add the following configurations to your `vite.config.ts` file like this:
4749

48-
```typescript
50+
```typescript twoslash
51+
import { defineConfig } from 'vite'
52+
4953
export default defineConfig(() => {
5054
return {
5155
ssr: { // [!code ++]
@@ -81,11 +85,3 @@ yarn add @nolebase/ui -D
8185
```
8286

8387
:::
84-
85-
## Buttons
86-
87-
<div>
88-
<NuButton>
89-
ABCD
90-
</NuButton>
91-
</div>

0 commit comments

Comments
 (0)