fix(og): put the landing model and integration cards on the brandbook template (#6913)

* fix(og): put the landing model and integration cards on the brandbook template

The five models/integrations cards were the last ones still rendering the
retired dark card with the green square-icon logo. They now share the cover
renderer the library, docs, and shared-file cards use, which retires
og-utils and the assets only it referenced.

Captions wrap to two lines so a catalog description survives the move; the
eyebrow, pill row, and domain label have no slot in the reference template
and are dropped, with the counts they carried folded into the two index
captions instead.

* fix(og): drop the dead hard-space helper and restore the unknown-context copy

withHardSpaces lost its last caller when captions moved onto wrapLines, which
packs the non-breaking space inline; its rationale moves to wrapLines with it.

A missing context window rendered as a bare "context window", reading as a
field label mid-sentence. formatTokenCount already returns "Unknown" for a
null value, so the ternary was both redundant and wrong.

Author: waleedlatif1

apps/sim/app/(landing)/components/og-sim-logo/index.ts

@@ -1,24 +1,15 @@
 import integrationsJson from '@sim/deployment-config/integrations.json'
 import { notFound } from 'next/navigation'
-import type { AuthType, Integration } from '@/lib/integrations/types'
-import { createLandingOgImage } from '@/app/(landing)/og-utils'
+import type { Integration } from '@/lib/integrations/types'
+import { COVER_OG_SIZE, createCoverOgImage } from '@/lib/og/cover-image'
 
 export const contentType = 'image/png'
-export const size = {
-  width: 1200,
-  height: 630,
-}
+export const size = COVER_OG_SIZE
 
 /** Raw catalog JSON, not the barrel - keeps `@/blocks/registry` out of the OG bundle. */
 const integrations = integrationsJson.integrations as readonly Integration[]
 const bySlug = new Map(integrations.map((i) => [i.slug, i]))
 
-const AUTH_LABEL: Record<AuthType, string> = {
-  oauth: 'One-click OAuth',
-  'api-key': 'API key auth',
-  none: 'No auth required',
-}
-
 /**
  * The sibling page.tsx sets `dynamicParams = false`, a segment-level
  * restriction that also blocks this metadata route from rendering any
@@ -38,22 +29,8 @@ export default async function Image({ params }: { params: Promise<{ slug: string
     notFound()
   }
 
-  const pills = [
-    integration.operationCount > 0
-      ? `${integration.operationCount} tool${integration.operationCount === 1 ? '' : 's'}`
-      : null,
-    integration.triggerCount > 0
-      ? `${integration.triggerCount} real-time trigger${integration.triggerCount === 1 ? '' : 's'}`
-      : null,
-    AUTH_LABEL[integration.authType],
-    'Free to start',
-  ].filter((pill): pill is string => pill !== null)
-
-  return createLandingOgImage({
-    eyebrow: 'Sim integration',
+  return createCoverOgImage({
     title: `${integration.name} Integration`,
     subtitle: integration.description,
-    pills,
-    domainLabel: `sim.ai/integrations/${slug}`,
   })
 }

apps/sim/app/(landing)/components/og-sim-logo/og-sim-logo.tsx

@@ -1,30 +1,17 @@
 import integrationsJson from '@sim/deployment-config/integrations.json'
 import type { Integration } from '@/lib/integrations/types'
-import { createLandingOgImage } from '@/app/(landing)/og-utils'
+import { COVER_OG_SIZE, createCoverOgImage } from '@/lib/og/cover-image'
 
 export const contentType = 'image/png'
-export const size = {
-  width: 1200,
-  height: 630,
-}
+export const size = COVER_OG_SIZE
 
 /** Raw catalog JSON, not the barrel - keeps `@/blocks/registry` out of the OG bundle. */
 const integrations = integrationsJson.integrations as readonly Integration[]
 const TOTAL_TOOL_COUNT = integrations.reduce((sum, i) => sum + i.operationCount, 0)
-const OAUTH_COUNT = integrations.filter((i) => i.authType === 'oauth').length
-const TRIGGER_INTEGRATION_COUNT = integrations.filter((i) => i.triggerCount > 0).length
 
 export default async function Image() {
-  return createLandingOgImage({
-    eyebrow: 'Sim integrations directory',
+  return createCoverOgImage({
     title: 'Integrations',
-    subtitle: `Connect ${integrations.length} apps and services to AI agents in Sim's workflow builder, visually, conversationally, or with code.`,
-    pills: [
-      `${integrations.length} integrations`,
-      `${TOTAL_TOOL_COUNT}+ tools`,
-      `${OAUTH_COUNT} OAuth apps`,
-      `${TRIGGER_INTEGRATION_COUNT} with real-time triggers`,
-    ],
-    domainLabel: 'sim.ai/integrations',
+    subtitle: `Connect ${integrations.length} apps and services and ${TOTAL_TOOL_COUNT}+ tools to AI agents in Sim — visually, conversationally, or with code.`,
   })
 }

apps/sim/app/(landing)/integrations/(shell)/[slug]/opengraph-image.tsx

@@ -1,18 +1,15 @@
 import { notFound } from 'next/navigation'
+import { COVER_OG_SIZE, createCoverOgImage } from '@/lib/og/cover-image'
 import {
   ALL_CATALOG_MODELS,
   formatPrice,
   formatTokenCount,
   getModelBySlug,
   getProviderBySlug,
 } from '@/app/(landing)/models/utils'
-import { createLandingOgImage } from '@/app/(landing)/og-utils'
 
 export const contentType = 'image/png'
-export const size = {
-  width: 1200,
-  height: 630,
-}
+export const size = COVER_OG_SIZE
 
 /**
  * The sibling page.tsx sets `dynamicParams = false`, a segment-level
@@ -41,16 +38,8 @@ export default async function Image({
     notFound()
   }
 
-  return createLandingOgImage({
-    eyebrow: `${provider.name} model`,
+  return createCoverOgImage({
     title: model.displayName,
-    subtitle: `${provider.name} pricing, context window, and feature support generated from Sim's model registry.`,
-    pills: [
-      `Input ${formatPrice(model.pricing.input)}/1M`,
-      `Output ${formatPrice(model.pricing.output)}/1M`,
-      model.contextWindow ? `${formatTokenCount(model.contextWindow)} context` : 'Unknown context',
-      model.capabilityTags[0] ?? 'Capabilities tracked',
-    ],
-    domainLabel: `sim.ai${model.href}`,
+    subtitle: `${provider.name} · ${formatPrice(model.pricing.input)}/1M in, ${formatPrice(model.pricing.output)}/1M out, ${formatTokenCount(model.contextWindow)} context — from Sim's model registry.`,
   })
 }

apps/sim/app/(landing)/integrations/(shell)/opengraph-image.tsx

@@ -1,19 +1,9 @@
 import { notFound } from 'next/navigation'
-import {
-  formatPrice,
-  formatTokenCount,
-  getCheapestProviderModel,
-  getLargestContextProviderModel,
-  getProviderBySlug,
-  MODEL_PROVIDERS_WITH_CATALOGS,
-} from '@/app/(landing)/models/utils'
-import { createLandingOgImage } from '@/app/(landing)/og-utils'
+import { COVER_OG_SIZE, createCoverOgImage } from '@/lib/og/cover-image'
+import { getProviderBySlug, MODEL_PROVIDERS_WITH_CATALOGS } from '@/app/(landing)/models/utils'
 
 export const contentType = 'image/png'
-export const size = {
-  width: 1200,
-  height: 630,
-}
+export const size = COVER_OG_SIZE
 
 /**
  * The sibling page.tsx sets `dynamicParams = false`, a segment-level
@@ -36,21 +26,8 @@ export default async function Image({ params }: { params: Promise<{ provider: st
     notFound()
   }
 
-  const cheapestModel = getCheapestProviderModel(provider)
-  const largestContextModel = getLargestContextProviderModel(provider)
-
-  return createLandingOgImage({
-    eyebrow: `${provider.name} on Sim`,
+  return createCoverOgImage({
     title: `${provider.name} models`,
-    subtitle: `Browse ${provider.modelCount} tracked ${provider.name} models with pricing, context windows, default model selection, and model capability coverage.`,
-    pills: [
-      `${provider.modelCount} tracked`,
-      provider.defaultModelDisplayName || 'Dynamic default',
-      cheapestModel ? `From ${formatPrice(cheapestModel.pricing.input)}/1M` : 'Pricing tracked',
-      largestContextModel?.contextWindow
-        ? `${formatTokenCount(largestContextModel.contextWindow)} context`
-        : 'Context tracked',
-    ],
-    domainLabel: `sim.ai${provider.href}`,
+    subtitle: `Browse ${provider.modelCount} tracked ${provider.name} models with pricing, context windows, default model selection, and capability coverage.`,
   })
 }

apps/sim/app/(landing)/models/(shell)/[provider]/[model]/opengraph-image.tsx

@@ -1,28 +1,12 @@
-import {
-  formatTokenCount,
-  MAX_CONTEXT_WINDOW,
-  TOTAL_MODEL_PROVIDERS,
-  TOTAL_MODELS,
-} from '@/app/(landing)/models/utils'
-import { createLandingOgImage } from '@/app/(landing)/og-utils'
+import { COVER_OG_SIZE, createCoverOgImage } from '@/lib/og/cover-image'
+import { TOTAL_MODEL_PROVIDERS, TOTAL_MODELS } from '@/app/(landing)/models/utils'
 
 export const contentType = 'image/png'
-export const size = {
-  width: 1200,
-  height: 630,
-}
+export const size = COVER_OG_SIZE
 
 export default async function Image() {
-  return createLandingOgImage({
-    eyebrow: 'Sim model directory',
+  return createCoverOgImage({
     title: 'AI Models Directory',
-    subtitle:
-      'Browse tracked AI models with pricing, context windows, and workflow-ready capability details.',
-    pills: [
-      `${TOTAL_MODELS} models`,
-      `${TOTAL_MODEL_PROVIDERS} providers`,
-      `${formatTokenCount(MAX_CONTEXT_WINDOW)} max context`,
-    ],
-    domainLabel: 'sim.ai/models',
+    subtitle: `Browse ${TOTAL_MODELS} models from ${TOTAL_MODEL_PROVIDERS} providers with pricing, context windows, and workflow-ready capability details.`,
   })
 }

apps/sim/app/(landing)/models/(shell)/[provider]/opengraph-image.tsx

@@ -589,9 +589,6 @@ export const ALL_CATALOG_MODELS = MODEL_PROVIDERS_WITH_CATALOGS.flatMap(
 )
 export const TOTAL_MODEL_PROVIDERS = MODEL_CATALOG_PROVIDERS.length
 export const TOTAL_MODELS = ALL_CATALOG_MODELS.length
-export const MAX_CONTEXT_WINDOW = Math.max(
-  ...ALL_CATALOG_MODELS.map((model) => model.contextWindow ?? 0)
-)
 export const TOP_MODEL_PROVIDERS = MODEL_PROVIDERS_WITH_CATALOGS.slice(0, 8).map(
   (provider) => provider.name
 )