davidwindham.com / npmx.dev
forked from npmx.dev/npmx.dev
[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: surface kb shortcuts (#1221)

Co-authored-by: Daniel Roe <daniel@roe.dev>

authored by

Salma Alam-Naylor
Daniel Roe and committed by
GitHub 55bf50ec de2f5e3a

+130 -3
+76
app/components/AppFooter.vue
··· 1 1 <script setup lang="ts"> 2 2 const route = useRoute() 3 3 const isHome = computed(() => route.name === 'index') 4 + 5 + const modalRef = useTemplateRef('modalRef') 6 + const showModal = () => modalRef.value?.showModal?.() 4 7 </script> 5 8 6 9 <template> ··· 33 36 <LinkBase to="https://chat.npmx.dev"> 34 37 {{ $t('footer.chat') }} 35 38 </LinkBase> 39 + 40 + <button 41 + type="button" 42 + class="group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200" 43 + @click.prevent="showModal" 44 + aria-haspopup="dialog" 45 + > 46 + {{ $t('footer.keyboard_shortcuts') }} 47 + </button> 48 + 49 + <Modal 50 + ref="modalRef" 51 + :modalTitle="$t('footer.keyboard_shortcuts')" 52 + class="w-auto max-w-lg" 53 + > 54 + <p class="mb-2 font-mono text-fg-subtle"> 55 + {{ $t('shortcuts.section.global') }} 56 + </p> 57 + <ul class="mb-6 flex flex-col gap-2"> 58 + <li class="flex gap-2 items-center"> 59 + <kbd class="kbd">/</kbd> 60 + <span>{{ $t('shortcuts.focus_search') }}</span> 61 + </li> 62 + <li class="flex gap-2 items-center"> 63 + <kbd class="kbd">?</kbd> 64 + <span>{{ $t('shortcuts.show_kbd_hints') }}</span> 65 + </li> 66 + <li class="flex gap-2 items-center"> 67 + <kbd class="kbd">,</kbd> 68 + <span>{{ $t('shortcuts.settings') }}</span> 69 + </li> 70 + <li class="flex gap-2 items-center"> 71 + <kbd class="kbd">c</kbd> 72 + <span>{{ $t('shortcuts.compare') }}</span> 73 + </li> 74 + </ul> 75 + <p class="mb-2 font-mono text-fg-subtle"> 76 + {{ $t('shortcuts.section.search') }} 77 + </p> 78 + <ul class="mb-6 flex flex-col gap-2"> 79 + <li class="flex gap-2 items-center"> 80 + <kbd class="kbd">↑</kbd>/<kbd class="kbd">↓</kbd> 81 + <span>{{ $t('shortcuts.navigate_results') }}</span> 82 + </li> 83 + <li class="flex gap-2 items-center"> 84 + <kbd class="kbd">Enter</kbd> 85 + <span>{{ $t('shortcuts.go_to_result') }}</span> 86 + </li> 87 + </ul> 88 + <p class="mb-2 font-mono text-fg-subtle"> 89 + {{ $t('shortcuts.section.package') }} 90 + </p> 91 + <ul class="mb-6 flex flex-col gap-2"> 92 + <li class="flex gap-2 items-center"> 93 + <kbd class="kbd">.</kbd> 94 + <span>{{ $t('shortcuts.open_code_view') }}</span> 95 + </li> 96 + <li class="flex gap-2 items-center"> 97 + <kbd class="kbd">d</kbd> 98 + <span>{{ $t('shortcuts.open_docs') }}</span> 99 + </li> 100 + <li class="flex gap-2 items-center"> 101 + <kbd class="kbd">c</kbd> 102 + <span>{{ $t('shortcuts.compare_from_package') }}</span> 103 + </li> 104 + </ul> 105 + </Modal> 36 106 </div> 37 107 </div> 38 108 <p class="text-xs text-fg-muted text-center sm:text-start m-0"> ··· 42 112 </div> 43 113 </footer> 44 114 </template> 115 + 116 + <style scoped> 117 + .kbd { 118 + @apply items-center justify-center text-sm text-fg bg-bg-muted border border-border rounded px-2; 119 + } 120 + </style>
+18 -1
i18n/locales/en.json
··· 15 15 "docs": "docs", 16 16 "source": "source", 17 17 "social": "social", 18 - "chat": "chat" 18 + "chat": "chat", 19 + "keyboard_shortcuts": "keyboard shortcuts" 20 + }, 21 + "shortcuts": { 22 + "section": { 23 + "global": "Global", 24 + "search": "Search", 25 + "package": "Package" 26 + }, 27 + "focus_search": "Focus search", 28 + "show_kbd_hints": "Highlight keyboard hints", 29 + "settings": "Open settings", 30 + "compare": "Open compare", 31 + "compare_from_package": "Open compare (prefilled with current package)", 32 + "navigate_results": "Navigate results", 33 + "go_to_result": "Go to result", 34 + "open_code_view": "Open code view", 35 + "open_docs": "Open docs" 19 36 }, 20 37 "search": { 21 38 "label": "Search npm packages",
+18 -1
lunaria/files/en-GB.json
··· 15 15 "docs": "docs", 16 16 "source": "source", 17 17 "social": "social", 18 - "chat": "chat" 18 + "chat": "chat", 19 + "keyboard_shortcuts": "keyboard shortcuts" 20 + }, 21 + "shortcuts": { 22 + "section": { 23 + "global": "Global", 24 + "search": "Search", 25 + "package": "Package" 26 + }, 27 + "focus_search": "Focus search", 28 + "show_kbd_hints": "Highlight keyboard hints", 29 + "settings": "Open settings", 30 + "compare": "Open compare", 31 + "compare_from_package": "Open compare (prefilled with current package)", 32 + "navigate_results": "Navigate results", 33 + "go_to_result": "Go to result", 34 + "open_code_view": "Open code view", 35 + "open_docs": "Open docs" 19 36 }, 20 37 "search": { 21 38 "label": "Search npm packages",
+18 -1
lunaria/files/en-US.json
··· 15 15 "docs": "docs", 16 16 "source": "source", 17 17 "social": "social", 18 - "chat": "chat" 18 + "chat": "chat", 19 + "keyboard_shortcuts": "keyboard shortcuts" 20 + }, 21 + "shortcuts": { 22 + "section": { 23 + "global": "Global", 24 + "search": "Search", 25 + "package": "Package" 26 + }, 27 + "focus_search": "Focus search", 28 + "show_kbd_hints": "Highlight keyboard hints", 29 + "settings": "Open settings", 30 + "compare": "Open compare", 31 + "compare_from_package": "Open compare (prefilled with current package)", 32 + "navigate_results": "Navigate results", 33 + "go_to_result": "Go to result", 34 + "open_code_view": "Open code view", 35 + "open_docs": "Open docs" 19 36 }, 20 37 "search": { 21 38 "label": "Search npm packages",