docs: generate markdown for each page

docs/app/components/PageHeader.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+import type { PageCollectionItemBase } from '@nuxt/content'
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+defineProps<{
+  page: PageCollectionItemBase
+  headline?: string
+}>()
+
+const route = useRoute()
+
+const copyStatus = ref<'idle' | 'copying' | 'copied'>('idle')
+const items = ref<DropdownMenuItem[]>([
+
+  {
+    label: 'Copy Markdown Link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      navigator.clipboard.writeText(`${window.location.origin}/raw${route.path}.md`)
+    },
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    onSelect() {
+      window.open(`${window.location.origin}/raw${route.path}.md`, '_blank')
+    },
+  },
+  {
+    label: 'Open in ChatGPT',
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    onSelect() {
+      window.open(`https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${window.location.origin}/raw${route.path}.md so I can ask questions about it.`)}`, '_blank')
+    },
+  },
+  {
+    label: 'Open in Claude',
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    onSelect() {
+      window.open(`https://claude.ai/new?q=${encodeURIComponent(`Read ${window.location.origin}/raw${route.path}.md so I can ask questions about it.`)}`, '_blank')
+    },
+  },
+])
+const copyPage = async () => {
+  copyStatus.value = 'copying'
+  const markdown = await $fetch<string>(`${window.location.origin}/raw${route.path}.md`)
+  await navigator.clipboard.writeText(markdown)
+  copyStatus.value = 'copied'
+  setTimeout(() => {
+    copyStatus.value = 'idle'
+  }, 2000)
+}
+</script>
+
+<template>
+  <UPageHeader
+    :title="page.title"
+    :links="page.links"
+    :headline="headline"
+  >
+    <template #headline>
+      <div
+        v-if="headline"
+        class="w-full justify-between flex"
+      >
+        {{ headline }}
+        <UButtonGroup>
+          <UButton
+            :label="`${copyStatus === 'copied' ? 'Copied' : 'Copy Page'}`"
+            :icon="`i-lucide-${copyStatus === 'copied' ? 'check' : 'copy'}`"
+            color="neutral"
+            variant="outline"
+            :loading="copyStatus === 'copying'"
+            @click="copyPage"
+          />
+          <UDropdownMenu
+            :items="items"
+            :content="{
+              align: 'end',
+              side: 'bottom',
+              sideOffset: 8,
+            }"
+            :ui="{
+              content: 'w-48',
+            }"
+          >
+            <UButton
+              icon="i-lucide-chevron-down"
+              color="neutral"
+              variant="outline"
+            />
+          </UDropdownMenu>
+        </UButtonGroup>
+      </div>
+    </template>
+    <template #description>
+      <MDC
+        vif="page.description"
+        :cache-key="`${kebabCase(route.path)}-description`"
+        :value="page.description"
+        unwrap="p"
+      />
+    </template>
+  </UPageHeader>
+</template>

docs/app/pages/docs/[...slug].vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
-import { kebabCase } from 'scule'
 import { findPageHeadline } from '#ui-pro/utils/content'
 
 const route = useRoute()
@@ -61,20 +60,10 @@ const communityLinks = computed(() => [{
 
 <template>
   <UPage v-if="page">
-    <UPageHeader
-      :title="page.title"
-      :links="page.links"
+    <PageHeader
+      :page="page"
       :headline="headline"
-    >
-      <template #description>
-        <MDC
-          v-if="page.description"
-          :cache-key="`${kebabCase(route.path)}-description`"
-          :value="page.description"
-          unwrap="p"
-        />
-      </template>
-    </UPageHeader>
+    />
 
     <UPageBody>
       <ContentRenderer

docs/server/routes/raw/[...slug].md.get.ts

@@ -0,0 +1,29 @@
+import type { Collections } from '@nuxt/content'
+// import { queryCollection } from '@nuxt/content/nitro'
+import { stringify } from 'minimark/stringify'
+import { withLeadingSlash } from 'ufo'
+
+export default eventHandler(async (event) => {
+  const slug = getRouterParams(event)['slug.md']
+  if (!slug?.endsWith('.md')) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  const [collection] = String(slug).split('/')
+  const path = withLeadingSlash(slug).slice(0, -3)
+
+  const page = await queryCollection(event, collection as keyof Collections)
+    .path(path).first()
+  if (!page) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  // Add title and description to the top of the page if missing
+  if (page.body.value[0]?.[0] !== 'h1') {
+    page.body.value.unshift(['blockquote', {}, page.description])
+    page.body.value.unshift(['h1', {}, page.title])
+  }
+
+  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
+  return stringify(page.body, { format: 'markdown/html' })
+})

docs/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

package.json

@@ -28,7 +28,8 @@
       "import": "./dist/preview.mjs",
       "require": "./dist/preview.cjs"
     },
-    "./runtime": "./dist/runtime/index.js"
+    "./runtime": "./dist/runtime/index.js",
+    "./nitro": "./dist/runtime/nitro.js" 
   },
   "main": "./dist/module.cjs",
   "types": "./dist/module.d.mts",
@@ -77,6 +78,7 @@
     "micromark-util-resolve-all": "^2.0.1",
     "micromark-util-sanitize-uri": "^2.0.1",
     "micromatch": "^4.0.8",
+    "minimark": "^0.2.0",
     "minimatch": "^10.0.1",
     "nuxt-component-meta": "^0.11.0",
     "ohash": "^2.0.11",