davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2const socialLinks = computed(() => [
3 {
4 id: 'github',
5 href: 'https://repo.npmx.dev',
6 icon: 'i-simple-icons: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-lucide:message-circle',
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])
28</script>
29
30<template>
31 <div>
32 <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-6">
33 {{ $t('about.get_involved.title') }}
34 </h2>
35
36 <div class="grid gap-4 sm:grid-cols-3 sm:items-stretch sm:grid-rows-[auto,1fr,auto]">
37 <div
38 v-for="link in socialLinks"
39 :key="link.id"
40 class="group relative 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 focus-within:ring-2 focus-within:ring-accent/50"
41 >
42 <h3 class="z-1 flex gap-2">
43 <span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
44 <span class="font-medium text-fg">
45 {{ link.titleKey }}
46 </span>
47 </h3>
48 <p class="z-1 text-sm text-fg-muted leading-relaxed">
49 {{ link.descriptionKey }}
50 </p>
51 <a
52 :href="link.href"
53 target="_blank"
54 rel="noopener noreferrer"
55 class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto focus-visible:outline-none"
56 >
57 {{ link.ctaKey }}
58 <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
59 <span class="absolute z-0 inset-0" aria-hidden="true" />
60 </a>
61 </div>
62 </div>
63 </div>
64</template>