From 5a8d0d000c682c514cb01985a1119b0b8bd98cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Wed, 30 Aug 2023 12:36:13 +0200
Subject: [PATCH] docs: improve performances (#570)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/app.vue                  | 47 +++++++++++++++++++++++++++++++----
 docs/components/Header.vue    |  1 -
 docs/nuxt.config.ts           | 18 ++++++++------
 src/runtime/plugins/colors.ts |  2 +-
 4 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/docs/app.vue b/docs/app.vue
index dffcddaf8..35fca93bd 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -3,11 +3,20 @@
   <div>
     <Header />
 
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-
-    <Footer />
+    <UMain>
+      <UContainer>
+        <UPage>
+          <template #left>
+            <UAside :links="anchors">
+              <BranchSelect />
+              <UNavigationTree :links="mapContentNavigation(navigation)" />
+            </UAside>
+          </template>
+
+          <NuxtPage />
+        </UPage>
+      </UContainer>
+    </UMain>
 
     <ClientOnly>
       <LazyUDocsSearch :files="files" :navigation="navigation" />
@@ -38,6 +47,22 @@ const { data: search } = useLazyFetch('/api/search.json', {
   server: false
 })
 
+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/nuxtlabs-ui?file=app.config.ts,app.vue',
+  target: '_blank'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch-solid',
+  to: 'https://github.com/nuxtlabs/ui/releases',
+  target: '_blank'
+}]
+
 // Computed
 const navigation = computed(() => {
   const navigation = nav.value.find(link => link._path === prefix.value)?.children || []
@@ -51,6 +76,18 @@ const files = computed(() => {
   return prefix.value === '/main' ? removePrefixFromFiles(files) : files
 })
 
+const navigation = computed(() => {
+  const navigation = nav.value.find(link => link._path === prefix.value)?.children || []
+
+  return prefix.value === '/main' ? removePrefixFromNavigation(navigation) : navigation
+})
+
+const files = computed(() => {
+  const files = search.value.filter(file => file._path.startsWith(prefix.value))
+
+  return prefix.value === '/main' ? removePrefixFromFiles(files) : files
+})
+
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 // Head
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index cfb45a8b2..c0f65efe5 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -28,7 +28,6 @@
 
     <template #panel>
       <BranchSelect />
-
       <UNavigationTree :links="mapContentNavigation(navigation)" />
     </template>
   </UHeader>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 8a1305737..867f36b6c 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -60,8 +60,9 @@ export default defineNuxtConfig({
   },
   nitro: {
     prerender: {
+      // Waiting for https://github.com/nuxt/nuxt/issues/22763
+      concurrency: 1,
       routes: [
-        '/',
         '/getting-started',
         '/dev/getting-started',
         '/api/search.json'
@@ -83,13 +84,14 @@ export default defineNuxtConfig({
     includeWorkspace: true
   },
   hooks: {
+    // TODO: Uncomment after Nuxt v3.7 upgrade
     // Related to https://github.com/nuxt/nuxt/pull/22558
-    'components:extend': (components) => {
-      components.forEach((component) => {
-        if (component.global) {
-          component.global = 'sync'
-        }
-      })
-    }
+    // 'components:extend': (components) => {
+    //   components.forEach((component) => {
+    //     if (component.global) {
+    //       component.global = 'sync'
+    //     }
+    //   })
+    // }
   }
 })
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index c38037153..0447a1668 100644
--- a/src/runtime/plugins/colors.ts
+++ b/src/runtime/plugins/colors.ts
@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 import { hexToRgb } from '../utils'
-import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
+import { defineNuxtPlugin, useAppConfig } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
 export default defineNuxtPlugin((nuxtApp) => {