Improve social card metadata and layout

KSemenenko · KSemenenko · commit 84c49510bdd6 · 2026-03-27T10:56:12.000+01:00
diff --git a/public/social-card.png b/public/social-card.png
diff --git a/public/social-card.svg b/public/social-card.svg
@@ -1,49 +1,71 @@
 <svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
   <title id="title">TPS Format Specification social card</title>
-  <desc id="desc">Open specification for a markdown-first teleprompter format with timing, pacing, emotion, and styling metadata.</desc>
+  <desc id="desc">TelePrompterScript: a markdown-first specification for teleprompter scripts with timing, pacing, emotion, and styling metadata.</desc>
+
   <defs>
-    <linearGradient id="bg" x1="80" y1="40" x2="1120" y2="590" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#102337"/>
-      <stop offset="1" stop-color="#07121B"/>
+    <linearGradient id="bg" x1="40" y1="22" x2="1158" y2="612" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#10253B"/>
+      <stop offset="0.54" stop-color="#0A1827"/>
+      <stop offset="1" stop-color="#061019"/>
     </linearGradient>
-    <radialGradient id="glowA" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1040 72) rotate(135) scale(210 180)">
-      <stop stop-color="#7CC8FF" stop-opacity=".35"/>
+    <radialGradient id="blueGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1010 84) rotate(133) scale(262 208)">
+      <stop stop-color="#7CC8FF" stop-opacity="0.34"/>
       <stop offset="1" stop-color="#7CC8FF" stop-opacity="0"/>
     </radialGradient>
-    <radialGradient id="glowB" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(196 520) rotate(25) scale(220 180)">
-      <stop stop-color="#F3C36E" stop-opacity=".26"/>
+    <radialGradient id="goldGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(206 542) rotate(18) scale(280 220)">
+      <stop stop-color="#F3C36E" stop-opacity="0.24"/>
       <stop offset="1" stop-color="#F3C36E" stop-opacity="0"/>
     </radialGradient>
-    <linearGradient id="pill" x1="140" y1="110" x2="330" y2="110" gradientUnits="userSpaceOnUse">
+    <linearGradient id="accentLine" x1="82" y1="229" x2="442" y2="229" gradientUnits="userSpaceOnUse">
       <stop stop-color="#F3C36E"/>
       <stop offset="1" stop-color="#7CC8FF"/>
     </linearGradient>
+    <pattern id="grid" width="34" height="34" patternUnits="userSpaceOnUse">
+      <path d="M34 0H0V34" stroke="#90A8C6" stroke-opacity="0.07"/>
+    </pattern>
   </defs>
 
-  <rect width="1200" height="630" rx="36" fill="#07121B"/>
-  <rect x="18" y="18" width="1164" height="594" rx="28" fill="url(#bg)" stroke="rgba(143,166,195,0.22)"/>
-  <rect x="18" y="18" width="1164" height="594" rx="28" fill="url(#glowA)"/>
-  <rect x="18" y="18" width="1164" height="594" rx="28" fill="url(#glowB)"/>
+  <rect width="1200" height="630" fill="#07111A"/>
+  <rect x="18" y="18" width="1164" height="594" fill="url(#bg)"/>
+  <rect x="18" y="18" width="1164" height="594" fill="url(#grid)"/>
+  <rect x="18" y="18" width="1164" height="594" fill="url(#blueGlow)"/>
+  <rect x="18" y="18" width="1164" height="594" fill="url(#goldGlow)"/>
+  <rect x="18.5" y="18.5" width="1163" height="593" stroke="#29435A"/>
+
+  <text x="82" y="94" fill="#F3C36E" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" letter-spacing="2.4">MANAGED CODE / OPEN SPEC</text>
+
+  <text x="82" y="208" fill="#F7FAFF" font-family="Georgia, Times New Roman, serif" font-size="124" font-weight="700">TPS</text>
+  <rect x="84" y="226" width="360" height="6" fill="url(#accentLine)"/>
+  <text x="82" y="294" fill="#F7FAFF" font-family="Georgia, Times New Roman, serif" font-size="56" font-weight="700">TelePrompterScript</text>
+  <text x="82" y="340" fill="#F3C36E" font-family="Arial, Helvetica, sans-serif" font-size="24" font-weight="700" letter-spacing="5.8">FORMAT SPECIFICATION</text>
+
+  <text x="82" y="410" fill="#D7E5F3" font-family="Arial, Helvetica, sans-serif" font-size="23" font-weight="600">Markdown-first teleprompter format</text>
+  <text x="82" y="445" fill="#D7E5F3" font-family="Arial, Helvetica, sans-serif" font-size="23" font-weight="600">with timing, pacing, emotion, and styling metadata.</text>
+  <text x="82" y="480" fill="#D7E5F3" font-family="Arial, Helvetica, sans-serif" font-size="23" font-weight="600">Built for Actor and RSVP reading workflows.</text>
+
+  <text x="82" y="556" fill="#F3C36E" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700">Timing + Pauses</text>
+  <text x="300" y="556" fill="#7CC8FF" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700">Emotion Tags</text>
+  <text x="484" y="556" fill="#7BE0BA" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700">Actor + RSVP</text>
+
+  <line x1="716" y1="84" x2="716" y2="548" stroke="#29435A" stroke-width="1"/>
 
-  <rect x="84" y="76" width="254" height="40" rx="20" fill="rgba(243,195,110,0.12)" stroke="rgba(243,195,110,0.2)"/>
-  <circle cx="114" cy="96" r="4" fill="url(#pill)"/>
-  <text x="132" y="102" fill="#F3C36E" font-family="Manrope, Segoe UI, sans-serif" font-size="16" font-weight="800" letter-spacing="2.4">MANAGED CODE / OPEN SPEC</text>
+  <circle cx="770" cy="94" r="6" fill="#FF7A72"/>
+  <circle cx="794" cy="94" r="6" fill="#F3C36E"/>
+  <circle cx="818" cy="94" r="6" fill="#7BE0BA"/>
+  <text x="852" y="101" fill="#F7FAFF" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700">format-signals.tps</text>
 
-  <text x="84" y="185" fill="#F4F7FB" font-family="Georgia, serif" font-size="96" font-weight="700">TPS Format</text>
-  <text x="84" y="270" fill="#F4F7FB" font-family="Georgia, serif" font-size="96" font-weight="700">Specification</text>
-  <text x="84" y="330" fill="#F3C36E" font-family="Manrope, Segoe UI, sans-serif" font-size="28" font-weight="800" letter-spacing="6">TELEPROMPTERSCRIPT</text>
+  <text x="760" y="164" fill="#8FA6C3" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="700" letter-spacing="2.1">SPEC SIGNALS</text>
 
-  <text x="84" y="404" fill="#D8E3F1" font-family="Manrope, Segoe UI, sans-serif" font-size="30" font-weight="600">
-    <tspan x="84" dy="0">Markdown-first teleprompter format with timing,</tspan>
-    <tspan x="84" dy="42">pacing, emotion, and styling metadata.</tspan>
-  </text>
+  <text x="760" y="236" fill="#7CC8FF" font-family="Courier New, monospace" font-size="34" font-weight="700">140WPM</text>
+  <text x="760" y="270" fill="#D7E5F3" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="600">Precise pacing for spoken delivery.</text>
+  <line x1="760" y1="296" x2="1086" y2="296" stroke="#29435A" stroke-width="1"/>
 
-  <rect x="84" y="488" width="248" height="56" rx="28" fill="rgba(8,17,28,0.72)" stroke="rgba(124,200,255,0.18)"/>
-  <text x="118" y="523" fill="#F4F7FB" font-family="Manrope, Segoe UI, sans-serif" font-size="22" font-weight="800">Actor + RSVP Profiles</text>
+  <text x="760" y="364" fill="#F3C36E" font-family="Courier New, monospace" font-size="30" font-weight="700">[warm]welcome[/warm]</text>
+  <text x="760" y="398" fill="#D7E5F3" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="600">Emotion styling for natural narration.</text>
+  <line x1="760" y1="424" x2="1086" y2="424" stroke="#29435A" stroke-width="1"/>
 
-  <rect x="350" y="488" width="260" height="56" rx="28" fill="rgba(8,17,28,0.72)" stroke="rgba(124,200,255,0.18)"/>
-  <text x="384" y="523" fill="#F4F7FB" font-family="Manrope, Segoe UI, sans-serif" font-size="22" font-weight="800">Structured Script Metadata</text>
+  <text x="760" y="492" fill="#7BE0BA" font-family="Courier New, monospace" font-size="30" font-weight="700">Actor | RSVP</text>
+  <text x="760" y="526" fill="#D7E5F3" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="600">Two reading profiles in one open spec.</text>
 
-  <rect x="840" y="490" width="250" height="52" rx="26" fill="rgba(8,17,28,0.58)" stroke="rgba(143,166,195,0.12)"/>
-  <text x="876" y="523" fill="#8FA6C3" font-family="Manrope, Segoe UI, sans-serif" font-size="22" font-weight="700">tps.managed-code.com</text>
+  <text x="878" y="584" fill="#8FA6C3" font-family="Arial, Helvetica, sans-serif" font-size="23" font-weight="700">tps.managed-code.com</text>
 </svg>
diff --git a/scripts/build-site.mjs b/scripts/build-site.mjs
@@ -16,8 +16,10 @@ const siteUrl = "https://tps.managed-code.com/";
 const repoUrl = "https://github.com/managedcode/TPS";
 const readmeUrl = `${repoUrl}/blob/main/README.md`;
 const licenseUrl = `${repoUrl}/blob/main/LICENSE`;
-const socialImageUrl = `${siteUrl}social-card.svg`;
+const socialImageUrl = `${siteUrl}social-card.png`;
 const siteName = "TPS Format Specification";
+const socialImageWidth = 1200;
+const socialImageHeight = 630;
 const emotionStyles = {
   warm: { colorLabel: "Orange" },
   concerned: { colorLabel: "Red" },
@@ -116,14 +118,18 @@ const page = `<!DOCTYPE html>
   <meta property="og:site_name" content="${escapeHtml(siteName)}" />
   <meta property="og:url" content="${siteUrl}" />
   <meta property="og:image" content="${socialImageUrl}" />
-  <meta property="og:image:type" content="image/svg+xml" />
+  <meta property="og:image:secure_url" content="${socialImageUrl}" />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="${socialImageWidth}" />
+  <meta property="og:image:height" content="${socialImageHeight}" />
   <meta property="og:image:alt" content="TPS Format Specification social preview" />
   <meta property="article:modified_time" content="${dateModifiedIso}" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="${escapeHtml(title)}" />
   <meta name="twitter:description" content="${escapeHtml(summary)}" />
   <meta name="twitter:image" content="${socialImageUrl}" />
   <meta name="twitter:image:alt" content="TPS Format Specification social preview" />
+  <link rel="image_src" href="${socialImageUrl}" />
   <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
   <script type="application/ld+json">${toJsonLd(structuredData)}</script>
   <style>${styles}</style>
