From ab26e4ba7d89321f20e1b8f55258d7092b91f4ed Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 12 Sep 2023 14:50:35 +0200
Subject: [PATCH] docs: embed playground

---
 docs/components/Footer.vue |  2 +-
 docs/components/Header.vue | 17 +++++------------
 docs/layouts/docs.vue      | 18 +-----------------
 docs/pages/playground.vue  | 24 ++++++++++++++++++++++++
 4 files changed, 31 insertions(+), 30 deletions(-)
 create mode 100644 docs/pages/playground.vue

diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
index 53f08d96..d721e781 100644
--- a/docs/components/Footer.vue
+++ b/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>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index 67022428..efb7d04e 100644
--- a/docs/components/Header.vue
+++ b/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',
diff --git a/docs/layouts/docs.vue b/docs/layouts/docs.vue
index a6ad94ad..6cab2b1c 100644
--- a/docs/layouts/docs.vue
+++ b/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>
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
new file mode 100644
index 00000000..63d2d29a
--- /dev/null
+++ b/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>