docs: add learn section and carbon ads

Author: harlan-zw

docs/components/Header.vue

@@ -14,6 +14,11 @@ const links = [
     to: '/scripts',
     icon: 'i-ph-floppy-disk-duotone',
   },
+  {
+    label: 'Learn',
+    to: '/learn',
+    icon: 'i-ph-floppy-disk-duotone',
+  },
 ]
 </script>
 

docs/components/ads/Ads.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="space-y-3">
+    <ScriptCarbonAds
+      :key="$route.path"
+      class="Carbon border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-white/5"
+      serve="CW7DP537"
+      placement="scriptsnuxtcom"
+    >
+      <AdsFallback />
+    </ScriptCarbonAds>
+  </div>
+</template>
+
+<style lang="postcss">
+.dark .Carbon {
+  min-height: 220px;
+  .carbon-text {
+    @apply text-gray-400;
+
+    &:hover {
+      @apply text-gray-200;
+    }
+  }
+}
+
+.light .Carbon {
+  .carbon-text {
+    @apply text-gray-600;
+
+    &:hover {
+      @apply text-gray-800;
+    }
+  }
+}
+
+.Carbon {
+  @apply p-3 flex flex-col max-w-full;
+
+  @screen sm {
+    @apply max-w-xs;
+  }
+
+  @screen lg {
+    @apply mt-0;
+  }
+
+  #carbonads span {
+    @apply flex flex-col justify-between;
+
+    .carbon-wrap {
+      @apply flex flex-col;
+
+      flex: 1;
+
+      @media (min-width: 320px) {
+        @apply flex-row;
+      }
+
+      @screen lg {
+        @apply flex-col;
+      }
+
+      .carbon-img {
+        @apply flex items-start justify-center mb-4;
+
+        @media (min-width: 320px) {
+          @apply mb-0;
+        }
+
+        @screen lg {
+          @apply mb-4;
+        }
+      }
+
+      .carbon-text {
+        @apply flex-1 text-sm w-full m-0 text-left block;
+
+        &:hover {
+          @apply no-underline;
+        }
+
+        @media (min-width: 320px) {
+          @apply ml-4;
+        }
+
+        @screen lg {
+          @apply ml-0;
+        }
+      }
+    }
+  }
+
+  img {
+    @apply w-full;
+  }
+
+  & .carbon-poweredby {
+    @apply ml-2 text-xs text-right text-gray-400 block pt-2;
+
+    &:hover {
+      @apply no-underline text-gray-500;
+    }
+  }
+}
+</style>

docs/components/ads/AdsFallback.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="nui-support-nuxt">
+    <div>
+      <p class="pt-2 m-0 font-bold sm:text-sm text-gray-900 dark:text-white">
+        Nuxt SEO needs you!
+      </p>
+      <p class="pb-2 m-0 leading-normal text-gray-600 dark:text-white sm:text-xs">
+        By allowing nuxtseo.com on your Ad-Blocker, you support our work and help us financially.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.nui-support-nuxt {
+  @apply py-2 px-4 rounded-md bg-gray-100 dark:bg-white dark:bg-opacity-10 flex flex-row w-full items-center mt-4;
+}
+
+@screen sm {
+  .nui-support-nuxt {
+    @apply flex-col w-40 mt-0;
+  }
+}
+</style>

docs/nuxt.config.ts

@@ -1,5 +1,6 @@
 import { defineNuxtConfig } from 'nuxt/config'
 import { $fetch } from 'ofetch'
+import { isDevelopment } from 'std-env'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -16,7 +17,14 @@ export default defineNuxtConfig({
     '@nuxt/image',
     async (_, nuxt) => {
       // build time for caching
-      const { contributors } = await $fetch(`https://api.nuxt.com/modules/scripts`)
+      const { contributors } = await $fetch(`https://api.nuxt.com/modules/scripts`).catch(() => {
+        if (isDevelopment) {
+          return {
+            contributors: [],
+          }
+        }
+        throw new Error('Failed to fetch contributors')
+      })
       nuxt.options.runtimeConfig.public.contributors = contributors.map(m => m.id)
     },
   ],

docs/pages/[...slug].vue

@@ -54,7 +54,7 @@ const links = computed(() => [toc?.bottom?.edit && {
         <template v-if="toc?.bottom" #bottom>
           <div class="hidden lg:block space-y-6" :class="{ '!mt-6': page.body?.toc?.links?.length }">
             <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
-
+            <Ads class="mb-5" />
             <UPageLinks :title="toc.bottom.title" :links="links" />
           </div>
         </template>

docs/pages/index.vue

@@ -424,6 +424,32 @@ const contributors = useRuntimeConfig().public.contributors
         </div>
       </div>
     </ULandingSection>
+
+    <ULandingSection :ui="{ wrapper: 'pt-0 py-6 sm:py-14' }">
+      <div class="text-center">
+        <UIcon name="i-ph-book-bookmark-duotone" class="h-[50px] w-[50px] text-primary" />
+        <h2 class="text-xl xl:text-4xl font-bold mb-12 text-center">
+          Watch the intro videos from the pros.
+        </h2>
+        <div class="lg:flex justify-between gap-10 items-center">
+          <ScriptYouTubePlayer video-id="sjMqUUvH9AE" class="rounded-xl overflow-hidden group">
+            <template #awaitingLoad>
+              <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[48px] w-[68px] group-hover:opacity-80 transition">
+                <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>
+          <ScriptYouTubePlayer video-id="jDQtxlRUf54" class="rounded-xl overflow-hidden group">
+            <template #awaitingLoad>
+              <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[48px] w-[68px] group-hover:opacity-80 transition">
+                <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>
+    </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."

docs/pages/learn.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: 'Learn Nuxt Scripts',
+  description: 'Follow along with the Nuxt Scripts intro videos for a fun and interactive way to learn how to use Nuxt Scripts.',
+})
+
+defineOgImageComponent('Home')
+</script>
+
+<template>
+  <div>
+    <ULandingSection :ui="{ wrapper: 'pt-0 py-6 sm:py-14' }">
+      <div class="text-center">
+        <UIcon name="i-ph-book-bookmark-duotone" class="h-[50px] w-[50px] text-primary"/>
+        <h2 class="text-xl xl:text-4xl font-bold mb-12 text-center">
+          Watch the intro videos from the pros.
+        </h2>
+        <div class="lg:flex justify-between gap-10 items-center">
+          <ScriptYouTubePlayer video-id="sjMqUUvH9AE" class="rounded-xl overflow-hidden group">
+            <template #awaitingLoad>
+            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[48px] w-[68px] group-hover:opacity-80 transition">
+              <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>
+          <ScriptYouTubePlayer video-id="jDQtxlRUf54" class="rounded-xl overflow-hidden group">
+            <template #awaitingLoad>
+            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[48px] w-[68px] group-hover:opacity-80 transition">
+              <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>
+    </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/getting-started/confetti-tutorial">
+              Get started
+            </UButton>
+          </div>
+        </template>
+      </ULandingCTA>
+    </ULandingSection>
+  </div>
+</template>