doc: add contributors placeholder

nuxt · Jun 5, 2024 · 4752a41 · 4752a41
1 parent 0e02caf
commit 4752a41
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -1,4 +1,5 @@
 import { defineNuxtConfig } from 'nuxt/config'
+import { $fetch } from 'ofetch'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -11,6 +12,11 @@ export default defineNuxtConfig({
     // '@nuxthq/studio',
     '@nuxtjs/seo',
     '@nuxt/image',
+    async (_, nuxt) => {
+      // build time for caching
+      const { contributors } = await $fetch(`https://api.nuxt.com/modules/scripts`)
+      nuxt.options.runtimeConfig.public.contributors = contributors.map(m => m.id)
+    },
   ],
   future: {
     compatibilityVersion: 4,

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -160,6 +160,8 @@ function timesFaster(nuxt: number, iframe: number) {
   // should display as 2.5 for 2500%
   return (iframe / nuxt).toFixed(1)
 }
+
+const contributors = useRuntimeConfig().public.contributors
 </script>
 
 <template>
@@ -277,6 +279,36 @@ function timesFaster(nuxt: number, iframe: number) {
         </div>
       </div>
     </UContainer>
+    <ULandingSection :ui="{ wrapper: 'py-6 sm:py-12' }">
+      <div class="xl:flex items-center gap-12 mx-auto">
+        <div class="max-w-lg">
+          <h2 class="text-xl xl:text-4xl font-bold flex items-center gap-4 mb-4">
+            <UIcon name="i-ph-handshake-duotone" class="h-12 w-12 shrink-0 text-primary" />
+            <span>A collaboration in making the web faster</span>
+          </h2>
+          <p class="text-gray-500 dark:text-gray-400 mb-1">
+            Nuxt Scripts was designed and built by the Nuxt core team in collaboration with <a href="https://developer.chrome.com/docs/aurora/overview" target="_blank" class="underline">Google Aurora</a>.
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 mb-1">
+            It's being actively maintained by the Nuxt core team and amazing community contributors.
+          </p>
+        </div>
+        <div>
+          <div class="xl:flex justify-center items-center gap-3 mb-8">
+            <div class="font-light text-6xl mb-2">
+              <Icon name="carbon:user-favorite-alt" />
+              {{ contributors.length }}
+            </div>
+            <div class="text-sm opacity-80">
+              Contributors
+            </div>
+          </div>
+          <div class="mb-7 gap-2 mx-auto text-center grid grid-cols-4 sm:grid-cols-7">
+            <UAvatar v-for="(c, index) in contributors" :key="index" :alt="`GitHub User ${c}`" size="xl" height="45" width="45" loading="lazy" :src="`https://avatars.githubusercontent.com/u/${c}?s=80&v=4`" />
+          </div>
+        </div>
+      </div>
+    </ULandingSection>
   </div>
 </template>