feat(app): add PageHeaderLinks component (#235)

Author: HugoRCD

app/components/PageHeaderLinks.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const route = useRoute()
+const toast = useToast()
+const { copy, copied } = useClipboard()
+const site = useSiteConfig()
+const isCopying = ref(false)
+console.log(site)
+
+const mdPath = computed(() => `${site.url}/raw${route.path}.md`)
+
+const items = [
+  {
+    label: 'Copy Markdown link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      copy(mdPath.value)
+      toast.add({
+        title: 'Copied to clipboard',
+        icon: 'i-lucide-check-circle'
+      })
+    }
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    to: `/raw${route.path}.md`
+  },
+  {
+    label: 'Open in ChatGPT',
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
+  },
+  {
+    label: 'Open in Claude',
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
+  }
+]
+
+async function copyPage() {
+  isCopying.value = true
+  copy(await $fetch<string>(`/raw${route.path}.md`))
+  isCopying.value = false
+}
+</script>
+
+<template>
+  <UButtonGroup>
+    <UButton
+      label="Copy page"
+      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :loading="isCopying"
+      :ui="{
+        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5']
+      }"
+      @click="copyPage"
+    />
+    <UDropdownMenu
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8
+      }"
+      :ui="{
+        content: 'w-48'
+      }"
+    >
+      <UButton
+        icon="i-lucide-chevron-down"
+        size="sm"
+        color="neutral"
+        variant="outline"
+      />
+    </UDropdownMenu>
+  </UButtonGroup>
+</template>

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

@@ -57,9 +57,18 @@ const links = computed(() => {
     <UPageHeader
       :title="page.title"
       :description="page.description"
-      :links="page.links"
       :headline="headline"
-    />
+    >
+      <template #links>
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          v-bind="link"
+        />
+
+        <PageHeaderLinks />
+      </template>
+    </UPageHeader>
 
     <UPageBody>
       <ContentRenderer

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

@@ -0,0 +1,27 @@
+import { withLeadingSlash } from 'ufo'
+import { stringify } from 'minimark/stringify'
+import { queryCollection } from '@nuxt/content/nitro'
+import type { Collections } from '@nuxt/content'
+
+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 path = withLeadingSlash(slug.replace('.md', ''))
+
+  const page = await queryCollection(event, 'docs' 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, type: 'minimark' }, { format: 'markdown/html' })
+})