Merge branch 'main' into feat/changelog-1

Author: WilcoSp

.github/workflows/ci.yml

@@ -154,7 +154,6 @@ jobs:
         run: pnpm build:test
         env:
           VALIDATE_HTML: true
-          NODE_OPTIONS: --max-old-space-size=6144
 
       - name: 🖥️ Test project (browser)
         run: pnpm test:browser:prebuilt
@@ -183,8 +182,6 @@ jobs:
 
       - name: 🏗️ Build project
         run: pnpm build:test
-        env:
-          NODE_OPTIONS: --max-old-space-size=6144
 
       - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode)
         run: pnpm test:a11y:prebuilt

.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

@@ -466,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

@@ -118,10 +118,6 @@ if (import.meta.client) {
     useEventListener(document, 'click', handleModalLightDismiss)
   }
 }
-
-// title and description will be inferred
-// this will be overridden by upstream pages that use different templates
-defineOgImage('Page.takumi')
 </script>
 
 <template>
@@ -133,6 +129,10 @@ defineOgImage('Page.takumi')
 
     <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>