davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2import type { ProvenanceDetails } from '#shared/types'
3
4defineProps<{
5 details: ProvenanceDetails
6}>()
7</script>
8
9<template>
10 <section id="provenance" aria-labelledby="provenance-heading" class="scroll-mt-20">
11 <h2 id="provenance-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
12 <LinkBase to="#provenance">
13 {{ $t('package.provenance_section.title') }}
14 </LinkBase>
15 </h2>
16
17 <div class="space-y-3 border border-border rounded-lg p-4 sm:p-5">
18 <div class="space-y-1">
19 <p class="flex items-start gap-2 text-sm text-fg m-0">
20 <span
21 class="i-lucide:shield-check w-4 h-4 shrink-0 text-emerald-500 mt-0.5"
22 aria-hidden="true"
23 />
24 <i18n-t keypath="package.provenance_section.built_and_signed_on" tag="span">
25 <template #provider>
26 <strong>{{ details.providerLabel }}</strong>
27 </template>
28 </i18n-t>
29 </p>
30
31 <a
32 v-if="details.buildSummaryUrl"
33 :href="details.buildSummaryUrl"
34 target="_blank"
35 rel="noopener noreferrer"
36 class="link text-sm text-fg-muted inline-flex"
37 >
38 {{ $t('package.provenance_section.view_build_summary') }}
39 </a>
40 </div>
41
42 <dl class="m-0 mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
43 <div v-if="details.sourceCommitUrl" class="min-w-0 flex flex-col gap-0.5">
44 <dt class="font-mono text-xs text-fg-muted m-0">
45 {{ $t('package.provenance_section.source_commit') }}
46 </dt>
47 <dd class="m-0 min-w-0">
48 <a
49 :href="details.sourceCommitUrl"
50 target="_blank"
51 rel="noopener noreferrer"
52 class="link font-mono text-sm block min-w-0 truncate"
53 :title="details.sourceCommitSha ?? details.sourceCommitUrl"
54 >
55 {{
56 details.sourceCommitSha
57 ? `${details.sourceCommitSha.slice(0, 12)}`
58 : details.sourceCommitUrl
59 }}
60 </a>
61 </dd>
62 </div>
63
64 <div v-if="details.buildFileUrl" class="min-w-0 flex flex-col gap-0.5">
65 <dt class="font-mono text-xs text-fg-muted m-0">
66 {{ $t('package.provenance_section.build_file') }}
67 </dt>
68 <dd class="m-0 min-w-0">
69 <a
70 :href="details.buildFileUrl"
71 target="_blank"
72 rel="noopener noreferrer"
73 class="link font-mono text-sm block min-w-0 break-words"
74 :title="details.buildFilePath ?? details.buildFileUrl"
75 >
76 {{ details.buildFilePath ?? details.buildFileUrl }}
77 </a>
78 </dd>
79 </div>
80
81 <div v-if="details.publicLedgerUrl" class="min-w-0 flex flex-col gap-0.5">
82 <dt class="font-mono text-xs text-fg-muted m-0">
83 {{ $t('package.provenance_section.public_ledger') }}
84 </dt>
85 <dd class="m-0 min-w-0">
86 <a
87 :href="details.publicLedgerUrl"
88 target="_blank"
89 rel="noopener noreferrer"
90 class="link text-sm inline-flex"
91 >
92 {{ $t('package.provenance_section.transparency_log_entry') }}
93 </a>
94 </dd>
95 </div>
96 </dl>
97 </div>
98 </section>
99</template>