docs: add sponsors and ads to sidebar (#420)

* ✨ (docs and exemple ) add collapsed and redirect navigation

* 🍱 (iconAlert) add icon alert

* 🔧 (windi.config.js) add purple color

* ✨ (Alert) add Alert component and new alert types

* 🐛 (Alert) fix classes and name

* ✨ (iconAlert) update svg

* ♻️ (installation) refacto w/ docus component

* ♻️ (routing) refacto w/ docus component

* ♻️ (directory-structure) refacto w/ docus compoenents

* ♻️ (commands) refacto w/ docus components

* ♻️ (docs/conclusion) refacto w/ docus components

* ♻️ (docs/upgrading) refacto w/ docus components

* ♻️ (docs/views) refacto w/ docus components

* ♻️ (docs - context-helpers) refacto w/ docus components

* ♻️ (server-side-rendering) update

* ♻️ (docs - static-site-generation) update

* ♻️ (docs - nuxt-lifecycle) refact w/ docus components

* ♻️ (docs) update links (remove /2.x)

* ♻️ (docs - features) update w/ docus components

* ♻️ (docs - directory-structure) refacto w/ docus components

* ♻️ (docs - configuration glossary) refacto w/ docus components

* docs: update icon and title

* ♻️ (docs - internals-glossary) refacto w/ docus components

* ✨ (docs) add redirect on first page section if last page section

* ♻️ (docs - components-glossary) refacto w/ docus components

* 🐛 (docs - components gloassry - $nuxt) fix description

* 🍱 (img) add github imgs for deployment section

* ♻️ (docs - deployment) refacto w/ docus components

* ♻️ (examples - routing) refacto w/ docus components

* docs: add sponsors and ads to sidebar

* ♻️ (examples - data-fetching) refacto w/ docus components

* ♻️ (examples - assets-management) refacto w/ docus components

* ♻️ (examples - transitions) refacto w/ docus components

* ♻️ (examples - seo) refacto w/ docus components

* ♻️ (examples - loading) refacto w/ docus components

* ♻️ (examples - miscellaneous) refacto w/ docus components

* ♻️ (examples - middlewares) refacto w/ docus components

* ✨ (examples - plugins) refacto w/ docus components

* ♻️ (examples - modules) refacto w/ docus components

* ♻️ (examples) replace code-sandbox w/ docus code-sandbox components

* ♻️ (static-site-generation) refacto base alert w/ docus components

* fix: Update svg asset path

* fix: use defineComponent for ads

* docs: use md and docus API to get partners

* fix: remove aside slider and improve home slider

Co-Authored-By: Clément Ollivier <[email protected]>

* chore: remove un-used components for partners

Co-Authored-By: Clément Ollivier <[email protected]>

* 🐛 (adsblock) margin adsblock

* 🐛 (dark) fix dark mode

Co-authored-by: Florent <[email protected]>
Co-authored-by: Yaël Guilloux <[email protected]>
Co-authored-by: Sébastien Chopin <[email protected]>

nuxtjs.org/components/AdsBlock.vue

@@ -0,0 +1,6 @@
+<template>
+  <article class="mt-4">
+    <AdsFallback v-if="$store.state.adBlocked" />
+    <AdsCarbon v-else :key="$route.params.slug" />
+  </article>
+</template>

nuxtjs.org/components/AdsCarbon.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="carbonads" class="Carbon" />
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  name: 'AdsCarbon',
+  mounted() {
+    if (this.$refs.carbonads) {
+      const script = document.createElement('script')
+      script.setAttribute('type', 'text/javascript')
+      script.setAttribute('src', '//cdn.carbonads.com/carbon.js?serve=CKYILK7U&placement=nuxtjsorg')
+      script.setAttribute('id', '_carbonads_js')
+      this.$refs.carbonads.appendChild(script)
+    }
+  }
+})
+</script>
+
+<style lang="postcss">
+.dark-mode .Carbon {
+  background-color: theme('colors.dark.surface');
+
+  .carbon-text {
+    color: theme('colors.dark.onSurfacePrimary');
+
+    &:hover {
+      color: theme('colors.dark.onSurfaceSecondary');
+    }
+  }
+}
+
+.light-mode .Carbon {
+  background-color: theme('colors.gray.200');
+
+  .carbon-text {
+    @apply text-gray-600;
+
+    &:hover {
+      @apply text-gray-800;
+    }
+  }
+}
+
+.Carbon {
+  @apply p-4 flex flex-col mt-4 max-w-full;
+
+  @screen sm {
+    @apply max-w-xs;
+  }
+
+  @screen lg {
+    @apply mt-0;
+    max-width: 160px;
+  }
+
+  #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 leading-relaxed;
+
+        &: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>

nuxtjs.org/components/AdsFallback.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="nui-support-nuxt">
+    <div class="pr-4 sm:pr-0">
+      <BlockedIcon alt="Support NuxtJS" width="125" height="125" class="block mr-4" />
+    </div>
+    <div>
+      <p class="m-0 font-bold sm:text-sm d-text-primary">NuxtJS needs you!</p>
+      <p class="p-0 m-0 leading-normal text-gray-600 sm:text-xs">
+        By whitelisting nuxtjs.org on your Ad-Blocker, you support our work and help us financially.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import BlockedIcon from '~/assets/img/blocked.svg?inline'
+
+export default {
+  components: {
+    BlockedIcon
+  }
+}
+</script>
+
+<style lang="postcss">
+.nui-support-nuxt {
+  @apply bg-gray-200 p-4 flex flex-row w-full items-center mt-4 rounded-md;
+}
+
+@screen sm {
+  .nui-support-nuxt {
+    @apply bg-white flex-col w-40 mt-0;
+  }
+}
+</style>

nuxtjs.org/components/HomeDiscoverPartners.vue

@@ -1,25 +1,18 @@
 <template>
   <section class="relative pt-20">
     <AContainer class="flex flex-col items-center">
-      <SectionContent class="col-span-12 items-center">
-        <template #category>
-          <CategoryLabel label="Discover" />
-        </template>
-
-        <template #title>
-          <SectionTitle class="text-center">Art in the <span class="text-primary italic">Making</span></SectionTitle>
-        </template>
-
-        <template #paragraph>
-          <SectionDescription class="text-center"
-            >Be part of the Nuxt.js community and help us Nuxtify the world.</SectionDescription
-          >
-        </template>
-
-        <template #banner>
-          <MPartnersBanner class="pb-0" :partners-logo="partners" />
-        </template>
-      </SectionContent>
+      <div class="flex flex-col w-full items-center col-span-12">
+        <div class="mb-2">
+          <CategoryLabel :label="category" />
+        </div>
+        <h2 class="font-normal font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
+          <Markdown slot="title" unwrap="p" />
+        </h2>
+        <p class="font-normal text-body-base md:text-body-lg 2xl:text-body-xl mb-8">
+          <Markdown slot="description" unwrap="p" />
+        </p>
+        <MPartnersBanner class="pb-0" :partners-logo="partners" />
+      </div>
     </AContainer>
     <img
       loading="lazy"
@@ -37,18 +30,27 @@
 </template>
 
 <script>
-import { defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
+import { Markdown } from '~docus/utils'
 
 export default defineComponent({
+  components: { Markdown },
+  props: {
+    category: {
+      type: String,
+      default: 'Category'
+    }
+  },
   setup() {
-    const partners = [
-      { component: 'IconMasteringNuxt', alt: 'Mastering Nuxt logo' },
-      { component: 'IconNetlify', alt: 'Netlify logo' },
-      { component: 'IconVercel', alt: 'Vercel logo' },
-      { component: 'IconVueMastery', alt: 'Vue Mastery logo' },
-      { component: 'IconVueSchool', alt: 'Vue School logo' }
-    ]
+    const { $docus } = useContext()
+    const partners = ref()
 
+    useFetch(async () => {
+      partners.value = await $docus
+        .search('/sponsors', { deep: true })
+        .where({ tier: { $in: ['MVP Partners', 'Partners'] } })
+        .fetch()
+    })
     return {
       partners
     }