docs: updated vitepress-plugin-enhanced-readabilities-plugin

Author: nekomeowww

docs/.vitepress/theme/index.ts

@@ -2,9 +2,12 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import type { Theme as ThemeConfig } from 'vitepress'
 
+import type { Options as NolebaseEnhancedReadabilitiesOptions } from '@nolebase/vitepress-plugin-enhanced-readabilities'
+
 import {
-  NolebaseEnhancedReadabilitiesMenu,
-  NolebaseEnhancedReadabilitiesScreenMenu,
+  InjectionKey as NolebaseEnhancedReadabilitiesInjectionKey,
+  LayoutMode as NolebaseEnhancedReadabilitiesLayoutMode,
+  NolebaseEnhancedReadabilitiesMenu, NolebaseEnhancedReadabilitiesScreenMenu,
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 
 import {
@@ -14,7 +17,6 @@ import {
 import 'virtual:uno.css'
 
 import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
-
 import '@nolebase/vitepress-plugin-inline-link-preview/dist/style.css'
 
 import './styles/vars.css'
@@ -37,6 +39,14 @@ export const Theme: ThemeConfig = {
   enhanceApp({ app }) {
     app.component('IntegrationCard', IntegrationCard)
     app.use(NolebaseInlineLinkPreview)
+    app.provide(NolebaseEnhancedReadabilitiesInjectionKey, {
+      layoutSwitch: {
+        defaultMode: NolebaseEnhancedReadabilitiesLayoutMode.FullWidth,
+      },
+      spotlight: {
+        defaultToggle: true,
+      },
+    } as NolebaseEnhancedReadabilitiesOptions)
   },
 }
 

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

@@ -5,7 +5,7 @@
 See the <span i-icon-park-outline:book-open text-red-400 /> button in the upper right corner on navigation bar? You can use your mouse to hover over it to see the supported features, click on the one you are interested in to see the effect!
 
 ::: warning Caution
-The "**Layout Switch**" and "**Inline Highlight**" features of Enhanced Readabilities plugin are temporarily unavailable on screens on mobile devices, so if you're reading on mobile but still want to see the results, check out the video demo below.
+The "**Layout Switch**" and "**Spotlight**" features of Enhanced Readabilities plugin are temporarily unavailable on screens on mobile devices, so if you're reading on mobile but still want to see the results, check out the video demo below.
 :::
 
 ::: details Video demo
@@ -31,7 +31,7 @@ I know that this kind of functionality can be made into a browser plugin to cove
 ### Features included
 
 1. Layout switch
-2. Inline highlight
+2. Spotlight
 
 ## How to use
 
@@ -288,12 +288,12 @@ import {
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 ```
 
-#### Import inline highlight components on demand
+#### Import spotlight components on demand
 
 ```typescript
 import {
-  InlineHighlight,  // [!code focus]
-  ScreenInlineHighlight, // [!code focus]
+  Spotlight,  // [!code focus]
+  ScreenSpotlight, // [!code focus]
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 ```
 
@@ -357,26 +357,54 @@ export interface Options {
    *    'en': {
    *      title: {
    *       title: 'Reading Mode',
-   *      titleAriaLabel: 'Reading Mode',
+   *       titleAriaLabel: 'Reading Mode',
+   *      },
    *    },
    *    'zh-CN': {
    *       title: {
    *         title: '阅读模式',
    *         titleAriaLabel: '阅读模式',
+   *       },
    *     },
    *   }
    * }
    * ```
    */
   locales?: Record<string, Locale>
-  /**
-   * Disable layout switch help tooltip
-   */
-  disableLayoutSwitchHelp?: boolean
-  /**
-   * Disable inline highlight help tooltip
-   */
-  disableInlineHighlightHelp?: boolean
+  layoutSwitch?: {
+    /**
+     * Disable layout switch help tooltip
+     *
+     * @default false
+     */
+    disableHelp?: boolean
+    /**
+     * Default mode for layout switch
+     *
+     * @default LayoutMode.FitContentWidth (3) Fit content width
+     */
+    defaultMode?: LayoutMode
+  }
+  spotlight?: {
+    /**
+     * Disable spotlight help tooltip
+     *
+     * @default false
+     */
+    disableHelp?: boolean
+    /**
+     * Spotlight block color
+     *
+     * @default 'rgb(240 197 52 / 10%)'
+     */
+    hoverBlockColor?: string
+    /**
+     * Default toggle for spotlight
+     *
+     * @default false
+     */
+    defaultToggle?: boolean
+  }
 }
 ```
 
@@ -513,9 +541,9 @@ export interface Locale {
     optionFitContentWidthHelpMessage?: string
   }
   /**
-   * Inline highlight configuration
+   * Spotlight configuration
    */
-  inlineHighlight?: {
+  spotlight?: {
     /**
      * Title text
      */

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

@@ -5,7 +5,7 @@
 看到右上角的 <span i-icon-park-outline:book-open text-red-400 /> 按钮了吗？你可以使用鼠标悬浮在上面来看到支持的功能，点选一个你感兴趣的功能来看看效果吧！
 
 ::: warning 注意
-阅读增强的「**布局切换**」和「**行内高亮**」功能在移动端暂时不可用，如果你正在使用移动端阅读但还是想要看看效果的话，不妨看看下面的视频演示。
+阅读增强的「**布局切换**」和「**聚光灯**」功能在移动端暂时不可用，如果你正在使用移动端阅读但还是想要看看效果的话，不妨看看下面的视频演示。
 :::
 
 ::: details 视频演示
@@ -31,7 +31,7 @@
 ### 带来了什么功能
 
 1. 布局切换
-2. 行内高亮
+2. 聚光灯
 
 ## 如何使用
 
@@ -289,12 +289,12 @@ import {
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 ```
 
-#### 按需导入行内高亮组件
+#### 按需导入聚光灯组件
 
 ```typescript
 import {
-  InlineHighlight,  // [!code focus]
-  ScreenInlineHighlight, // [!code focus]
+  Spotlight,  // [!code focus]
+  ScreenSpotlight, // [!code focus]
 } from '@nolebase/vitepress-plugin-enhanced-readabilities'
 ```
 
@@ -337,21 +337,12 @@ export const Theme: ThemeConfig = {
 
 ```typescript
 /**
- * Options
- *
  * 配置项
  */
 export interface Options {
   /**
-   * Internationalization configuration
-   *
    * 国际化配置
    *
-   * When configuring, please configure according to the language code configured in
-   * VitePress internationalization configuration. In the following configuration, 'en'
-   * and 'zh-CN' are the language codes configured in VitePress internationalization
-   * configuration.
-   *
    * 配置的时候请根据 VitePress 中国际化配置中所配置的语言代码来配置，以下面的配置为例的话，'en'
    * 和 'zh-CN' 是 VitePress 的国际化配置中所配置的语言代码。
    *
@@ -363,30 +354,54 @@ export interface Options {
    *    'en': {
    *      title: {
    *       title: 'Reading Mode',
-   *      titleAriaLabel: 'Reading Mode',
+   *       titleAriaLabel: 'Reading Mode',
+   *      },
    *    },
    *    'zh-CN': {
    *       title: {
    *         title: '阅读模式',
    *         titleAriaLabel: '阅读模式',
+   *       },
    *     },
    *   }
    * }
    * ```
    */
   locales?: Record<string, Locale>
-  /**
-   * Disable layout switch help tooltip
-   *
-   * 显示布局切换帮助提示
-   */
-  disableLayoutSwitchHelp?: boolean
-  /**
-   * Disable inline highlight help tooltip
-   *
-   * 显示行内高亮帮助提示
-   */
-  disableInlineHighlightHelp?: boolean
+  layoutSwitch?: {
+    /**
+     * 显示布局切换帮助提示
+     *
+     * @default false
+     */
+    disableHelp?: boolean
+    /**
+     * 布局切换默认模式
+     *
+     * @default LayoutMode.FitContentWidth (3) 自适应内容宽度
+     */
+    defaultMode?: LayoutMode
+  }
+  spotlight?: {
+    /**
+     * 显示聚光灯帮助提示
+     *
+     * @default false
+     */
+    disableHelp?: boolean
+    /**
+     * 聚光灯器鼠标悬停块颜色
+     *
+     * @default 'rgb(240 197 52 / 10%)'
+     */
+    hoverBlockColor?: string
+    /**
+     * 聚光灯默认模式
+     *
+     * @default false
+     */
+    defaultToggle?: boolean
+  }
 }
 ```
 
@@ -562,11 +577,11 @@ export interface Locale {
     optionFitContentWidthHelpMessage?: string
   }
   /**
-   * Inline highlight configuration
+   * Spotlight configuration
    *
-   * 行内高亮配置
+   * 聚光灯配置
    */
-  inlineHighlight?: {
+  spotlight?: {
     /**
      * Title text
      *

tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
     "module": "ESNext",
     "target": "ESNext",
     "lib": [
@@ -20,12 +19,7 @@
     "types": [
       "vite/client",
       "vue/ref-macros"
-    ],
-    "paths": {
-      "@nolebase/markdown-it-element-transform": ["./packages/markdown-it-element-transform/src/index.ts"],
-      "@nolebase/vitepress-plugin-enhanced-readabilities": ["./packages/vitepress-plugin-enhanced-readabilities/dist/index.d.ts"],
-      "@nolebase/vitepress-plugin-inline-link-preview": ["./packages/vitepress-plugin-inline-link-preview/dist/index.d.ts"]
-    }
+    ]
   },
   "include": [
     "packages/**/*.ts",