feat: add basic og images

Author: danielroe

app/components/OgImage/Default.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]"
+  >
+    <h1
+      class="text-6xl font-medium tracking-tight"
+      style="font-family: 'JetBrains Mono', monospace"
+    >
+      <span
+        class="text-[#666666]"
+        style="letter-spacing: -0.1em"
+      >./</span> npmx
+    </h1>
+    <h1 class="text-3xl font-medium tracking-tight">
+      a better npm package browser
+    </h1>
+
+    <p class="absolute bottom-12 text-lg text-[#404040]">
+      npmx.dev
+    </p>
+  </div>
+</template>

app/components/OgImage/Package.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  name: string
+  version: string
+  downloads?: string
+  license?: string
+}>(), {
+  downloads: '',
+  license: '',
+})
+</script>
+
+<template>
+  <div
+    class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]"
+    style="font-family: 'JetBrains Mono', monospace"
+  >
+    <h1 class="text-6xl font-medium tracking-tight">
+      {{ name }}
+    </h1>
+
+    <div class="flex items-center gap-6 mt-6 text-xl text-[#666666]">
+      <span>v{{ version }}</span>
+      <span v-if="downloads">{{ downloads }}/wk</span>
+      <span v-if="license">{{ license }}</span>
+    </div>
+
+    <p class="absolute bottom-12 text-lg text-[#404040]">
+      npmx.dev
+    </p>
+  </div>
+</template>

app/pages/index.vue

@@ -14,6 +14,8 @@ useSeoMeta({
   title: 'npmx - Better npm Package Browser',
   description: 'A fast, accessible npm package browser for power users. Search, browse, and manage npm packages with a modern interface.',
 })
+
+defineOgImageComponent('Default')
 </script>
 
 <template>

app/pages/package/[...name].vue

@@ -204,6 +204,13 @@ useSeoMeta({
   title: () => pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx',
   description: () => pkg.value?.description ?? '',
 })
+
+defineOgImageComponent('Package', {
+  name: () => pkg.value?.name ?? 'Package',
+  version: () => displayVersion.value?.version ?? '',
+  downloads: () => downloads.value ? formatNumber(downloads.value.downloads) : '',
+  license: () => pkg.value?.license ?? '',
+})
 </script>
 
 <template>

app/pages/search.vue

@@ -202,6 +202,11 @@ function formatDate(dateStr: string): string {
 useSeoMeta({
   title: () => query.value ? `Search: ${query.value} - npmx` : 'Search Packages - npmx',
 })
+
+defineOgImageComponent('Default', {
+  title: 'npmx',
+  description: () => query.value ? `Search results for "${query.value}"` : 'Search npm packages',
+})
 </script>
 
 <template>

nuxt.config.ts

@@ -77,10 +77,12 @@ export default defineNuxtConfig({
       {
         name: 'Inter',
         weights: ['400', '500', '600'],
+        global: true,
       },
       {
         name: 'JetBrains Mono',
         weights: ['400', '500'],
+        global: true,
       },
     ],
   },
@@ -89,6 +91,13 @@ export default defineNuxtConfig({
     failOnError: true,
   },
 
+  ogImage: {
+    defaults: {
+      component: 'Default',
+
+    },
+  },
+
   pwa: {
     // Disable service worker - only using for asset generation
     disable: true,