feat: navigate to package code view on "dot" key (#100)

Author: jhroemer

app/components/AppHeader.vue

@@ -30,12 +30,15 @@ withDefaults(
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
+            aria-keyshortcuts="/"
           >
             search
             <kbd
               class="hidden sm:inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
-              >/</kbd
+              aria-hidden="true"
             >
+              /
+            </kbd>
           </NuxtLink>
         </li>
         <li v-if="showConnector" class="flex">

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
@@ -311,6 +314,17 @@ useSeoMeta({
   description: () => pkg.value?.description ?? '',
 })
 
+onKeyStroke('.', () => {
+  if (pkg.value && displayVersion.value) {
+    router.push({
+      name: 'code',
+      params: {
+        path: [pkg.value.name, 'v', displayVersion.value.version],
+      },
+    })
+  }
+})
+
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',
   version: () => displayVersion.value?.version ?? '',
@@ -656,9 +670,15 @@ defineOgImageComponent('Package', {
                   params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
                 }"
                 class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+                aria-keyshortcuts="."
               >
-                <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"
+                  aria-hidden="true"
+                >
+                  .
+                </kbd>
               </NuxtLink>
             </li>
           </ul>