diff --git a/apps/og-generator/app/api/og/route.tsx b/apps/og-generator/app/api/og/route.tsx index d6a2eb5c1a8..a2910686ed6 100644 --- a/apps/og-generator/app/api/og/route.tsx +++ b/apps/og-generator/app/api/og/route.tsx @@ -31,6 +31,9 @@ const EYEBROW_PILL_WEIGHT = 500 as const const WORDMARK_HEIGHT_1X = 43 // Per-tile icon size for logo-grid's row of partner-logo tiles (1x design px). const LOGO_TILE_ICON_SIZE_1X = 64 +// icon-layout arrangement 0's own icon glyph size (bigger than the shared +// LOGO_TILE_ICON_SIZE_1X, to fill its larger 244.07px chip). +const GRID_ARRANGEMENT_ICON_GLYPH_SIZE_1X = 120 /** Scale (naturalW, naturalH) to fit within a boxSize square, preserving aspect ratio. */ function fitBox(naturalW: number, naturalH: number, boxSize: number): { width: number; height: number } { @@ -413,6 +416,25 @@ export async function GET(req: Request) { /> ) : null + // icon-layout arrangement 0: same icon, rendered at its own larger glyph + // size instead of LOGO_TILE_ICON_SIZE_1X's shared 64px. + const gridArrangementIconEl = + iconObj && iconObj.url ? ( + // eslint-disable-next-line @next/next/no-img-element + + ) : iconObj ? ( + // eslint-disable-next-line @next/next/no-img-element + + ) : null + const logoHeight = WORDMARK_HEIGHT_1X * s const logoEl = ( // eslint-disable-next-line @next/next/no-img-element @@ -476,6 +498,7 @@ export async function GET(req: Request) { halfThumbLogoEl, iconEl, boxedIconEl, + gridArrangementIconEl, hasIcon, showBrandLogo, eyebrowBlockHeight, diff --git a/apps/og-generator/lib/design/templates.tsx b/apps/og-generator/lib/design/templates.tsx index 99177e8318e..2ce0f584a5b 100644 --- a/apps/og-generator/lib/design/templates.tsx +++ b/apps/og-generator/lib/design/templates.tsx @@ -35,11 +35,13 @@ export interface TemplateParts { halfThumbLogoEl?: ReactNode | null /** Single icon pre-sized to `ICON_TILE_ICON_SIZE_1X` — icon-layout's icon inside its chip bounding box. */ boxedIconEl?: ReactNode | null + /** Same icon, pre-sized to `GRID_ARRANGEMENT_ICON_GLYPH_SIZE_1X` — icon-layout arrangement 0's larger chip. */ + gridArrangementIconEl?: ReactNode | null /** Whether to render the Supabase wordmark signature — logo-grid only, toggleable since it already shows partner marks. Defaults to true. */ showBrandLogo?: boolean /** Rendered height (px, pre-scaled) of the eyebrow pill + its gap above the headline, or 0 if no eyebrow — Announcement uses this to keep the headline from drifting too far down when an eyebrow is present. */ eyebrowBlockHeight?: number - /** Full-canvas background texture data URI (lib/design/og-backgrounds.ts), or null for a flat `bg` color — applied by rootBase() so any template can opt in. */ + /** Full-canvas background texture data URI (lib/design/og-backgrounds.ts), or null for a flat `bg` color — applied by backgroundPanel() so any template can opt in. */ backgroundImageUri?: string | null } @@ -95,15 +97,15 @@ function iconTile(p: TemplateParts, content: ReactNode): ReactElement { return iconTileAtScale(p.scaleFactor, content) } -function iconTileAtScale(scaleFactor: number, content: ReactNode): ReactElement { +function iconTileAtScale(scaleFactor: number, content: ReactNode, sizePx1x: number = ICON_TILE_SIZE_1X): ReactElement { return (
@@ -258,11 +264,12 @@ export const TEMPLATES: Template[] = [ // Icon renders inside the same dark chip bounding box Partner logos // uses, not bare — consistent icon treatment across both templates. const icon = p.hasIcon ? iconTile(p, p.boxedIconEl) : null - // The background panel is anchored to the right edge, which only - // lines up with where the icon actually sits in 0 (top-right) and 1 - // (center-right) — arrangement 2 (centered) and 3 (icon bottom-left) - // would have it cut through unrelated content, so they skip it. - const showBackgroundPanel = arrangement === 0 || arrangement === 1 + // Arrangement 0 (paired with the grid-background texture) uses its own + // larger icon chip, not the shared ICON_TILE_SIZE_1X. + const gridIcon = p.hasIcon + ? iconTileAtScale(p.scaleFactor, p.gridArrangementIconEl, GRID_ARRANGEMENT_ICON_TILE_SIZE_1X) + : null + // Full-bleed now, so it reads fine behind any arrangement. if (arrangement === 1) { // Headline left, icon right. return ( @@ -275,7 +282,7 @@ export const TEMPLATES: Template[] = [ gap: 56 * p.scaleFactor, }} > - {showBackgroundPanel && backgroundPanel(p)} + {backgroundPanel(p)} {p.textBlock} {icon}
@@ -293,6 +300,7 @@ export const TEMPLATES: Template[] = [ textAlign: 'center', }} > + {backgroundPanel(p)} {icon ?
{icon}
: null} {p.textBlock} @@ -309,6 +317,7 @@ export const TEMPLATES: Template[] = [ alignItems: 'flex-start', }} > + {backgroundPanel(p)} {p.textBlock} {icon} @@ -320,13 +329,32 @@ export const TEMPLATES: Template[] = [ style={{ ...rootBase(p), flexDirection: 'column', - justifyContent: p.hasIcon ? 'space-between' : 'flex-end', + // gridIcon is absolutely positioned (own fixed top/right offset, + // not part of this flex flow), so the headline always just + // anchors to the bottom regardless of whether an icon is set. + justifyContent: 'flex-end', alignItems: 'flex-start', }} > - {showBackgroundPanel && backgroundPanel(p)} - {icon ? ( -
{icon}
+ {backgroundPanel(p)} + {gridIcon ? ( +
+ {gridIcon} +
) : null} {p.textBlock} diff --git a/apps/og-generator/public/backgrounds/concentric-circles.png b/apps/og-generator/public/backgrounds/concentric-circles.png index 2f15367dba4..d9bfdd702db 100644 Binary files a/apps/og-generator/public/backgrounds/concentric-circles.png and b/apps/og-generator/public/backgrounds/concentric-circles.png differ diff --git a/apps/og-generator/public/backgrounds/graph-paper.png b/apps/og-generator/public/backgrounds/graph-paper.png index 2e8984f83f4..d27e45cf29c 100644 Binary files a/apps/og-generator/public/backgrounds/graph-paper.png and b/apps/og-generator/public/backgrounds/graph-paper.png differ diff --git a/apps/og-generator/public/backgrounds/grid-background.png b/apps/og-generator/public/backgrounds/grid-background.png index 1ad3c961b12..fe83fb2f32c 100644 Binary files a/apps/og-generator/public/backgrounds/grid-background.png and b/apps/og-generator/public/backgrounds/grid-background.png differ