fix: malformed supporter SVGs — Boeing/Ribose invisible, NIST oversized

scripts/assets.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+// An <img>-embedded SVG needs BOTH a viewBox (content scales) and explicit
+// width/height (intrinsic size for layout). The regression this encodes:
+// supporter-boeing/ribose shipped viewBox-only SVGs that collapsed to nothing
+// under `w-auto` + height caps, and supporter-nist shipped width/height
+// without a viewBox so its content rendered oversized.
+describe('supporter logo assets', () => {
+  const dir = 'public/images/supporters'
+  const svgs = readdirSync(dir).filter((f) => f.endsWith('.svg'))
+
+  it('has supporter SVGs to check', () => {
+    expect(svgs.length).toBeGreaterThan(0)
+  })
+
+  it('every SVG has a viewBox and explicit width/height', () => {
+    const offenders: string[] = []
+    for (const file of svgs) {
+      const source = readFileSync(join(dir, file), 'utf-8')
+      const tag = source.match(/<svg\b[^>]*>/)?.[0] ?? ''
+      const hasViewBox = /viewBox="/.test(tag)
+      const hasWidth = /(?<![:\w-])width="/.test(tag)
+      const hasHeight = /(?<![:\w-])height="/.test(tag)
+      if (!hasViewBox || !hasWidth || !hasHeight) {
+        offenders.push(`${file} (viewBox=${hasViewBox}, width=${hasWidth}, height=${hasHeight})`)
+      }
+    }
+    expect(offenders, `malformed SVGs: ${offenders.join(', ')}`).toEqual([])
+  })
+})

src/pages/index.astro

@@ -169,7 +169,7 @@ const formatDate = (date: string) =>
           {
             ['supporter-boeing.svg', 'supporter-md.svg', 'supporter-ge.svg', 'supporter-nist.svg', 'supporter-pdes.png', 'supporter-steptools.svg', 'supporter-jotneconnect.svg', 'supporter-afnet.svg', 'supporter-ribose.svg'].map((logo) => (
               <a href="/supporters" class="h-14 flex items-center rounded-lg bg-white p-2 hover:shadow-md transition-shadow">
-                <img src={`/images/supporters/${logo}`} alt={logo.replace('supporter-', '').replace(/\.\w+$/, '')} class="max-h-10 w-auto mx-auto object-contain" />
+                <img src={`/images/supporters/${logo}`} alt={logo.replace('supporter-', '').replace(/\.\w+$/, '')} class="h-10 w-auto mx-auto object-contain" />
               </a>
             ))
           }

src/pages/supporters.astro

@@ -31,7 +31,7 @@ const supporters = [
           <AnimatedSection delay={i * 60}>
             <div class="rounded-xl border border-gray-200/80 dark:border-gray-700/60 bg-white dark:bg-navy-light p-6 h-full flex flex-col">
               <div class="mb-4 h-14 flex items-center rounded-lg bg-white p-2">
-                <img src={supporter.logo} alt={supporter.name} class="max-h-10 w-auto mx-auto object-contain" />
+                <img src={supporter.logo} alt={supporter.name} class="h-10 w-auto mx-auto object-contain" />
               </div>
               <h3 class="font-serif font-bold text-lg text-gray-900 dark:text-white">{supporter.name}</h3>
               <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 leading-relaxed flex-1">{supporter.desc}</p>