forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
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
+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>