docs(enhanced-readabilities): rewrite with twoslash support

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
nolebase · Mar 28, 2024 · ab54084 · ab54084
1 parent 02dd134
commit ab54084
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 30 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -15,6 +15,7 @@
     "@nolebase/markdown-it-element-transform": "workspace:^",
     "@nolebase/ui": "workspace:^",
     "@nolebase/unconfig-vitepress": "workspace:^",
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-git-changelog": "workspace:^",
     "@nolebase/vitepress-plugin-og-image": "workspace:^",
     "@nolebase/vitepress-plugin-page-properties": "workspace:^",

diff --git a/docs/pages/en/integrations/vitepress-plugin-enhanced-readabilities/index.md b/docs/pages/en/integrations/vitepress-plugin-enhanced-readabilities/index.md
@@ -72,7 +72,7 @@ Add the Enhanced Readabilities plugin package name `@nolebase/vitepress-plugin-e
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
 import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
@@ -85,9 +85,9 @@ export default defineConfig({
       ], // [!code ++]
     }, // [!code ++]
   }, // [!code ++]
+  lang: 'en',
+  title: 'Site Name',
   themeConfig: {
-    lang: 'en',
-    title: 'Site Name',
     // rest of the options...
   }
   // rest of the options...
@@ -98,7 +98,7 @@ You might have configured the separated [Vite configuration file](https://vitejs
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
 import { defineConfig } from 'vite'
 
 export default defineConfig(() => {
@@ -131,7 +131,7 @@ In VitePress's [**theme configuration file**](https://vitepress.dev/reference/de
 
 ::: code-group
 
-```typescript [docs/.vitepress/theme/index.ts]
+```typescript twoslash [docs/.vitepress/theme/index.ts]
 import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import type { Theme as ThemeConfig } from 'vitepress'
@@ -224,15 +224,20 @@ The Enhanced Readabilities plugin exports the components it uses internally, so
 
 #### Install as a Vue plugin
 
-```typescript
+```typescript twoslash
 import {
   NolebaseEnhancedReadabilitiesPlugin // [!code focus]
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 ```
 
 If you are working on a VitePress and wanted to install it into Vue instance, you can do it like this:
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
+
 // Rest of the code...
 
 export const Theme: ThemeConfig = {
@@ -250,8 +255,12 @@ export default Theme
 
 Of course you can also provide the relevant configuration directly when installing the plugin:
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 
 export const Theme: ThemeConfig = {
   extends: DefaultTheme,
@@ -283,7 +292,7 @@ For more information on configuration, see [Configuration](#configuration).
 
 #### Import layout switching components on demand
 
-```typescript
+```typescript twoslash
 import {
   LayoutSwitch,  // [!code focus]
   ScreenLayoutSwitch,  // [!code focus]
@@ -292,7 +301,7 @@ import {
 
 #### Import spotlight components on demand
 
-```typescript
+```typescript twoslash
 import {
   Spotlight,  // [!code focus]
   ScreenSpotlight, // [!code focus]
@@ -311,7 +320,10 @@ Therefore we offer a way with [Vue's dependency injection](https://vuejs.org/api
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
 import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
 
@@ -338,7 +350,16 @@ For more information on internationalization configuration, see [Internationaliz
 
 ::: details Complete configurable options
 
-```typescript
+```typescript twoslash
+import {
+  SpotlightStyles as NolebaseEnhancedReadabilitiesSpotlightStyles,
+} from '@nolebase/vitepress-plugin-enhanced-readabilities'
+import type {
+  Locale,
+  LayoutMode,
+} from '@nolebase/vitepress-plugin-enhanced-readabilities'
+type SpotlightStyles = typeof NolebaseEnhancedReadabilitiesSpotlightStyles
+// ---cut---
 /**
  * Options
  */
@@ -449,7 +470,7 @@ export interface Options {
      *
      * @default SpotlightStyle.Aside (2)
      */
-    defaultStyle?: SpotlightStyle
+    defaultStyle?: SpotlightStyles
   }
 }
 ```
@@ -472,7 +493,13 @@ In the [Configuration](#configuration) section, we've learned how to provide con
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+
 // Rest of code...
 
 export const Theme: ThemeConfig = {
@@ -507,7 +534,7 @@ export const Theme: ThemeConfig = {
 
 ::: details Complete internationalization field options
 
-```typescript
+```typescript twoslash
 /**
  * Locale
  */

diff --git a/docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/index.md b/docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/index.md
@@ -72,7 +72,7 @@ yarn add @nolebase/vitepress-plugin-enhanced-readabilities -D
 
 <!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
 import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
@@ -85,9 +85,9 @@ export default defineConfig({
       ], // [!code ++]
     }, // [!code ++]
   }, // [!code ++]
+  lang: 'zh-CN',
+  title: '网站标题',
   themeConfig: {
-    lang: 'zh-CN',
-    title: '网站标题',
     // 其他的配置...
   }
   // 其他的配置...
@@ -98,7 +98,7 @@ export default defineConfig({
 
 <!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
 import { defineConfig } from 'vite'
 
 export default defineConfig(() => {
@@ -131,7 +131,7 @@ export default defineConfig(() => {
 
 ::: code-group
 
-```typescript [docs/.vitepress/theme/index.ts]
+```typescript twoslash [docs/.vitepress/theme/index.ts]
 import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import type { Theme as ThemeConfig } from 'vitepress'
@@ -225,15 +225,20 @@ export default Theme
 
 #### 作为 Vue 插件进行安装
 
-```typescript
+```typescript twoslash
 import {
   NolebaseEnhancedReadabilitiesPlugin // [!code focus]
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 ```
 
 如果是要给 VitePress 的 Vue 实例进行安装的话，你可以这样写：
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
+
 // 其他部分的代码...
 
 export const Theme: ThemeConfig = {
@@ -251,8 +256,12 @@ export default Theme
 
 当然你也可以直接在安装插件的时候直接提供相关的配置：
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+import { NolebaseEnhancedReadabilitiesPlugin } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 
 export const Theme: ThemeConfig = {
   extends: DefaultTheme,
@@ -284,7 +293,7 @@ export default Theme
 
 #### 按需导入布局切换组件
 
-```typescript
+```typescript twoslash
 import {
   LayoutSwitch,  // [!code focus]
   ScreenLayoutSwitch,  // [!code focus]
@@ -293,7 +302,7 @@ import {
 
 #### 按需导入聚光灯组件
 
-```typescript
+```typescript twoslash
 import {
   Spotlight,  // [!code focus]
   ScreenSpotlight, // [!code focus]
@@ -310,7 +319,10 @@ import {
 
 <!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
 import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
 import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities' // [!code ++]
 
@@ -337,7 +349,16 @@ export const Theme: ThemeConfig = {
 
 ::: details 完整的可以配置的选项
 
-```typescript
+```typescript twoslash
+import {
+  SpotlightStyles as NolebaseEnhancedReadabilitiesSpotlightStyles,
+} from '@nolebase/vitepress-plugin-enhanced-readabilities'
+import type {
+  Locale,
+  LayoutMode,
+} from '@nolebase/vitepress-plugin-enhanced-readabilities'
+type SpotlightStyles = typeof NolebaseEnhancedReadabilitiesSpotlightStyles
+// ---cut---
 /**
  * Options
  */
@@ -448,7 +469,7 @@ export interface Options {
      *
      * @default SpotlightStyle.Aside (2)
      */
-    defaultStyle?: SpotlightStyle
+    defaultStyle?: SpotlightStyles
   }
 }
 ```
@@ -471,7 +492,13 @@ export interface Options {
 
 <!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
 
-```typescript
+```typescript twoslash
+import { Theme as ThemeConfig } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+import type { Options } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+import { InjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+
 // 其他部分的代码...
 
 export const Theme: ThemeConfig = {
@@ -506,7 +533,7 @@ export const Theme: ThemeConfig = {
 
 ::: details 完整的国际化字段选项
 
-```typescript
+```typescript twoslash
 /**
  * Locale
  */

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml