@mintlify/og 0.0.16 → 0.0.18

package/dist/layouts/index.d.ts

@@ -1,3 +1,8 @@
-import type { OgLayout } from '../types.js';
-import type { OgLayoutComponent } from './types.js';
-export declare const OG_LAYOUTS: Record<OgLayout, OgLayoutComponent>;
+import type { OgEyebrowStyle } from '../types.js';
+import type { OgPresetName } from './types.js';
+export declare const OG_LAYOUTS: {
+    legacy: ({ content, theme, logo, fontFamily }: import("./types.js").OgLayoutProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const PRESET_EYEBROW_STYLES: Record<OgPresetName, OgEyebrowStyle>;
+export { LegacyLayout } from './legacy.js';
+export { PresetLayout } from './preset.js';

package/dist/layouts/index.js

@@ -1,4 +1,9 @@
-import { ClassicLayout } from './classic.js';
-export const OG_LAYOUTS = {
-    classic: ClassicLayout,
+import { LegacyLayout } from './legacy.js';
+export const OG_LAYOUTS = { legacy: LegacyLayout };
+export const PRESET_EYEBROW_STYLES = {
+    classic: 'bar',
+    headline: 'pill',
+    minimal: 'plain',
 };
+export { LegacyLayout } from './legacy.js';
+export { PresetLayout } from './preset.js';

package/dist/layouts/legacy.d.ts

@@ -0,0 +1,2 @@
+import type { OgLayoutProps } from './types.js';
+export declare const LegacyLayout: ({ content, theme, logo, fontFamily }: OgLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/{classic.js → legacy.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DEFAULT_FONT_FAMILY, LOGO_HEIGHT } from '../constants.js';
-const FALLBACK_FONT_STACK = 'Inter var, sans-serif';
+import { LOGO_HEIGHT } from '../constants.js';
+import { getFontStack } from './font-stack.js';
 const TEXT_MAX_WIDTH = '1000px';
 const DESCRIPTION_WIDTH = '750px';
 const MAX_TEXT_LINES = 2;
@@ -60,18 +60,13 @@ const styles = {
         lineHeight: 1.625,
     },
 };
-const getFontStack = (fontFamily) => {
-    if (fontFamily === DEFAULT_FONT_FAMILY)
-        return FALLBACK_FONT_STACK;
-    return `${fontFamily}, ${FALLBACK_FONT_STACK}`;
-};
 const getBackgroundStyle = (background) => {
     if (background.type === 'image') {
         return { backgroundImage: `url(${background.url})`, backgroundSize: '100% 100%' };
     }
     return { backgroundImage: background.css };
 };
-export const ClassicLayout = ({ content, theme, logo, fontFamily }) => {
+export const LegacyLayout = ({ content, theme, logo, fontFamily }) => {
     const { eyebrow, title, description } = content;
     const textColors = TEXT_COLORS[theme.appearance];
     const eyebrowColor = theme.appearance === 'light' ? theme.primaryColor : theme.lightColor;

package/dist/layouts/preset.d.ts

@@ -0,0 +1,2 @@
+import type { OgPresetLayoutProps } from './types.js';
+export declare const PresetLayout: ({ preset, content, palette, backgroundImageUrl, eyebrowStyle, logo, fontFamily, fitText, }: OgPresetLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layouts/preset.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MONO_FONT_FAMILY, OG_HEIGHT, OG_WIDTH } from '../constants.js';
+import { toRgba } from '../inputs/theme.js';
+import { getFontStack } from './font-stack.js';
+const PRESET_SETTINGS = {
+    classic: {
+        align: 'start',
+        contentLeft: 89.649,
+        contentTop: 264,
+        eyebrowGap: 22.741,
+        textGap: 32,
+        titleSize: 77.868,
+        titleWidth: 951.652,
+        descriptionWidth: 716,
+        eyebrowSize: 25.17,
+        eyebrowLineHeight: 37.755,
+        logo: 'top-left',
+        frame: true,
+        panel: false,
+        textLines: 3,
+    },
+    headline: {
+        align: 'start',
+        contentLeft: 106,
+        contentTop: 88.117,
+        eyebrowGap: 52,
+        textGap: 32,
+        titleSize: 77.868,
+        titleWidth: 716,
+        descriptionWidth: 716,
+        eyebrowSize: 25.17,
+        eyebrowLineHeight: 37.755,
+        logo: 'bottom-right',
+        frame: false,
+        panel: false,
+        textLines: 4,
+    },
+    minimal: {
+        align: 'center',
+        contentLeft: 0,
+        contentTop: 81.032,
+        eyebrowGap: 52,
+        textGap: 28,
+        titleSize: 70,
+        titleWidth: 836,
+        descriptionWidth: 637.886,
+        eyebrowSize: 29.155,
+        eyebrowLineHeight: 43.732,
+        logo: 'bottom-center',
+        frame: false,
+        panel: true,
+        textLines: 3,
+    },
+};
+const BRAND_GLOW = {
+    classic: {
+        light: {
+            angle: 200,
+            stops: [
+                [0.3, 0],
+                [0.14, 22],
+                [0, 58],
+            ],
+        },
+        dark: {
+            angle: 192,
+            stops: [
+                [0.48, 0],
+                [0.16, 22],
+                [0, 48],
+            ],
+        },
+    },
+    headline: {
+        light: {
+            angle: 351,
+            stops: [
+                [0.3, 0],
+                [0.15, 22],
+                [0, 65],
+            ],
+        },
+        dark: {
+            angle: 350,
+            stops: [
+                [0.5, 0],
+                [0.17, 22],
+                [0, 50],
+            ],
+        },
+    },
+    minimal: {
+        light: {
+            angle: 357,
+            stops: [
+                [0.32, 0],
+                [0.16, 22],
+                [0, 70],
+            ],
+        },
+        dark: {
+            angle: 352,
+            stops: [
+                [0.52, 0],
+                [0.17, 22],
+                [0, 50],
+            ],
+        },
+    },
+};
+const getGlowGradient = (preset, palette) => {
+    if (!palette.glow)
+        return undefined;
+    const { color, appearance } = palette.glow;
+    const { angle, stops } = BRAND_GLOW[preset][appearance];
+    const colorStops = stops.map(([alpha, position]) => `${toRgba(color, alpha)} ${position}%`);
+    return `linear-gradient(${angle}deg, ${colorStops.join(', ')})`;
+};
+const FRAME = { left: 62.938, width: 1074.12, dividers: [231.482, 565.189] };
+const PANEL = { left: 89.386, top: 435.728, width: 1021.23, radius: 48 };
+const LOGO_BOX = {
+    height: 56,
+    topLeft: { left: 89.649, top: 82.788 },
+    bottomRight: { bottom: 80.924, right: 86 },
+    bottomCenter: { bottom: 56.924 },
+};
+const BAR = { border: 2, padding: 25.229 };
+const PILL = { paddingBlock: 5.5, paddingInline: 15 };
+const TRACKING = -0.02;
+const DESCRIPTION = { size: 33.288, lineHeight: 43.274 };
+const MAX_TEXT_LINES = 2;
+const tracking = (size) => `${size * TRACKING}px`;
+const getLogoBoxStyle = (placement) => {
+    const box = {
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        height: `${LOGO_BOX.height}px`,
+    };
+    if (placement === 'top-left') {
+        return Object.assign(Object.assign({}, box), { left: `${LOGO_BOX.topLeft.left}px`, top: `${LOGO_BOX.topLeft.top}px` });
+    }
+    if (placement === 'bottom-right') {
+        return Object.assign(Object.assign({}, box), { right: `${LOGO_BOX.bottomRight.right}px`, bottom: `${LOGO_BOX.bottomRight.bottom}px` });
+    }
+    return Object.assign(Object.assign({}, box), { left: 0, width: '100%', justifyContent: 'center', bottom: `${LOGO_BOX.bottomCenter.bottom}px` });
+};
+const TextLines = ({ lines, box, lineHeight, align, style, }) => (_jsx("div", { style: Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', alignItems: align === 'center' ? 'center' : 'flex-start', width: `${box.width}px`, fontSize: `${box.fontSize}px`, fontWeight: box.fontWeight, lineHeight: `${lineHeight}px`, letterSpacing: `${box.letterSpacing}px` }), children: lines.map((line, index) => (_jsx("span", { style: { whiteSpace: 'nowrap' }, children: line }, index))) }));
+const Logo = ({ logo }) => (_jsx("div", { style: {
+        position: 'relative',
+        display: 'flex',
+        width: `${logo.width}px`,
+        height: `${logo.height}px`,
+        overflow: 'hidden',
+    }, children: _jsx("img", { src: logo.src, alt: "", width: logo.image.width, height: logo.image.height, style: { position: 'absolute', left: `${logo.image.left}px`, top: `${logo.image.top}px` } }) }));
+const Eyebrow = ({ text, style, palette, settings, }) => {
+    const textStyle = {
+        fontFamily: MONO_FONT_FAMILY,
+        fontSize: `${settings.eyebrowSize}px`,
+        lineHeight: `${settings.eyebrowLineHeight}px`,
+        letterSpacing: tracking(settings.eyebrowSize),
+        textTransform: 'uppercase',
+        whiteSpace: 'nowrap',
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: `${settings.titleWidth}px`,
+    };
+    if (style === 'pill') {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: `${PILL.paddingBlock}px ${PILL.paddingInline}px`,
+                backgroundColor: palette.badge,
+            }, children: _jsx("span", { style: Object.assign(Object.assign({}, textStyle), { color: palette.badgeText }), children: text }) }));
+    }
+    if (style === 'bar') {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                marginLeft: `${-(BAR.border + BAR.padding)}px`,
+                paddingLeft: `${BAR.padding}px`,
+                borderLeft: `${BAR.border}px solid ${palette.eyebrow}`,
+            }, children: _jsx("span", { style: Object.assign(Object.assign({}, textStyle), { color: palette.eyebrow }), children: text }) }));
+    }
+    return _jsx("span", { style: Object.assign(Object.assign({}, textStyle), { color: palette.eyebrow }), children: text });
+};
+export const PresetLayout = ({ preset, content, palette, backgroundImageUrl, eyebrowStyle, logo, fontFamily, fitText, }) => {
+    const settings = PRESET_SETTINGS[preset];
+    const { eyebrow, title, description } = content;
+    const isCentered = settings.align === 'center';
+    const titleBox = {
+        fontSize: settings.titleSize,
+        fontWeight: 500,
+        letterSpacing: settings.titleSize * TRACKING,
+        width: settings.titleWidth,
+        maxLines: MAX_TEXT_LINES,
+    };
+    const titleLines = title ? fitText(title, titleBox) : [];
+    const descriptionBox = {
+        fontSize: DESCRIPTION.size,
+        fontWeight: 400,
+        letterSpacing: DESCRIPTION.size * TRACKING,
+        width: settings.descriptionWidth,
+        maxLines: Math.min(MAX_TEXT_LINES, settings.textLines - titleLines.length),
+    };
+    const descriptionLines = description ? fitText(description, descriptionBox) : [];
+    const glowGradient = getGlowGradient(preset, palette);
+    return (_jsxs("div", { style: Object.assign(Object.assign({ position: 'relative', display: 'flex', width: `${OG_WIDTH}px`, height: `${OG_HEIGHT}px`, backgroundColor: palette.background }, (backgroundImageUrl
+            ? { backgroundImage: `url(${backgroundImageUrl})`, backgroundSize: '100% 100%' }
+            : glowGradient && { backgroundImage: glowGradient })), { fontFamily: getFontStack(fontFamily) }), children: [settings.frame && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: `${FRAME.left}px`,
+                    width: `${FRAME.width}px`,
+                    height: `${OG_HEIGHT}px`,
+                    display: 'flex',
+                    borderLeft: `1px solid ${palette.line}`,
+                    borderRight: `1px solid ${palette.line}`,
+                }, children: FRAME.dividers.map((top) => (_jsx("div", { style: {
+                        position: 'absolute',
+                        left: 0,
+                        top: `${top}px`,
+                        width: '100%',
+                        height: '1px',
+                        backgroundColor: palette.line,
+                    } }, top))) })), settings.panel && (_jsx("div", { style: Object.assign({ position: 'absolute', left: `${PANEL.left}px`, top: `${PANEL.top}px`, width: `${PANEL.width}px`, height: `${OG_HEIGHT - PANEL.top}px`, backgroundColor: palette.panel, borderTopLeftRadius: `${PANEL.radius}px`, borderTopRightRadius: `${PANEL.radius}px` }, (palette.panelBorder && {
+                    borderTop: `1px solid ${palette.panelBorder}`,
+                    borderLeft: `1px solid ${palette.panelBorder}`,
+                    borderRight: `1px solid ${palette.panelBorder}`,
+                })) })), logo && (_jsx("div", { style: getLogoBoxStyle(settings.logo), children: _jsx(Logo, { logo: logo }) })), _jsxs("div", { style: Object.assign(Object.assign({ position: 'absolute', top: `${settings.contentTop}px`, left: `${settings.contentLeft}px` }, (isCentered && { width: `${OG_WIDTH}px` })), { display: 'flex', flexDirection: 'column', alignItems: isCentered ? 'center' : 'flex-start' }), children: [eyebrow && (_jsx(Eyebrow, { text: eyebrow, style: eyebrowStyle, palette: palette, settings: settings })), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: isCentered ? 'center' : 'flex-start',
+                            marginTop: eyebrow ? `${settings.eyebrowGap}px` : 0,
+                        }, children: [titleLines.length > 0 && (_jsx(TextLines, { lines: titleLines, box: titleBox, lineHeight: settings.titleSize, align: settings.align, style: { color: palette.title } })), descriptionLines.length > 0 && (_jsx(TextLines, { lines: descriptionLines, box: descriptionBox, lineHeight: DESCRIPTION.lineHeight, align: settings.align, style: {
+                                    color: palette.description,
+                                    marginTop: titleLines.length > 0 ? `${settings.textGap}px` : 0,
+                                } }))] })] })] }));
+};

package/dist/layouts/types.d.ts

@@ -1,7 +1,10 @@
 import type { ReactElement } from 'react';
 import type { OgCardContent } from '../inputs/content.js';
-import type { OgLogo } from '../inputs/image.js';
+import type { OgLogo, OgPresetLogo } from '../inputs/image.js';
+import type { OgPalette } from '../inputs/palette.js';
+import type { OgTextFitter } from '../inputs/text-fit.js';
 import type { OgTheme } from '../inputs/theme.js';
+import type { OgEyebrowStyle, OgPreset } from '../types.js';
 export type OgLayoutProps = {
     content: OgCardContent;
     theme: OgTheme;
@@ -9,3 +12,14 @@ export type OgLayoutProps = {
     fontFamily: string;
 };
 export type OgLayoutComponent = (props: OgLayoutProps) => ReactElement;
+export type OgPresetName = Exclude<OgPreset, 'legacy'>;
+export type OgPresetLayoutProps = {
+    preset: OgPresetName;
+    content: OgCardContent;
+    palette: OgPalette;
+    backgroundImageUrl: string | undefined;
+    eyebrowStyle: OgEyebrowStyle;
+    logo: OgPresetLogo | null;
+    fontFamily: string;
+    fitText: OgTextFitter;
+};

package/dist/render.js

@@ -8,36 +8,52 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { initWasm, Resvg } from '@resvg/resvg-wasm';
-import { readFile } from 'node:fs/promises';
-import { createRequire } from 'node:module';
+import { Resvg } from '@resvg/resvg-wasm';
 import satori from 'satori';
-import { DEFAULT_LAYOUT, OG_HEIGHT, OG_WIDTH } from './constants.js';
+import { OG_HEIGHT, OG_WIDTH } from './constants.js';
 import { buildOgCardContent } from './inputs/content.js';
-import { loadDefaultFont } from './inputs/fonts.js';
-import { buildOgLogo, toDataUri } from './inputs/image.js';
+import { loadDefaultFont, loadMonoFont } from './inputs/fonts.js';
+import { buildOgLogo, buildPresetLogo, toDataUri } from './inputs/image.js';
+import { resolveOgPalette } from './inputs/palette.js';
+import { initResvg } from './inputs/resvg.js';
+import { createTextFitter } from './inputs/text-fit.js';
 import { resolveOgTheme } from './inputs/theme.js';
-import { OG_LAYOUTS } from './layouts/index.js';
-const require = createRequire(import.meta.url);
-let resvgReady;
-const initResvg = () => {
-    resvgReady !== null && resvgReady !== void 0 ? resvgReady : (resvgReady = initWasm(readFile(require.resolve('@resvg/resvg-wasm/index_bg.wasm'))).catch((error) => {
-        resvgReady = undefined;
-        throw error;
-    }));
-    return resvgReady;
-};
+import { LegacyLayout, PRESET_EYEBROW_STYLES, PresetLayout } from './layouts/index.js';
 const toSatoriFonts = ({ family, faces }) => faces.map(({ data, weight }) => ({ name: family, data, weight, style: 'normal' }));
+const renderCardElement = (input, font, defaultFont, presetLogo) => {
+    var _a, _b;
+    const fontFamily = font.family;
+    const content = buildOgCardContent(input);
+    const preset = (_a = input.preset) !== null && _a !== void 0 ? _a : 'legacy';
+    const backgroundImageUrl = input.background ? toDataUri(input.background) : undefined;
+    if (preset === 'legacy') {
+        return (_jsx(LegacyLayout, { content: content, theme: resolveOgTheme(input.theme, backgroundImageUrl), logo: input.logo ? buildOgLogo(input.logo) : null, fontFamily: fontFamily }));
+    }
+    return (_jsx(PresetLayout, { preset: preset, content: content, palette: resolveOgPalette(input.theme), backgroundImageUrl: backgroundImageUrl, eyebrowStyle: (_b = input.eyebrowStyle) !== null && _b !== void 0 ? _b : PRESET_EYEBROW_STYLES[preset], logo: presetLogo, fontFamily: fontFamily, fitText: createTextFitter([font, defaultFont]) }));
+};
 export function renderOgCardSvg(input) {
     return __awaiter(this, void 0, void 0, function* () {
-        var _a, _b;
-        const defaultFont = yield loadDefaultFont();
-        const primaryFont = (_a = input.font) !== null && _a !== void 0 ? _a : defaultFont;
-        const fonts = input.font ? [input.font, defaultFont] : [defaultFont];
-        const Layout = OG_LAYOUTS[(_b = input.layout) !== null && _b !== void 0 ? _b : DEFAULT_LAYOUT];
-        const backgroundImageUrl = input.background ? toDataUri(input.background) : undefined;
-        const logo = input.logo ? buildOgLogo(input.logo) : null;
-        return satori(_jsx(Layout, { content: buildOgCardContent(input), theme: resolveOgTheme(input.theme, backgroundImageUrl), logo: logo, fontFamily: primaryFont.family }), { width: OG_WIDTH, height: OG_HEIGHT, fonts: fonts.flatMap(toSatoriFonts) });
+        var _a;
+        const isPreset = ((_a = input.preset) !== null && _a !== void 0 ? _a : 'legacy') !== 'legacy';
+        const [defaultFont, monoFont] = yield Promise.all([
+            loadDefaultFont(),
+            isPreset ? loadMonoFont() : null,
+            isPreset && input.logo ? initResvg() : null,
+        ]);
+        const presetLogo = isPreset && input.logo ? buildPresetLogo(input.logo) : null;
+        const render = (font) => satori(renderCardElement(input, font !== null && font !== void 0 ? font : defaultFont, defaultFont, presetLogo), {
+            width: OG_WIDTH,
+            height: OG_HEIGHT,
+            fonts: [font, defaultFont, monoFont].filter((face) => face != null).flatMap(toSatoriFonts),
+        });
+        try {
+            return yield render(input.font);
+        }
+        catch (error) {
+            if (!input.font)
+                throw error;
+            return render(null);
+        }
     });
 }
 export function renderOgCardPng(input) {