feat: sponsors nuxtjs page

nuxtjs.org/components/AlgoliaSearchBox.vue

@@ -150,7 +150,7 @@ export default {
   --docsearch-hit-color: var(--color-gray-700);
   --docsearch-muted-color: var(--color-gray-500);
   /* bg-gray-400 with 0.8 opacity */
-  --docsearch-container-background: rgb(244 244 245 / 55%); // gray-100
+  --docsearch-container-background: rgb(244 244 245 / 55%);
 }
 
 .DocSearch-Container {
@@ -197,7 +197,7 @@ export default {
   & .DocSearch {
     --docsearch-text-color: var(--color-gray-300);
     --docsearch-container-background: rgb(0 30 38 / 64%);
-    --docsearch-modal-background: #003543; // secondary-darker
+    --docsearch-modal-background: #003543;
     --docsearch-modal-shadow: inset 1px 1px 0 0 #052f14, 0 3px 8px 0 #0b160d;
     /* --docsearch-searchbox-background: var(--color-gray-800); */
     /* --docsearch-searchbox-focus-background: var(--color-gray-800); */

nuxtjs.org/components/SustainabilitySection.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="py-4 d-container-content">
+    <div class="flex flex-col light:text-secondary-dark dark:text-white pt-8 pb-24 space-y-4">
+      <h2 class="font-semibold text-display-6 text-center">
+        <Markdown slot="titleSection" unwrap="p" />
+      </h2>
+
+      <div class="text-lg w-full flex justify-center">
+        <p class="text-center md:w-2/3">
+          <Markdown slot="descriptionSection" unwrap="p" />
+        </p>
+      </div>
+    </div>
+
+    <div v-for="(sponsors, index) in sustainability" :key="index" class="flex flex-col items-center">
+      <h2 class="text-display-6 font-semibold">{{ sponsors.tier }}</h2>
+      <div class="flex flex-wrap justify-center -mx-8 pt-8 pb-24">
+        <ALink
+          v-for="logo in sponsors.logos"
+          :key="logo.title"
+          :href="logo.url"
+          :aria-label="logo.title"
+          class="mx-8 my-4"
+        >
+          <img :src="`/img/sponsors/${$colorMode.value}/${logo.img}.png`" :alt="logo.title" :class="logo.size" />
+        </ALink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useContext, ref, useFetch } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const { $docus } = useContext()
+    const sustainability = ref()
+    useFetch(async () => {
+      sustainability.value = await $docus.search('/sustainability', { deep: true }).sortBy('position', 'asc').fetch()
+      sustainability.value = sustainability.value.filter(sustainability => sustainability.tier)
+    })
+
+    return {
+      sustainability
+    }
+  }
+})
+</script>

nuxtjs.org/content/sponsors-nuxtjs.md

@@ -0,0 +1,20 @@
+---
+template: page
+layout:
+  fluid: true
+---
+::page-hero
+title: Sponsor NuxtJS Development
+description: "NuxtJS is an MIT licensed open source project and completely free to use.
+However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
+You can support NuxtJS development via the following methods:
+"
+---
+::
+
+::sustainability-section
+---titleSection
+Recurring pledges
+---descriptionSection
+Recurring pledges come with exclusive perks, e.g. having your name listed in the NuxtJS GitHub repository, or have your company logo placed on this website. Become a nuxter or sponsor via GitHub (goes into a fund with transparent expense models supporting community efforts and events).
+::

nuxtjs.org/content/sustainability/1.mvp-partners.md

@@ -0,0 +1,19 @@
+---
+tier: MVP - Partners
+logos:
+-
+  title: 'Netlify'
+  img: 'netlify'
+  url: 'https://www.netlify.com/'
+  size: 'h-12'
+-
+  title: 'Google Chrome'
+  img: 'google-chrome'
+  url: 'https://www.google.com/chrome/'
+  size: 'h-12'
+-
+  title: 'Vercel'
+  img: 'vercel'
+  url: 'https://vercel.com/'
+  size: 'h-10'
+---

nuxtjs.org/content/sustainability/2.partners.md

@@ -0,0 +1,29 @@
+---
+tier: 'Partners'
+logos:
+-
+  title: 'Swell'
+  url: 'https://swell.is/'
+  img: 'swell'
+  size: 'h-12'
+-
+  title: 'Strapi'
+  url: 'https://strapi.io/'
+  img: 'strapi'
+  size: 'h-12'
+-
+  title: 'Ship Shape'
+  url: 'https://shipshape.io/'
+  img: 'shipshape'
+  size: 'h-12'
+-
+  title: 'Layer0'
+  url: 'https://www.layer0.co/?ref=nuxt'
+  img: 'layer0'
+  size: 'h-12'
+-
+  title: 'Storyblok'
+  url: 'https://www.storyblok.com/?ref=nuxt'
+  img: 'storyblok'
+  size: 'h-12'
+---

nuxtjs.org/content/sustainability/3.sponsors.md

@@ -0,0 +1,44 @@
+---
+tier: 'Sponsors'
+logos:
+-
+  title: 'VueMastery'
+  img: 'vue-mastery'
+  url: 'https://www.vuemastery.com/'
+  size: 'h-10'
+-
+  title: 'Legal Nature'
+  img: 'legal-nature'
+  url: 'https://www.legalnature.com/'
+  size: 'h-10'
+-
+  title: 'Sparheld'
+  img: 'sparheld'
+  url: 'https://www.sparheld.de/'
+  size: 'h-8'
+-
+  title: 'Icons8'
+  img: 'icons8'
+  url: 'https://icons8.com/'
+  size: 'h-8'
+-
+  title: 'FireStickHow'
+  img: 'fire-stick-how'
+  url: 'https://www.firestickhow.com/'
+  size: 'h-8'
+-
+  title: 'MiniTool'
+  img: 'minitool'
+  url: 'https://www.minitool.com/'
+  size: 'h-8'
+-
+  title: 'VPS Server'
+  img: 'vps-server'
+  url: 'https://www.vpsserver.com/'
+  size: 'h-8'
+-
+  title: 'SendCloud'
+  img: 'sendcloud'
+  url: 'https://www.sendcloud.com/'
+  size: 'h-8'
+---