feat: added a new style for spotlight (#32)

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

Author: nekomeowww

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

@@ -444,6 +444,12 @@ export interface Options {
      * @default false
      */
     defaultToggle?: boolean
+    /**
+     * Default style for spotlight
+     *
+     * @default SpotlightStyle.Aside (2)
+     */
+    defaultStyle?: SpotlightStyle
   }
 }
 ```
@@ -703,6 +709,48 @@ export interface Locale {
      * Option: Off help message
      */
     optionOffHelpMessage?: string
+    styles?: {
+      /**
+       * Title text
+       */
+      title?: string
+      /**
+       * Title aria-label
+       */
+      titleAriaLabel?: string
+      /**
+       * Title help message
+       */
+      titleHelpMessage?: string
+      /**
+       * Title warning message for navigation menu in small screen
+       */
+      titleScreenNavWarningMessage?: string
+      /**
+       * Option: Under text
+       */
+      optionUnder?: string
+      /**
+       * Option: Under aria-label
+       */
+      optionUnderAriaLabel?: string
+      /**
+       * Option: Under help message
+       */
+      optionUnderHelpMessage?: string
+      /**
+       * Option: Aside text
+       */
+      optionAside?: string
+      /**
+       * Option: Aside aria-label
+       */
+      optionAsideAriaLabel?: string
+      /**
+       * Option: Aside help message
+       */
+      optionAsideHelpMessage?: string
+    }
   }
 }
 ```

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

@@ -443,6 +443,12 @@ export interface Options {
      * @default false
      */
     defaultToggle?: boolean
+    /**
+     * Default style for spotlight
+     *
+     * @default SpotlightStyle.Aside (2)
+     */
+    defaultStyle?: SpotlightStyle
   }
 }
 ```
@@ -702,6 +708,48 @@ export interface Locale {
      * Option: Off help message
      */
     optionOffHelpMessage?: string
+    styles?: {
+      /**
+       * Title text
+       */
+      title?: string
+      /**
+       * Title aria-label
+       */
+      titleAriaLabel?: string
+      /**
+       * Title help message
+       */
+      titleHelpMessage?: string
+      /**
+       * Title warning message for navigation menu in small screen
+       */
+      titleScreenNavWarningMessage?: string
+      /**
+       * Option: Under text
+       */
+      optionUnder?: string
+      /**
+       * Option: Under aria-label
+       */
+      optionUnderAriaLabel?: string
+      /**
+       * Option: Under help message
+       */
+      optionUnderHelpMessage?: string
+      /**
+       * Option: Aside text
+       */
+      optionAside?: string
+      /**
+       * Option: Aside aria-label
+       */
+      optionAsideAriaLabel?: string
+      /**
+       * Option: Aside help message
+       */
+      optionAsideHelpMessage?: string
+    }
   }
 }
 ```

packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue

@@ -18,7 +18,7 @@ const disabled = ref(false)
 
 const mounted = useMounted()
 const isLargerThanMobile = useMediaQuery('(min-width: 768px)')
-const layoutMode = useLocalStorage(LayoutSwitchModeStorageKey, options.layoutSwitch?.defaultMode || LayoutMode.Original)
+const layoutMode = useLocalStorage<LayoutMode>(LayoutSwitchModeStorageKey, options.layoutSwitch?.defaultMode || LayoutMode.Original)
 const { t } = useI18n()
 const { trigger: triggerAnimation } = useLayoutAppearanceChangeAnimation()
 

packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitchContentLayoutMaxWidthSlider.vue

@@ -99,7 +99,12 @@ watch(maxWidthValue, (val) => {
 
 <template>
   <Transition name="fade-shift">
-    <div v-if="layoutMode === LayoutMode.BothWidthAdjustable" space-y-2 role="range" class="VPNolebaseEnhancedReadabilitiesContentLayoutWidthSlider">
+    <div
+      v-if="layoutMode === LayoutMode.BothWidthAdjustable"
+      space-y-2
+      role="range"
+      class="VPNolebaseEnhancedReadabilitiesContentLayoutWidthSlider"
+    >
       <div ref="menuTitleElementRef" flex items-center>
         <MenuTitle
           icon="i-icon-park-outline:auto-line-width"

packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitchPageLayoutMaxWidthSlider.vue

@@ -98,7 +98,12 @@ watch(maxWidthValue, (val) => {
 
 <template>
   <Transition name="fade-shift">
-    <div v-if="layoutMode === LayoutMode.SidebarWidthAdjustableOnly || layoutMode === LayoutMode.BothWidthAdjustable" space-y-2 role="range" class="VPNolebaseEnhancedReadabilitiesPageLayoutWidthSlider">
+    <div
+      v-if="layoutMode === LayoutMode.SidebarWidthAdjustableOnly || layoutMode === LayoutMode.BothWidthAdjustable"
+      space-y-2
+      role="range"
+      class="VPNolebaseEnhancedReadabilitiesPageLayoutWidthSlider"
+    >
       <div ref="menuTitleElementRef" flex items-center>
         <MenuTitle
           icon="i-icon-park-outline:auto-width-one"

packages/vitepress-plugin-enhanced-readabilities/src/components/Menu.vue

@@ -6,9 +6,10 @@ import { useI18n } from '../composables/i18n'
 
 import LayoutSwitchLayoutIcon from './MenuIcon.vue'
 import LayoutSwitch from './LayoutSwitch.vue'
-import MouseOverElementHighlight from './Spotlight.vue'
 import LayoutSwitchPageLayoutWidthInput from './LayoutSwitchPageLayoutMaxWidthSlider.vue'
 import LayoutSwitchContentLayoutWidthInput from './LayoutSwitchContentLayoutMaxWidthSlider.vue'
+import Spotlight from './Spotlight.vue'
+import SpotlightStyles from './SpotlightStyles.vue'
 
 const mounted = useMounted()
 const { t } = useI18n()
@@ -23,7 +24,8 @@ const { t } = useI18n()
       <LayoutSwitch />
       <LayoutSwitchPageLayoutWidthInput />
       <LayoutSwitchContentLayoutWidthInput />
-      <MouseOverElementHighlight />
+      <Spotlight />
+      <SpotlightStyles />
     </div>
   </VPFlyout>
 </template>

packages/vitepress-plugin-enhanced-readabilities/src/components/Spotlight.vue

@@ -21,16 +21,16 @@ const { t } = useI18n()
 
 const fieldOptions = computed(() => [
   {
+    value: true,
     title: t('spotlight.optionOn'),
     ariaLabel: t('spotlight.optionOnAriaLabel'),
-    value: true,
     text: 'ON',
     name: 'VitePress Nolebase Enhanced Readabilities Spotlight Toggle Switch',
   },
   {
+    value: false,
     title: t('spotlight.optionOff'),
     ariaLabel: t('spotlight.optionOffAriaLabel'),
-    value: false,
     text: 'OFF',
     name: 'VitePress Nolebase Enhanced Readabilities Spotlight Toggle Switch',
   },

packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue

@@ -1,8 +1,17 @@
 <script setup lang="ts">
 import { inject, onMounted, reactive, ref, watch } from 'vue'
-import { useElementBounding, useElementByPoint, useElementVisibility, useEventListener, useMouse, useMouseInElement } from '@vueuse/core'
+import {
+  useElementBounding,
+  useElementByPoint,
+  useElementVisibility,
+  useEventListener,
+  useMouse,
+  useMouseInElement,
+  useStorage,
+} from '@vueuse/core'
 import { useRoute } from 'vitepress'
-import { InjectionKey } from '../constants'
+
+import { InjectionKey, SpotlightStyle, SpotlightStylesStorageKey } from '../constants'
 
 const props = defineProps<{ enabled: boolean }>()
 
@@ -17,10 +26,15 @@ const { isOutside } = useMouseInElement(vpDocElement)
 const { element } = useElementByPoint({ x, y })
 const bounding = reactive(useElementBounding(element))
 const elementVisibility = useElementVisibility(highlightedElement)
+const spotlightStyle = useStorage<SpotlightStyle>(SpotlightStylesStorageKey, options.spotlight?.defaultStyle || SpotlightStyle.Aside)
 const route = useRoute()
 
 useEventListener('scroll', bounding.update, true)
 
+onMounted(() => {
+  document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-spotlight-under-bg-color', options?.spotlight?.hoverBlockColor || `rgb(240 197 52 / 10%)`)
+})
+
 onMounted(() => {
   vpDocElement.value = document.querySelector('.VPDoc main .vp-doc') as HTMLDivElement
 })
@@ -41,7 +55,6 @@ function computeBoxStyles(bounding: {
     height: `${bounding.height + 8}px`,
     left: `${bounding.left - 4}px`,
     top: `${bounding.top - 4}px`,
-    backgroundColor: options?.spotlight?.hoverBlockColor || 'rgb(240 197 52 / 10%)',
     transition: 'all 0.2s ease',
     borderRadius: '8px',
   }
@@ -134,9 +147,34 @@ watch(() => props.enabled, (val) => {
       :style="boxStyles"
       aria-hidden="true"
       focusable="false"
-      pointer-events-none fixed z-50
+      pointer-events-none fixed
       border="1 $vp-c-brand"
-      class="VPNolebaseSpotlightHoverBlock"
+      class="VPNolebaseEnhancedReadabilitiesSpotlightHoverBlock"
+      :class="[
+        spotlightStyle === SpotlightStyle.Under ? 'VPNolebaseEnhancedReadabilitiesSpotlightHoverBlockUnder' : '',
+        spotlightStyle === SpotlightStyle.Aside ? 'VPNolebaseEnhancedReadabilitiesSpotlightHoverBlockAside' : '',
+      ]"
     />
   </Teleport>
 </template>
+
+<style less scoped>
+:root {
+  --vp-nolebase-enhanced-readabilities-spotlight-under-bg-color: rgb(240 197 52 / 10%);
+}
+
+.VPNolebaseEnhancedReadabilitiesSpotlightHoverBlock.VPNolebaseEnhancedReadabilitiesSpotlightHoverBlockUnder {
+  background-color: var(--vp-nolebase-enhanced-readabilities-spotlight-under-bg-color);
+}
+
+.VPNolebaseEnhancedReadabilitiesSpotlightHoverBlock.VPNolebaseEnhancedReadabilitiesSpotlightHoverBlockAside::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 4px;
+  height: 100%;
+  border-radius: 4px;
+  background-color: var(--vp-c-brand);
+  left: -24px;
+}
+</style>