fix/og-name-size configure title scale and use mono font

Author: alexdln

app/components/OgImage/Package.vue

@@ -64,23 +64,20 @@ const formattedStars = computed(() =>
     : '',
 )
 
-// Dynamic font sizing based on name length
-// OG images are 1200px wide, with 64px padding on each side = 1072px content width
-// Icon is 80px + 24px gap = 104px, leaving ~968px for name + version
-const titleFontSize = computed(() => {
-  const len = name.value.length
-  if (len <= 12) return 96 // text-8xl
-  if (len <= 18) return 80
-  if (len <= 24) return 64
-  if (len <= 32) return 52
-  if (len <= 40) return 44
-  return 36 // very long names
+const MAX_LOGO_SYMBOLS = 40
+
+const titleTruncated = computed(() => {
+  return name.value.length > MAX_LOGO_SYMBOLS
+    ? `${name.value.slice(0, MAX_LOGO_SYMBOLS - 1)}…`
+    : name.value
 })
 
-const truncatedVersion = computed(() => {
-  const ver = resolvedVersion.value ?? version.value
-  if (ver.length <= 12) return ver
-  return ver.slice(0, 11) + '…'
+// Dynamic font sizing based on name length
+// OG images are 1200px wide, with 64px padding on each side = 1072px content width
+// The original size (8xl) can fit 19 characters (2 logo characters + 17 name characters)
+const titleScale = computed(() => {
+  const len = titleTruncated.value.length + 2
+  return Math.min(Math.floor((19 / len) * 100) / 100, 1)
 })
 
 try {
@@ -97,7 +94,7 @@ try {
 <template>
   <div
     class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden"
-    style="font-family: 'Geist', sans-serif"
+    style="font-family: 'Geist Mono', sans-serif"
   >
     <div class="relative z-10 flex flex-col gap-6">
       <!-- Package name -->
@@ -126,19 +123,20 @@ try {
         </div>
 
         <h1
-          class="font-bold tracking-tighter"
-          style="font-family: 'Geist Mono', sans-serif"
-          :style="{ fontSize: titleFontSize }"
+          class="font-bold text-8xl origin-cl tracking-tighter text-nowrap flex flex-nowrap"
+          :style="{ transform: `scale(${titleScale})` }"
         >
-          <span :style="{ color: primaryColor }" class="opacity-80">./</span>{{ pkg?.name }}
+          <span
+            :style="{ color: primaryColor }"
+            class="opacity-80"
+            style="margin-left: -0.5rem; margin-right: 0.5rem"
+            >./</span
+          >{{ titleTruncated }}
         </h1>
       </div>
 
       <!-- Version -->
-      <div
-        class="flex items-center gap-5 text-3xl font-light text-[#a3a3a3]"
-        style="font-family: 'Geist Mono', sans-serif"
-      >
+      <div class="flex items-center gap-5 text-3xl font-light text-[#a3a3a3]">
         <span
           class="px-3 py-1 me-2 rounded-lg border font-bold opacity-90"
           :style="{
@@ -148,11 +146,11 @@ try {
             boxShadow: `0 0 20px ${primaryColor}25`,
           }"
         >
-          {{ truncatedVersion }}
+          {{ resolvedVersion ?? version }}
         </span>
 
         <!-- Downloads (if any) -->
-        <span v-if="downloads" class="flex items-center gap-2">
+        <span v-if="downloads" class="flex items-center gap-2 tracking-tight">
           <svg
             width="30"
             height="30"
@@ -196,7 +194,11 @@ try {
         </span>
 
         <!-- Stars (if any) -->
-        <span v-if="formattedStars" class="flex items-center gap-2" data-testid="stars">
+        <span
+          v-if="formattedStars"
+          class="flex items-center gap-2 tracking-tight"
+          data-testid="stars"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 32 32"
@@ -215,7 +217,11 @@ try {
         </span>
 
         <!-- Likes (if any) -->
-        <span v-if="likes.totalLikes > 0" class="flex items-center gap-2" data-testid="likes">
+        <span
+          v-if="likes.totalLikes > 0"
+          class="flex items-center gap-2 tracking-tight"
+          data-testid="likes"
+        >
           <svg
             width="32"
             height="32"