Skip to content

feat: add keyboard shortcuts for package links (g/h/i/n) #2912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akadotsh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add keyboard shortcuts for package links (g/h/i/n) #2912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
18 changes: 15 additions & 3 deletions app/components/Package/ExternalLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = []
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
15 changes: 14 additions & 1 deletion app/composables/useShortcuts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand All @@ -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
}
},
Expand Down
4 changes: 4 additions & 0 deletions docs/content/2.guide/2.keyboard-shortcuts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
6 changes: 5 additions & 1 deletion i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 12 additions & 0 deletions i18n/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading