From c58f364002d6a7fddb828f31907818e7276f317b Mon Sep 17 00:00:00 2001
From: akadotsh <devakash256@gmail.com>
Date: Sun, 14 Jun 2026 23:21:12 +0530
Subject: [PATCH] feat: add keyboard shortcuts for package links (g/h/i/n)

---
 app/components/AppFooter.vue                 | 16 ++++++++++++++++
 app/components/Package/ExternalLinks.vue     | 18 +++++++++++++++---
 app/composables/useShortcuts.ts              | 15 ++++++++++++++-
 docs/content/2.guide/2.keyboard-shortcuts.md |  4 ++++
 i18n/locales/en.json                         |  6 +++++-
 i18n/schema.json                             | 12 ++++++++++++
 6 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 2ee2a47f19..d11f1a9885 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -252,6 +252,22 @@ const footerSections = computed<Array<{ label: string; links: FooterLink[] }>>((
           <kbd class="kbd">c</kbd>
           <span>{{ $t('shortcuts.compare_from_package') }}</span>
         </li>
+        <li class="flex gap-2 items-center">
+          <kbd class="kbd">g</kbd>
+          <span>{{ $t('shortcuts.open_repo') }}</span>
+        </li>
+        <li class="flex gap-2 items-center">
+          <kbd class="kbd">h</kbd>
+          <span>{{ $t('shortcuts.open_homepage') }}</span>
+        </li>
+        <li class="flex gap-2 items-center">
+          <kbd class="kbd">i</kbd>
+          <span>{{ $t('shortcuts.open_issues') }}</span>
+        </li>
+        <li class="flex gap-2 items-center">
+          <kbd class="kbd">n</kbd>
+          <span>{{ $t('shortcuts.open_npm') }}</span>
+        </li>
       </ul>
       <p class="text-fg-muted leading-relaxed">
         <i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
diff --git a/app/components/Package/ExternalLinks.vue b/app/components/Package/ExternalLinks.vue
index 9864c23365..5d00e0df76 100644
--- a/app/components/Package/ExternalLinks.vue
+++ b/app/components/Package/ExternalLinks.vue
@@ -52,6 +52,13 @@ const repositoryCommandLabel = computed(() => {
   return `${$t('package.links.repo')}${provider}: ${repoRef.value.owner}/${repoRef.value.repo}`
 })
 
+useShortcuts({
+  g: () => repositoryUrl.value,
+  h: () => homepageUrl.value,
+  i: () => displayVersion.value?.bugs?.url,
+  n: () => `https://www.npmjs.com/package/${props.pkg.name}`,
+})
+
 useCommandPaletteContextCommands(
   computed(() => {
     const commands: CommandPaletteContextCommandInput[] = []
@@ -154,7 +161,7 @@ useCommandPaletteContextCommands(
 <template>
   <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm">
     <li v-if="repositoryUrl">
-      <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
+      <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon" aria-keyshortcuts="g">
         <span v-if="repoRef">
           {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
         </span>
@@ -173,12 +180,16 @@ useCommandPaletteContextCommands(
     </li>
     <li class="basis-full sm:hidden" />
     <li v-if="homepageUrl">
-      <LinkBase :to="homepageUrl" classicon="i-lucide:link">
+      <LinkBase :to="homepageUrl" classicon="i-lucide:link" aria-keyshortcuts="h">
         {{ $t('package.links.homepage') }}
       </LinkBase>
     </li>
     <li v-if="displayVersion?.bugs?.url">
-      <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
+      <LinkBase
+        :to="displayVersion.bugs.url"
+        classicon="i-lucide:circle-alert"
+        aria-keyshortcuts="i"
+      >
         {{ $t('package.links.issues') }}
       </LinkBase>
     </li>
@@ -196,6 +207,7 @@ useCommandPaletteContextCommands(
         :to="`https://www.npmjs.com/package/${pkg.name}`"
         :title="$t('common.view_on.npm')"
         classicon="i-simple-icons:npm"
+        aria-keyshortcuts="n"
       >
         npm
       </LinkBase>
diff --git a/app/composables/useShortcuts.ts b/app/composables/useShortcuts.ts
index c1ac793265..255eb7017e 100644
--- a/app/composables/useShortcuts.ts
+++ b/app/composables/useShortcuts.ts
@@ -6,6 +6,12 @@ type ShortcutTargetFactory = () => ShortcutTarget
 
 const registry = new Map<string, ShortcutTargetFactory[]>()
 
+const IS_EXTERNAL_URL_RE = /^https?:\/\//
+
+function isExternalUrl(target: ShortcutTarget): target is string {
+  return typeof target === 'string' && IS_EXTERNAL_URL_RE.test(target)
+}
+
 export function initKeyShortcuts() {
   const keyboardShortcuts = useKeyboardShortcuts()
 
@@ -19,7 +25,14 @@ export function initKeyShortcuts() {
         const target = getTarget()
         if (!target) return
         e.preventDefault()
-        navigateTo(target)
+        if (isExternalUrl(target)) {
+          navigateTo(target, {
+            external: true,
+            open: { target: '_blank', windowFeatures: { noopener: true, noreferrer: true } },
+          })
+        } else {
+          navigateTo(target)
+        }
         return
       }
     },
diff --git a/docs/content/2.guide/2.keyboard-shortcuts.md b/docs/content/2.guide/2.keyboard-shortcuts.md
index 1c35a31660..7c895d86a0 100644
--- a/docs/content/2.guide/2.keyboard-shortcuts.md
+++ b/docs/content/2.guide/2.keyboard-shortcuts.md
@@ -53,3 +53,7 @@ These shortcuts work anywhere on the site. Press `/` from any page to quickly se
 | `-` | Open changelog   |
 | `t` | Open timeline    |
 | `s` | Open stats       |
+| `g` | Open repository  |
+| `h` | Open homepage    |
+| `i` | Open issues      |
+| `n` | Open npm page    |
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 01cb98d29c..9f45756498 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -47,7 +47,11 @@
     "open_main": "Open main information",
     "open_diff": "Open version differences",
     "open_timeline": "Open timeline",
-    "open_stats": "Open stats"
+    "open_stats": "Open stats",
+    "open_repo": "Open repository",
+    "open_homepage": "Open homepage",
+    "open_issues": "Open issues",
+    "open_npm": "Open npm page"
   },
   "search": {
     "label": "Search npm packages",
diff --git a/i18n/schema.json b/i18n/schema.json
index e6398e2e1f..69a24a1626 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -147,6 +147,18 @@
         },
         "open_stats": {
           "type": "string"
+        },
+        "open_repo": {
+          "type": "string"
+        },
+        "open_homepage": {
+          "type": "string"
+        },
+        "open_issues": {
+          "type": "string"
+        },
+        "open_npm": {
+          "type": "string"
         }
       },
       "additionalProperties": false