Merge branch 'main' into fix/issue-1323

Author: RYGRIT

.storybook/main.ts

@@ -8,6 +8,16 @@ const config = {
     backgrounds: false,
   },
   async viteFinal(config) {
+    config.plugins ??= []
+
+    config.plugins.push({
+      name: 'ignore-internals',
+      transform(_, id) {
+        if (id.includes('/app/pages/blog/') && id.endsWith('.md')) {
+          return 'export default {}'
+        }
+      },
+    })
     // Replace the built-in vue-docgen plugin with a fault-tolerant version.
     // vue-docgen-api can crash on components that import types from other
     // .vue files (it tries to parse the SFC with @babel/parser as plain TS).

CONTRIBUTING.md

@@ -179,10 +179,11 @@ shared/                 # Shared between app and server
 └── types/              # TypeScript type definitions
 
 cli/                    # Local connector CLI (separate workspace)
+
 test/                   # Vitest tests
 ├── unit/               # Unit tests (*.spec.ts)
-└── nuxt/               # Nuxt component tests
-tests/                  # Playwright E2E tests
+├── nuxt/               # Nuxt component tests
+└── e2e/                # Playwright E2E tests
 ```
 
 > [!TIP]
@@ -465,6 +466,7 @@ The following scripts help manage translation files. `en.json` is the reference
 | `pnpm i18n:check:fix [locale]` | Same as check, but adds missing keys to other locales with English placeholders.                                                                                                        |
 | `pnpm i18n:report`             | Audits translation keys against code usage in `.vue` and `.ts` files. Reports missing keys (used in code but not in locale), unused keys (in locale but not in code), and dynamic keys. |
 | `pnpm i18n:report:fix`         | Removes unused keys from `en.json` and all other locale files.                                                                                                                          |
+| `pnpm i18n:schema`             | Generates a JSON Schema from `en.json` at `i18n/schema.json`. Locale files reference this schema for IDE validation and autocompletion.                                                 |
 
 ### Adding a new locale
 

app/app.vue

@@ -129,6 +129,10 @@ if (import.meta.client) {
 
     <AppHeader :show-logo="!isHomepage" />
 
+    <NuxtRouteAnnouncer v-slot="{ message }">
+      {{ route.name === 'search' ? `${$t('search.title_packages')} - npmx` : message }}
+    </NuxtRouteAnnouncer>
+
     <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
       <NuxtPage />
     </div>

app/assets/logos/sponsors/index.ts

@@ -37,7 +37,7 @@ export const SPONSORS = [
       dark: LogoVlt,
       light: LogoVltLight,
     },
-    normalisingIndent: '0.25rem',
+    normalisingIndent: '0.875rem',
     url: 'https://vlt.sh/',
   },
 ]

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

@@ -25,6 +25,9 @@ const closeModal = () => modalRef.value?.close?.()
           <LinkBase :to="{ name: 'about' }">
             {{ $t('footer.about') }}
           </LinkBase>
+          <LinkBase :to="{ name: 'blog' }">
+            {{ $t('footer.blog') }}
+          </LinkBase>
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>

app/assets/logos/sponsors/vlt.svg

@@ -59,6 +59,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-lucide:info',
       },
+      {
+        name: 'Blog',
+        label: $t('footer.blog'),
+        to: { name: 'blog' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:notebook-pen',
+      },
       {
         name: 'Privacy Policy',
         label: $t('privacy_policy.title'),

app/components/AppFooter.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ResolvedAuthor } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  author: Partial<ResolvedAuthor> & Pick<ResolvedAuthor, 'name' | 'avatar'>
+  size?: 'sm' | 'md' | 'lg'
+}>()
+
+const sizeClasses = computed(() => {
+  switch (props.size ?? 'md') {
+    case 'sm':
+      return 'w-8 h-8 text-sm'
+    case 'lg':
+      return 'w-12 h-12 text-xl'
+    default:
+      return 'w-10 h-10 text-lg'
+  }
+})
+
+const initials = computed(() =>
+  props.author.name
+    .split(' ')
+    .map(n => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2),
+)
+</script>
+
+<template>
+  <div
+    class="shrink-0 flex items-center justify-center border border-border rounded-full bg-bg-muted overflow-hidden"
+    :class="[sizeClasses]"
+  >
+    <img
+      v-if="author.avatar"
+      :src="author.avatar"
+      :alt="author.name"
+      class="w-full h-full object-cover"
+    />
+    <span v-else class="text-fg-subtle font-mono" aria-hidden="true">
+      {{ initials }}
+    </span>
+  </div>
+</template>

app/components/AppHeader.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Author } from '#shared/schemas/blog'
+
+const props = defineProps<{
+  authors: Author[]
+  variant?: 'compact' | 'expanded'
+}>()
+
+const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
+</script>
+
+<template>
+  <!-- Expanded variant: vertical list with larger avatars -->
+  <div v-if="variant === 'expanded'" class="flex flex-wrap items-center gap-4">
+    <div v-for="author in resolvedAuthors" :key="author.name" class="flex items-center gap-2">
+      <AuthorAvatar :author="author" size="md" disable-link />
+      <div class="flex flex-col">
+        <span class="text-sm font-medium text-fg">{{ author.name }}</span>
+        <a
+          v-if="author.blueskyHandle && author.profileUrl"
+          :href="author.profileUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          :aria-label="$t('blog.author.view_profile', { name: author.name })"
+          class="text-xs text-fg-muted hover:text-primary transition-colors"
+        >
+          @{{ author.blueskyHandle }}
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <!-- Compact variant: no avatars -->
+  <div v-else class="flex items-center gap-2 min-w-0">
+    <div class="flex items-center">
+      <AuthorAvatar
+        v-for="(author, index) in resolvedAuthors"
+        :key="author.name"
+        :author="author"
+        size="md"
+        class="ring-2 ring-bg"
+        :class="index > 0 ? '-ms-3' : ''"
+      />
+    </div>
+    <span class="text-xs text-fg-muted font-mono truncate">
+      {{ resolvedAuthors.map(a => a.name).join(', ') }}
+    </span>
+  </div>
+</template>