Skip to content

Commit ab54084

Browse files
nekomeowwwnekomeowww
committed
docs(enhanced-readabilities): rewrite with twoslash support
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
1 parent 02dd134 commit ab54084

4 files changed

Lines changed: 88 additions & 30 deletions

File tree

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@nolebase/markdown-it-element-transform": "workspace:^",
1616
"@nolebase/ui": "workspace:^",
1717
"@nolebase/unconfig-vitepress": "workspace:^",
18+
"@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
1819
"@nolebase/vitepress-plugin-git-changelog": "workspace:^",
1920
"@nolebase/vitepress-plugin-og-image": "workspace:^",
2021
"@nolebase/vitepress-plugin-page-properties": "workspace:^",

‎docs/pages/en/integrations/vitepress-plugin-enhanced-readabilities/index.md‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ Add the Enhanced Readabilities plugin package name `@nolebase/vitepress-plugin-e
7272

7373
<!--@include: @/pages/en/snippets/details-colored-diff.md-->
7474

75-
```typescript
75+
```typescript twoslash
7676
import { defineConfig } from 'vitepress'
7777

7878
// https://vitepress.dev/reference/site-config
@@ -85,9 +85,9 @@ export default defineConfig({
8585
], // [!code ++]
8686
}, // [!code ++]
8787
}, // [!code ++]
88+
lang: 'en',
89+
title: 'Site Name',
8890
themeConfig: {
89-
lang: 'en',
90-
title: 'Site Name',
9191
// rest of the options...
9292
}
9393
// rest of the options...
@@ -98,7 +98,7 @@ You might have configured the separated [Vite configuration file](https://vitejs
9898

9999
<!--@include: @/pages/en/snippets/details-colored-diff.md-->
100100

101-
```typescript
101+
```typescript twoslash
102102
import { defineConfig } from 'vite'
103103

104104
export default defineConfig(() => {
@@ -131,7 +131,7 @@ In VitePress's [**theme configuration file**](https://vitepress.dev/reference/de
131131

132132
::: code-group
133133

134-
```typescript [docs/.vitepress/theme/index.ts]
134+
```typescript twoslash [docs/.vitepress/theme/index.ts]
135135
import { h } from 'vue'
136136
import DefaultTheme from 'vitepress/theme'
137137
import type { Theme as ThemeConfig } from 'vitepress'
@@ -224,15 +224,20 @@ The Enhanced Readabilities plugin exports the components it uses internally, so
224224

225225
#### Install as a Vue plugin
226226

227-
```typescript
227+
```typescript twoslash
228228
import {
229229
NolebaseEnhancedReadabilitiesPlugin // [!code focus]
230230
} from '@nolebase/vitepress-plugin-enhanced-readabilities'
231231
```
232232

233233
If you are working on a VitePress and wanted to install it into Vue instance, you can do it like this:
234234

235-
```typescript
235+
```typescript twoslash
236+
import { Theme as ThemeConfig } from 'vitepress'
237+
import DefaultTheme from 'vitepress/theme'
238+
239+
import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
240+
236241
// Rest of the code...
237242

238243
export const Theme: ThemeConfig = {
@@ -250,8 +255,12 @@ export default Theme
250255

251256
Of course you can also provide the relevant configuration directly when installing the plugin:
252257

253-
```typescript
258+
```typescript twoslash
259+
import { Theme as ThemeConfig } from 'vitepress'
260+
import DefaultTheme from 'vitepress/theme'
261+
254262
import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
263+
import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities'
255264

256265
export const Theme: ThemeConfig = {
257266
extends: DefaultTheme,
@@ -283,7 +292,7 @@ For more information on configuration, see [Configuration](#configuration).
283292

284293
#### Import layout switching components on demand
285294

286-
```typescript
295+
```typescript twoslash
287296
import {
288297
LayoutSwitch, // [!code focus]
289298
ScreenLayoutSwitch, // [!code focus]
@@ -292,7 +301,7 @@ import {
292301

293302
#### Import spotlight components on demand
294303

295-
```typescript
304+
```typescript twoslash
296305
import {
297306
Spotlight, // [!code focus]
298307
ScreenSpotlight, // [!code focus]
@@ -311,7 +320,10 @@ Therefore we offer a way with [Vue's dependency injection](https://vuejs.org/api
311320

312321
<!--@include: @/pages/en/snippets/details-colored-diff.md-->
313322

314-
```typescript
323+
```typescript twoslash
324+
import { Theme as ThemeConfig } from 'vitepress'
325+
import DefaultTheme from 'vitepress/theme'
326+
315327
import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
316328
import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
317329
@@ -338,7 +350,16 @@ For more information on internationalization configuration, see [Internationaliz
338350

339351
::: details Complete configurable options
340352

341-
```typescript
353+
```typescript twoslash
354+
import {
355+
SpotlightStyles as NolebaseEnhancedReadabilitiesSpotlightStyles,
356+
} from '@nolebase/vitepress-plugin-enhanced-readabilities'
357+
import type {
358+
Locale,
359+
LayoutMode,
360+
} from '@nolebase/vitepress-plugin-enhanced-readabilities'
361+
type SpotlightStyles = typeof NolebaseEnhancedReadabilitiesSpotlightStyles
362+
// ---cut---
342363
/**
343364
* Options
344365
*/
@@ -449,7 +470,7 @@ export interface Options {
449470
*
450471
* @default SpotlightStyle.Aside (2)
451472
*/
452-
defaultStyle?: SpotlightStyle
473+
defaultStyle?: SpotlightStyles
453474
}
454475
}
455476
```
@@ -472,7 +493,13 @@ In the [Configuration](#configuration) section, we've learned how to provide con
472493

473494
<!--@include: @/pages/en/snippets/details-colored-diff.md-->
474495

475-
```typescript
496+
```typescript twoslash
497+
import { Theme as ThemeConfig } from 'vitepress'
498+
import DefaultTheme from 'vitepress/theme'
499+
500+
import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
501+
import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities'
502+
476503
// Rest of code...
477504

478505
export const Theme: ThemeConfig = {
@@ -507,7 +534,7 @@ export const Theme: ThemeConfig = {
507534

508535
::: details Complete internationalization field options
509536

510-
```typescript
537+
```typescript twoslash
511538
/**
512539
* Locale
513540
*/

‎docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/index.md‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ yarn add @nolebase/vitepress-plugin-enhanced-readabilities -D
7272

7373
<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
7474

75-
```typescript
75+
```typescript twoslash
7676
import { defineConfig } from 'vitepress'
7777

7878
// https://vitepress.dev/reference/site-config
@@ -85,9 +85,9 @@ export default defineConfig({
8585
], // [!code ++]
8686
}, // [!code ++]
8787
}, // [!code ++]
88+
lang: 'zh-CN',
89+
title: '网站标题',
8890
themeConfig: {
89-
lang: 'zh-CN',
90-
title: '网站标题',
9191
// 其他的配置...
9292
}
9393
// 其他的配置...
@@ -98,7 +98,7 @@ export default defineConfig({
9898

9999
<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
100100

101-
```typescript
101+
```typescript twoslash
102102
import { defineConfig } from 'vite'
103103

104104
export default defineConfig(() => {
@@ -131,7 +131,7 @@ export default defineConfig(() => {
131131

132132
::: code-group
133133

134-
```typescript [docs/.vitepress/theme/index.ts]
134+
```typescript twoslash [docs/.vitepress/theme/index.ts]
135135
import { h } from 'vue'
136136
import DefaultTheme from 'vitepress/theme'
137137
import type { Theme as ThemeConfig } from 'vitepress'
@@ -225,15 +225,20 @@ export default Theme
225225

226226
#### 作为 Vue 插件进行安装
227227

228-
```typescript
228+
```typescript twoslash
229229
import {
230230
NolebaseEnhancedReadabilitiesPlugin // [!code focus]
231231
} from '@nolebase/vitepress-plugin-enhanced-readabilities'
232232
```
233233

234234
如果是要给 VitePress 的 Vue 实例进行安装的话，你可以这样写：
235235

236-
```typescript
236+
```typescript twoslash
237+
import { Theme as ThemeConfig } from 'vitepress'
238+
import DefaultTheme from 'vitepress/theme'
239+
240+
import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
241+
237242
// 其他部分的代码...
238243

239244
export const Theme: ThemeConfig = {
@@ -251,8 +256,12 @@ export default Theme
251256

252257
当然你也可以直接在安装插件的时候直接提供相关的配置：
253258

254-
```typescript
259+
```typescript twoslash
260+
import { Theme as ThemeConfig } from 'vitepress'
261+
import DefaultTheme from 'vitepress/theme'
262+
255263
import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
264+
import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities'
256265

257266
export const Theme: ThemeConfig = {
258267
extends: DefaultTheme,
@@ -284,7 +293,7 @@ export default Theme
284293

285294
#### 按需导入布局切换组件
286295

287-
```typescript
296+
```typescript twoslash
288297
import {
289298
LayoutSwitch, // [!code focus]
290299
ScreenLayoutSwitch, // [!code focus]
@@ -293,7 +302,7 @@ import {
293302

294303
#### 按需导入聚光灯组件
295304

296-
```typescript
305+
```typescript twoslash
297306
import {
298307
Spotlight, // [!code focus]
299308
ScreenSpotlight, // [!code focus]
@@ -310,7 +319,10 @@ import {
310319

311320
<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
312321

313-
```typescript
322+
```typescript twoslash
323+
import { Theme as ThemeConfig } from 'vitepress'
324+
import DefaultTheme from 'vitepress/theme'
325+
314326
import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
315327
import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
316328
@@ -337,7 +349,16 @@ export const Theme: ThemeConfig = {
337349

338350
::: details 完整的可以配置的选项
339351

340-
```typescript
352+
```typescript twoslash
353+
import {
354+
SpotlightStyles as NolebaseEnhancedReadabilitiesSpotlightStyles,
355+
} from '@nolebase/vitepress-plugin-enhanced-readabilities'
356+
import type {
357+
Locale,
358+
LayoutMode,
359+
} from '@nolebase/vitepress-plugin-enhanced-readabilities'
360+
type SpotlightStyles = typeof NolebaseEnhancedReadabilitiesSpotlightStyles
361+
// ---cut---
341362
/**
342363
* Options
343364
*/
@@ -448,7 +469,7 @@ export interface Options {
448469
*
449470
* @default SpotlightStyle.Aside (2)
450471
*/
451-
defaultStyle?: SpotlightStyle
472+
defaultStyle?: SpotlightStyles
452473
}
453474
}
454475
```
@@ -471,7 +492,13 @@ export interface Options {
471492

472493
<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
473494

474-
```typescript
495+
```typescript twoslash
496+
import { Theme as ThemeConfig } from 'vitepress'
497+
import DefaultTheme from 'vitepress/theme'
498+
499+
import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
500+
import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities'
501+
475502
// 其他部分的代码...
476503

477504
export const Theme: ThemeConfig = {
@@ -506,7 +533,7 @@ export const Theme: ThemeConfig = {
506533

507534
::: details 完整的国际化字段选项
508535

509-
```typescript
536+
```typescript twoslash
510537
/**
511538
* Locale
512539
*/

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)