diff --git a/apps/docs/app/[lang]/[[...slug]]/page.tsx b/apps/docs/app/[lang]/[[...slug]]/page.tsx
index 86539c52302..249d8d8a1ae 100644
--- a/apps/docs/app/[lang]/[[...slug]]/page.tsx
+++ b/apps/docs/app/[lang]/[[...slug]]/page.tsx
@@ -323,7 +323,7 @@ export async function generateMetadata(props: {
{
url: ogImageUrl,
width: 1200,
- height: 630,
+ height: 675,
alt: data.title,
},
],
diff --git a/apps/docs/app/[lang]/layout.tsx b/apps/docs/app/[lang]/layout.tsx
index 869919d2a41..f7dadc59afb 100644
--- a/apps/docs/app/[lang]/layout.tsx
+++ b/apps/docs/app/[lang]/layout.tsx
@@ -9,8 +9,9 @@ import {
SidebarItem,
SidebarSeparator,
} from '@/components/docs-layout/sidebar-components'
+import { Footer } from '@/components/footer/footer'
import { Navbar } from '@/components/navbar/navbar'
-import { SimLogoFull } from '@/components/ui/sim-logo'
+import { SimWordmark } from '@/components/ui/sim-logo'
import { i18n } from '@/lib/i18n'
import { serializeJsonLd } from '@/lib/json-ld'
import { source } from '@/lib/source'
@@ -101,7 +102,7 @@ export default async function Layout({ children, params }: LayoutProps) {
,
+ title: ,
}}
sidebar={{
tabs: false,
@@ -121,6 +122,7 @@ export default async function Layout({ children, params }: LayoutProps) {
>
{children}
+
diff --git a/apps/docs/app/api/og/route.tsx b/apps/docs/app/api/og/route.tsx
index 18e021018b5..ec58754d9b3 100644
--- a/apps/docs/app/api/og/route.tsx
+++ b/apps/docs/app/api/og/route.tsx
@@ -5,37 +5,39 @@ import type { NextRequest } from 'next/server'
export const runtime = 'edge'
const TITLE_FONT_SIZE = {
- large: 64,
- medium: 56,
- small: 48,
+ large: 105,
+ medium: 91,
+ small: 81,
} as const
+/** Average glyph width as a fraction of font size, for this weight/family — used to pack words into lines. */
+const AVG_CHAR_WIDTH_EM = 0.46
+const TITLE_BOX_WIDTH = 1020
const FONT_CACHE_REVALIDATE_SECONDS = 60 * 60 * 24 * 30
+/** Measured off the reference cover template (`apps/sim/public/library/best-zapier-alternatives/cover.jpg`). */
+const INK_COLOR = '#525252'
const OG_CONTAINER_STYLE = {
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
- padding: '56px 64px',
- background: '#121212',
- fontFamily: 'Geist',
+ padding: '26px',
+ background: '#c3c3c3',
+ fontFamily: 'Season',
} satisfies CSSProperties
-const OG_TITLE_STYLE = {
- fontWeight: 500,
- color: '#fafafa',
- lineHeight: 1.2,
- letterSpacing: '-0.02em',
-} satisfies CSSProperties
-const OG_FOOTER_STYLE = {
+const OG_HEADER_STYLE = {
display: 'flex',
justifyContent: 'space-between',
- alignItems: 'center',
+ alignItems: 'flex-start',
width: '100%',
} satisfies CSSProperties
-const OG_DOMAIN_STYLE = {
- fontSize: 24,
- fontWeight: 400,
- color: '#71717a',
+const OG_TITLE_STYLE = {
+ display: 'flex',
+ flexDirection: 'column',
+ fontWeight: 600,
+ color: INK_COLOR,
+ lineHeight: 1.15,
+ width: `${TITLE_BOX_WIDTH}px`,
} satisfies CSSProperties
function getTitleFontSize(title: string): number {
@@ -52,90 +54,131 @@ function getTitleStyle(title: string): CSSProperties {
}
/**
- * Loads a Google Font dynamically by fetching the CSS and extracting the font URL.
+ * Greedily packs words into lines that fit `TITLE_BOX_WIDTH` at `fontSize`,
+ * then joins each line with U+00A0 instead of a plain space. Satori
+ * (`next/og`'s renderer) has a text-measurement bug where the first plain
+ * space (U+0020) in a text node renders at roughly double width — a
+ * non-breaking space measures correctly and reads identically at this size,
+ * so it sidesteps the bug instead of fighting Satori's own line-wrapping
+ * (which is also disabled here — lines are pre-split, not auto-wrapped).
*/
-async function loadGoogleFont(font: string, weights: string, text: string): Promise