wip

src/client/app/composables/frontmatter.ts

@@ -0,0 +1,8 @@
+import { Ref, computed } from 'vue'
+import { usePageData } from './pageData'
+
+export type FrontmatterRef = Ref<Record<string, any>>
+
+export function useFrontmatter() {
+  return computed(() => usePageData().value.frontmatter)
+}

src/client/app/exports.ts

@@ -14,6 +14,7 @@ export { useRouter, useRoute, Router, Route } from './router'
 export { useSiteData } from './composables/siteData'
 export { useSiteDataByRoute } from './composables/siteDataByRoute'
 export { usePageData } from './composables/pageData'
+export { useFrontmatter } from './composables/frontmatter'
 
 // components
 export { Content } from './components/Content'

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

@@ -13,33 +13,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useRoute, useSiteDataByRoute } from 'vitepress'
-import { withBase } from '../utils'
-
-export default defineComponent({
-  setup() {
-    const route = useRoute()
-    const siteData = useSiteDataByRoute()
-
-    const data = computed(() => route.data.frontmatter)
-
-    const hasFeatures = computed(() => {
-      return data.value.features && data.value.features.length > 0
-    })
-
-    const features = computed(() => {
-      return data.value.features ? data.value.features : []
-    })
-
-    return {
-      data,
-      hasFeatures,
-      features
-    }
-  }
-})
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
+
+ref: data = useFrontmatter()
+
+ref: hasFeatures = computed(() => data.features && data.features.length > 0)
+ref: features = computed(() => data.features ? data.features : [])
 </script>
 
 <style scoped>

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

@@ -1,28 +1,11 @@
 <template>
-  <footer v-if="footer" class="footer">
+  <footer v-if="$frontmatter.footer" class="footer">
     <div class="container">
-      <p class="text">{{ footer }}</p>
+      <p class="text">{{ $frontmatter.footer }}</p>
     </div>
   </footer>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useRoute } from 'vitepress'
-
-export default defineComponent({
-  setup() {
-    const route = useRoute()
-
-    const footer = computed(() => route.data.frontmatter.footer)
-
-    return {
-      footer
-    }
-  }
-})
-</script>
-
 <style scoped>
 .footer {
   margin: 0 auto;

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

@@ -1,77 +1,42 @@
 <template>
   <header v-if="showHero" class="home-hero">
-    <figure v-if="hasHeroImage" class="figure">
-      <img class="image" :src="heroImage" :alt="heroAlt">
+    <figure v-if="$frontmatter.heroImage" class="figure">
+      <img
+        class="image"
+        :src="$withBase($frontmatter.heroImage)"
+        :alt="$frontmatter.heroAlt"
+      >
     </figure>
 
     <h1 v-if="hasHeroText" class="title">{{ heroText }}</h1>
     <p v-if="hasTagline" class="description">{{ tagline }}</p>
 
     <div v-if="hasAction" class="action">
-      <a class="action-link" :href="actionLink">
-        {{ actionText }}
+      <a class="action-link" :href="$frontmatter.actionLink">
+        {{ $frontmatter.actionText }}
       </a>
     </div>
   </header>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useRoute, useSiteDataByRoute } from 'vitepress'
-import { withBase } from '../utils'
-
-export default defineComponent({
-  setup() {
-    const route = useRoute()
-    const siteData = useSiteDataByRoute()
-
-    const data = computed(() => route.data.frontmatter)
-
-    const showHero = computed(() => {
-      return hasHeroImage.value
-        || hasHeroText.value
-        || hasTagline.value
-        || hasAction.value
-    })
-
-    const hasHeroImage = computed(() => !!data.value.heroImage)
-    const heroImage = computed(() => withBase(data.value.heroImage))
-    const heroAlt = computed(() => data.value.heroAlt || 'Hero image')
-
-    const hasHeroText = computed(() => data.value.heroText !== null)
-
-    const heroText = computed(() => {
-      return data.value.heroText || siteData.value.title
-    })
-
-    const hasTagline = computed(() => data.value.tagline !== null)
-
-    const tagline = computed(() => {
-      return data.value.tagline || siteData.value.description
-    })
-
-    const hasAction = computed(() => {
-      return data.value.actionLink && data.value.actionText
-    })
-
-    const actionLink = computed(() => data.value.actionLink)
-    const actionText = computed(() => data.value.actionText)
-
-    return {
-      showHero,
-      hasHeroImage,
-      heroImage,
-      heroAlt,
-      hasHeroText,
-      heroText,
-      hasTagline,
-      tagline,
-      hasAction,
-      actionLink,
-      actionText
-    }
-  }
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
+
+ref: site = useSiteDataByRoute()
+ref: data = useFrontmatter()
+
+ref: showHero = computed(() => {
+  return data.heroImage || hasHeroText || hasTagline || hasAction
 })
+
+ref: hasHeroText = computed(() => data.heroText !== null)
+ref: heroText = computed(() => data.heroText || site.title)
+
+ref: hasTagline = computed(() => data.tagline !== null)
+ref: tagline = computed(() => data.tagline || site.description)
+
+ref: hasAction = computed(() => data.actionLink && data.actionText)
 </script>
 
 <style scoped>