feat: new og images

.github/workflows/ci.yml

@@ -145,6 +145,7 @@ 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
@@ -171,6 +172,8 @@ 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/preview.ts

@@ -15,7 +15,7 @@ globalThis['__NUXT_COLOR_MODE__'] ??= {
   removeColorScheme: fn(),
 }
 // @ts-expect-error - dynamic global name
-globalThis.defineOgImageComponent = fn()
+globalThis.defineOgImage = fn()
 
 const preview: Preview = {
   parameters: {

app/app.vue

@@ -125,6 +125,10 @@ 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', {}, { alt: 'npmx — a fast, modern browser for the npm registry' })
 </script>
 
 <template>

app/components/OgBrand.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    height?: number
+  }>(),
+  {
+    height: 60,
+  },
+)
+
+const width = computed(() => Math.round(props.height * (602 / 170)))
+</script>
+
+<template>
+  <img
+    src="/logo.svg"
+    alt="npmx"
+    :width="width"
+    :height="height"
+    :style="{ width: `${width}px`, height: `${height}px` }"
+  />
+</template>

app/components/OgImage/BlogPost.takumi.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { ResolvedAuthor } from '#shared/schemas/blog'
+
+const {
+  title,
+  authors = [],
+  date = '',
+} = defineProps<{
+  title: string
+  authors?: ResolvedAuthor[]
+  date?: string
+}>()
+
+const formattedDate = computed(() => {
+  if (!date) return ''
+  try {
+    return new Date(date).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  } catch {
+    return date
+  }
+})
+
+const MAX_VISIBLE_AUTHORS = 2
+
+const getInitials = (name: string) =>
+  name
+    .split(' ')
+    .map(n => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+
+const visibleAuthors = computed(() => {
+  if (authors.length <= 3) return authors
+  return authors.slice(0, MAX_VISIBLE_AUTHORS)
+})
+
+const extraCount = computed(() => {
+  if (authors.length <= 3) return 0
+  return authors.length - MAX_VISIBLE_AUTHORS
+})
+
+const formattedAuthorNames = computed(() => {
+  const allNames = authors.map(a => a.name)
+  if (allNames.length === 0) return ''
+  if (allNames.length === 1) return allNames[0]
+  if (allNames.length === 2) return `${allNames[0]} and ${allNames[1]}`
+  if (allNames.length === 3) return `${allNames[0]}, ${allNames[1]}, and ${allNames[2]}`
+  const shown = allNames.slice(0, MAX_VISIBLE_AUTHORS)
+  const remaining = allNames.length - MAX_VISIBLE_AUTHORS
+  return `${shown.join(', ')} and ${remaining} others`
+})
+</script>
+
+<template>
+  <OgLayout>
+    <div class="px-15 py-12 flex flex-col justify-center gap-5 h-full">
+      <OgBrand :height="48" />
+
+      <!-- Date + Title -->
+      <div class="flex flex-col gap-2">
+        <span v-if="formattedDate" class="text-3xl text-fg-muted">
+          {{ formattedDate }}
+        </span>
+
+        <div
+          class="lg:text-6xl text-5xl tracking-tighter font-mono leading-tight"
+          :style="{ lineClamp: 2, textOverflow: 'ellipsis' }"
+        >
+          {{ title }}
+        </div>
+      </div>
+
+      <!-- Authors -->
+      <div v-if="authors.length" class="flex items-center gap-4 flex-nowrap">
+        <!-- Stacked avatars -->
+        <span>
+          <span
+            v-for="(author, index) in visibleAuthors"
+            :key="author.name"
+            class="flex items-center justify-center rounded-full border border-bg bg-bg-muted overflow-hidden w-12 h-12"
+            :style="{ marginLeft: index > 0 ? '-20px' : '0' }"
+          >
+            <img
+              v-if="author.avatar"
+              :src="author.avatar"
+              :alt="author.name"
+              width="48"
+              height="48"
+              class="w-full h-full object-cover"
+            />
+            <span v-else class="text-5 text-fg-muted font-medium">
+              {{ getInitials(author.name) }}
+            </span>
+          </span>
+          <!-- +N badge -->
+          <span
+            v-if="extraCount > 0"
+            class="flex items-center justify-center text-lg font-medium text-fg-muted rounded-full border border-bg bg-bg-muted overflow-hidden w-12 h-12"
+            :style="{ marginLeft: '-20px' }"
+          >
+            +{{ extraCount }}
+          </span>
+        </span>
+        <!-- Names -->
+        <span class="text-6 text-fg-muted font-light">{{ formattedAuthorNames }}</span>
+      </div>
+    </div>
+  </OgLayout>
+</template>