forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add vanity number for user & org (#487)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
jyc.dev
autofix-ci[bot]
and committed by
GitHub
b0af236e
9aa343ac
+60
-24
+28
-12
app/pages/@[org].vue
+28
-12
app/pages/@[org].vue
···
97
97
98
98
const filteredCount = computed(() => sortedPackages.value.length)
99
99
100
+
// Total weekly downloads across displayed packages (updates with filter)
101
+
const totalWeeklyDownloads = computed(() =>
102
+
sortedPackages.value.reduce((sum, pkg) => sum + (pkg.downloads?.weekly ?? 0), 0),
103
+
)
104
+
100
105
// Reset state when org changes
101
106
watch(orgName, () => {
102
107
clearAllFilters()
···
156
161
</p>
157
162
</div>
158
163
159
-
<!-- Link to npmjs.com org page -->
160
-
<nav aria-label="External links" class="ms-auto">
161
-
<a
162
-
:href="`https://www.npmjs.com/org/${orgName}`"
163
-
target="_blank"
164
-
rel="noopener noreferrer"
165
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
166
-
:title="$t('common.view_on_npm')"
164
+
<!-- Link to npmjs.com org page + vanity downloads -->
165
+
<div class="ms-auto text-end">
166
+
<nav aria-label="External links">
167
+
<a
168
+
:href="`https://www.npmjs.com/org/${orgName}`"
169
+
target="_blank"
170
+
rel="noopener noreferrer"
171
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
172
+
:title="$t('common.view_on_npm')"
173
+
>
174
+
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
175
+
npm
176
+
</a>
177
+
</nav>
178
+
<p
179
+
class="text-fg-subtle text-xs mt-1 flex items-center gap-1.5 justify-end cursor-help"
180
+
:title="$t('common.vanity_downloads_hint', { count: filteredCount }, filteredCount)"
167
181
>
168
-
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
169
-
npm
170
-
</a>
171
-
</nav>
182
+
<span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
183
+
<span class="font-mono"
184
+
>{{ formatNumber(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
185
+
>
186
+
</p>
187
+
</div>
172
188
</div>
173
189
</header>
174
190
+28
-12
app/pages/~[username]/index.vue
+28
-12
app/pages/~[username]/index.vue
···
129
129
130
130
const filteredCount = computed(() => filteredAndSortedPackages.value.length)
131
131
132
+
// Total weekly downloads across displayed packages (updates with filter)
133
+
const totalWeeklyDownloads = computed(() =>
134
+
filteredAndSortedPackages.value.reduce((sum, pkg) => sum + (pkg.downloads?.weekly ?? 0), 0),
135
+
)
136
+
132
137
// Check if there are potentially more results
133
138
const hasMore = computed(() => {
134
139
if (!results.value) return false
···
191
196
</p>
192
197
</div>
193
198
194
-
<!-- Link to npmjs.com profile -->
195
-
<nav aria-label="External links" class="ms-auto">
196
-
<a
197
-
:href="`https://www.npmjs.com/~${username}`"
198
-
target="_blank"
199
-
rel="noopener noreferrer"
200
-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
201
-
:title="$t('common.view_on_npm')"
199
+
<!-- Link to npmjs.com profile + vanity downloads -->
200
+
<div class="ms-auto text-end">
201
+
<nav aria-label="External links">
202
+
<a
203
+
:href="`https://www.npmjs.com/~${username}`"
204
+
target="_blank"
205
+
rel="noopener noreferrer"
206
+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
207
+
:title="$t('common.view_on_npm')"
208
+
>
209
+
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
210
+
npm
211
+
</a>
212
+
</nav>
213
+
<p
214
+
class="text-fg-subtle text-xs mt-1 flex items-center gap-1.5 justify-end cursor-help"
215
+
:title="$t('common.vanity_downloads_hint', { count: filteredCount }, filteredCount)"
202
216
>
203
-
<span class="i-carbon:logo-npm w-4 h-4" aria-hidden="true" />
204
-
npm
205
-
</a>
206
-
</nav>
217
+
<span class="i-carbon:chart-line w-3.5 h-3.5" aria-hidden="true" />
218
+
<span class="font-mono"
219
+
>{{ formatNumber(totalWeeklyDownloads) }} {{ $t('common.per_week') }}</span
220
+
>
221
+
</p>
222
+
</div>
207
223
</div>
208
224
</header>
209
225
+1
i18n/locales/en.json
+1
i18n/locales/en.json
···
98
98
"go_back_home": "Go back home",
99
99
"view_on_npm": "view on npm",
100
100
"per_week": "/ week",
101
+
"vanity_downloads_hint": "Vanity number: no packages displayed | Vanity number: for the displayed package | Vanity number: Sum of {count} displayed packages",
101
102
"sort": {
102
103
"name": "name",
103
104
"role": "role",
+1
i18n/locales/fr-FR.json
+1
i18n/locales/fr-FR.json
···
95
95
"go_back_home": "Retour à l'accueil",
96
96
"view_on_npm": "voir sur npm",
97
97
"per_week": "/ semaine",
98
+
"vanity_downloads_hint": "Métrique de vanité : aucun paquet affiché | Métrique de vanité : pour le paquet affiché | Métrique de vanité : somme des {count} paquets affichés",
98
99
"sort": {
99
100
"name": "nom",
100
101
"role": "rôle",
+1
lunaria/files/en-US.json
+1
lunaria/files/en-US.json
···
98
98
"go_back_home": "Go back home",
99
99
"view_on_npm": "view on npm",
100
100
"per_week": "/ week",
101
+
"vanity_downloads_hint": "Vanity number: no packages displayed | Vanity number: for the displayed package | Vanity number: Sum of {count} displayed packages",
101
102
"sort": {
102
103
"name": "name",
103
104
"role": "role",
+1
lunaria/files/fr-FR.json
+1
lunaria/files/fr-FR.json
···
95
95
"go_back_home": "Retour à l'accueil",
96
96
"view_on_npm": "voir sur npm",
97
97
"per_week": "/ semaine",
98
+
"vanity_downloads_hint": "Métrique de vanité : aucun paquet affiché | Métrique de vanité : pour le paquet affiché | Métrique de vanité : somme des {count} paquets affichés",
98
99
"sort": {
99
100
"name": "nom",
100
101
"role": "rôle",