From 6f295d8925e2315026149458490386700bb7a3e7 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Mon, 2 Feb 2026 15:23:20 +0100
Subject: [PATCH 1/2] chore: use v-for to render items in CallToAction

Why use more code when less code do trick
---
 app/components/CallToAction.vue | 89 ++++++++++++---------------------
 1 file changed, 33 insertions(+), 56 deletions(-)

diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index f2d66005c..b1dc1eca5 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -1,9 +1,30 @@
 <script setup lang="ts">
-const socialLinks = {
-  github: 'https://repo.npmx.dev',
-  discord: 'https://chat.npmx.dev',
-  bluesky: 'https://social.npmx.dev',
-}
+const socialLinks = [
+  {
+    id: 'github',
+    href: 'https://repo.npmx.dev',
+    icon: 'i-carbon:logo-github',
+    titleKey: 'about.get_involved.contribute.title',
+    descriptionKey: 'about.get_involved.contribute.description',
+    ctaKey: 'about.get_involved.contribute.cta',
+  },
+  {
+    id: 'discord',
+    href: 'https://chat.npmx.dev',
+    icon: 'i-carbon:chat',
+    titleKey: 'about.get_involved.community.title',
+    descriptionKey: 'about.get_involved.community.description',
+    ctaKey: 'about.get_involved.community.cta',
+  },
+  {
+    id: 'bluesky',
+    href: 'https://social.npmx.dev',
+    icon: 'i-simple-icons:bluesky',
+    titleKey: 'about.get_involved.follow.title',
+    descriptionKey: 'about.get_involved.follow.description',
+    ctaKey: 'about.get_involved.follow.cta',
+  },
+]
 </script>
 
 <template>
@@ -14,70 +35,26 @@ const socialLinks = {
 
     <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
       <a
-        :href="socialLinks.github"
+        v-for="link in socialLinks"
+        :key="link.id"
+        :href="link.href"
         target="_blank"
         rel="noopener noreferrer"
         class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
       >
         <div class="flex gap-2">
-          <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+          <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
-            {{ $t('about.get_involved.contribute.title') }}
+            {{ $t(link.titleKey) }}
           </span>
         </div>
         <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t('about.get_involved.contribute.description') }}
+          {{ $t(link.descriptionKey) }}
         </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 rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
-
-      <a
-        :href="socialLinks.discord"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
-      >
-        <div class="flex gap-2">
-          <span class="i-carbon:chat shrink-0 mt-1 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 rtl-flip w-3 h-3" aria-hidden="true" />
-        </span>
-      </a>
-
-      <a
-        :href="socialLinks.bluesky"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="group grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3"
-      >
-        <div class="flex gap-2">
-          <span class="i-simple-icons:bluesky shrink-0 mt-1 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') }}
+          {{ $t(link.ctaKey) }}
           <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
         </span>
       </a>

From 7cd28f46e6dfe8f503f4639cc376c3b9641f5580 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 3 Feb 2026 09:38:24 +0000
Subject: [PATCH 2/2] refactor: move $t into computed

---
 app/components/CallToAction.vue | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
index b1dc1eca5..bbc5f29f8 100644
--- a/app/components/CallToAction.vue
+++ b/app/components/CallToAction.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
-const socialLinks = [
+const socialLinks = computed(() => [
   {
     id: 'github',
     href: 'https://repo.npmx.dev',
     icon: 'i-carbon:logo-github',
-    titleKey: 'about.get_involved.contribute.title',
-    descriptionKey: 'about.get_involved.contribute.description',
-    ctaKey: 'about.get_involved.contribute.cta',
+    titleKey: $t('about.get_involved.contribute.title'),
+    descriptionKey: $t('about.get_involved.contribute.description'),
+    ctaKey: $t('about.get_involved.contribute.cta'),
   },
   {
     id: 'discord',
     href: 'https://chat.npmx.dev',
     icon: 'i-carbon:chat',
-    titleKey: 'about.get_involved.community.title',
-    descriptionKey: 'about.get_involved.community.description',
-    ctaKey: 'about.get_involved.community.cta',
+    titleKey: $t('about.get_involved.community.title'),
+    descriptionKey: $t('about.get_involved.community.description'),
+    ctaKey: $t('about.get_involved.community.cta'),
   },
   {
     id: 'bluesky',
     href: 'https://social.npmx.dev',
     icon: 'i-simple-icons:bluesky',
-    titleKey: 'about.get_involved.follow.title',
-    descriptionKey: 'about.get_involved.follow.description',
-    ctaKey: 'about.get_involved.follow.cta',
+    titleKey: $t('about.get_involved.follow.title'),
+    descriptionKey: $t('about.get_involved.follow.description'),
+    ctaKey: $t('about.get_involved.follow.cta'),
   },
-]
+])
 </script>
 
 <template>
@@ -45,16 +45,16 @@ const socialLinks = [
         <div class="flex gap-2">
           <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
           <span class="font-medium text-fg">
-            {{ $t(link.titleKey) }}
+            {{ link.titleKey }}
           </span>
         </div>
         <p class="text-sm text-fg-muted leading-relaxed">
-          {{ $t(link.descriptionKey) }}
+          {{ link.descriptionKey }}
         </p>
         <span
           class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
         >
-          {{ $t(link.ctaKey) }}
+          {{ link.ctaKey }}
           <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
         </span>
       </a>