[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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>