chore: sync

Author: harlan-zw

app/app.vue

@@ -118,7 +118,7 @@ if (import.meta.client) {
 }
 
 // title and description will be inferred
-// this will be overriden by upstream pages that use different templates
+// this will be overridden by upstream pages that use different templates
 defineOgImage('Page.takumi')
 </script>
 

app/components/OgImage/Package.takumi.vue

@@ -114,7 +114,7 @@ async function fetchCodeTree() {
   function walk(nodes: JsDelivrFileNode[], depth: number) {
     for (const node of sorted(nodes)) {
       if (rows.length >= MAX_ROWS) return
-      rows.push({ name: node.name, depth })
+      rows.push({ name: node.name, depth, isDir: node.type === 'directory' })
       if (node.files) walk(node.files, depth + 1)
     }
   }

app/components/OgImage/Splash.takumi.vue

@@ -11,7 +11,7 @@ const { name, description } = useSiteConfig()
 
     <div class="flex flex-col">
       <div class="flex items-center gap-4">
-        <img src="/logo.svg" width="100" height="100" />
+        <img src="/logo.svg" width="100" height="100" alt="npmx logo" />
         <h1 class="text-8xl pb-3 font-mono">{{ name }}</h1>
       </div>
       <div class="text-4xl text-fg-muted gap-3">

test/e2e/og-image.spec.ts

@@ -3,11 +3,12 @@ import { expect, test } from './test-utils'
 // TODO(serhalp): The nuxt@3.20.2 fixture has no stars. Update fixture to have stars coverage here.
 
 /**
- * OG image snapshot tests.
+ * OG image snapshot tests (Takumi templates).
  *
  * Each entry tests a different visual edge case to catch layout/overflow regressions:
- * - Home page (Default template)
- * - Standard packages (Package template with various name lengths, scopes, descriptions)
+ * - Home page (Splash.takumi)
+ * - Static pages (Page.takumi)
+ * - Packages (Package.takumi with download-chart, code-tree, function-tree variants)
  */
 const testCases = [
   // Default OG image template