chore: sync

Author: harlan-zw

app/components/OgImage/Package.takumi.vue

@@ -242,21 +242,21 @@ const sparklineSrc = computed(() => {
       </div>
 
       <div class="flex flex-col max-w-full gap-3">
-        <div v-if="pkgOrg" class="lg:text-5xl text-3xl opacity-50 font-mono tracking-tight leading-none" :style="{ lineClamp: 1 }">
+        <div v-if="pkgOrg" class="lg:text-5xl text-3xl opacity-50 font-mono tracking-tight leading-none" :style="{ textOverflow: 'ellipsis', lineClamp: 1 }">
           {{ pkgOrg }}
         </div>
-        <div class="lg:text-7xl text-5xl tracking-tighter font-mono leading-none" :style="{ lineClamp: 1 }">
+        <div class="tracking-tighter font-mono leading-none overflow-hidden" :class="(pkgShortName?.length ?? 0) > 20 ? 'lg:text-6xl text-4xl' : 'lg:text-7xl text-5xl'" :style="{ textOverflow: 'ellipsis', lineClamp: 1, wordBreak: 'break-all' }">
           {{ pkgShortName }}
         </div>
-        <div v-if="version" class="pt-3 lg:text-4xl text-3xl opacity-70 font-mono tracking-tight leading-none" :style="{ lineClamp: 1 }">
+        <div v-if="version" class="pt-3 lg:text-4xl text-3xl opacity-70 font-mono tracking-tight leading-none" :style="{ textOverflow: 'ellipsis', lineClamp: 1 }">
           v{{ version }}
         </div>
       </div>
 
       <div class="flex items-center gap-5 text-4xl text-fg-muted">
         <div v-if="repositoryUrl" class="flex items-center gap-2">
           <div class="i-simple-icons:github w-8 h-8 text-white" />
-          <span v-if="repoRef">
+          <span v-if="repoRef" class="max-w-[500px]" :style="{ textOverflow: 'ellipsis' }">
             {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
           </span>
           <span v-else>{{ $t('package.links.repo') }}</span>

app/components/OgImage/Page.takumi.vue

@@ -21,7 +21,7 @@ const { name: siteName } = useSiteConfig()
     </div>
 
     <div class="flex flex-col max-w-full gap-3">
-      <div class="lg:text-7xl text-5xl tracking-tighter font-mono leading-none" :style="{ lineClamp: 1 }">
+      <div class="lg:text-7xl text-5xl tracking-tighter font-mono leading-none" :style="{ lineClamp: 1, textOverflow: 'ellipsis' }">
         {{ title }}
       </div>
     </div>

app/pages/package-docs/[...path].vue

@@ -118,8 +118,6 @@ defineOgImage('Package.takumi', {
   { key: 'whatsapp', width: 800, height: 800 },
 ])
 
-console.log('package docs!@@@@@@@@@@@@@@@@@')
-
 const showLoading = computed(
   () => docsStatus.value === 'pending' || (docsStatus.value === 'idle' && docsUrl.value !== null),
 )

nuxt.config.ts

@@ -140,8 +140,8 @@ export default defineNuxtConfig({
     '/package/:org/:name/_payload.json': getISRConfig(60, { fallback: 'json' }),
     '/package/:org/:name/v/:version/_payload.json': getISRConfig(60, { fallback: 'json' }),
     // infinite cache (versioned - doesn't change)
-    // '/package-code/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
-    // '/package-docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
+    '/package-code/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
+    '/package-docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     // static pages
     '/': { prerender: true },
     '/200.html': { prerender: true },

test/e2e/og-image.spec.ts

@@ -18,7 +18,7 @@ const testCases = [
   { path: '/package/nuxt/v/4.3.1', label: 'unscoped with explicit version' },
   { path: '/package/@nuxt/kit', label: 'scoped package' },
   { path: '/package/@anthropic-ai/claude-code', label: 'scoped with long name' },
-  { path: '/package/typescript-eslint-parser-for-extra-long-name', label: 'extremely long name' },
+  { path: '/package/@babel/plugin-transform-exponentiation-operator', label: 'extremely long name' },
 
   // Package code-tree variant (file tree decoration)
   { path: '/package-code/vue/v/3.5.27', label: 'code-tree variant' },

test/e2e/og-image.spec.ts-snapshots/og-image-package--babel-plugin-transform-exponentiation-operator.png

@@ -0,0 +1,6 @@
+{
+  "downloads": 8542310,
+  "start": "2025-02-18",
+  "end": "2025-02-25",
+  "package": "@babel/plugin-transform-exponentiation-operator"
+}