@ewanc26/og 0.1.4 → 0.1.6

package/src/fonts.ts

@@ -1,73 +1,14 @@
 /**
  * @ewanc26/og fonts
  *
- * Font loading utilities. Bundles Inter font by default.
+ * Font loading utilities. Fonts are inlined as base64 at build time so this
+ * works in serverless environments (Vercel, Netlify, etc.) without any
+ * filesystem access to node_modules.
  */
 
-import { readFile } from 'node:fs/promises'
-import { existsSync } from 'node:fs'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { INTER_BOLD_B64, INTER_REGULAR_B64 } from './fonts-base64.js'
 import type { OgFontConfig } from './types.js'
 
-// Declare __dirname for CJS contexts (injected by bundlers)
-declare const __dirname: string | undefined
-
-// ─── Paths ────────────────────────────────────────────────────────────────────
-
-/**
- * Get the directory of the current module.
- * Works in both ESM and bundled contexts.
- */
-function getModuleDir(): string {
-	// ESM context
-	if (typeof import.meta !== 'undefined' && import.meta.url) {
-		return dirname(fileURLToPath(import.meta.url))
-	}
-	// Bundled CJS context - __dirname is injected by bundlers
-	if (typeof __dirname !== 'undefined') {
-		return __dirname
-	}
-	// Fallback
-	return resolve(process.cwd(), 'node_modules/@ewanc26/og/dist')
-}
-
-/**
- * Resolve the fonts directory relative to the installed package.
- * Tries multiple possible locations for serverless compatibility.
- */
-function getFontsDir(): string {
-	const candidates = [
-		// Standard: fonts next to dist
-		resolve(getModuleDir(), '../fonts'),
-		// Vercel serverless: fonts inside dist
-		resolve(getModuleDir(), 'fonts'),
-		// Fallback: node_modules path
-		resolve(process.cwd(), 'node_modules/@ewanc26/og/fonts'),
-	]
-
-	for (const dir of candidates) {
-		if (existsSync(dir)) {
-			return dir
-		}
-	}
-
-	// Return first candidate as fallback (will fail gracefully)
-	return candidates[0]
-}
-
-/**
- * Resolve bundled font paths. Uses getters to defer resolution until runtime.
- */
-export const BUNDLED_FONTS = {
-	get heading() {
-		return resolve(getFontsDir(), 'Inter-Bold.ttf')
-	},
-	get body() {
-		return resolve(getFontsDir(), 'Inter-Regular.ttf')
-	},
-} as const
-
 // ─── Font Loading ──────────────────────────────────────────────────────────────
 
 export interface LoadedFonts {
@@ -75,45 +16,37 @@ export interface LoadedFonts {
 	body: ArrayBuffer
 }
 
-/**
- * Load fonts from config, falling back to bundled fonts.
- * In serverless environments, falls back to fetching from upstream CDN.
- */
-export async function loadFonts(config?: OgFontConfig): Promise<LoadedFonts> {
-	const headingPath = config?.heading ?? BUNDLED_FONTS.heading
-	const bodyPath = config?.body ?? BUNDLED_FONTS.body
-
-	const [heading, body] = await Promise.all([
-		loadFontFile(headingPath),
-		loadFontFile(bodyPath),
-	])
-
-	return { heading, body }
+function base64ToArrayBuffer(b64: string): ArrayBuffer {
+	const buf = Buffer.from(b64, 'base64')
+	return buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength) as ArrayBuffer
 }
 
 /**
- * Load a font from file path.
- * Falls back to fetching from github raw if local file not found.
+ * Load fonts from config, falling back to the bundled Inter font.
+ * If custom paths are provided they are loaded from disk; otherwise the
+ * pre-inlined base64 data is used (safe in any serverless runtime).
  */
-async function loadFontFile(source: string): Promise<ArrayBuffer> {
-	try {
-		const buffer = await readFile(source)
-		return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength)
-	} catch (error) {
-		// In serverless, fonts might not be at expected path - fetch from CDN
-		const filename = source.split('/').pop()
-		const cdnUrl = `https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/${filename}`
-
-		try {
-			const response = await fetch(cdnUrl)
-			if (!response.ok) {
-				throw new Error(`CDN fetch failed: ${response.status}`)
-			}
-			return response.arrayBuffer()
-		} catch (cdnError) {
-			throw new Error(`Failed to load font ${filename} from both local path and CDN: ${cdnError}`)
+export async function loadFonts(config?: OgFontConfig): Promise<LoadedFonts> {
+	if (config?.heading || config?.body) {
+		const { readFile } = await import('node:fs/promises')
+		const [headingBuf, bodyBuf] = await Promise.all([
+			config.heading ? readFile(config.heading) : Buffer.from(INTER_BOLD_B64, 'base64'),
+			config.body    ? readFile(config.body)    : Buffer.from(INTER_REGULAR_B64, 'base64'),
+		])
+		return {
+			heading: headingBuf instanceof Buffer
+				? (headingBuf.buffer.slice(headingBuf.byteOffset, headingBuf.byteOffset + headingBuf.byteLength) as ArrayBuffer)
+				: headingBuf.buffer,
+			body: bodyBuf instanceof Buffer
+				? (bodyBuf.buffer.slice(bodyBuf.byteOffset, bodyBuf.byteOffset + bodyBuf.byteLength) as ArrayBuffer)
+				: bodyBuf.buffer,
 		}
 	}
+
+	return {
+		heading: base64ToArrayBuffer(INTER_BOLD_B64),
+		body:    base64ToArrayBuffer(INTER_REGULAR_B64),
+	}
 }
 
 // ─── Font Registration for Satori ─────────────────────────────────────────────
@@ -127,21 +60,10 @@ export type SatoriFontConfig = {
 
 /**
  * Create Satori-compatible font config from loaded fonts.
- * Uses Inter font family with weight 700 for headings and 400 for body.
  */
 export function createSatoriFonts(fonts: LoadedFonts): SatoriFontConfig[] {
 	return [
-		{
-			name: 'Inter',
-			data: fonts.heading,
-			weight: 700,
-			style: 'normal',
-		},
-		{
-			name: 'Inter',
-			data: fonts.body,
-			weight: 400,
-			style: 'normal',
-		},
+		{ name: 'Inter', data: fonts.heading, weight: 700, style: 'normal' },
+		{ name: 'Inter', data: fonts.body,    weight: 400, style: 'normal' },
 	]
 }

package/src/index.ts

@@ -41,7 +41,7 @@ export { defaultColors } from './types.js'
 export { generateNoiseDataUrl, generateCircleNoiseDataUrl } from './noise.js'
 
 // Fonts (for advanced customization)
-export { loadFonts, createSatoriFonts, BUNDLED_FONTS } from './fonts.js'
+export { loadFonts, createSatoriFonts } from './fonts.js'
 
 // Endpoint helpers
 export { createOgEndpoint } from './endpoint.js'

package/src/templates/blog.ts

@@ -10,6 +10,7 @@ export function blogTemplate({
 	description,
 	siteName,
 	colors,
+	noiseDataUrl,
 	width,
 	height,
 }: OgTemplateProps) {
@@ -17,6 +18,7 @@ export function blogTemplate({
 		type: 'div',
 		props: {
 			style: {
+				position: 'relative',
 				display: 'flex',
 				flexDirection: 'column',
 				alignItems: 'center',
@@ -26,51 +28,83 @@ export function blogTemplate({
 				backgroundColor: colors.background,
 			},
 			children: [
-				{
-					type: 'h1',
-					props: {
-						style: {
-							fontSize: 64,
-							fontWeight: 700,
-							color: colors.text,
-							letterSpacing: '-0.02em',
-							margin: 0,
-							textAlign: 'center',
-							lineHeight: 1.1,
-							maxWidth: 1000,
-						},
-						children: title,
-					},
-				},
-				description ? {
-					type: 'p',
+				noiseDataUrl ? {
+					type: 'img',
 					props: {
+						src: noiseDataUrl,
+						width,
+						height,
 						style: {
-							fontSize: 28,
-							fontWeight: 400,
-							color: colors.accent,
-							marginTop: 28,
-							marginBottom: 0,
-							textAlign: 'center',
-							lineHeight: 1.4,
-							maxWidth: 900,
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							width,
+							height,
 						},
-						children: description,
 					},
 				} : null,
 				{
-					type: 'p',
+					type: 'div',
 					props: {
 						style: {
-							fontSize: 24,
-							fontWeight: 400,
-							color: colors.accent,
-							marginTop: 56,
-							marginBottom: 0,
-							textAlign: 'center',
-							opacity: 0.7,
+							position: 'relative',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							justifyContent: 'center',
+							width,
+							height,
+							padding: '0 60px',
 						},
-						children: siteName,
+						children: [
+							{
+								type: 'h1',
+								props: {
+									style: {
+										fontSize: 64,
+										fontWeight: 700,
+										color: colors.text,
+										letterSpacing: '-0.02em',
+										margin: 0,
+										textAlign: 'center',
+										lineHeight: 1.1,
+										maxWidth: 1000,
+									},
+									children: title,
+								},
+							},
+							description ? {
+								type: 'p',
+								props: {
+									style: {
+										fontSize: 28,
+										fontWeight: 400,
+										color: colors.accent,
+										marginTop: 28,
+										marginBottom: 0,
+										textAlign: 'center',
+										lineHeight: 1.4,
+										maxWidth: 900,
+									},
+									children: description,
+								},
+							} : null,
+							{
+								type: 'p',
+								props: {
+									style: {
+										fontSize: 24,
+										fontWeight: 400,
+										color: colors.accent,
+										marginTop: 56,
+										marginBottom: 0,
+										textAlign: 'center',
+										opacity: 0.7,
+									},
+									children: siteName,
+								},
+							},
+						].filter(Boolean),
 					},
 				},
 			].filter(Boolean),

package/src/templates/default.ts

@@ -10,6 +10,7 @@ export function defaultTemplate({
 	description,
 	siteName,
 	colors,
+	noiseDataUrl,
 	width,
 	height,
 }: OgTemplateProps) {
@@ -17,6 +18,7 @@ export function defaultTemplate({
 		type: 'div',
 		props: {
 			style: {
+				position: 'relative',
 				display: 'flex',
 				flexDirection: 'column',
 				alignItems: 'center',
@@ -26,48 +28,80 @@ export function defaultTemplate({
 				backgroundColor: colors.background,
 			},
 			children: [
-				{
-					type: 'h1',
-					props: {
-						style: {
-							fontSize: 72,
-							fontWeight: 700,
-							color: colors.text,
-							letterSpacing: '-0.02em',
-							margin: 0,
-							textAlign: 'center',
-						},
-						children: title,
-					},
-				},
-				description ? {
-					type: 'p',
+				noiseDataUrl ? {
+					type: 'img',
 					props: {
+						src: noiseDataUrl,
+						width,
+						height,
 						style: {
-							fontSize: 32,
-							fontWeight: 400,
-							color: colors.accent,
-							marginTop: 24,
-							marginBottom: 0,
-							textAlign: 'center',
-							maxWidth: 900,
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							width,
+							height,
 						},
-						children: description,
 					},
 				} : null,
 				{
-					type: 'p',
+					type: 'div',
 					props: {
 						style: {
-							fontSize: 28,
-							fontWeight: 400,
-							color: colors.accent,
-							marginTop: 64,
-							marginBottom: 0,
-							textAlign: 'center',
-							opacity: 0.7,
+							position: 'relative',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							justifyContent: 'center',
+							width,
+							height,
+							padding: '0 60px',
 						},
-						children: siteName,
+						children: [
+							{
+								type: 'h1',
+								props: {
+									style: {
+										fontSize: 72,
+										fontWeight: 700,
+										color: colors.text,
+										letterSpacing: '-0.02em',
+										margin: 0,
+										textAlign: 'center',
+									},
+									children: title,
+								},
+							},
+							description ? {
+								type: 'p',
+								props: {
+									style: {
+										fontSize: 32,
+										fontWeight: 400,
+										color: colors.accent,
+										marginTop: 24,
+										marginBottom: 0,
+										textAlign: 'center',
+										maxWidth: 900,
+									},
+									children: description,
+								},
+							} : null,
+							{
+								type: 'p',
+								props: {
+									style: {
+										fontSize: 28,
+										fontWeight: 400,
+										color: colors.accent,
+										marginTop: 64,
+										marginBottom: 0,
+										textAlign: 'center',
+										opacity: 0.7,
+									},
+									children: siteName,
+								},
+							},
+						].filter(Boolean),
 					},
 				},
 			].filter(Boolean),

package/src/templates/profile.ts

@@ -11,13 +11,14 @@ export function profileTemplate({
 	siteName,
 	image,
 	colors,
+	noiseDataUrl,
 	width,
 	height,
 }: OgTemplateProps) {
-	const children: unknown[] = []
+	const contentChildren: unknown[] = []
 
 	if (image) {
-		children.push({
+		contentChildren.push({
 			type: 'img',
 			props: {
 				src: image,
@@ -32,7 +33,7 @@ export function profileTemplate({
 		})
 	}
 
-	children.push({
+	contentChildren.push({
 		type: 'h1',
 		props: {
 			style: {
@@ -50,7 +51,7 @@ export function profileTemplate({
 	})
 
 	if (description) {
-		children.push({
+		contentChildren.push({
 			type: 'p',
 			props: {
 				style: {
@@ -68,7 +69,7 @@ export function profileTemplate({
 		})
 	}
 
-	children.push({
+	contentChildren.push({
 		type: 'p',
 		props: {
 			style: {
@@ -88,6 +89,7 @@ export function profileTemplate({
 		type: 'div',
 		props: {
 			style: {
+				position: 'relative',
 				display: 'flex',
 				flexDirection: 'column',
 				alignItems: 'center',
@@ -96,7 +98,39 @@ export function profileTemplate({
 				height,
 				backgroundColor: colors.background,
 			},
-			children,
+			children: [
+				noiseDataUrl ? {
+					type: 'img',
+					props: {
+						src: noiseDataUrl,
+						width,
+						height,
+						style: {
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							width,
+							height,
+						},
+					},
+				} : null,
+				{
+					type: 'div',
+					props: {
+						style: {
+							position: 'relative',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							justifyContent: 'center',
+							width,
+							height,
+							padding: '0 60px',
+						},
+						children: contentChildren,
+					},
+				},
+			].filter(Boolean),
 		},
 	}
 }