Merge branch 'main' into feat/hourly-npmx-picks

Author: serhalp

.github/workflows/chromatic.yml

@@ -17,14 +17,14 @@ jobs:
   chromatic:
     name: 📚 Chromatic
     runs-on: ubuntu-24.04-arm
-    if: ${{ github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == github.repository }}
 
     steps:
       - name: ☑️ Checkout
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
         with:
           fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.ref || github.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }}
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
       - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
@@ -38,10 +38,8 @@ jobs:
       - name: 📦 Install dependencies
         run: pnpm install
 
-      - name: 🧪 Run Chromatic Visual Tests
+      - name: 🧪 Run Chromatic Visual and Accessibility Tests
         uses: chromaui/action@a8ce9c58f59be5cc7090cadfc8f130fb08fcf0c3 # v15.1.0
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
         env:
           CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
           CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}

.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/logos/sponsors/index.ts

@@ -2,20 +2,24 @@ import LogoVercel from './vercel.svg'
 import LogoVercelLight from './vercel-light.svg'
 import LogoVoidZero from './void-zero.svg'
 import LogoVoidZeroLight from './void-zero-light.svg'
+import LogoVlt from './vlt.svg'
+import LogoVltLight from './vlt-light.svg'
 
 // The list is used on the about page. To add, simply upload the logos nearby and add an entry here. Prefer SVGs.
 // For logo src, specify a string or object with the light and dark theme variants.
 // Prefer original assets from partner sites to keep their brand identity.
 //
 // If there are no original assets and the logo is not universal, you can add only the dark theme variant
 // and specify 'auto' for the light one - this will grayscale the logo and invert it in light mode.
+// The normalisingIndent is the Y-axis space to visually stabilize favicon-only logos with logotypes that contain long name.
 export const SPONSORS = [
   {
     name: 'Vercel',
     logo: {
       dark: LogoVercel,
       light: LogoVercelLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://vercel.com/',
   },
   {
@@ -24,6 +28,16 @@ export const SPONSORS = [
       dark: LogoVoidZero,
       light: LogoVoidZeroLight,
     },
+    normalisingIndent: '0.875rem',
     url: 'https://voidzero.dev/',
   },
+  {
+    name: 'vlt',
+    logo: {
+      dark: LogoVlt,
+      light: LogoVltLight,
+    },
+    normalisingIndent: '0.25rem',
+    url: 'https://vlt.sh/',
+  },
 ]

app/assets/logos/sponsors/vlt-light.svg

@@ -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/assets/logos/sponsors/vlt.svg

@@ -11,30 +11,30 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="typeof src === 'string'">
-    <img :src="src" loading="lazy" height="36" class="w-auto block h-9" :alt="alt" />
+    <img :src="src" loading="lazy" height="36" class="w-auto block h-full" :alt="alt" />
   </div>
-  <div v-else-if="src.light === 'auto'">
+  <div v-else-if="src.light === 'auto'" class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:invert light:grayscale h-9"
+      class="w-auto block light:invert light:grayscale h-full"
       :alt="alt"
     />
   </div>
-  <div v-else>
+  <div v-else class="h-full">
     <img
       :src="src.dark"
       loading="lazy"
       height="36"
-      class="w-auto block light:hidden h-9"
+      class="w-auto block light:hidden h-full"
       :alt="alt"
     />
     <img
       :src="src.light"
       loading="lazy"
       height="36"
-      class="w-auto block hidden light:block h-9"
+      class="w-auto block hidden light:block h-full"
       :alt="alt"
     />
   </div>

app/assets/main.css

@@ -2,6 +2,7 @@
 type BaseItem = {
   name: string
   url: string
+  normalisingIndent?: string
   logo:
     | string
     | {
@@ -21,14 +22,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <ul class="flex items-center flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
+  <ul class="flex flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
     <li v-for="item in list" :key="item.name">
       <a
         v-if="'logo' in item"
         :href="item.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex items-center justify-center h-full min-w-11 rounded-md hover:bg-fg/10 transition-colors p-1"
+        class="relative flex items-center justify-center h-14 min-w-14 rounded-md hover:bg-fg/10 transition-colors p-1"
+        :style="{ paddingBlock: item.normalisingIndent }"
         :aria-label="item.name"
       >
         <AboutLogoImg :src="item.logo" :alt="item.name" />
@@ -53,7 +55,8 @@ const props = defineProps<{
               :href="groupItem.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="flex items-center justify-center h-full min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              class="relative flex items-center justify-center h-10 min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
+              :style="{ paddingBlock: groupItem.normalisingIndent }"
               :aria-label="groupItem.name"
             >
               <AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />