merge main

Author: whitep4nth3r

.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config = {
   stories: ['../app/**/*.stories.@(js|ts)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
   framework: '@storybook-vue/nuxt',
   features: {
     backgrounds: false,

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook-vue/nuxt'
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
@@ -58,31 +59,22 @@ const preview: Preview = {
         ],
       },
     },
-    theme: {
-      name: 'Theme',
-      description: 'Color mode',
-      defaultValue: 'dark',
-      toolbar: {
-        icon: 'moon',
-        dynamicTitle: true,
-        items: [
-          { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' },
-        ],
-      },
-    },
   },
   decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        Light: 'light',
+        Dark: 'dark',
+      },
+      defaultTheme: 'Dark',
+      attributeName: 'data-theme',
+    }),
     (story, context) => {
-      const { locale, theme, accentColor } = context.globals as {
+      const { locale, accentColor } = context.globals as {
         locale: string
-        theme: string
         accentColor?: string
       }
 
-      // Set theme from globals
-      document.documentElement.setAttribute('data-theme', theme)
-
       // Set accent color from globals
       if (accentColor) {
         document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColor})`)

app/app.vue

@@ -47,10 +47,12 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
+const keyboardShortcuts = useKeyboardShortcuts()
+
 onKeyDown(
   '/',
   e => {
-    if (isEditableElement(e.target)) return
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) return
     e.preventDefault()
 
     const searchInput = document.querySelector<HTMLInputElement>(
@@ -70,7 +72,7 @@ onKeyDown(
 onKeyDown(
   '?',
   e => {
-    if (isEditableElement(e.target)) return
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) return
     e.preventDefault()
     showKbdHints.value = true
   },
@@ -80,7 +82,7 @@ onKeyDown(
 onKeyUp(
   '?',
   e => {
-    if (isEditableElement(e.target)) return
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) return
     e.preventDefault()
     showKbdHints.value = false
   },

app/assets/main.css

@@ -336,6 +336,11 @@ input[type='search']::-webkit-search-results-decoration {
   animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+/* Hide keyboard shortcut hints before hydration when user disabled them */
+:root[data-kbd-shortcuts='false'] [data-kbd-hint] {
+  display: none;
+}
+
 /* Locking the scroll whenever any of the modals are open */
 html:has(dialog:modal) {
   overflow: hidden;

app/components/AppFooter.vue

@@ -6,6 +6,7 @@ const isHome = computed(() => route.name === 'index')
 
 const modalRef = useTemplateRef('modalRef')
 const showModal = () => modalRef.value?.showModal?.()
+const closeModal = () => modalRef.value?.close?.()
 </script>
 
 <template>
@@ -84,7 +85,7 @@ const showModal = () => modalRef.value?.showModal?.()
             <p class="mb-2 font-mono text-fg-subtle">
               {{ $t('shortcuts.section.package') }}
             </p>
-            <ul class="mb-6 flex flex-col gap-2">
+            <ul class="mb-8 flex flex-col gap-2">
               <li class="flex gap-2 items-center">
                 <kbd class="kbd">.</kbd>
                 <span>{{ $t('shortcuts.open_code_view') }}</span>
@@ -98,6 +99,19 @@ const showModal = () => modalRef.value?.showModal?.()
                 <span>{{ $t('shortcuts.compare_from_package') }}</span>
               </li>
             </ul>
+            <p class="text-fg-muted leading-relaxed">
+              <i18n-t keypath="shortcuts.disable_shortcuts" tag="span" scope="global">
+                <template #settings>
+                  <NuxtLink
+                    :to="{ name: 'settings' }"
+                    class="hover:text-fg underline decoration-fg-subtle/50 hover:decoration-fg"
+                    @click="closeModal"
+                  >
+                    {{ $t('settings.title') }}
+                  </NuxtLink>
+                </template>
+              </i18n-t>
+            </p>
           </Modal>
           <LinkBase :to="NPMX_DOCS_SITE">
             {{ $t('footer.docs') }}

app/components/AppHeader.vue

@@ -4,6 +4,8 @@ import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
+const keyboardShortcuts = useKeyboardShortcuts()
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -133,7 +135,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
 
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
-const { env } = useAppConfig().buildInfo
+const { env, prNumber } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -183,7 +185,7 @@ function handleSearchFocus() {
 
 onKeyStroke(
   e => {
-    if (isEditableElement(e.target)) {
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) {
       return
     }
 
@@ -233,6 +235,15 @@ onKeyStroke(
             {{ env === 'release' ? 'alpha' : env }}
           </span>
         </NuxtLink>
+        <NuxtLink
+          v-if="prNumber"
+          :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
+          :aria-label="`Open GitHub pull request ${prNumber}`"
+        >
+          <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium ms-2">
+            PR #{{ prNumber }}
+          </span>
+        </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->
       <span v-else class="hidden sm:block w-1" />

app/components/Button/Base.vue

@@ -26,6 +26,8 @@ const props = withDefaults(
 
 const el = useTemplateRef('el')
 
+const keyboardShortcutsEnabled = useKeyboardShortcuts()
+
 defineExpose({
   focus: () => el.value?.focus(),
   getBoundingClientRect: () => el.value?.getBoundingClientRect(),
@@ -56,12 +58,13 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="ariaKeyshortcuts"
+    :aria-keyshortcuts="keyboardShortcutsEnabled ? ariaKeyshortcuts : undefined"
   >
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
-      v-if="ariaKeyshortcuts"
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
+      data-kbd-hint
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >

app/components/Code/FileTree.vue

@@ -94,12 +94,7 @@ watch(
           block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
         >
-          <svg
-            class="size-[1em] me-1 shrink-0"
-            viewBox="0 0 16 16"
-            fill="currentColor"
-            aria-hidden="true"
-          >
+          <svg class="size-[1em] me-1 shrink-0" viewBox="0 0 16 16" aria-hidden="true">
             <use :href="`/file-tree-sprite.svg#${getFileIcon(node.name)}`" />
           </svg>
           <span class="truncate">{{ node.name }}</span>

app/components/CollapsibleSection.vue

@@ -4,6 +4,7 @@ import { LinkBase } from '#components'
 
 interface Props {
   title: string
+  subtitle?: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
@@ -81,7 +82,8 @@ useHead({
     <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
-        class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
+        class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
+        :class="subtitle ? 'items-start' : 'items-center'"
       >
         <button
           :id="buttonId"
@@ -101,9 +103,14 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`">
-          {{ title }}
-        </LinkBase>
+        <span>
+          <LinkBase :to="`#${id}`">
+            {{ title }}
+          </LinkBase>
+          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
+            subtitle
+          }}</span>
+        </span>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

app/components/Compare/PackageSelector.vue

@@ -301,7 +301,7 @@ onClickOutside(containerRef, () => {
               v-if="result.description"
               class="text-xs text-fg-muted truncate mt-0.5 w-full block"
             >
-              {{ decodeHtmlEntities(result.description) }}
+              {{ stripHtmlTags(decodeHtmlEntities(result.description)) }}
             </span>
           </ButtonBase>
         </div>