chore: update the playground styling to be easier to navigate (#3270)

Author: JosephAnson

playground/app.vue

@@ -1,10 +1,77 @@
 <script setup lang="ts">
+const items = ref([
+  {
+    label: 'Default',
+    icon: 'i-lucide-book-open',
+    to: '/',
+    children: [
+      {
+        label: 'Playground',
+        to: '/playground',
+      },
+      {
+        label: 'Query Playground',
+        to: '/query-playground',
+      },
+    ],
+  },
+  {
+    label: 'Vue',
+    icon: 'i-logos-vue',
+    to: '/vue',
+  },
+  {
+    label: 'Nuxt',
+    icon: 'i-logos-nuxt-icon',
+    to: '/nuxt/getting-started/introduction',
+  },
+  {
+    label: 'Hacker News',
+    icon: 'i-ion-logo-hackernews',
+    to: '/hackernews',
+  },
+  {
+    label: 'Content V2',
+    icon: 'i-lucide-folder-open',
+    to: '/content-v2',
+  },
+  {
+    label: 'Data',
+    icon: 'i-lucide-folder-open',
+    to: '/data',
+  },
+])
 </script>
 
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <UApp>
+    <UHeader title="Nuxt Content: Playground">
+      <UNavigationMenu
+        :items="items"
+        class="w-full justify-center"
+      />
+
+      <template #body>
+        <UNavigationMenu
+          :items="items"
+          orientation="vertical"
+          class="-mx-2.5"
+        />
+      </template>
+
+      <template #right>
+        <UColorModeButton />
+      </template>
+    </UHeader>
+
+    <UMain>
+      <UContainer>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </UContainer>
+    </UMain>
+  </UApp>
 </template>
 
 <style>

playground/components/ContentPage.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+interface TocLink {
+  id: string
+  depth: number
+  text: string
+  children?: TocLink[]
+}
+
+interface ContentData {
+  title?: string
+  description?: string
+  body?: {
+    toc?: {
+      links?: TocLink[]
+    }
+  }
+}
+
+interface Props {
+  data: ContentData | null
+  navigation?: ContentNavigationItem[] | null
+  surround?: ContentNavigationItem[] | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  navigation: () => [],
+  surround: undefined,
+})
+
+const bodyTocLinksWithDebug = computed(() => {
+  return [
+    ...props.data.body.toc.links,
+    {
+      id: 'debug-nuxt-content',
+      depth: 0,
+      text: '🐞 Debug',
+    },
+  ]
+})
+</script>
+
+<template>
+  <UPage v-if="data">
+    <template #left>
+      <UPageAside>
+        <UContentNavigation
+          v-if="navigation?.length"
+          :navigation="navigation"
+        />
+      </UPageAside>
+    </template>
+
+    <template #right>
+      <UContentToc
+        v-if="data?.body?.toc?.links"
+        :links="bodyTocLinksWithDebug"
+      />
+    </template>
+
+    <UPageHeader
+      :title="data.title"
+      :description="data.description"
+    />
+
+    <UPageBody>
+      <ContentRenderer
+        :value="data"
+      >
+        <template #empty>
+          <div>
+            <h1>No Content Available</h1>
+          </div>
+        </template>
+      </ContentRenderer>
+
+      <template v-if="surround">
+        <USeparator />
+        <UContentSurround :surround="surround" />
+      </template>
+
+      <UCard>
+        <template #header>
+          <h3
+            id="debug-nuxt-content"
+            class="text-lg font-semibold mb-2"
+          >
+            Debug
+          </h3>
+        </template>
+
+        <UTabs
+          variant="link"
+          :items="[
+            { label: 'Content', content: data as string },
+            { label: 'Surround', content: surround as unknown as string },
+            { label: 'Navigation', content: navigation as unknown as string },
+            { label: 'Content Toc', content: data?.body?.toc?.links as unknown as string },
+          ]"
+        >
+          <template #content="{ item }">
+            <ProsePre class="overflow-auto max-h-[300px] text-xs">
+              {{ item }}
+            </ProsePre>
+          </template>
+        </UTabs>
+      </UCard>
+    </UPageBody>
+  </UPage>
+</template>

playground/layouts/content-v2.vue

@@ -1,26 +1,5 @@
-<script setup lang="ts">
-const { data } = await useAsyncData('contents-list', () => queryCollectionNavigation('content'))
-const links = computed(() => {
-  return data.value?.map(item => ({
-    label: item.title,
-    to: item.page !== false ? item.path : undefined,
-    children: (item.children?.map(child => ({
-      label: child.title,
-      to: child.path,
-    })) ?? []),
-  }))
-})
-</script>
-
 <template>
-  <div class="flex">
-    <UNavigationMenu
-      class="w-[200px] flex-none p-2 sticky top-0 h-screen"
-      orientation="vertical"
-      :items="links"
-    />
-    <div class="flex-1 p-4 prose prose-invert">
-      <slot />
-    </div>
+  <div>
+    <slot />
   </div>
 </template>

playground/layouts/default.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
 
+const { data: navigation } = await useAsyncData('contents-list', () => queryCollectionNavigation('content'))
 const { data } = await useAsyncData('posts' + route.path, async () => {
   return await queryCollection('content').path(route.path).first()
 })
@@ -12,26 +13,12 @@ const { data: surround } = await useAsyncData('content-surround' + route.path, (
     fields: ['title', 'description'],
   })
 })
-
-definePageMeta({
-  layout: 'default',
-  layoutTransition: false,
-})
 </script>
 
 <template>
-  <div class="content-page">
-    <ContentRenderer
-      v-if="data"
-      :value="data"
-    >
-      <template #empty>
-        <div>
-          <h1>Nobody Exists</h1>
-        </div>
-      </template>
-    </ContentRenderer>
-    <h2>Surround</h2>
-    <pre>{{ surround }}</pre>
-  </div>
+  <ContentPage
+    :data="data"
+    :navigation="navigation"
+    :surround="surround"
+  />
 </template>