Navigate to package code view on "dot" key

Author: jhroemer

app/pages/[...package].vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { joinURL } from 'ufo'
-import type { PackumentVersion, NpmVersionDist, ReadmeResponse } from '#shared/types'
+import type { NpmVersionDist, PackumentVersion, ReadmeResponse } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
+import { onKeyStroke } from '@vueuse/core'
+import { joinURL } from 'ufo'
 
 definePageMeta({
   name: 'package',
@@ -11,6 +12,8 @@ definePageMeta({
 
 const route = useRoute('package')
 
+const router = useRouter()
+
 // Parse package name and optional version from URL
 // Patterns:
 //   /nuxt → packageName: "nuxt", requestedVersion: null
@@ -283,6 +286,12 @@ useSeoMeta({
   description: () => pkg.value?.description ?? '',
 })
 
+onKeyStroke('.', () => {
+  if (pkg.value && displayVersion.value) {
+    router.push(`/code/${pkg.value.name}/v/${displayVersion.value.version}`)
+  }
+})
+
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',
   version: () => displayVersion.value?.version ?? '',
@@ -592,6 +601,10 @@ defineOgImageComponent('Package', {
               >
                 <span class="i-carbon-code w-4 h-4" aria-hidden="true" />
                 code
+                <kbd
+                  class="hidden sm:inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded"
+                  >.</kbd
+                >
               </NuxtLink>
             </li>
           </ul>