feat(og): separate pitch slot from description, fix slot order

Author: AlemTuzlak

src/server/og/generate.server.ts

@@ -31,19 +31,21 @@ export async function generateOgPng(
   const assets = loadOgAssets()
   const accentColor = getAccentColor(library.id)
   const libraryName = library.name
+  const pitch = clampText(library.tagline ?? '', MAX_DESCRIPTION_LENGTH)
   const docTitle = input.title?.trim()
     ? clampText(input.title.trim(), MAX_TITLE_LENGTH)
     : undefined
-  const rawDescription =
-    input.description?.trim() || library.tagline || library.description || ''
-  const description = clampText(rawDescription, MAX_DESCRIPTION_LENGTH)
+  const description = input.description?.trim()
+    ? clampText(input.description.trim(), MAX_DESCRIPTION_LENGTH)
+    : undefined
 
   const tree = buildOgTree({
     libraryName,
     accentColor,
     islandDataUrl: assets.islandDataUrl,
-    description,
+    pitch,
     docTitle,
+    description,
   })
 
   const svg = await satori(tree, {

src/server/og/template.tsx

@@ -4,8 +4,9 @@ type TemplateProps = {
   libraryName: string
   accentColor: string
   islandDataUrl: string
-  description: string
+  pitch: string
   docTitle?: string
+  description?: string
 }
 
 const WIDTH = 1200
@@ -72,7 +73,7 @@ export function buildOgTree(props: TemplateProps): ReactElement {
           style={{
             display: 'flex',
             flexDirection: 'column',
-            marginBottom: 24,
+            marginBottom: 22,
             lineHeight: 0.95,
             fontWeight: 800,
             letterSpacing: '-0.02em',
@@ -85,30 +86,45 @@ export function buildOgTree(props: TemplateProps): ReactElement {
             </span>
           ) : null}
         </div>
+        {props.pitch ? (
+          <div
+            style={{
+              fontSize: 28,
+              fontWeight: 500,
+              lineHeight: 1.3,
+              color: props.accentColor,
+              marginBottom: props.docTitle || props.description ? 22 : 0,
+            }}
+          >
+            {props.pitch}
+          </div>
+        ) : null}
         {props.docTitle ? (
           <div
             style={{
               fontSize: 44,
               fontWeight: 800,
               lineHeight: 1.05,
               letterSpacing: '-0.015em',
-              marginBottom: 16,
+              marginBottom: 14,
               color: props.accentColor,
             }}
           >
             {props.docTitle}
           </div>
         ) : null}
-        <div
-          style={{
-            fontSize: 26,
-            lineHeight: 1.3,
-            fontWeight: 700,
-            color: props.accentColor,
-          }}
-        >
-          {props.description}
-        </div>
+        {props.description ? (
+          <div
+            style={{
+              fontSize: 22,
+              lineHeight: 1.3,
+              fontWeight: 500,
+              color: props.accentColor,
+            }}
+          >
+            {props.description}
+          </div>
+        ) : null}
       </div>
     </div>
   )