fix: configure name scale in package og (#1466) · davidwindham.com/npmx.dev@775e4b8

+11 -8

app/components/OgImage/Default.vue

··· 15 15 <template> 16 16 <div 17 17 class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden" 18 + style="font-family: 'Geist Mono', sans-serif" 18 19 > 19 20 <div class="relative z-10 flex flex-col gap-6"> 20 21 <div class="flex items-start gap-4"> 21 22 <div 22 - class="flex items-start justify-center w-16 h-16 rounded-xl bg-gradient-to-tr from-[#3b82f6] shadow-lg" 23 + class="flex items-start justify-center w-16 h-16 p-3.5 rounded-xl bg-gradient-to-tr from-[#3b82f6] shadow-lg" 23 24 :style="{ backgroundColor: props.primaryColor }" 24 25 > 25 26 <svg ··· 41 42 </svg> 42 43 </div> 43 44 44 - <h1 45 - class="text-8xl font-bold tracking-tighter" 46 - style="font-family: 'Geist Sans', sans-serif" 47 - > 48 - <span class="opacity-80" :style="{ color: props.primaryColor }">./</span>{{ props.title }} 45 + <h1 class="text-8xl font-bold"> 46 + <span 47 + class="opacity-80 tracking-[-0.1em]" 48 + :style="{ color: props.primaryColor }" 49 + style="margin-left: -1rem; margin-right: 0.5rem" 50 + >./</span 51 + >{{ props.title }} 49 52 </h1> 50 53 </div> 51 54 52 55 <div 53 - class="flex flex-wrap items-center gap-x-3 text-4xl font-light text-[#a3a3a3]" 54 - style="font-family: 'Geist Sans', sans-serif" 56 + class="flex flex-wrap items-center gap-x-3 text-4xl text-[#a3a3a3]" 57 + style="font-family: 'Geist', sans-serif" 55 58 > 56 59 <template v-for="(part, index) in props.description.split(/(\*\*.*?\*\*)/)" :key="index"> 57 60 <span

+39 -12

app/components/OgImage/Package.vue

··· 64 64 : '', 65 65 ) 66 66 67 + const MAX_LOGO_SYMBOLS = 40 68 + 69 + const titleTruncated = computed(() => { 70 + return name.value.length > MAX_LOGO_SYMBOLS 71 + ? `${name.value.slice(0, MAX_LOGO_SYMBOLS - 1)}…` 72 + : name.value 73 + }) 74 + 75 + // Dynamic font sizing based on name length 76 + // OG images are 1200px wide, with 64px padding on each side = 1072px content width 77 + // The original size (8xl) can fit 19 characters (2 logo characters + 17 name characters) 78 + const titleScale = computed(() => { 79 + const len = titleTruncated.value.length + 2 80 + return Math.min(Math.floor((19 / len) * 100) / 100, 1) 81 + }) 82 + 67 83 try { 68 84 await refreshPkg() 69 85 await Promise.all([refreshRepoMeta(), refreshDownloads(), refreshLikes()]) ··· 78 94 <template> 79 95 <div 80 96 class="h-full w-full flex flex-col justify-center px-20 bg-[#050505] text-[#fafafa] relative overflow-hidden" 97 + style="font-family: 'Geist Mono', sans-serif" 81 98 > 82 99 <div class="relative z-10 flex flex-col gap-6"> 83 100  84 101 <div class="flex items-start gap-4"> 85 102 <div 86 - class="flex items-center justify-center w-16 h-16 p-4 rounded-xl shadow-lg bg-gradient-to-tr from-[#3b82f6]" 103 + class="flex items-center justify-center w-16 h-16 p-3.5 rounded-xl shadow-lg bg-gradient-to-tr from-[#3b82f6]" 87 104 :style="{ backgroundColor: primaryColor }" 88 105 > 89 106 <svg ··· 106 123 </div> 107 124 108 125 <h1 109 - class="text-8xl font-bold tracking-tighter" 110 - style="font-family: 'Geist Sans', sans-serif" 126 + class="font-bold text-8xl origin-cl tracking-tighter text-nowrap whitespace-nowrap flex flex-nowrap" 127 + :style="{ transform: `scale(${titleScale})` }" 111 128 > 112 - <span :style="{ color: primaryColor }" class="opacity-80">./</span>{{ pkg?.name }} 129 + <span 130 + :style="{ color: primaryColor }" 131 + class="opacity-80 tracking-[-0.1em]" 132 + style="margin-left: -0.5rem; margin-right: 1rem" 133 + >./</span 134 + >{{ titleTruncated }} 113 135 </h1> 114 136 </div> 115 137 116 138  117 - <div 118 - class="flex items-center gap-5 text-4xl font-light text-[#a3a3a3]" 119 - style="font-family: 'Geist Sans', sans-serif" 120 - > 139 + <div class="flex items-center gap-5 text-3xl font-light text-[#a3a3a3]"> 121 140 <span 122 141 class="px-3 py-1 me-2 rounded-lg border font-bold opacity-90" 123 142 :style="{ ··· 127 146 boxShadow: `0 0 20px ${primaryColor}25`, 128 147 }" 129 148 > 130 - {{ resolvedVersion }} 149 + {{ resolvedVersion ?? version }} 131 150 </span> 132 151 133 152  134 - <span v-if="downloads" class="flex items-center gap-2"> 153 + <span v-if="downloads" class="flex items-center gap-2 tracking-tight"> 135 154 <svg 136 155 width="30" 137 156 height="30" ··· 175 194 </span> 176 195 177 196  178 - <span v-if="formattedStars" class="flex items-center gap-2" data-testid="stars"> 197 + <span 198 + v-if="formattedStars" 199 + class="flex items-center gap-2 tracking-tight" 200 + data-testid="stars" 201 + > 179 202 <svg 180 203 xmlns="http://www.w3.org/2000/svg" 181 204 viewBox="0 0 32 32" ··· 194 217 </span> 195 218 196 219  197 - <span v-if="likes.totalLikes > 0" class="flex items-center gap-2" data-testid="likes"> 220 + <span 221 + v-if="likes.totalLikes > 0" 222 + class="flex items-center gap-2 tracking-tight" 223 + data-testid="likes" 224 + > 198 225 <svg 199 226 width="32" 200 227 height="32"

+9

nuxt.config.ts

··· 247 247 defaults: { 248 248 component: 'Default', 249 249 }, 250 + fonts: [ 251 + { name: 'Geist', weight: 400, path: '/fonts/Geist-Regular.ttf' }, 252 + { name: 'Geist', weight: 500, path: '/fonts/Geist-Medium.ttf' }, 253 + { name: 'Geist', weight: 600, path: '/fonts/Geist-SemiBold.ttf' }, 254 + { name: 'Geist', weight: 700, path: '/fonts/Geist-Bold.ttf' }, 255 + { name: 'Geist Mono', weight: 400, path: '/fonts/GeistMono-Regular.ttf' }, 256 + { name: 'Geist Mono', weight: 500, path: '/fonts/GeistMono-Medium.ttf' }, 257 + { name: 'Geist Mono', weight: 700, path: '/fonts/GeistMono-Bold.ttf' }, 258 + ], 250 259 }, 251 260 252 261 pwa: {

public/fonts/Geist-Bold.ttf