forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add keyboard shortcut highlight on "?" press (#440)
Co-authored-by: Nathan Knowler <nathan@knowler.dev>
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: jellydeck <91427591+jellydeck@users.noreply.github.com>
authored by
Jens Rømer Hesselbjerg
Nathan Knowler
Daniel Roe
jellydeck
and committed by
GitHub
9aa343ac
4af32718
+40
-6
+40
-6
app/app.vue
+40
-6
app/app.vue
···
10
10
initPreferencesOnPrehydrate()
11
11
12
12
const isHomepage = computed(() => route.name === 'index')
13
+
const showKbdHints = shallowRef(false)
13
14
14
15
const localeMap = locales.value.reduce(
15
16
(acc, l) => {
···
21
22
22
23
useHead({
23
24
htmlAttrs: {
24
-
lang: () => locale.value,
25
-
dir: () => localeMap[locale.value] ?? 'ltr',
25
+
'lang': () => locale.value,
26
+
'dir': () => localeMap[locale.value] ?? 'ltr',
27
+
'data-kbd-hints': () => showKbdHints.value,
26
28
},
27
29
titleTemplate: titleChunk => {
28
30
return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
···
33
35
setJsonLd(createWebSiteSchema())
34
36
}
35
37
36
-
// Global keyboard shortcut: "/" focuses search or navigates to search page
38
+
// Global keyboard shortcut:
39
+
// "/" focuses search or navigates to search page
40
+
// "?" highlights all keyboard shortcut elements
37
41
function handleGlobalKeydown(e: KeyboardEvent) {
38
42
const target = e.target as HTMLElement
39
43
40
44
const isEditableTarget =
41
45
target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
42
46
43
-
if (isEditableTarget) {
44
-
return
45
-
}
47
+
if (isEditableTarget) return
46
48
47
49
if (e.key === '/') {
48
50
e.preventDefault()
···
59
61
60
62
router.push('/search')
61
63
}
64
+
65
+
if (e.key === '?') {
66
+
e.preventDefault()
67
+
showKbdHints.value = true
68
+
}
69
+
}
70
+
71
+
function handleGlobalKeyup() {
72
+
showKbdHints.value = false
62
73
}
63
74
64
75
if (import.meta.client) {
65
76
useEventListener(document, 'keydown', handleGlobalKeydown)
77
+
useEventListener(document, 'keyup', handleGlobalKeyup)
66
78
}
67
79
</script>
68
80
···
82
94
<ScrollToTop />
83
95
</div>
84
96
</template>
97
+
98
+
<style>
99
+
/* Keyboard shortcut highlight on "?" key press */
100
+
kbd {
101
+
position: relative;
102
+
}
103
+
104
+
kbd::before {
105
+
content: '';
106
+
position: absolute;
107
+
inset: 0;
108
+
border-radius: inherit;
109
+
box-shadow: 0 0 4px 2px var(--accent);
110
+
opacity: 0;
111
+
transition: opacity 200ms ease-out;
112
+
pointer-events: none;
113
+
}
114
+
115
+
html[data-kbd-hints='true'] kbd::before {
116
+
opacity: 1;
117
+
}
118
+
</style>