Adds geist mono font references for the opengraph renderer

Author: orta

app/components/OgImage/Package.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 interface Props {
   name: string
   version: string
@@ -94,12 +96,23 @@ const truncatedVersion = computed(() => {
 
         <h1
           class="font-bold tracking-tight leading-none mt-0"
-          :style="{ fontSize: `${titleFontSize}px`, marginBottom: '-8px' }"
+          :style="{
+            fontSize: `${titleFontSize}px`,
+            marginBottom: '-8px',
+            fontFamily: 'Geist Mono, monospace',
+          }"
         >
           <span class="opacity-80" :style="{ color: props.primaryColor }">./</span>{{ props.name }}
         </h1>
 
-        <span class="pb-1" :style="{ fontSize: `${versionFontSize}px`, color: props.primaryColor }">
+        <span
+          class="pb-1"
+          :style="{
+            fontSize: `${versionFontSize}px`,
+            color: props.primaryColor,
+            fontFamily: 'Geist Mono, monospace',
+          }"
+        >
           v{{ truncatedVersion }}
         </span>
       </div>
@@ -133,7 +146,7 @@ const truncatedVersion = computed(() => {
 
           <h1
             class="font-bold tracking-tight leading-none"
-            :style="{ fontSize: `${titleFontSize}px` }"
+            :style="{ fontSize: `${titleFontSize}px`, fontFamily: 'Geist Mono, monospace' }"
           >
             {{ props.name }}
           </h1>
@@ -147,11 +160,18 @@ const truncatedVersion = computed(() => {
               fontSize: `${versionFontSize}px`,
               color: props.primaryColor,
               paddingLeft: '22px',
+              fontFamily: 'Geist Mono, monospace',
             }"
           >
             ./
           </div>
-          <span :style="{ fontSize: `${versionFontSize}px`, color: props.primaryColor }">
+          <span
+            :style="{
+              fontSize: `${versionFontSize}px`,
+              color: props.primaryColor,
+              fontFamily: 'Geist Mono, monospace',
+            }"
+          >
             v{{ truncatedVersion }}
           </span>
         </div>
@@ -198,7 +218,10 @@ const truncatedVersion = computed(() => {
         v-if="props.repoOwner && props.repoName"
         class="flex flex-row items-center gap-12 text-3xl text-[#737373]"
       >
-        <span class="flex flex-row items-center gap-3">
+        <span
+          class="flex flex-row items-center gap-3"
+          :style="{ fontFamily: 'Geist Mono, monospace' }"
+        >
           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
             <path
               d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"

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

@@ -271,19 +271,6 @@ function formatOgDate(isoDate?: string): string {
   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
 }
 
-function formatCompactNumber(num: number): string {
-  if (num >= 1_000_000_000) {
-    return `${(num / 1_000_000_000).toFixed(num >= 10_000_000_000 ? 0 : 1).replace(/\.0$/, '')}B`
-  }
-  if (num >= 1_000_000) {
-    return `${(num / 1_000_000).toFixed(num >= 10_000_000 ? 0 : 1).replace(/\.0$/, '')}M`
-  }
-  if (num >= 1_000) {
-    return `${(num / 1_000).toFixed(num >= 10_000 ? 0 : 1).replace(/\.0$/, '')}K`
-  }
-  return num.toString()
-}
-
 // Computed values for OG image
 const ogRepoRef = computed(() => {
   const repoUrl = displayVersion.value?.repository?.url

nuxt.config.ts

@@ -178,6 +178,15 @@ export default defineNuxtConfig({
     defaults: {
       component: 'Default',
     },
+    fonts: [
+      { name: 'Geist', weight: 400, path: '/fonts/Geist-Regular.ttf' },
+      { name: 'Geist', weight: 500, path: '/fonts/Geist-Medium.ttf' },
+      { name: 'Geist', weight: 600, path: '/fonts/Geist-SemiBold.ttf' },
+      { name: 'Geist', weight: 700, path: '/fonts/Geist-Bold.ttf' },
+      { name: 'Geist Mono', weight: 400, path: '/fonts/GeistMono-Regular.ttf' },
+      { name: 'Geist Mono', weight: 500, path: '/fonts/GeistMono-Medium.ttf' },
+      { name: 'Geist Mono', weight: 700, path: '/fonts/GeistMono-Bold.ttf' },
+    ],
   },
 
   pwa: {