davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2const props = defineProps<{
3 /** Provider ID (e.g., "github", "gitlab") */
4 provider?: string
5 /** Package name for linking to npmjs.com provenance page */
6 packageName?: string
7 /** Package version for linking */
8 version?: string
9 /** Whether to show as compact (icon only) or full (with text) */
10 compact?: boolean
11 /** Whether to render as a link (defaults to true when packageName and version are provided) */
12 linked?: boolean
13}>()
14
15const providerLabels: Record<string, string> = {
16 github: 'GitHub Actions',
17 gitlab: 'GitLab CI',
18}
19
20const title = computed(() =>
21 props.provider
22 ? $t('badges.provenance.verified_via', {
23 provider: providerLabels[props.provider] ?? props.provider,
24 })
25 : $t('badges.provenance.verified_title'),
26)
27</script>
28
29<template>
30 <a
31 v-if="packageName && version && linked !== false"
32 :href="`https://www.npmjs.com/package/${packageName}/v/${version}#provenance`"
33 target="_blank"
34 rel="noopener noreferrer"
35 class="inline-flex items-center justify-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
36 :title="title"
37 >
38 <span class="i-lucide:shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
39 <span v-if="!compact" class="sr-only sm:not-sr-only">{{
40 $t('badges.provenance.verified')
41 }}</span>
42 </a>
43 <span
44 v-else
45 class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted"
46 :title="title"
47 >
48 <span class="i-lucide:shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
49 <span v-if="!compact" class="sr-only sm:not-sr-only">{{
50 $t('badges.provenance.verified')
51 }}</span>
52 </span>
53</template>