fix(ContentRenderer): render empty slot if body is empty

resolves #2877

Author: farnabaz

playground/content/empty.md

@@ -0,0 +1,3 @@
+---
+title: Empty Page
+---

playground/pages/[...slug].vue

@@ -24,7 +24,13 @@ definePageMeta({
     <ContentRenderer
       v-if="data"
       :value="data"
-    />
+    >
+      <template #empty>
+        <div>
+          <h1>Nobody Exists</h1>
+        </div>
+      </template>
+    </ContentRenderer>
     <h2>Surround</h2>
     <pre>{{ surround }}</pre>
   </div>

src/runtime/components/ContentRenderer.vue

@@ -87,6 +87,8 @@ const body = computed(() => {
   return body
 })
 
+const isEmpty = computed(() => !body.value?.children?.length)
+
 const data = computed(() => {
   const { body, excerpt, ...data } = props.value
   return {
@@ -206,6 +208,7 @@ function findMappedTag(node: MDCElement, tags: Record<string, string>) {
 
 <template>
   <MDCRenderer
+    v-if="!isEmpty"
     :key="key"
     :body="body"
     :data="data"
@@ -216,4 +219,13 @@ function findMappedTag(node: MDCElement, tags: Record<string, string>) {
     :components="componentsMap"
     :data-content-id="debug ? value.id : undefined"
   />
+  <slot
+    v-else
+    name="empty"
+    :body="body"
+    :data="data"
+    :data-content-id="debug ? value.id : undefined"
+  >
+    <!-- nobody -->
+  </slot>
 </template>