Merge branch 'main' of github.com:harlan-zw/fork-npmx.dev into feat/og-image-v6

Author: harlan-zw

.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

@@ -335,6 +335,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>
@@ -81,7 +82,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>
@@ -95,6 +96,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
@@ -125,7 +127,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()
@@ -175,7 +177,7 @@ function handleSearchFocus() {
 
 onKeyStroke(
   e => {
-    if (isEditableElement(e.target)) {
+    if (!keyboardShortcuts.value || isEditableElement(e.target)) {
       return
     }
 
@@ -225,6 +227,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/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>

app/components/Header/AuthModal.client.vue

@@ -3,6 +3,8 @@ import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
 import { isAtIdentifierString } from '@atproto/lex'
 
+const authModal = useModal('auth-modal')
+
 const handleInput = shallowRef('')
 const errorMessage = shallowRef('')
 const route = useRoute()
@@ -72,9 +74,22 @@ watch(user, async newUser => {
           </p>
         </div>
       </div>
-      <ButtonBase class="w-full" @click="logout">
-        {{ $t('auth.modal.disconnect') }}
-      </ButtonBase>
+
+      <div class="flex flex-col space-y-4">
+        <LinkBase
+          variant="button-secondary"
+          :to="{ name: 'profile-handle', params: { handle: user.handle } }"
+          prefetch-on="interaction"
+          class="w-full"
+          @click="authModal.close()"
+        >
+          {{ $t('auth.modal.profile') }}
+        </LinkBase>
+
+        <ButtonBase class="w-full" @click="logout">
+          {{ $t('auth.modal.disconnect') }}
+        </ButtonBase>
+      </div>
     </div>
 
     <!-- Disconnected state -->