feat: add light on page headers (#1650)

app.vue

@@ -45,6 +45,20 @@ watch(() => search.value?.commandPaletteRef?.query, debounce((query: string) =>
 
 // Provide
 provide('navigation', navigation)
+
+const route = useRoute()
+const heroBackgroundClass = computed(() => route.meta?.heroBackground || '')
+const { isLoading } = useLoadingIndicator()
+const appear = ref(false)
+const appeared = ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    appear.value = true
+    setTimeout(() => {
+      appeared.value = true
+    }, 1000)
+  }, 0)
+})
 </script>
 
 <template>
@@ -93,7 +107,15 @@ provide('navigation', navigation)
 
     <AppHeader :links="headerLinks" />
 
-    <UMain>
+    <UMain class="relative">
+      <HeroBackground
+        class="absolute w-full top-[1px] transition-all text-primary flex-shrink-0"
+        :class="[
+          isLoading ? 'animate-pulse' : (appear ? 'opacity-100' : 'opacity-0'),
+          appeared ? 'duration-[400ms]': 'duration-1000',
+          heroBackgroundClass
+        ]"
+      />
       <NuxtPage />
     </UMain>
 

components/HeroBackground.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="pointer-events-none">
+    <mask id="path-1-inside-1_414_5526" fill="white">
+      <path d="M0 0H1440V181H0V0Z" />
+    </mask>
+    <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" />
+    <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_414_5526"
+        x1="720"
+        y1="0"
+        x2="720"
+        y2="181"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="currentColor" />
+        <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_414_5526"
+        x1="0"
+        y1="90.5"
+        x2="1440"
+        y2="90.5"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="currentColor" stop-opacity="0" />
+        <stop offset="0.395" stop-color="currentColor" />
+        <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

components/home/HomeSectionFeatures.vue

@@ -11,7 +11,7 @@ defineProps<{
 
 <template>
   <UPageGrid class="xl:grid-cols-4">
-    <ULandingCard
+    <UPageCard
       v-for="(feature, index) in features"
       :key="index"
       v-bind="feature"

content/0.index.yml

@@ -67,12 +67,28 @@ sections:
     slot: code
     code: |
       ::code-group
+      ```vue [pages/index.vue]
+      <script setup>
+      // Pre-render the homepage at build time
+      defineRouteRules({
+        prerender: true
+      })
+      </script>
+
+      <template>
+        <div>
+          <h1>Homepage</h1>
+          <p>Pre-rendered at build time</p>
+        </div>
+      </template>
+      ```
       ```ts [nuxt.config.ts]
       export default defineNuxtConfig({
+        // Or specify the route rules globally
         routeRules: {
           // Homepage pre-rendered at build time
           '/': { prerender: true },
-          // Product page generated on-demand, revalidates in background
+          // Product page generated on-demand with background revalidation
           '/products/**': { swr: true },
           // Blog post generated on-demand once until next deploy
           '/blog/**': { isr: true },
@@ -85,21 +101,6 @@ sections:
         }
       })
       ```
-      ```vue [pages/index.vue]
-      <script setup>
-      // Or set at the page level
-      defineRouteRules({
-        prerender: true
-      })
-      </script>
-
-      <template>
-        <div>
-          <h1>Homepage</h1>
-          <p>Pre-rendered at build time</p>
-        </div>
-      </template>
-      ```
       ::
   - title: 'Compose with<br><span class="text-primary">everything you need.</span>'
     class: 'dark:bg-gradient-to-b from-gray-900 to-gray-950'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt.com",
   "version": "0.3.11",
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
@@ -17,23 +17,23 @@
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/octicon": "^1.2.0",
     "@iconify-json/ph": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.3",
     "@iconify-json/uil": "^1.2.0",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/fonts": "^0.7.2",
-    "@nuxt/image": "1.8.0",
-    "@nuxt/scripts": "^0.6.5",
-    "@nuxt/ui-pro": "^1.4.1",
-    "@nuxthq/studio": "^2.0.3",
+    "@nuxt/fonts": "^0.8.0",
+    "@nuxt/image": "^1.8.0",
+    "@nuxt/scripts": "^0.9.2",
+    "@nuxt/ui-pro": "^1.4.2",
+    "@nuxthq/studio": "^2.1.1",
     "@nuxtjs/html-validator": "^1.8.2",
     "@nuxtjs/plausible": "^1.0.2",
-    "@vueuse/core": "^11.0.3",
-    "@vueuse/components": "^11.0.3",
-    "@vueuse/nuxt": "^11.0.3",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/components": "^11.1.0",
+    "@vueuse/nuxt": "^11.1.0",
     "feed": "^4.2.2",
     "floating-vue": "^5.2.2",
-    "nuxt": "^3.13.0",
-    "nuxt-og-image": "^3.0.0-rc.66",
+    "nuxt": "^3.13.2",
+    "nuxt-og-image": "^3.0.2",
     "ofetch": "^1.3.4",
     "perfect-debounce": "^1.0.0",
     "scule": "^1.3.0",
@@ -42,25 +42,18 @@
     "ufo": "^1.5.4"
   },
   "devDependencies": {
-    "@nuxt/eslint": "^0.5.6",
-    "@nuxt/test-utils": "^3.14.1",
-    "@nuxtjs/turnstile": "^0.9.4",
+    "@nuxt/eslint": "^0.5.7",
+    "@nuxt/test-utils": "^3.14.2",
+    "@nuxtjs/turnstile": "^0.9.6",
     "@testing-library/vue": "^8.1.0",
     "capture-website": "^4.1.0",
     "eslint": "^9.10.0",
     "nuxt-build-cache": "^0.1.1",
     "nuxt-content-twoslash": "0.1.1",
-    "shiki": "^1.16.2",
+    "shiki": "^1.17.7",
     "twoslash": "^0.2.11",
-    "vitest": "^2.0.5",
-    "vue": "^3.4.38",
+    "vitest": "^2.1.1",
+    "vue": "^3.5.6",
     "vue-tsc": "^2.1.6"
-  },
-  "resolutions": {
-    "@nuxt/kit": "3.13.0",
-    "@nuxt/schema": "3.13.0",
-    "vue": "3.4.38",
-    "twoslash": "^0.2.11",
-    "twoslash-vue": "^0.2.11"
   }
 }

pages/blog/[slug].vue

@@ -2,6 +2,9 @@
 import { withoutTrailingSlash } from 'ufo'
 import type { BlogArticle } from '~/types'
 
+definePageMeta({
+  heroBackground: 'opacity-30 -z-10'
+})
 const route = useRoute()
 const { copy } = useCopyToClipboard()
 

pages/blog/index.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-70 -z-10'
+})
 const route = useRoute()
 const { fetchList, articles } = useBlog()
 

pages/deploy/[slug].vue

@@ -2,6 +2,9 @@
 import { withoutTrailingSlash } from 'ufo'
 import type { Hosting } from '~/types'
 
+definePageMeta({
+  heroBackground: 'opacity-30 -z-10'
+})
 const route = useRoute()
 const { slug } = route.params
 

pages/deploy/index.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { Hosting } from '../../types'
 
+definePageMeta({
+  heroBackground: 'opacity-70 -z-10'
+})
 const route = useRoute()
 const { fetchList, providers } = useHostingProviders()
 

pages/design-kit.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-70 -z-10'
+})
 const route = useRoute()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())

pages/docs.vue

@@ -4,6 +4,9 @@ import type { NavItem } from '@nuxt/content'
 const navigation = inject<Ref<NavItem[]>>('navigation')
 
 defineOgImageComponent('Docs')
+definePageMeta({
+  heroBackground: 'opacity-30 z-20'
+})
 
 const route = useRoute()
 const { navPageFromPath } = useContentHelpers()
@@ -20,7 +23,7 @@ const navigationLinks = computed(() => {
 
 <template>
   <UContainer>
-    <UPage>
+    <UPage class="z-30">
       <template #left>
         <UAside :links="links">
           <UDivider type="dashed" class="mb-6" />

pages/enterprise/agencies/[slug].vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { Agency } from '~/types'
 
+definePageMeta({
+  heroBackground: 'opacity-30 -z-10'
+})
 const route = useRoute()
 
 const { data: agency } = await useAsyncData(route.path, () => queryContent<Agency>(route.path).findOne())

pages/enterprise/agencies/index.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-80 -z-10'
+})
 const route = useRoute()
 const { filteredAgencies, fetchList, services, regions } = useEnterpriseAgencies()
 

pages/enterprise/jobs.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-80 -z-10'
+})
 const route = useRoute()
 const { fetchList, filteredJobs } = useEnterpriseJobs()
 

pages/enterprise/sponsors.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-80 -z-10'
+})
 const route = useRoute()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())

pages/enterprise/support.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-100 -z-10'
+})
 const carousel = ref()
 const carouselCard = ref()
 const intervalId = ref()

pages/index.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { joinURL } from 'ufo'
 
+definePageMeta({
+  heroBackground: 'z-10'
+})
 const uwuCookie = useCookie<boolean>('uwu-mode', {
   default: () => false
 })

pages/modules/[slug].vue

@@ -2,6 +2,9 @@
 import type { Module } from '~/types'
 import { ModuleProseA, ModuleProseImg } from '#components'
 
+definePageMeta({
+  heroBackground: 'opacity-30 -z-10'
+})
 const route = useRoute()
 
 const { data: module } = await useFetch<Module>(`https://api.nuxt.com/modules/${route.params.slug}`, {
@@ -66,21 +69,20 @@ defineOgImageComponent('Docs', {
 
 <template>
   <UContainer>
-    <UAlert
-      v-if="!module.compatibility?.nuxt?.includes('^3') && !module.compatibility?.nuxt?.includes('>=3')"
-      class="mt-4"
-      icon="i-ph-warning"
-      color="orange"
-      variant="subtle"
-      title="This module is not yet compatible with Nuxt 3"
-    >
-      <template #description>
-        Head over to <NuxtLink to="https://v2.nuxt.com" target="_blank" class="underline">
-          v2.nuxt.com
-        </NuxtLink>
-      </template>
-    </UAlert>
-
+    <div v-if="!module.compatibility?.nuxt?.includes('^3') && !module.compatibility?.nuxt?.includes('>=3')" class="pt-8">
+      <UAlert
+        icon="i-ph-warning"
+        color="orange"
+        variant="subtle"
+        title="This module is not yet compatible with Nuxt 3"
+      >
+        <template #description>
+          Head over to <NuxtLink to="https://v2.nuxt.com" target="_blank" class="underline">
+            v2.nuxt.com
+          </NuxtLink>
+        </template>
+      </UAlert>
+    </div>
     <UPageHeader :description="module.description" :ui="{ headline: 'mb-8' }">
       <template #headline>
         <UBreadcrumb :links="[{ label: 'Modules', to: '/modules', icon: 'i-ph-puzzle-piece' }, { to: { name: 'modules', query: { category: module.category } }, label: module.category }, { label: module.npm }]" />

pages/modules/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-70'
+})
+
 const inputRef = ref()
 
 const route = useRoute()
@@ -42,7 +46,7 @@ const { copy } = useCopyToClipboard()
 
 <template>
   <UContainer>
-    <UPageHero v-bind="page">
+    <UPageHero v-bind="page" class="z-30">
       <div class="lg:pl-10">
         <UPageGrid :ui="{ wrapper: 'grid-cols-2 sm:grid-cols-2 xl:grid-cols-2 gap-4' }">
           <UPageCard

pages/newsletter.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+definePageMeta({
+  heroBackground: 'opacity-80 -z-10'
+})
 const route = useRoute()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())