doc: home page improvements

Author: harlan-zw

docs/app.vue

@@ -11,6 +11,9 @@ const route = useRoute()
 provide('navigation', computed(() => {
   return route.path.startsWith('/docs') ? navigation.value?.[0]?.children : navigation.value?.[1]?.children || []
 }))
+provide('topGuides', computed(() => {
+  return navigation.value?.[0]?.children.find(nav => nav.title === 'Guides')?.children || []
+}))
 </script>
 
 <template>

docs/components/Footer.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import type { NavItem } from '@nuxt/content'
+import type { Ref } from 'vue'
 
+const topGuides = inject<Ref<NavItem[]>>('topGuides')
 </script>
 
 <template>
@@ -35,10 +38,9 @@
               </h3>
               <nav>
                 <ul class="grid grid-cols-2 gap-6">
-                  <li v-for="(module, key) in modules" :key="key">
-                    <NuxtLink :to="module.to">
-                      <Icon :name="module.icon" />
-                      {{ module.label }}
+                  <li v-for="(module, key) in topGuides" :key="key">
+                    <NuxtLink :to="module._path">
+                      {{ module.title }}
                     </NuxtLink>
                   </li>
                 </ul>

docs/content/docs/1.guides/3.page-events.md

@@ -1,5 +1,5 @@
 ---
-title: Analytics Page Events
+title: Script Event Page
 description: Learn how to send page events to your analytics provider.
 ---
 

docs/pages/index.vue

@@ -52,6 +52,42 @@ onMounted(() => {
     })
   })
 })
+
+interface JSConfettiApi {
+  // JSConfetti is a class
+  JSConfetti: {
+    new(): {
+      addConfetti: (options?: { emojis: string[] }) => void
+    }
+  }
+}
+declare global {
+  interface Window {
+    JSConfetti: { new (): JSConfettiApi }
+  }
+}
+
+const confettiEl = ref()
+const { $script } = useScript<JSConfettiApi>({
+  key: 'confetti',
+  src: 'https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js',
+}, {
+  trigger: useScriptTriggerElement({
+    trigger: 'visibility',
+    el: confettiEl,
+  }),
+  use() {
+    return { JSConfetti: window.JSConfetti }
+  },
+})
+onMounted(() => {
+  confettiEl.value && useEventListener(confettiEl.value, 'mouseenter', () => {
+    $script.then(({ JSConfetti }) => {
+      new JSConfetti().addConfetti({ emojis: ['🎉', '🎊'] })
+    })
+  })
+})
+
 const links = [
   {
     label: 'Get started',
@@ -392,6 +428,23 @@ const contributors = useRuntimeConfig().public.contributors
         </div>
       </div>
     </ULandingSection>
+    <ULandingSection :ui="{ wrapper: 'pt-0 py-6 sm:py-14' }">
+      <ULandingCTA
+        description="Learn all of the fundamentals of Nuxt Scripts in the fun interactive confetti tutorial."
+        card
+      >
+        <template #title>
+          Try out our JS Confetti Tutorial
+        </template>
+        <template #links>
+          <div ref="confettiEl">
+            <UButton size="xl" variant="solid" icon="i-ph-sparkle-duotone" color="primary" to="/docs/guides/confetti-tutorial">
+              Get started
+            </UButton>
+          </div>
+        </template>
+      </ULandingCTA>
+    </ULandingSection>
   </div>
 </template>