chore: move inert logic to default-theme

src/client/app/index.ts

@@ -17,7 +17,6 @@ import { usePrefetch } from './composables/preFetch'
 import { dataSymbol, initData, siteDataRef, useData } from './data'
 import { RouterSymbol, createRouter, scrollTo, type Router } from './router'
 import { inBrowser, pathToFile } from './utils'
-import { provideInert } from './inert'
 
 function resolveThemeExtends(theme: typeof RawTheme): typeof RawTheme {
   if (theme.extends) {
@@ -74,8 +73,6 @@ export async function createApp() {
   const data = initData(router.route)
   app.provide(dataSymbol, data)
 
-  provideInert(app)
-
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)

src/client/app/inert.ts

@@ -1,52 +0,0 @@
-import {
-  type App,
-  computed,
-  inject,
-  reactive,
-  type UnwrapNestedRefs
-} from 'vue'
-
-const inertSymbol = Symbol()
-const inertStateSymbol = Symbol()
-
-export interface Inert {
-  isSidebarOpen: boolean
-  isScreenOpen: boolean
-  isSidebarVisible: boolean
-}
-
-export interface InertState {
-  inertSkipLink: boolean
-  inertNav: boolean
-  inertLocalNav: boolean
-  inertSidebar: boolean
-  inertContent: boolean
-  inertFooter: boolean
-}
-
-export function useInert() {
-  return inject<UnwrapNestedRefs<Inert>>(inertSymbol)
-}
-
-export function useInertState() {
-  return inject<UnwrapNestedRefs<InertState>>(inertStateSymbol)
-}
-
-export function provideInert(app: App) {
-  const inert = reactive({
-    isSidebarOpen: false,
-    isScreenOpen: false,
-    isSidebarVisible: true
-  })
-  const inertState = reactive({
-    inertSkipLink: computed(() => inert.isSidebarOpen || inert.isScreenOpen),
-    inertNav: computed(() => inert.isSidebarOpen),
-    inertLocalNav: computed(() => inert.isSidebarOpen || inert.isScreenOpen),
-    inertSidebar: computed(() => !inert.isSidebarVisible || inert.isScreenOpen),
-    inertContent: computed(() => inert.isSidebarOpen || inert.isScreenOpen),
-    inertFooter: computed(() => inert.isSidebarOpen || inert.isScreenOpen)
-  })
-
-  app.provide(inertSymbol, inert)
-  app.provide(inertStateSymbol, inertState)
-}

src/client/index.ts

@@ -3,7 +3,6 @@
 
 // generic types
 export type { VitePressData } from './app/data'
-export type { Inert, InertState } from './app/inert'
 export type { Route, Router } from './app/router'
 
 // theme types
@@ -14,7 +13,6 @@ export type { HeadConfig, Header, PageData, SiteData } from '../../types/shared'
 
 // composables
 export { useData, dataSymbol } from './app/data'
-export { useInert, useInertState } from './app/inert'
 export { useRoute, useRouter } from './app/router'
 
 // utilities

src/client/theme-default/Layout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useInertState, useRoute } from 'vitepress'
+import { useRoute } from 'vitepress'
 import { computed, provide, useSlots, watch } from 'vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPContent from './components/VPContent.vue'
@@ -10,6 +10,7 @@ import VPSidebar from './components/VPSidebar.vue'
 import VPSkipLink from './components/VPSkipLink.vue'
 import { useData } from './composables/data'
 import { useCloseSidebarOnEscape, useSidebar } from './composables/sidebar'
+import { inertState } from './composables/inert'
 
 const {
   isOpen: isSidebarOpen,
@@ -17,7 +18,6 @@ const {
   close: closeSidebar
 } = useSidebar()
 
-const inert = useInertState()
 const route = useRoute()
 watch(() => route.path, closeSidebar)
 
@@ -34,9 +34,9 @@ provide('hero-image-slot-exists', heroImageSlotExists)
 <template>
   <div v-if="frontmatter.layout !== false" class="Layout" :class="frontmatter.pageClass" >
     <slot name="layout-top" />
-    <VPSkipLink :inert="inert?.inertSkipLink" />
+    <VPSkipLink :inert="inertState.inertSkipLink" />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav :inert="inert?.inertNav">
+    <VPNav :inert="inertState.inertNav">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
@@ -44,14 +44,14 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
       <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
     </VPNav>
-    <VPLocalNav :inert="inert?.inertLocalNav" :open="isSidebarOpen" @open-menu="openSidebar" />
+    <VPLocalNav :inert="inertState.inertLocalNav" :open="isSidebarOpen" @open-menu="openSidebar" />
 
-    <VPSidebar :inert="inert?.inertSidebar" :open="isSidebarOpen">
+    <VPSidebar :inert="inertState.inertSidebar" :open="isSidebarOpen">
       <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
       <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
     </VPSidebar>
 
-    <VPContent :inert="inert?.inertContent">
+    <VPContent :inert="inertState.inertContent">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
 
@@ -77,7 +77,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
 
-    <VPFooter :inert="inert?.inertFooter" />
+    <VPFooter :inert="inertState.inertFooter" />
     <slot name="layout-bottom" />
   </div>
   <Content v-else />

src/client/theme-default/composables/inert.ts

@@ -0,0 +1,26 @@
+import { computed, reactive } from 'vue'
+
+export const inertControls = reactive({
+  isSidebarOpen: false,
+  isScreenOpen: false,
+  isSidebarVisible: true
+})
+
+export const inertState = reactive({
+  inertSkipLink: computed(
+    () => inertControls.isSidebarOpen || inertControls.isScreenOpen
+  ),
+  inertNav: computed(() => inertControls.isSidebarOpen),
+  inertLocalNav: computed(
+    () => inertControls.isSidebarOpen || inertControls.isScreenOpen
+  ),
+  inertSidebar: computed(
+    () => !inertControls.isSidebarVisible || inertControls.isScreenOpen
+  ),
+  inertContent: computed(
+    () => inertControls.isSidebarOpen || inertControls.isScreenOpen
+  ),
+  inertFooter: computed(
+    () => inertControls.isSidebarOpen || inertControls.isScreenOpen
+  )
+})

src/client/theme-default/composables/nav.ts

@@ -1,9 +1,9 @@
 import { ref, watch } from 'vue'
-import { useInert, useRoute } from 'vitepress'
+import { useRoute } from 'vitepress'
+import { inertControls } from './inert'
 import { useMediaQuery } from '@vueuse/core'
 
 export function useNav() {
-  const inert = useInert()!
   const is768 = useMediaQuery('(min-width: 768px)')
   const isScreenOpen = ref(false)
 
@@ -29,9 +29,9 @@ export function useNav() {
     () => [isScreenOpen.value, is768.value],
     ([screenOpen, mq]) => {
       if (mq) {
-        inert.isScreenOpen = false
+        inertControls.isScreenOpen = false
       } else {
-        inert.isScreenOpen = screenOpen
+        inertControls.isScreenOpen = screenOpen
       }
     }
   )

src/client/theme-default/composables/sidebar.ts

@@ -19,7 +19,7 @@ import {
 } from '../support/sidebar'
 import { useData } from './data'
 import { hashRef } from './hash'
-import { useInert } from 'vitepress'
+import { inertControls } from './inert'
 
 export interface SidebarControl {
   collapsed: Ref<boolean>
@@ -33,7 +33,6 @@ export interface SidebarControl {
 
 export function useSidebar() {
   const { frontmatter, page, theme } = useData()
-  const inert = useInert()!
   const is960 = useMediaQuery('(min-width: 960px)')
 
   const isOpen = ref(false)
@@ -79,10 +78,10 @@ export function useSidebar() {
     () => [hasSidebar.value, is960.value, isOpen.value],
     ([sb, mq, o]) => {
       if (o) {
-        inert.isSidebarVisible = inert.isSidebarOpen = true
+        inertControls.isSidebarVisible = inertControls.isSidebarOpen = true
       } else {
-        inert.isSidebarOpen = false
+        inertControls.isSidebarOpen = false
-        inert.isSidebarVisible = sb && mq
+        inertControls.isSidebarVisible = sb && mq
       }
     }
   )

src/client/theme-default/without-fonts.ts

@@ -23,6 +23,7 @@ export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue'
 export { default as VPTeamMembers } from './components/VPTeamMembers.vue'
 
+export { inertControls, inertState } from './composables/inert'
 export { useSidebar } from './composables/sidebar'
 export { useLocalNav } from './composables/local-nav'