add post meta of date and word count in seperate lazy component

components/PostMeta.vue

@@ -0,0 +1,25 @@
+<template>
+    <Suspense>
+        <template #default>
+            <p class="text-[var(--background-400)]">
+                {{ page?.date }} · {{ wordCount }} words
+            </p>
+        </template>
+        <template #fallback>
+            <div class="animate-pulse">
+                <div class="h-4 bg-[var(--text-200)] rounded w-32"></div>
+            </div>
+        </template>
+    </Suspense>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+const wordCount = computed(() => {
+    if (!page.value?.body) return 0
+    const content = JSON.stringify(page.value.body)
+    return content.split(/\s+/)
+        .filter(word => /[a-zA-Z0-9]/.test(word))
+        .length
+})
+</script>

pages/blog/[...slug].vue

@@ -5,7 +5,9 @@
 				<Suspense>
 					<template #default>
 						<main>
-							<p class="mb-[-30px] text-[var(--background-400)]">{{ page?.date }}</p>
+							<div class="mb-[-30px]">
+								<LazyPostMeta />
+							</div>
 							<ContentLoader />
 							<hr />
 							<RelatedPosts v-if="showRelated" />
@@ -37,7 +39,7 @@ const route = useRoute()
 const { data: page } = await useAsyncData(`content-${route.path}`, () => {
 	return queryContent()
 		.where({ _path: route.path })
-		.only(['description', 'tags', 'date'])
+		.only(['description', 'tags'])
 		.findOne()
 })