docs: styling tweaks and performance optimizations (#3140)

docs/app.config.ts

@@ -1,4 +1,16 @@
 export default defineAppConfig({
+  default: {
+    ui: {
+      primary: 'green',
+      gray: 'slate'
+    }
+  },
+  v9: {
+    ui: {
+      primary: 'green',
+      gray: 'zinc'
+    }
+  },
   ui: {
     primary: 'green',
     gray: 'slate',

docs/components/OgImage/DocsV9.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  headline: {
+    type: String,
+    default: ''
+  }
+})
+const grayColor = 'rgb(24, 24, 27)'
+const greenColor = 'rgb(52, 211, 153)'
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-between bg-zinc-900 p-[72px]">
+    <div class="self-start">
+      <svg width="256" viewBox="0 0 508 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M65.6381 78H109.132C110.513 78.0002 111.87 77.6398 113.067 76.9552C114.263 76.2705 115.257 75.2857 115.947 74.0998C116.637 72.9139 117.001 71.5688 117 70.1996C116.999 68.8305 116.635 67.4856 115.944 66.3003L86.7343 16.1575C86.0439 14.9719 85.0508 13.9873 83.8547 13.3028C82.6586 12.6183 81.3017 12.2579 79.9205 12.2579C78.5393 12.2579 77.1825 12.6183 75.9864 13.3028C74.7903 13.9873 73.7971 14.9719 73.1067 16.1575L65.6381 28.9873L51.0356 3.89908C50.3446 2.71356 49.351 1.72914 48.1546 1.04472C46.9581 0.360308 45.6011 0 44.2196 0C42.8382 0 41.4811 0.360308 40.2847 1.04472C39.0883 1.72914 38.0947 2.71356 37.4037 3.89908L1.05644 66.3003C0.364965 67.4856 0.000601816 68.8305 7.44871e-07 70.1996C-0.000600326 71.5688 0.362582 72.9139 1.05302 74.0998C1.74346 75.2857 2.7368 76.2705 3.93315 76.9552C5.12949 77.6398 6.48665 78.0002 7.86812 78H35.1699C45.9872 78 53.9645 73.2907 59.4537 64.1032L72.7804 41.2289L79.9184 28.9873L101.341 65.7584H72.7804L65.6381 78ZM34.7248 65.7458L15.6717 65.7416L44.2324 16.7162L58.483 41.2289L48.9416 57.6127C45.2963 63.5739 41.155 65.7458 34.7248 65.7458Z"
+          fill="#00DC82"
+        />
+        <path
+          d="M192.722 19.8182V78H182.097L156.784 41.3807H156.358V78H144.057V19.8182H154.852L179.966 56.4091H180.477V19.8182H192.722ZM230.641 59.4205V34.3636H242.743V78H231.124V70.0739H230.669C229.684 72.6307 228.046 74.6856 225.754 76.2386C223.482 77.7917 220.707 78.5682 217.43 78.5682C214.514 78.5682 211.947 77.9053 209.732 76.5795C207.516 75.2538 205.783 73.3693 204.533 70.9261C203.302 68.483 202.677 65.5568 202.658 62.1477V34.3636H214.76V59.9886C214.779 62.5644 215.47 64.6004 216.834 66.0966C218.197 67.5928 220.025 68.3409 222.317 68.3409C223.775 68.3409 225.139 68.0095 226.408 67.3466C227.677 66.6648 228.699 65.661 229.476 64.3352C230.271 63.0095 230.66 61.3712 230.641 59.4205ZM262.537 34.3636L270.548 49.6193L278.759 34.3636H291.173L278.531 56.1818L291.514 78H279.156L270.548 62.9148L262.082 78H249.582L262.537 56.1818L250.037 34.3636H262.537ZM321.571 34.3636V43.4545H295.293V34.3636H321.571ZM301.259 23.9091H313.361V64.5909C313.361 65.7083 313.531 66.5795 313.872 67.2045C314.213 67.8106 314.687 68.2367 315.293 68.483C315.918 68.7292 316.637 68.8523 317.452 68.8523C318.02 68.8523 318.588 68.8049 319.156 68.7102C319.724 68.5966 320.16 68.5114 320.463 68.4545L322.366 77.4602C321.76 77.6496 320.908 77.8674 319.81 78.1136C318.711 78.3788 317.376 78.5398 315.804 78.5966C312.887 78.7102 310.33 78.322 308.134 77.4318C305.955 76.5417 304.26 75.1591 303.048 73.2841C301.836 71.4091 301.24 69.0417 301.259 66.1818V23.9091Z"
+          fill="#F2F2F2"
+        />
+        <path
+          d="M360.499 19.8182V78H348.197V19.8182H360.499ZM395.591 19.8182V78H383.29V31.4943H382.949L369.625 39.8466V28.9375L384.028 19.8182H395.591ZM431.124 78.7955C426.749 78.7955 422.857 78.0852 419.447 76.6648C416.057 75.2254 413.396 73.2652 411.464 70.7841C409.533 68.303 408.567 65.4905 408.567 62.3466C408.567 59.9223 409.116 57.697 410.214 55.6705C411.332 53.625 412.847 51.9299 414.76 50.5852C416.673 49.2216 418.813 48.3504 421.18 47.9716V47.5739C418.074 46.9489 415.555 45.4432 413.624 43.0568C411.692 40.6515 410.726 37.858 410.726 34.6761C410.726 31.6648 411.607 28.9848 413.368 26.6364C415.129 24.2689 417.544 22.4129 420.612 21.0682C423.699 19.7045 427.203 19.0227 431.124 19.0227C435.044 19.0227 438.538 19.7045 441.607 21.0682C444.694 22.4318 447.118 24.2973 448.879 26.6648C450.641 29.0133 451.531 31.6837 451.55 34.6761C451.531 37.8769 450.546 40.6705 448.595 43.0568C446.644 45.4432 444.144 46.9489 441.095 47.5739V47.9716C443.425 48.3504 445.536 49.2216 447.43 50.5852C449.343 51.9299 450.858 53.625 451.976 55.6705C453.112 57.697 453.69 59.9223 453.709 62.3466C453.69 65.4905 452.714 68.303 450.783 70.7841C448.851 73.2652 446.18 75.2254 442.771 76.6648C439.381 78.0852 435.499 78.7955 431.124 78.7955ZM431.124 69.7614C433.074 69.7614 434.779 69.411 436.237 68.7102C437.696 67.9905 438.832 67.0057 439.646 65.7557C440.48 64.4867 440.896 63.0284 440.896 61.3807C440.896 59.6951 440.47 58.2083 439.618 56.9205C438.766 55.6136 437.61 54.5909 436.152 53.8523C434.694 53.0947 433.018 52.7159 431.124 52.7159C429.249 52.7159 427.572 53.0947 426.095 53.8523C424.618 54.5909 423.453 55.6136 422.601 56.9205C421.768 58.2083 421.351 59.6951 421.351 61.3807C421.351 63.0284 421.758 64.4867 422.572 65.7557C423.387 67.0057 424.533 67.9905 426.01 68.7102C427.487 69.411 429.192 69.7614 431.124 69.7614ZM431.124 43.767C432.752 43.767 434.201 43.4356 435.47 42.7727C436.739 42.1098 437.733 41.1913 438.453 40.017C439.173 38.8428 439.533 37.4886 439.533 35.9545C439.533 34.4394 439.173 33.1136 438.453 31.9773C437.733 30.822 436.749 29.9223 435.499 29.2784C434.249 28.6155 432.79 28.2841 431.124 28.2841C429.476 28.2841 428.018 28.6155 426.749 29.2784C425.48 29.9223 424.485 30.822 423.766 31.9773C423.065 33.1136 422.714 34.4394 422.714 35.9545C422.714 37.4886 423.074 38.8428 423.794 40.017C424.514 41.1913 425.508 42.1098 426.777 42.7727C428.046 43.4356 429.495 43.767 431.124 43.767ZM474.526 52.7727V78H462.423V34.3636H473.957V42.0625H474.469C475.435 39.5246 477.054 37.517 479.327 36.0398C481.599 34.5436 484.355 33.7955 487.594 33.7955C490.624 33.7955 493.266 34.4583 495.52 35.7841C497.774 37.1098 499.526 39.0038 500.776 41.4659C502.026 43.9091 502.651 46.8258 502.651 50.2159V78H490.548V52.375C490.567 49.7045 489.885 47.6212 488.503 46.125C487.12 44.6098 485.217 43.8523 482.793 43.8523C481.164 43.8523 479.724 44.2027 478.474 44.9034C477.243 45.6042 476.277 46.6269 475.577 47.9716C474.895 49.2973 474.545 50.8977 474.526 52.7727Z"
+          fill="#00DC82"
+        />
+      </svg>
+    </div>
+
+    <div class="w-[800px] flex-1 flex-col justify-center gap-0">
+      <!-- <p v-if="headline" class="uppercase text-[24px] text-[rgb(52_211_153)] mb-4 font-semibold">
+        {{ headline }}
+      </p> -->
+      <h1 class="m-0 text-[64px] text-pretty font-semibold mb-2 text-white flex items-center">
+        <span>{{ title }}</span>
+      </h1>
+      <p v-if="description" class="text-[32px] text-pretty text-[#94a3b8] leading-normal">
+        {{ description.slice(0, 200) }}
+      </p>
+    </div>
+  </div>
+</template>

docs/components/VersionSelect.vue

@@ -19,13 +19,23 @@ const versions = [
   }
 ]
 
-const route = useRoute()
-const selectedVersion = computed(() =>
-  route.path.includes('/v9') ? versions[1] : route.path.includes('/v7') ? versions[2] : versions[0]
-)
+const router = useRouter()
+const selectedVersion = computed(() => {
+  const path = router.currentRoute.value.path
+
+  if (path.includes('/v9')) return versions[1]
+  if (path.includes('/v7')) return versions[2]
+
+  return versions[0]
+})
+
 function changeVersion(newVersion) {
   return navigateTo(newVersion.to)
 }
+
+watch(selectedVersion, val => {
+  changeVersion(val)
+})
 </script>
 
 <template>
@@ -43,7 +53,8 @@ function changeVersion(newVersion) {
       </template>
 
       <template #option="{ option: version }">
-        <div @click="changeVersion(version)" class="w-full">
+        <div class="absolute inset-0" @click="() => changeVersion(version)"></div>
+        <div class="w-full">
           {{ version.label }}
           <UBadge v-if="version.tag" variant="subtle" :label="version.tag" />
         </div>

docs/composables/usePageMeta.ts

@@ -4,11 +4,11 @@ type PageMeta = {
   headline: string
 }
 
-export default function () {
-  function setPageMeta(newPageMeta: PageMeta) {
-    const { title = '', description = '', headline = '' } = newPageMeta
+export default function usePageMeta() {
+  const route = useRoute()
+  function setPageMeta({ title = '', description = '', headline = '' }: PageMeta) {
     useSeoMeta({ title, ogTitle: title, description, ogDescription: description })
-    defineOgImage({ component: 'Docs', title, description, headline })
+    defineOgImageComponent(route.path.includes('/docs/v9') ? 'DocsV9' : 'Docs', { title, description, headline })
   }
 
   return { setPageMeta }

docs/layouts/docs.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-// @ts-expect-error This is because we're using Nuxt Content v2.8.2 instead of the new version which includes these types. We're using the old version because the latest has issues with highlighting
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { NavItem } from '@nuxt/content'
 
 // Get navigation tree relative to the '/content/docs'
 const navigation = inject<Ref<NavItem[]>>('navigation')
@@ -9,37 +8,40 @@ const allNavigationTree = computed(() =>
   mapContentNavigation(navPageFromPath('/docs', navigation.value)?.children || [])
 )
 
-// Detect if we're on the not v8 docs
-const route = useRoute()
-const isV7Docs = computed(() => route.path.includes('/docs/v7'))
-const isV9Docs = computed(() => route.path.includes('/docs/v9'))
+const router = useRouter()
+const appConfig = useAppConfig()
+
+const isV7Docs = computed(() => router.currentRoute.value.path.includes('/docs/v7'))
+const isV9Docs = computed(() => router.currentRoute.value.path.includes('/docs/v9'))
 
-// Redirect to getting-started, if we're on the `/docs/v9`
 watch(
-  () => route.path,
-  (newPath, _oldPath) => {
-    if (newPath.endsWith('/v9')) {
-      navigateTo('/docs/v9/getting-started')
-    }
+  () => router.currentRoute.value.path,
+  (val, _oldVal) => {
+    const versionTheme = isV9Docs.value ? 'v9' : 'default'
+
+    appConfig.ui.primary = appConfig[versionTheme].ui.primary
+    appConfig.ui.gray = appConfig[versionTheme].ui.gray
   },
   { immediate: true }
 )
 
-// Exclude the not v8 docs from the navigation tree if we're not on the not v8 docs, and vice versa
-const v7DocsNavItemIndex = computed(() => allNavigationTree.value.findIndex(el => el.to.toString().includes('/v7')))
-const v9DocsNavItemIndex = computed(() => allNavigationTree.value.findIndex(el => el.to.toString().includes('/v9')))
-
-const activeNavigationTree = computed(() =>
-  allNavigationTree.value.filter((_el, index) => {
-    if (isV7Docs.value) {
-      return index === v7DocsNavItemIndex.value
-    } else if (isV9Docs.value) {
-      return index === v9DocsNavItemIndex.value
-    } else {
-      return index !== v7DocsNavItemIndex.value && index !== v9DocsNavItemIndex.value
-    }
+const v7DocsRE = /^\/docs\/v7/
+const v9DocsRE = /^\/docs\/v9/
+
+const navigationV7 = computed(() => allNavigationTree.value.filter(x => v7DocsRE.test(String(x.to))))
+const navigationV9 = computed(() => allNavigationTree.value.filter(x => v9DocsRE.test(String(x.to))))
+const navigationV8 = computed(() =>
+  allNavigationTree.value.filter(x => {
+    const to = String(x.to)
+    return !v9DocsRE.test(to) && !v7DocsRE.test(to)
   })
 )
+
+const currentVersionNavigation = computed(() => {
+  if (isV7Docs.value) return navigationV7.value
+  if (isV9Docs.value) return navigationV9.value
+  return navigationV8.value
+})
 </script>
 
 <template>
@@ -49,7 +51,7 @@ const activeNavigationTree = computed(() =>
         <UAside>
           <VersionSelect />
           <UDivider type="dashed" class="mb-6" />
-          <UNavigationTree :links="mapContentNavigation(activeNavigationTree) || []" default-open :multiple="false" />
+          <UNavigationTree :links="currentVersionNavigation" default-open :multiple="false" />
         </UAside>
       </template>
 

docs/nuxt.config.ts

@@ -1,7 +1,22 @@
 export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
   modules: ['@nuxt/content', '@nuxt/ui', '@nuxtjs/fontaine', '@nuxtjs/google-fonts', 'nuxt-og-image'],
-  routeRules: { '/api/search.json': { prerender: true } },
+  routeRules: {
+    // v7
+    '/docs/v7/callbacks': { prerender: true, ssr: false },
+    '/docs/v7/callbacks/': { prerender: true, ssr: false },
+    '/docs/v7': { prerender: true, ssr: false },
+    '/docs/v7/': { prerender: true, ssr: false },
+
+    // default
+    '/': { prerender: true },
+    '/docs': { redirect: '/docs/getting-started' },
+    '/api/search.json': { prerender: true },
+
+    // v9
+    '/docs/v9': { redirect: '/docs/v9/getting-started' }
+  },
+
   vite: {
     $client: {
       build: {
@@ -14,18 +29,39 @@ export default defineNuxtConfig({
       }
     }
   },
+
   // SEO
   site: { url: 'https://i18n.nuxtjs.org' },
 
+  nitro: {
+    prerender: {
+      crawlLinks: true
+    }
+  },
+
   // Nuxt UI & UI Pro
   ui: { icons: ['heroicons', 'simple-icons'] },
-  uiPro: { license: 'oss' }, // special license for nuxt & nuxt-modules orgs
+
+  // special license for nuxt & nuxt-modules orgs
+  uiPro: { license: 'oss' },
+
   hooks: {
-    // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
     'components:extend': components => {
+      // Define `@nuxt/ui` components as global to use them in `.md` (feel free to add those you need)
       const globals = components.filter(c => ['UButton', 'UIcon'].includes(c.pascalName))
 
-      globals.forEach(c => (c.global = true))
+      for (const comp of globals) {
+        comp.global = true
+      }
+
+      // Related to https://github.com/nuxt/nuxt/pull/22558
+      // Adding all global components to the main entry
+      // To avoid lagging during page navigation on client-side
+      for (const comp of components) {
+        if (comp.global) {
+          comp.global = 'sync'
+        }
+      }
     }
   },
 
@@ -34,12 +70,14 @@ export default defineNuxtConfig({
 
   // Fonts
   fontMetrics: { fonts: ['DM Sans'] },
+
   googleFonts: {
     display: 'swap',
     download: true,
     families: { 'DM+Sans': [400, 500, 600, 700] }
   },
 
   devtools: { enabled: true },
-  typescript: { strict: false }
+  typescript: { strict: false },
+  compatibilityDate: '2024-09-26'
 })

docs/package.json

@@ -14,12 +14,14 @@
   "devDependencies": {
     "@iconify-json/heroicons": "^1.1.19",
     "@iconify-json/simple-icons": "^1.1.89",
-    "@nuxt/content": "^2.12.0",
-    "@nuxt/ui-pro": "^1.0.1",
-    "@nuxtjs/fontaine": "^0.4.1",
-    "@nuxtjs/google-fonts": "^3.1.3",
-    "nuxt": "^3.9.3",
-    "nuxt-og-image": "^2.2.4",
-    "vue-tsc": "^2.0.1"
+    "@nuxt/content": "^2.13.2",
+    "@nuxt/image": "^1.8.0",
+    "@nuxt/ui-pro": "^1.4.3",
+    "@nuxtjs/fontaine": "^0.4.3",
+    "@nuxtjs/google-fonts": "^3.2.0",
+    "nuxt": "^3.12.4",
+    "nuxt-hydration": "^0.6.4",
+    "nuxt-og-image": "^3.0.2",
+    "vue-tsc": "^2.1.6"
   }
 }