Skip to content

Commit 3306498

Browse files
committed
feat: add basic og images
1 parent a344ab3 commit 3306498

6 files changed

Lines changed: 77 additions & 0 deletions

File tree

app/components/OgImage/Default.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div
3+
class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]"
4+
>
5+
<h1
6+
class="text-6xl font-medium tracking-tight"
7+
style="font-family: 'JetBrains Mono', monospace"
8+
>
9+
<span
10+
class="text-[#666666]"
11+
style="letter-spacing: -0.1em"
12+
>./</span> npmx
13+
</h1>
14+
<h1 class="text-3xl font-medium tracking-tight">
15+
a better npm package browser
16+
</h1>
17+
18+
<p class="absolute bottom-12 text-lg text-[#404040]">
19+
npmx.dev
20+
</p>
21+
</div>
22+
</template>

app/components/OgImage/Package.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup lang="ts">
2+
withDefaults(defineProps<{
3+
name: string
4+
version: string
5+
downloads?: string
6+
license?: string
7+
}>(), {
8+
downloads: '',
9+
license: '',
10+
})
11+
</script>
12+
13+
<template>
14+
<div
15+
class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]"
16+
style="font-family: 'JetBrains Mono', monospace"
17+
>
18+
<h1 class="text-6xl font-medium tracking-tight">
19+
{{ name }}
20+
</h1>
21+
22+
<div class="flex items-center gap-6 mt-6 text-xl text-[#666666]">
23+
<span>v{{ version }}</span>
24+
<span v-if="downloads">{{ downloads }}/wk</span>
25+
<span v-if="license">{{ license }}</span>
26+
</div>
27+
28+
<p class="absolute bottom-12 text-lg text-[#404040]">
29+
npmx.dev
30+
</p>
31+
</div>
32+
</template>

app/pages/index.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ useSeoMeta({
1414
title: 'npmx - Better npm Package Browser',
1515
description: 'A fast, accessible npm package browser for power users. Search, browse, and manage npm packages with a modern interface.',
1616
})
17+
18+
defineOgImageComponent('Default')
1719
</script>
1820

1921
<template>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,13 @@ useSeoMeta({
204204
title: () => pkg.value?.name ? `${pkg.value.name} - npmx` : 'Package - npmx',
205205
description: () => pkg.value?.description ?? '',
206206
})
207+
208+
defineOgImageComponent('Package', {
209+
name: () => pkg.value?.name ?? 'Package',
210+
version: () => displayVersion.value?.version ?? '',
211+
downloads: () => downloads.value ? formatNumber(downloads.value.downloads) : '',
212+
license: () => pkg.value?.license ?? '',
213+
})
207214
</script>
208215

209216
<template>

app/pages/search.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,11 @@ function formatDate(dateStr: string): string {
202202
useSeoMeta({
203203
title: () => query.value ? `Search: ${query.value} - npmx` : 'Search Packages - npmx',
204204
})
205+
206+
defineOgImageComponent('Default', {
207+
title: 'npmx',
208+
description: () => query.value ? `Search results for "${query.value}"` : 'Search npm packages',
209+
})
205210
</script>
206211

207212
<template>

nuxt.config.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,12 @@ export default defineNuxtConfig({
7777
{
7878
name: 'Inter',
7979
weights: ['400', '500', '600'],
80+
global: true,
8081
},
8182
{
8283
name: 'JetBrains Mono',
8384
weights: ['400', '500'],
85+
global: true,
8486
},
8587
],
8688
},
@@ -89,6 +91,13 @@ export default defineNuxtConfig({
8991
failOnError: true,
9092
},
9193

94+
ogImage: {
95+
defaults: {
96+
component: 'Default',
97+
98+
},
99+
},
100+
92101
pwa: {
93102
// Disable service worker - only using for asset generation
94103
disable: true,

0 commit comments

Comments
 (0)