docs: embed playground

docs/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
+  <div v-if="$route.path !== '/playground'" class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
     <div class="bg-white dark:bg-gray-900 px-4">
       <LogoOnly class="w-5 h-5" />
     </div>

docs/components/Header.vue

@@ -12,14 +12,12 @@
       </NuxtLink>
     </template>
 
-    <template v-if="$route.path !== '/'" #center>
-      <UDocsSearchButton class="ml-1.5 hidden lg:flex lg:w-64 xl:w-96" />
-    </template>
-
     <template #right>
       <ColorPicker />
 
-      <UDocsSearchButton :class="[$route.path !== '/' && 'lg:hidden']" icon-only />
+      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
+        <UDocsSearchButton icon-only />
+      </UTooltip>
 
       <UColorModeButton v-if="!$colorMode.forced" />
 
@@ -37,16 +35,12 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const route = useRoute()
+const { metaSymbol } = useShortcuts()
 const { mapContentNavigation } = useElementsHelpers()
 
 const navigation = inject<Ref<NavItem[]>>('navigation')
 
 const links = computed(() => {
-  if (route.path !== '/') {
-    return []
-  }
-
   return [{
     label: 'Documentation',
     icon: 'i-heroicons-book-open-solid',
@@ -58,8 +52,7 @@ const links = computed(() => {
   }, {
     label: 'Playground',
     icon: 'i-simple-icons-stackblitz',
-    to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
-    target: '_blank'
+    to: '/playground'
   }, {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch-solid',

docs/layouts/docs.vue

@@ -3,7 +3,7 @@
     <UContainer>
       <UPage>
         <template #left>
-          <UAside :links="anchors">
+          <UAside>
             <BranchSelect />
 
             <UNavigationTree :links="mapContentNavigation(navigation)" />
@@ -22,20 +22,4 @@ import type { NavItem } from '@nuxt/content/dist/runtime/types'
 const { mapContentNavigation } = useElementsHelpers()
 
 const navigation = inject<NavItem[]>('navigation')
-
-const anchors = [{
-  label: 'Documentation',
-  icon: 'i-heroicons-book-open-solid',
-  to: '/getting-started'
-}, {
-  label: 'Playground',
-  icon: 'i-simple-icons-stackblitz',
-  to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
-  target: '_blank'
-}, {
-  label: 'Releases',
-  icon: 'i-heroicons-rocket-launch-solid',
-  to: 'https://github.com/nuxt/ui/releases',
-  target: '_blank'
-}]
 </script>

docs/pages/playground.vue

@@ -0,0 +1,24 @@
+<script setup>
+const title = 'Playground'
+const description = 'Play online with our interactive Nuxt Image playground.'
+
+useSeoMeta({
+  title,
+  ogTitle: 'Nuxt UI Playground',
+  description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title,
+  description
+})
+</script>
+
+<template>
+  <div class="h-[calc(100vh-var(--header-height))]">
+    <ClientOnly>
+      <iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${$colorMode.preference}`" width="100%" height="100%" />
+    </ClientOnly>
+  </div>
+</template>