fix: prevent OG text bleed

Author: steipete

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 ### Fixed
 - Web: stabilize skill OG image generation on server runtimes.
+- Web: prevent skill OG text overflow outside the card.
 
 ## 0.1.0 - 2026-01-07
 

server/og/skillOgSvg.ts

@@ -22,17 +22,51 @@ function wrapText(value: string, maxChars: number, maxLines: number) {
   const words = value.trim().split(/\s+/).filter(Boolean)
   const lines: string[] = []
   let current = ''
+
+  function pushLine(line: string) {
+    if (!line) return
+    lines.push(line)
+  }
+
+  function splitLongWord(word: string) {
+    if (word.length <= maxChars) return [word]
+    const parts: string[] = []
+    let remaining = word
+    while (remaining.length > maxChars) {
+      parts.push(`${remaining.slice(0, maxChars - 1)}…`)
+      remaining = remaining.slice(maxChars - 1)
+    }
+    if (remaining) parts.push(remaining)
+    return parts
+  }
+
   for (const word of words) {
+    if (word.length > maxChars) {
+      if (current) {
+        pushLine(current)
+        current = ''
+        if (lines.length >= maxLines - 1) break
+      }
+      const parts = splitLongWord(word)
+      for (const part of parts) {
+        pushLine(part)
+        if (lines.length >= maxLines) break
+      }
+      current = ''
+      if (lines.length >= maxLines - 1) break
+      continue
+    }
+
     const next = current ? `${current} ${word}` : word
     if (next.length <= maxChars) {
       current = next
       continue
     }
-    if (current) lines.push(current)
+    pushLine(current)
     current = word
     if (lines.length >= maxLines - 1) break
   }
-  if (lines.length < maxLines && current) lines.push(current)
+  if (lines.length < maxLines && current) pushLine(current)
   if (lines.length > maxLines) lines.length = maxLines
 
   const usedWords = lines.join(' ').split(/\s+/).filter(Boolean).length
@@ -48,6 +82,12 @@ export function buildSkillOgSvg(params: SkillOgSvgParams) {
   const rawTitle = params.title.trim() || 'ClawdHub Skill'
   const rawDescription = params.description.trim() || 'Published on ClawdHub.'
 
+  const cardX = 72
+  const cardY = 96
+  const cardW = 640
+  const cardH = 456
+  const cardR = 34
+
   const titleLines = wrapText(rawTitle, 22, 2)
   const descLines = wrapText(rawDescription, 52, 3)
 
@@ -59,6 +99,8 @@ export function buildSkillOgSvg(params: SkillOgSvgParams) {
   const descLineHeight = 34
 
   const pillText = `${params.ownerLabel} • ${params.versionLabel}`
+  const underlineY = cardY + cardH - 80
+  const footerY = cardY + cardH - 18
 
   const titleTspans = titleLines
     .map((line, index) => {
@@ -110,6 +152,10 @@ export function buildSkillOgSvg(params: SkillOgSvgParams) {
       <stop stop-color="#FFFFFF" stop-opacity="0.16"/>
       <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.06"/>
     </linearGradient>
+
+    <clipPath id="cardClip">
+      <rect x="${cardX}" y="${cardY}" width="${cardW}" height="${cardH}" rx="${cardR}"/>
+    </clipPath>
   </defs>
 
   <rect width="1200" height="630" fill="url(#bg)"/>
@@ -127,39 +173,41 @@ export function buildSkillOgSvg(params: SkillOgSvgParams) {
   </g>
 
   <g filter="url(#cardShadow)">
-    <rect x="72" y="96" width="640" height="438" rx="34" fill="#201B18" fill-opacity="0.92" stroke="url(#stroke)"/>
+    <rect x="${cardX}" y="${cardY}" width="${cardW}" height="${cardH}" rx="${cardR}" fill="#201B18" fill-opacity="0.92" stroke="url(#stroke)"/>
   </g>
 
-  <image href="${params.markDataUrl}" x="108" y="134" width="46" height="46" preserveAspectRatio="xMidYMid meet"/>
+  <g clip-path="url(#cardClip)">
+    <image href="${params.markDataUrl}" x="108" y="134" width="46" height="46" preserveAspectRatio="xMidYMid meet"/>
 
-  <g>
-    <rect x="166" y="136" width="520" height="42" rx="21" fill="url(#pill)" stroke="#E86A47" stroke-opacity="0.28"/>
-    <text x="186" y="163"
+    <g>
+      <rect x="166" y="136" width="520" height="42" rx="21" fill="url(#pill)" stroke="#E86A47" stroke-opacity="0.28"/>
+      <text x="186" y="163"
+        fill="#F6EFE4"
+        font-size="18"
+        font-weight="600"
+        font-family="${FONT_SANS}, sans-serif"
+        opacity="0.92">${escapeXml(pillText)}</text>
+    </g>
+
+    <text x="114" y="${titleY}"
+      fill="#F6EFE4"
+      font-size="${titleFontSize}"
+      font-weight="800"
+      font-family="${FONT_SANS}, sans-serif">${titleTspans}</text>
+
+    <text x="114" y="${descY}"
+      fill="#C6B8A8"
+      font-size="26"
+      font-weight="500"
+      font-family="${FONT_SANS}, sans-serif">${descTspans}</text>
+
+    <rect x="114" y="${underlineY}" width="110" height="6" rx="3" fill="#E86A47"/>
+    <text x="114" y="${footerY}"
       fill="#F6EFE4"
-      font-size="18"
-      font-weight="600"
-      font-family="${FONT_SANS}, sans-serif"
-      opacity="0.92">${escapeXml(pillText)}</text>
+      font-size="20"
+      font-weight="500"
+      opacity="0.90"
+      font-family="${FONT_MONO}, monospace">${escapeXml(params.footer)}</text>
   </g>
-
-  <text x="114" y="${titleY}"
-    fill="#F6EFE4"
-    font-size="${titleFontSize}"
-    font-weight="800"
-    font-family="${FONT_SANS}, sans-serif">${titleTspans}</text>
-
-  <text x="114" y="${descY}"
-    fill="#C6B8A8"
-    font-size="26"
-    font-weight="500"
-    font-family="${FONT_SANS}, sans-serif">${descTspans}</text>
-
-  <rect x="114" y="472" width="110" height="6" rx="3" fill="#E86A47"/>
-  <text x="114" y="530"
-    fill="#F6EFE4"
-    font-size="20"
-    font-weight="500"
-    opacity="0.90"
-    font-family="${FONT_MONO}, monospace">${escapeXml(params.footer)}</text>
 </svg>`
 }

src/lib/og.test.ts

@@ -19,7 +19,7 @@ describe('og helpers', () => {
     expect(meta.url).toContain('/steipete/weather')
     expect(meta.owner).toBe('steipete')
     expect(meta.image).toContain('/og/skill.png?')
-    expect(meta.image).toContain('v=2')
+    expect(meta.image).toContain('v=3')
     expect(meta.image).toContain('slug=weather')
     expect(meta.image).toContain('owner=steipete')
     expect(meta.image).toContain('version=1.2.3')

src/lib/og.ts

@@ -16,7 +16,7 @@ type SkillMeta = {
 
 const DEFAULT_SITE = 'https://clawdhub.com'
 const DEFAULT_DESCRIPTION = 'ClawdHub — a fast skill registry for agents, with vector search.'
-const OG_SKILL_IMAGE_LAYOUT_VERSION = '2'
+const OG_SKILL_IMAGE_LAYOUT_VERSION = '3'
 
 export function getSiteUrl() {
   return import.meta.env.VITE_SITE_URL ?? DEFAULT_SITE