Merge remote-tracking branch 'origin/v3' into feat/init-blog

docs/app/components/PageHeaderLinks.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const route = useRoute()
+const toast = useToast()
+const { copy, copied } = useClipboard()
+const site = useSiteConfig()
+
+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() {
+  copy(await $fetch<string>(`/raw${route.path}.md`))
+}
+</script>
+
+<template>
+  <UButtonGroup>
+    <UButton
+      label="Copy page"
+      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :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>

docs/app/components/content/examples/tooltip/TooltipCursorExample.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const open = ref(false)
+const anchor = ref({ x: 0, y: 0 })
+
+const reference = computed(() => ({
+  getBoundingClientRect: () =>
+    ({
+      width: 0,
+      height: 0,
+      left: anchor.value.x,
+      right: anchor.value.x,
+      top: anchor.value.y,
+      bottom: anchor.value.y,
+      ...anchor.value
+    } as DOMRect)
+}))
+</script>
+
+<template>
+  <UTooltip
+    :open="open"
+    :reference="reference"
+    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
+  >
+    <div
+      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
+      @pointerenter="open = true"
+      @pointerleave="open = false"
+      @pointermove="(ev) => {
+        anchor.x = ev.clientX
+        anchor.y = ev.clientY
+      }"
+    >
+      Hover me
+    </div>
+
+    <template #content>
+      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
+    </template>
+  </UTooltip>
+</template>

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

@@ -2,7 +2,8 @@
 import { kebabCase } from 'scule'
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { PageLink } from '@nuxt/ui-pro'
-import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { findPageBreadcrumb } from '@nuxt/content/utils'
 
 const route = useRoute()
 const { framework, module } = useSharedData()
@@ -37,7 +38,7 @@ const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link))
 
 if (!import.meta.prerender) {
   // Redirect to the correct framework version if the page is not the current framework
@@ -141,7 +142,7 @@ const communityLinks = computed(() => [{
         <MDC v-if="page.description" :value="page.description" unwrap="p" :cache-key="`${kebabCase(route.path)}-description`" />
       </template>
 
-      <template v-if="page.links?.length" #links>
+      <template #links>
         <UButton
           v-for="link in page.links"
           :key="link.label"
@@ -154,6 +155,7 @@ const communityLinks = computed(() => [{
             <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
           </template>
         </UButton>
+        <PageHeaderLinks />
       </template>
     </UPageHeader>