From 519d0fb598580208ee485e1a1a2212c828db7500 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Tue, 2 Aug 2022 18:27:33 +0430
Subject: [PATCH] fix(document-driven): throw 404 error when content is missing
 (#1394)

---
 scripts/test.sh                               |  4 +-
 src/runtime/pages/document-driven.vue         |  9 ++
 test/document-driven.test.ts                  | 11 ++-
 .../document-driven/pages/[...slug].vue       | 82 -------------------
 4 files changed, 21 insertions(+), 85 deletions(-)
 delete mode 100644 test/fixtures/document-driven/pages/[...slug].vue

diff --git a/scripts/test.sh b/scripts/test.sh
index 1c2a99ecb..633fb44f6 100755
--- a/scripts/test.sh
+++ b/scripts/test.sh
@@ -13,8 +13,8 @@ done
 
 if [[ $ARG1 ]]
 then
-  echo "npx vitest run -t $ARG1"
-  (npx vitest run -t $ARG1.test)
+  echo "npx vitest run $ARG1"
+  (npx vitest run $ARG1.test)
 else
   echo "npx vitest run"
   (npx vitest run)
diff --git a/src/runtime/pages/document-driven.vue b/src/runtime/pages/document-driven.vue
index 270cb1b20..aa68694fd 100644
--- a/src/runtime/pages/document-driven.vue
+++ b/src/runtime/pages/document-driven.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
+import { createError } from 'h3'
 import { useContent, useContentHead } from '#imports'
 
 const { page } = useContent()
 
+// Page not found
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: `Page not found: ${useRoute().path}`
+  })
+}
+
 useContentHead(page)
 </script>
 
diff --git a/test/document-driven.test.ts b/test/document-driven.test.ts
index 0a9ebe16b..ba2b53ed0 100644
--- a/test/document-driven.test.ts
+++ b/test/document-driven.test.ts
@@ -11,7 +11,7 @@ describe('fixtures:document-driven', async () => {
   test('<title> from front-matter', async () => {
     const html = await $fetch('/')
 
-    expect(html).contains('Home | Document Driven Fixture')
+    expect(html).contains('<title>Home</title>')
   })
 
   test('disabled document driven', async () => {
@@ -46,4 +46,13 @@ describe('fixtures:document-driven', async () => {
     expect(html).contains('with previous link /layout')
     expect(html).contains('with next link /no-surround')
   })
+
+  test('404 page', async () => {
+    try {
+      await $fetch('/page-not-found')
+    } catch (e) {
+      expect(e.response.status).toBe(404)
+      expect(e.response.statusText).toBe('Page not found: /page-not-found')
+    }
+  })
 })
diff --git a/test/fixtures/document-driven/pages/[...slug].vue b/test/fixtures/document-driven/pages/[...slug].vue
deleted file mode 100644
index 203b45cdb..000000000
--- a/test/fixtures/document-driven/pages/[...slug].vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { computed, useContent, useHead, useTheme } from '#imports'
-
-const { page } = useContent()
-
-const theme = useTheme()
-
-const cover = computed(() => {
-  const cover = page.value?.cover || theme.value?.cover
-
-  if (typeof cover === 'string') {
-    return { src: cover, alt: page.value?.title || theme.value.title }
-  }
-
-  return cover || {}
-})
-
-useHead({
-  bodyAttrs: {
-    class: []
-  },
-  title: page.value?.title,
-  titleTemplate: theme.value?.title ? '%s | Document Driven Fixture' : '%s',
-  meta: [
-    { hid: 'description', name: 'description', content: page.value?.description || theme.value?.description },
-    { hid: 'og:site_name', property: 'og:site_name', content: 'Nuxt' },
-    { hid: 'og:type', property: 'og:type', content: 'website' },
-    {
-      hid: 'twitter:site',
-      name: 'twitter:site',
-      content: theme.value?.url || theme.value?.socials?.twitter || ''
-    },
-    {
-      hid: 'twitter:card',
-      name: 'twitter:card',
-      content: 'summary_large_image'
-    },
-    {
-      hid: 'og:image',
-      property: 'og:image',
-      content: cover.value.src || ''
-    },
-    {
-      hid: 'og:image:secure_url',
-      property: 'og:image:secure_url',
-      content: cover.value.src || ''
-    },
-    {
-      hid: 'og:image:alt',
-      property: 'og:image:alt',
-      content: cover.value.alt || ''
-    },
-    {
-      hid: 'twitter:image',
-      name: 'twitter:image',
-      content: cover.value.src || ''
-    }
-  ]
-})
-</script>
-
-<template>
-  <div class="document-driven-content">
-    <ContentRenderer v-if="page" :key="page._id" :value="page">
-      <template #empty="{ value }">
-        <p>
-          You have succesfully created the page: <span class="font-semibold">{{ value._path }}</span>
-        </p>
-
-        <p>
-          You can now start writing into: <span class="font-semibold">{{ value._source }}/{{ value._file }}</span>
-        </p>
-      </template>
-    </ContentRenderer>
-  </div>
-</template>
-
-<style>
-.document-driven-content {
-  padding: 1rem;
-}
-</style>