fix: revert data.ts, add derived.ts, update imports

src/client/theme-default/components/VPContent.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
+import { useDerived } from '../composables/derived'
 import { useSidebar } from '../composables/sidebar'
 import VPDoc from './VPDoc.vue'
 import VPHome from './VPHome.vue'
 import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
+const { isHomeLayout } = useDerived()
 const { hasSidebar } = useSidebar()
 </script>
 
@@ -16,7 +18,7 @@ const { hasSidebar } = useSidebar()
     id="VPContent"
     :class="{
       'has-sidebar': hasSidebar,
-      'is-home': frontmatter.isHomeLayout
+      'is-home': isHomeLayout
     }"
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>

src/client/theme-default/components/VPNavBar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
 import { ref, watchPostEffect } from 'vue'
-import { useData } from '../composables/data'
+import { useDerived } from '../composables/derived'
 import { useSidebar } from '../composables/sidebar'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
@@ -22,14 +22,14 @@ defineEmits<{
 
 const { y } = useWindowScroll()
 const { hasSidebar } = useSidebar()
-const { frontmatter } = useData()
+const { isHomeLayout } = useDerived()
 
 const classes = ref<Record<string, boolean>>({})
 
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
-    'home': frontmatter.value.isHomeLayout,
+    'home': isHomeLayout.value,
     'top': y.value === 0,
     'screen-open': props.isScreenOpen
   }

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

@@ -1,12 +1,4 @@
 import { useData as useData$ } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
 
-export function useData() {
+export const useData: typeof useData$<DefaultTheme.Config> = useData$
-  const data = useData$<DefaultTheme.Config>()
-
-  // Allow an arbitrary layout to be used as the home layout
-  ;(data.frontmatter as any).isHomeLayout ??=
-    (data.frontmatter as any).layout === 'home'
-
-  return data
-}

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

@@ -0,0 +1,14 @@
+import { computed } from 'vue'
+import { useData } from './data'
+
+export function useDerived() {
+  const { frontmatter } = useData()
+
+  const isHomeLayout = computed(() => {
+    if (frontmatter.value.isHomeLayout !== undefined)
+      return Boolean(frontmatter.value.isHomeLayout)
+    else return frontmatter.value.layout === 'home'
+  })
+
+  return { isHomeLayout }
+}

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

@@ -18,6 +18,7 @@ import {
   getSidebarGroups
 } from '../support/sidebar'
 import { useData } from './data'
+import { useDerived } from '../composables/derived'
 
 export interface SidebarControl {
   collapsed: Ref<boolean>
@@ -31,6 +32,7 @@ export interface SidebarControl {
 
 export function useSidebar() {
   const { frontmatter, page, theme } = useData()
+  const { isHomeLayout } = useDerived()
   const is960 = useMediaQuery('(min-width: 960px)')
 
   const isOpen = ref(false)
@@ -52,7 +54,7 @@ export function useSidebar() {
     return (
       frontmatter.value.sidebar !== false &&
       sidebar.value.length > 0 &&
-      !frontmatter.value.isHomeLayout
+      !isHomeLayout.value
     )
   })
 
@@ -65,7 +67,7 @@ export function useSidebar() {
   })
 
   const hasAside = computed(() => {
-    if (frontmatter.value.isHomeLayout) return false
+    if (isHomeLayout.value) return false
     if (frontmatter.value.aside != null) return !!frontmatter.value.aside
     return theme.value.aside !== false
   })