feat: add contributors + cta to about page

Author: danielroe

app/pages/about.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+interface GitHubContributor {
+  login: string
+  id: number
+  avatar_url: string
+  html_url: string
+  contributions: number
+}
+
 useSeoMeta({
   title: () => `${$t('about.title')} - npmx`,
   description: () => $t('about.meta_description'),
@@ -17,6 +25,19 @@ const pmLinks = {
   deno: 'https://deno.com/',
   vlt: 'https://www.vlt.sh/',
 }
+
+const socialLinks = {
+  github: 'https://repo.npmx.dev',
+  discord: 'https://chat.npmx.dev',
+  bluesky: 'https://social.npmx.dev',
+}
+
+const { data: contributors, status: contributorsStatus } = useFetch<GitHubContributor[]>(
+  '/api/contributors',
+  {
+    lazy: true,
+  },
+)
 </script>
 
 <template>
@@ -178,39 +199,118 @@ const pmLinks = {
 
         <div>
           <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
-            {{ $t('about.open_source.title') }}
+            {{ $t('about.contributors.title') }}
           </h2>
-          <p class="text-fg-muted leading-relaxed">
-            <i18n-t keypath="about.open_source.description" tag="span">
-              <template #github>
-                <a
-                  href="https://repo.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="link text-fg"
-                  >{{ $t('about.open_source.github') }}</a
-                >
-              </template>
-              <template #discord>
-                <a
-                  href="https://chat.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="link text-fg"
-                  >{{ $t('about.open_source.discord') }}</a
-                >
-              </template>
-              <template #bluesky>
-                <a
-                  href="https://social.npmx.dev"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="link text-fg"
-                  >{{ $t('about.open_source.bluesky') }}</a
-                >
-              </template>
-            </i18n-t>
+          <p class="text-fg-muted leading-relaxed mb-6">
+            {{ $t('about.contributors.description') }}
           </p>
+
+          <!-- Contributors cloud -->
+          <div v-if="contributorsStatus === 'pending'" class="text-fg-subtle text-sm">
+            {{ $t('about.contributors.loading') }}
+          </div>
+          <div v-else-if="contributorsStatus === 'error'" class="text-fg-subtle text-sm">
+            {{ $t('about.contributors.error') }}
+          </div>
+          <div v-else-if="contributors?.length" class="flex flex-wrap gap-2">
+            <a
+              v-for="contributor in contributors"
+              :key="contributor.id"
+              :href="contributor.html_url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group relative"
+              :title="$t('about.contributors.view_profile', { name: contributor.login })"
+            >
+              <img
+                :src="`${contributor.avatar_url}&s=64`"
+                :alt="contributor.login"
+                width="32"
+                height="32"
+                class="w-8 h-8 rounded-full ring-2 ring-transparent group-hover:ring-accent transition-all duration-200"
+                loading="lazy"
+              />
+            </a>
+          </div>
+        </div>
+
+        <!-- Get Involved CTAs -->
+        <div>
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-6">
+            {{ $t('about.get_involved.title') }}
+          </h2>
+
+          <div class="grid gap-4 sm:grid-cols-3">
+            <!-- Contribute CTA -->
+            <a
+              :href="socialLinks.github"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+            >
+              <div class="flex items-center gap-2">
+                <span class="i-carbon-logo-github w-5 h-5 text-fg" aria-hidden="true" />
+                <span class="font-medium text-fg">{{
+                  $t('about.get_involved.contribute.title')
+                }}</span>
+              </div>
+              <p class="text-sm text-fg-muted leading-relaxed">
+                {{ $t('about.get_involved.contribute.description') }}
+              </p>
+              <span
+                class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+              >
+                {{ $t('about.get_involved.contribute.cta') }}
+                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              </span>
+            </a>
+
+            <!-- Community CTA -->
+            <a
+              :href="socialLinks.discord"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+            >
+              <div class="flex items-center gap-2">
+                <span class="i-carbon-chat w-5 h-5 text-fg" aria-hidden="true" />
+                <span class="font-medium text-fg">{{
+                  $t('about.get_involved.community.title')
+                }}</span>
+              </div>
+              <p class="text-sm text-fg-muted leading-relaxed">
+                {{ $t('about.get_involved.community.description') }}
+              </p>
+              <span
+                class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+              >
+                {{ $t('about.get_involved.community.cta') }}
+                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              </span>
+            </a>
+
+            <!-- Follow CTA -->
+            <a
+              :href="socialLinks.bluesky"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+            >
+              <div class="flex items-center gap-2">
+                <span class="i-simple-icons-bluesky w-5 h-5 text-fg" aria-hidden="true" />
+                <span class="font-medium text-fg">{{ $t('about.get_involved.follow.title') }}</span>
+              </div>
+              <p class="text-sm text-fg-muted leading-relaxed">
+                {{ $t('about.get_involved.follow.description') }}
+              </p>
+              <span
+                class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+              >
+                {{ $t('about.get_involved.follow.cta') }}
+                <span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
+              </span>
+            </a>
+          </div>
         </div>
       </section>
 

i18n/locales/de.json

@@ -531,13 +531,6 @@
       "url_compatible_description": "Ersetze {npmjs} durch {npmx} in jeder URL und es sollte funktionieren und die gleichen Informationen mit besserer Erfahrung bieten.",
       "simplicity": "Einfachheit",
       "simplicity_description": "Kein Rauschen, überladene Anzeige oder verwirrende UI."
-    },
-    "open_source": {
-      "title": "Open Source",
-      "description": "npmx ist vollständig Open Source. Schau dir den {github} an, tritt dem {discord} bei oder folge uns auf {bluesky}.",
-      "github": "Quellcode auf GitHub",
-      "discord": "Community auf Discord",
-      "bluesky": "Bluesky"
     }
   },
   "header": {

i18n/locales/en.json

@@ -548,12 +548,30 @@
       "simplicity": "Simplicity",
       "simplicity_description": "No noise, cluttered display, or confusing UI."
     },
-    "open_source": {
-      "title": "Open source",
-      "description": "npmx is fully open source. Check out the {github}, join the {discord}, or follow us on {bluesky}.",
-      "github": "source code on GitHub",
-      "discord": "community on Discord",
-      "bluesky": "Bluesky"
+    "contributors": {
+      "title": "Contributors",
+      "description": "npmx is built by an amazing community of contributors.",
+      "loading": "Loading contributors...",
+      "error": "Failed to load contributors",
+      "view_profile": "View {name}'s GitHub profile"
+    },
+    "get_involved": {
+      "title": "Get involved",
+      "contribute": {
+        "title": "Contribute",
+        "description": "Help us build a better npm experience. Check out our GitHub repo to get started.",
+        "cta": "View on GitHub"
+      },
+      "community": {
+        "title": "Join the community",
+        "description": "Chat with other developers, ask questions, and share ideas on Discord.",
+        "cta": "Join Discord"
+      },
+      "follow": {
+        "title": "Stay updated",
+        "description": "Follow us on Bluesky for the latest news, updates, and tips.",
+        "cta": "Follow on Bluesky"
+      }
     }
   },
   "header": {

i18n/locales/fr.json

@@ -537,13 +537,6 @@
       "url_compatible_description": "Remplacez {npmjs} par {npmx} dans n'importe quelle URL et cela devrait fonctionner, fournissant les mêmes informations avec une meilleure expérience.",
       "simplicity": "Simplicité",
       "simplicity_description": "Pas de bruit, d'affichage encombré ou d'interface confuse."
-    },
-    "open_source": {
-      "title": "Open source",
-      "description": "npmx est entièrement open source. Consultez le {github}, rejoignez la {discord}, ou suivez-nous sur {bluesky}.",
-      "github": "code source sur GitHub",
-      "discord": "communauté sur Discord",
-      "bluesky": "Bluesky"
     }
   },
   "header": {

i18n/locales/it.json

@@ -547,13 +547,6 @@
       "url_compatible_description": "Sostituisci {npmjs} con {npmx} in qualsiasi URL e dovrebbe funzionare, fornendo le stesse informazioni con un'esperienza migliore.",
       "simplicity": "Semplicità",
       "simplicity_description": "Niente rumore, display disordinato o interfaccia confusa."
-    },
-    "open_source": {
-      "title": "Open source",
-      "description": "npmx è completamente open source. Dai un'occhiata al {github}, unisciti alla {discord}, o seguici su {bluesky}.",
-      "github": "codice sorgente su GitHub",
-      "discord": "community su Discord",
-      "bluesky": "Bluesky"
     }
   },
   "header": {

i18n/locales/zh-CN.json

@@ -547,13 +547,6 @@
       "url_compatible_description": "将任何 URL 中的 {npmjs} 替换为 {npmx}，它应该可以工作，提供相同的信息和更好的体验。",
       "simplicity": "简洁",
       "simplicity_description": "没有噪音、杂乱的显示或令人困惑的界面。"
-    },
-    "open_source": {
-      "title": "开源",
-      "description": "npmx 完全开源。查看 {github}，加入 {discord}，或在 {bluesky} 上关注我们。",
-      "github": "GitHub 上的源代码",
-      "discord": "Discord 社区",
-      "bluesky": "Bluesky"
     }
   },
   "header": {

server/api/contributors.get.ts

@@ -0,0 +1,40 @@
+import type { H3Event } from 'h3'
+
+export interface GitHubContributor {
+  login: string
+  id: number
+  avatar_url: string
+  html_url: string
+  contributions: number
+}
+
+export default defineCachedEventHandler(
+  async (_event: H3Event): Promise<GitHubContributor[]> => {
+    const response = await fetch(
+      'https://api.github.com/repos/npmx-dev/npmx.dev/contributors?per_page=50',
+      {
+        headers: {
+          'Accept': 'application/vnd.github.v3+json',
+          'User-Agent': 'npmx.dev',
+        },
+      },
+    )
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status,
+        message: 'Failed to fetch contributors',
+      })
+    }
+
+    const contributors = (await response.json()) as GitHubContributor[]
+
+    // Filter out bots
+    return contributors.filter(c => !c.login.includes('[bot]'))
+  },
+  {
+    maxAge: 3600, // Cache for 1 hour
+    name: 'github-contributors',
+    getKey: () => 'contributors',
+  },
+)