[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: use v-for to render items in CallToAction (#748)

Co-authored-by: Daniel Roe <daniel@roe.dev>

authored by

Wojciech Maj
Daniel Roe
and committed by
GitHub
3a46b10b dcbb0d69

+33 -56
+33 -56
app/components/CallToAction.vue
··· 1 1 <script setup lang="ts"> 2 - const socialLinks = { 3 - github: 'https://repo.npmx.dev', 4 - discord: 'https://chat.npmx.dev', 5 - bluesky: 'https://social.npmx.dev', 6 - } 2 + const socialLinks = computed(() => [ 3 + { 4 + id: 'github', 5 + href: 'https://repo.npmx.dev', 6 + icon: 'i-carbon:logo-github', 7 + titleKey: $t('about.get_involved.contribute.title'), 8 + descriptionKey: $t('about.get_involved.contribute.description'), 9 + ctaKey: $t('about.get_involved.contribute.cta'), 10 + }, 11 + { 12 + id: 'discord', 13 + href: 'https://chat.npmx.dev', 14 + icon: 'i-carbon:chat', 15 + titleKey: $t('about.get_involved.community.title'), 16 + descriptionKey: $t('about.get_involved.community.description'), 17 + ctaKey: $t('about.get_involved.community.cta'), 18 + }, 19 + { 20 + id: 'bluesky', 21 + href: 'https://social.npmx.dev', 22 + icon: 'i-simple-icons:bluesky', 23 + titleKey: $t('about.get_involved.follow.title'), 24 + descriptionKey: $t('about.get_involved.follow.description'), 25 + ctaKey: $t('about.get_involved.follow.cta'), 26 + }, 27 + ]) 7 28 </script> 8 29 9 30 <template> ··· 14 35 15 36 <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]"> 16 37 <a 17 - :href="socialLinks.github" 38 + v-for="link in socialLinks" 39 + :key="link.id" 40 + :href="link.href" 18 41 target="_blank" 19 42 rel="noopener noreferrer" 20 43 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" 21 44 > 22 45 <div class="flex gap-2"> 23 - <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" /> 46 + <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" /> 24 47 <span class="font-medium text-fg"> 25 - {{ $t('about.get_involved.contribute.title') }} 48 + {{ link.titleKey }} 26 49 </span> 27 50 </div> 28 51 <p class="text-sm text-fg-muted leading-relaxed"> 29 - {{ $t('about.get_involved.contribute.description') }} 52 + {{ link.descriptionKey }} 30 53 </p> 31 54 <span 32 55 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto" 33 56 > 34 - {{ $t('about.get_involved.contribute.cta') }} 35 - <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" /> 36 - </span> 37 - </a> 38 - 39 - <a 40 - :href="socialLinks.discord" 41 - target="_blank" 42 - rel="noopener noreferrer" 43 - 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" 44 - > 45 - <div class="flex gap-2"> 46 - <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" /> 47 - <span class="font-medium text-fg"> 48 - {{ $t('about.get_involved.community.title') }} 49 - </span> 50 - </div> 51 - <p class="text-sm text-fg-muted leading-relaxed"> 52 - {{ $t('about.get_involved.community.description') }} 53 - </p> 54 - <span 55 - class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto" 56 - > 57 - {{ $t('about.get_involved.community.cta') }} 58 - <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" /> 59 - </span> 60 - </a> 61 - 62 - <a 63 - :href="socialLinks.bluesky" 64 - target="_blank" 65 - rel="noopener noreferrer" 66 - 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" 67 - > 68 - <div class="flex gap-2"> 69 - <span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" /> 70 - <span class="font-medium text-fg"> 71 - {{ $t('about.get_involved.follow.title') }} 72 - </span> 73 - </div> 74 - <p class="text-sm text-fg-muted leading-relaxed"> 75 - {{ $t('about.get_involved.follow.description') }} 76 - </p> 77 - <span 78 - class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto" 79 - > 80 - {{ $t('about.get_involved.follow.cta') }} 57 + {{ link.ctaKey }} 81 58 <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" /> 82 59 </span> 83 60 </a>