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) { + +