forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: navigate to package code view on "dot" key (#100)
authored by
Jens Rømer Hesselbjerg
and committed by
GitHub
5f2316ad
1f88d310
+27
-4
+4
-1
app/components/AppHeader.vue
+4
-1
app/components/AppHeader.vue
···
30
30
<NuxtLink
31
31
to="/search"
32
32
class="link-subtle font-mono text-sm inline-flex items-center gap-2"
33
+
aria-keyshortcuts="/"
33
34
>
34
35
search
35
36
<kbd
36
37
class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
37
-
>/</kbd
38
+
aria-hidden="true"
38
39
>
40
+
/
41
+
</kbd>
39
42
</NuxtLink>
40
43
</li>
41
44
<li v-if="showConnector" class="flex">
+23
-3
app/pages/[...package].vue
+23
-3
app/pages/[...package].vue
···
1
1
<script setup lang="ts">
2
-
import { joinURL } from 'ufo'
3
-
import type { PackumentVersion, NpmVersionDist, ReadmeResponse } from '#shared/types'
2
+
import type { NpmVersionDist, PackumentVersion, ReadmeResponse } from '#shared/types'
4
3
import type { JsrPackageInfo } from '#shared/types/jsr'
5
4
import { assertValidPackageName } from '#shared/utils/npm'
5
+
import { onKeyStroke } from '@vueuse/core'
6
+
import { joinURL } from 'ufo'
6
7
7
8
definePageMeta({
8
9
name: 'package',
···
10
11
})
11
12
12
13
const route = useRoute('package')
14
+
15
+
const router = useRouter()
13
16
14
17
// Parse package name and optional version from URL
15
18
// Patterns:
···
309
312
useSeoMeta({
310
313
title: () => (pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx'),
311
314
description: () => pkg.value?.description ?? '',
315
+
})
316
+
317
+
onKeyStroke('.', () => {
318
+
if (pkg.value && displayVersion.value) {
319
+
router.push({
320
+
name: 'code',
321
+
params: {
322
+
path: [pkg.value.name, 'v', displayVersion.value.version],
323
+
},
324
+
})
325
+
}
312
326
})
313
327
314
328
defineOgImageComponent('Package', {
···
656
670
params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
657
671
}"
658
672
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
673
+
aria-keyshortcuts="."
659
674
>
660
-
<span class="i-carbon-code w-4 h-4" aria-hidden="true" />
661
675
code
676
+
<kbd
677
+
class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
678
+
aria-hidden="true"
679
+
>
680
+
.
681
+
</kbd>
662
682
</NuxtLink>
663
683
</li>
664
684
</ul>