improvement(docs): update og image (#2529)

Author: waleedlatif1

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -258,8 +258,7 @@ export async function generateMetadata(props: {
   const baseUrl = 'https://docs.sim.ai'
   const fullUrl = `${baseUrl}${page.url}`
 
-  const description = data.description || ''
-  const ogImageUrl = `${baseUrl}/api/og?title=${encodeURIComponent(data.title)}&category=DOCUMENTATION${description ? `&description=${encodeURIComponent(description)}` : ''}`
+  const ogImageUrl = `${baseUrl}/api/og?title=${encodeURIComponent(data.title)}`
 
   return {
     title: data.title,

apps/docs/app/api/og/route.tsx

@@ -39,12 +39,10 @@ async function loadGoogleFont(font: string, weights: string, text: string): Prom
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url)
   const title = searchParams.get('title') || 'Documentation'
-  const category = searchParams.get('category') || 'DOCUMENTATION'
-  const description = searchParams.get('description') || ''
 
   const baseUrl = new URL(request.url).origin
 
-  const allText = `${title}${category}${description}docs.sim.ai`
+  const allText = `${title}docs.sim.ai`
   const fontData = await loadGoogleFont('Geist', '400;500;600', allText)
 
   return new ImageResponse(
@@ -59,7 +57,7 @@ export async function GET(request: NextRequest) {
         fontFamily: 'Geist',
       }}
     >
-      {/* Base gradient layer - very subtle purple tint across the entire image */}
+      {/* Base gradient layer - subtle purple tint across the entire image */}
       <div
         style={{
           position: 'absolute',
@@ -114,56 +112,25 @@ export async function GET(request: NextRequest) {
         {/* Logo */}
         <img src={`${baseUrl}/static/logo.png`} alt='sim' height={32} />
 
-        {/* Category + Title + Description */}
-        <div
+        {/* Title */}
+        <span
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 12,
+            fontSize: getTitleFontSize(title),
+            fontWeight: 600,
+            color: '#ffffff',
+            lineHeight: 1.1,
+            letterSpacing: '-0.02em',
           }}
         >
-          <span
-            style={{
-              fontSize: 15,
-              fontWeight: 600,
-              color: '#802fff',
-              letterSpacing: '0.02em',
-            }}
-          >
-            {category}
-          </span>
-          <span
-            style={{
-              fontSize: getTitleFontSize(title),
-              fontWeight: 600,
-              color: '#ffffff',
-              lineHeight: 1.1,
-              letterSpacing: '-0.02em',
-            }}
-          >
-            {title}
-          </span>
-          {description && (
-            <span
-              style={{
-                fontSize: 18,
-                fontWeight: 400,
-                color: '#a1a1aa',
-                lineHeight: 1.4,
-                marginTop: 4,
-              }}
-            >
-              {description.length > 100 ? `${description.slice(0, 100)}...` : description}
-            </span>
-          )}
-        </div>
+          {title}
+        </span>
 
         {/* Footer */}
         <span
           style={{
-            fontSize: 15,
+            fontSize: 20,
             fontWeight: 500,
-            color: '#52525b',
+            color: '#71717a',
           }}
         >
           docs.sim.ai

apps/docs/app/layout.tsx

@@ -58,7 +58,7 @@ export const metadata = {
       'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
     images: [
       {
-        url: 'https://docs.sim.ai/api/og?title=Sim%20Documentation&category=DOCUMENTATION',
+        url: 'https://docs.sim.ai/api/og?title=Sim%20Documentation',
         width: 1200,
         height: 630,
         alt: 'Sim Documentation',
@@ -72,7 +72,7 @@ export const metadata = {
       'Comprehensive documentation for Sim - the visual workflow builder for AI applications.',
     creator: '@simdotai',
     site: '@simdotai',
-    images: ['https://docs.sim.ai/api/og?title=Sim%20Documentation&category=DOCUMENTATION'],
+    images: ['https://docs.sim.ai/api/og?title=Sim%20Documentation'],
   },
   robots: {
     index: true,