feat: add social media OG images and consistent titles

jongio · Copilot · jongio · commit 371110caeb55 · 2026-02-26T00:11:05.000-08:00
- Add og-image.png (1200x630) for LinkedIn/Twitter social previews
- Update to azd-web-core v2.1.0 (Twitter Card meta tags)
- Standardize page titles across all azd extension sites

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/web/public/og-image.svg b/web/public/og-image.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" fill="none">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#06b6d4"/>
+      <stop offset="50%" style="stop-color:#8b5cf6"/>
+      <stop offset="100%" style="stop-color:#10b981"/>
+    </linearGradient>
+    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06b6d4"/>
+      <stop offset="100%" style="stop-color:#8b5cf6"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="#0a0a0f"/>
+
+  <!-- Subtle grid pattern -->
+  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1a1a2e" stroke-width="1"/>
+  </pattern>
+  <rect width="1200" height="630" fill="url(#grid)" opacity="0.5"/>
+
+  <!-- Glow effects -->
+  <ellipse cx="300" cy="315" rx="300" ry="200" fill="#06b6d4" opacity="0.1"/>
+  <ellipse cx="900" cy="315" rx="300" ry="200" fill="#8b5cf6" opacity="0.1"/>
+
+  <!-- Terminal icon -->
+  <g transform="translate(80, 180)">
+    <rect width="160" height="160" rx="24" fill="#0a0a0f" stroke="url(#grad)" stroke-width="3"/>
+    <circle cx="32" cy="32" r="8" fill="#ef4444"/>
+    <circle cx="56" cy="32" r="8" fill="#eab308"/>
+    <circle cx="80" cy="32" r="8" fill="#22c55e"/>
+    <path d="M32 75L56 100L32 125" stroke="url(#grad)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    <rect x="70" y="92" width="60" height="12" rx="3" fill="url(#grad)"/>
+  </g>
+
+  <!-- Command prompt -->
+  <text x="280" y="240" font-family="monospace" font-size="36" fill="#06b6d4">❯ azd exec</text>
+
+  <!-- Title -->
+  <text x="280" y="310" font-family="system-ui, -apple-system, sans-serif" font-size="64" font-weight="700" fill="white">azd exec</text>
+
+  <!-- Subtitle -->
+  <text x="280" y="370" font-family="system-ui, -apple-system, sans-serif" font-size="28" fill="#a1a1aa">Execute Scripts with Azure Context</text>
+  <text x="280" y="410" font-family="system-ui, -apple-system, sans-serif" font-size="22" fill="#71717a">Run scripts with azd env variables and Key Vault secrets</text>
+
+  <!-- Feature badges -->
+  <g transform="translate(280, 450)">
+    <rect width="140" height="42" rx="21" fill="#06b6d4" fill-opacity="0.15" stroke="#06b6d4" stroke-width="1.5"/>
+    <text x="70" y="28" font-family="monospace" font-size="18" fill="#06b6d4" text-anchor="middle">env vars</text>
+  </g>
+  <g transform="translate(440, 450)">
+    <rect width="150" height="42" rx="21" fill="#8b5cf6" fill-opacity="0.15" stroke="#8b5cf6" stroke-width="1.5"/>
+    <text x="75" y="28" font-family="monospace" font-size="18" fill="#8b5cf6" text-anchor="middle">key vault</text>
+  </g>
+  <g transform="translate(610, 450)">
+    <rect width="140" height="42" rx="21" fill="#10b981" fill-opacity="0.15" stroke="#10b981" stroke-width="1.5"/>
+    <text x="70" y="28" font-family="monospace" font-size="18" fill="#10b981" text-anchor="middle">scripts</text>
+  </g>
+
+  <!-- Author -->
+  <text x="280" y="550" font-family="system-ui, -apple-system, sans-serif" font-size="22" fill="#71717a">Azure Developer CLI Extension</text>
+</svg>
