diff --git a/app/app.vue b/app/app.vue
index 0a197e8d77..f2060ae3c0 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -10,6 +10,7 @@ const { locale, locales } = useI18n()
initPreferencesOnPrehydrate()
const isHomepage = computed(() => route.name === 'index')
+const showKbdHints = shallowRef(false)
const localeMap = locales.value.reduce(
(acc, l) => {
@@ -21,8 +22,9 @@ const localeMap = locales.value.reduce(
useHead({
htmlAttrs: {
- lang: () => locale.value,
- dir: () => localeMap[locale.value] ?? 'ltr',
+ 'lang': () => locale.value,
+ 'dir': () => localeMap[locale.value] ?? 'ltr',
+ 'data-kbd-hints': () => showKbdHints.value,
},
titleTemplate: titleChunk => {
return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
@@ -33,16 +35,16 @@ if (import.meta.server) {
setJsonLd(createWebSiteSchema())
}
-// Global keyboard shortcut: "/" focuses search or navigates to search page
+// Global keyboard shortcut:
+// "/" focuses search or navigates to search page
+// "?" highlights all keyboard shortcut elements
function handleGlobalKeydown(e: KeyboardEvent) {
const target = e.target as HTMLElement
const isEditableTarget =
target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
- if (isEditableTarget) {
- return
- }
+ if (isEditableTarget) return
if (e.key === '/') {
e.preventDefault()
@@ -59,10 +61,20 @@ function handleGlobalKeydown(e: KeyboardEvent) {
router.push('/search')
}
+
+ if (e.key === '?') {
+ e.preventDefault()
+ showKbdHints.value = true
+ }
+}
+
+function handleGlobalKeyup() {
+ showKbdHints.value = false
}
if (import.meta.client) {
useEventListener(document, 'keydown', handleGlobalKeydown)
+ useEventListener(document, 'keyup', handleGlobalKeyup)
}
@@ -82,3 +94,25 @@ if (import.meta.client) {
+
+