Merge remote-tracking branch 'upstream/main'

# Conflicts:
#	composables/useNavigation.ts
#	content/0.index.yml
#	pages/index.vue

.github/workflows/e2e.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Audit URLs using Lighthouse
-        uses: treosh/lighthouse-ci-action@v11
+        uses: treosh/lighthouse-ci-action@v12
         with:
           urls: ${{ github.event.inputs.url || github.event.deployment.payload.web_url || github.event.deployment_status.target_url }}
           uploadArtifacts: true

app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ParsedContent } from '@nuxt/content'
 import './styles/twoslash.css'
 
 const search = ref(null)

components/AppHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { NavItem } from '@nuxt/content'
 import type { Link } from '#ui-pro/types'
 
 const logo = ref(null)
@@ -12,6 +12,7 @@ const { copy } = useCopyToClipboard()
 const version = computed(() => stats.value?.version?.match(/[0-9]+\.[0-9]+/)[0])
 
 const route = useRoute()
+const headerLinks = useNavigation().headerLinks
 const mobileNav = computed(() => {
   const links = mapContentNavigation(navigation.value)
 
@@ -20,7 +21,16 @@ const mobileNav = computed(() => {
   if (docsLink && !route.path.startsWith('/docs/bridge') && !route.path.startsWith('/docs/migration')) {
     docsLink.children = docsLink.children.filter(link => !['/docs/bridge', '/docs/migration'].includes(link.to as string))
   }
-  return links
+
+  return [
+    docsLink,
+    ...headerLinks.value.slice(1),
+    {
+      label: 'Design Kit',
+      icon: 'i-ph-palette-duotone',
+      to: '/design-kit'
+    }
+  ]
 })
 
 const open = ref(false)

components/content/enterprise/support/EnterpriseSupportClientCard.vue

@@ -21,6 +21,12 @@ defineProps({
     default: () => []
   }
 })
+
+type Achievement = {
+  title: string
+  // Work around a type mismatch where we have no access to BadgeColors from @nuxt/ui
+  color: any
+}
 </script>
 
 <template>
@@ -52,7 +58,7 @@ defineProps({
 
       <ul class="flex gap-x-1 flex-wrap gap-2">
         <li v-for="achievement in achievements" :key="achievement.title">
-          <UBadge v-bind="achievement" variant="subtle" />
+          <UBadge v-bind="achievement as Achievement" variant="subtle" />
         </li>
       </ul>
     </div>

components/content/scripts/YoutubeDemo.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const isLoaded = ref(false)
+const isPlaying = ref(false)
+const video = ref()
+
+function play() {
+  video.value.player.playVideo()
+}
+function stateChange(event) {
+  isPlaying.value = event.data === 1
+}
+</script>
+
+<template>
+  <div class="not-prose">
+    <div class="flex items-center justify-center p-5">
+      <ScriptYouTubePlayer
+        ref="video"
+        above-the-fold
+        video-id="d_IFKP1Ofq0"
+        class="group"
+        @ready="isLoaded = true"
+        @state-change="stateChange"
+      >
+        <template #awaitingLoad>
+          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[48px] w-[68px]">
+            <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00" /><path d="M 45,24 27,14 27,34" fill="#fff" /></svg>
+          </div>
+        </template>
+      </ScriptYouTubePlayer>
+    </div>
+    <div class="text-center">
+      <UAlert
+        v-if="!isLoaded"
+        class="mb-5"
+        size="sm"
+        color="blue"
+        variant="soft"
+        title="Click to load"
+        description="Clicking the video will load the YouTube iframe and start the video."
+      />
+      <UButton v-if="isLoaded && !isPlaying" @click="play">
+        Play Video
+      </UButton>
+    </div>
+  </div>
+</template>

composables/useNavigation.ts

@@ -43,6 +43,7 @@ const _useNavigation = () => {
     }, {
       label: 'Интеграции',
       to: '/modules',
+      icon: 'i-ph-plugs-connected-duotone',
       search: false,
       active: route.path.startsWith('/modules') || route.path.startsWith('/deploy'),
       children: [{
@@ -58,6 +59,7 @@ const _useNavigation = () => {
       }]
     }, {
       label: 'Ресурсы',
+      icon: 'i-ph-books-duotone',
       to: '/templates',
       search: false,
       active: route.path.startsWith('/templates') || route.path.startsWith('/video-courses'),
@@ -71,6 +73,11 @@ const _useNavigation = () => {
         description: 'Изучайте Nuxt с помощью видеокурсов.',
         icon: 'i-ph-graduation-cap-duotone',
         to: '/video-courses'
+      }, {
+        label: 'Витрина',
+        description: 'Discover and explore projects built with Nuxt.',
+        icon: 'i-ph-projector-screen-duotone',
+        to: '/showcase'
       }, {
         label: 'Сертификация Nuxt',
         description: 'Получите сертификат компетентности.',
@@ -79,28 +86,44 @@ const _useNavigation = () => {
         target: '_blank'
       }]
     }, {
-      label: 'Витрина',
-      icon: 'i-ph-projector-screen-duotone',
-      to: '/showcase'
+      label: 'Products',
+      icon: 'i-ph-sparkle-duotone',
+      search: false,
+      children: [{
+        label: 'Nuxt UI Pro',
+        to: 'https://ui.nuxt.com/pro?utm_source=nuxt-website&utm_medium=header',
+        description: 'Premium Vue components for Nuxt.',
+        icon: 'i-ph-layout-duotone'
+      }, {
+        label: 'Nuxt Studio',
+        to: 'https://nuxt.studio/?utm_source=nuxt-website&utm_medium=header',
+        description: 'The Git-based CMS for Nuxt.',
+        icon: 'i-ph-pen-duotone'
+      }, {
+        label: 'NuxtHub',
+        to: 'https://hub.nuxt.com/?utm_source=nuxt-website&utm_medium=header',
+        description: 'Build, deploy & manage Nuxt apps that scale.',
+        icon: 'i-ph-rocket-launch-duotone'
+      }]
     }, {
-      label: 'Enterprise',
+      label: 'Services',
       icon: 'i-ph-buildings-duotone',
       to: '/enterprise',
       search: false,
       children: [{
         label: 'Поддержка',
         to: '/enterprise/support',
-        description: 'Получите помощь по Nuxt.js непосредственно от команды, которая его создает.',
+        description: 'Professional support by Nuxt experts.',
         icon: 'i-ph-lifebuoy-duotone'
       }, {
         label: 'Агентства',
         to: '/enterprise/agencies',
-        description: 'Найдите агентство, которое специализируется на разработке Nuxt.js.',
+        description: 'Agencies specialized in Nuxt development.',
         icon: 'i-ph-handshake-duotone'
       }, {
         label: 'Спонсоры',
         to: '/enterprise/sponsors',
-        description: 'Станьте спонсором и получите ваш логотип на нашем README на GitHub со ссылкой на ваш сайт.',
+        description: 'Help us sustain Nuxt development.',
         icon: 'i-ph-hand-heart-duotone'
       }]
     }, {

content/0.index.yml

@@ -1,8 +1,8 @@
 navigation: false
 hero:
   cta:
-    label: Nuxt v3.12 вышел
-    to: /blog/v3-12
+    label: Nuxt v3.13 вышел
+    to: /blog/v3-13
     variant: outline
     icon: i-ph-arrow-right
     size: xs