docs: add learn section and carbon ads

nuxt · Sep 3, 2024 · f4de446 · f4de446
1 parent 5953fa1
commit f4de446
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 2 deletions.
diff --git a/docs/components/Header.vue b/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>
 

diff --git a/docs/components/ads/Ads.vue b/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>
diff --git a/docs/components/ads/AdsFallback.vue b/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>
diff --git a/docs/nuxt.config.ts b/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)
  },
  ],

diff --git a/docs/pages/[...slug].vue b/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>

diff --git a/docs/pages/index.vue b/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."

diff --git a/docs/pages/learn.vue b/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>