@ewanc26/og 0.1.3 → 0.1.5

package/src/fonts.ts

@@ -9,6 +9,7 @@ import { existsSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import type { OgFontConfig } from './types.js'
+import { loadEmbeddedFonts } from './fonts-data.js'
 
 // Declare __dirname for CJS contexts (injected by bundlers)
 declare const __dirname: string | undefined
@@ -68,12 +69,6 @@ export const BUNDLED_FONTS = {
 	},
 } as const
 
-// Google Fonts CDN fallback URLs
-const FONT_FALLBACKS = {
-	heading: 'https://github.com/rsms/inter/raw/refs/heads/main/docs/font-files/Inter-Bold.ttf',
-	body: 'https://github.com/rsms/inter/raw/refs/heads/main/docs/font-files/Inter-Regular.ttf',
-}
-
 // ─── Font Loading ──────────────────────────────────────────────────────────────
 
 export interface LoadedFonts {
@@ -82,55 +77,45 @@ export interface LoadedFonts {
 }
 
 /**
- * Load fonts from config, falling back to bundled fonts,
- * with CDN fallback for serverless environments.
+ * Helper to convert Buffer to ArrayBuffer
+ */
+function toArrayBuffer(buf: Buffer): ArrayBuffer {
+	return buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength) as ArrayBuffer
+}
+
+/**
+ * Load fonts from config, falling back to bundled fonts.
  */
 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([
-		loadFontFileWithFallback(headingPath, FONT_FALLBACKS.heading),
-		loadFontFileWithFallback(bodyPath, FONT_FALLBACKS.body),
+		loadFontFile(headingPath),
+		loadFontFile(bodyPath),
 	])
 
 	return { heading, body }
 }
 
 /**
- * Load a font file, falling back to CDN if local file fails.
+ * Load a font from file path.
+ * Falls back to alternative locations if local file not found.
  */
-async function loadFontFileWithFallback(path: string, fallbackUrl: string): Promise<ArrayBuffer> {
+async function loadFontFile(source: string): Promise<ArrayBuffer> {
 	try {
-		return await loadFontFile(path)
+		const buffer = await readFile(source)
+		return toArrayBuffer(buffer)
 	} catch (error) {
-		console.warn(`Failed to load local font at ${path}, trying CDN fallback:`, error)
-		try {
-			return await loadFontFile(fallbackUrl)
-		} catch (fallbackError) {
-			throw new Error(`Failed to load font from both local path (${path}) and CDN (${fallbackUrl}): ${fallbackError}`)
+		// Try embedded fonts (loaded from alternative locations)
+		const embedded = await loadEmbeddedFonts()
+		if (embedded) {
+			return source.includes('Bold') ? embedded.heading : embedded.body
 		}
+		throw new Error(`Failed to load font from ${source}`)
 	}
 }
 
-/**
- * Load a font from file path or URL.
- */
-async function loadFontFile(source: string): Promise<ArrayBuffer> {
-	// Handle URLs
-	if (source.startsWith('http://') || source.startsWith('https://')) {
-		const response = await fetch(source)
-		if (!response.ok) {
-			throw new Error(`Failed to load font from URL: ${source}`)
-		}
-		return response.arrayBuffer()
-	}
-
-	// Handle file paths
-	const buffer = await readFile(source)
-	return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength)
-}
-
 // ─── Font Registration for Satori ─────────────────────────────────────────────
 
 export type SatoriFontConfig = {

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),
 		},
 	}
 }

package/dist/chunk-EPPJ2HBS.js

@@ -1,258 +0,0 @@
-// src/templates/blog.ts
-function blogTemplate({
-  title,
-  description,
-  siteName,
-  colors,
-  width,
-  height
-}) {
-  return {
-    type: "div",
-    props: {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        width,
-        height,
-        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: 1e3
-            },
-            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)
-    }
-  };
-}
-
-// src/templates/profile.ts
-function profileTemplate({
-  title,
-  description,
-  siteName,
-  image,
-  colors,
-  width,
-  height
-}) {
-  const children = [];
-  if (image) {
-    children.push({
-      type: "img",
-      props: {
-        src: image,
-        width: 120,
-        height: 120,
-        style: {
-          borderRadius: "50%",
-          marginBottom: 32,
-          objectFit: "cover"
-        }
-      }
-    });
-  }
-  children.push({
-    type: "h1",
-    props: {
-      style: {
-        fontSize: 56,
-        fontWeight: 700,
-        color: colors.text,
-        letterSpacing: "-0.02em",
-        margin: 0,
-        textAlign: "center",
-        lineHeight: 1.1,
-        maxWidth: 900
-      },
-      children: title
-    }
-  });
-  if (description) {
-    children.push({
-      type: "p",
-      props: {
-        style: {
-          fontSize: 26,
-          fontWeight: 400,
-          color: colors.accent,
-          marginTop: 20,
-          marginBottom: 0,
-          textAlign: "center",
-          lineHeight: 1.4,
-          maxWidth: 700
-        },
-        children: description
-      }
-    });
-  }
-  children.push({
-    type: "p",
-    props: {
-      style: {
-        fontSize: 24,
-        fontWeight: 400,
-        color: colors.accent,
-        marginTop: 48,
-        marginBottom: 0,
-        textAlign: "center",
-        opacity: 0.7
-      },
-      children: siteName
-    }
-  });
-  return {
-    type: "div",
-    props: {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        width,
-        height,
-        backgroundColor: colors.background
-      },
-      children
-    }
-  };
-}
-
-// src/templates/default.ts
-function defaultTemplate({
-  title,
-  description,
-  siteName,
-  colors,
-  width,
-  height
-}) {
-  return {
-    type: "div",
-    props: {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        width,
-        height,
-        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",
-          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)
-    }
-  };
-}
-
-// src/templates/index.ts
-var templates = {
-  blog: blogTemplate,
-  profile: profileTemplate,
-  default: defaultTemplate
-};
-function getTemplate(name) {
-  if (typeof name === "function") {
-    return name;
-  }
-  return templates[name];
-}
-
-export {
-  blogTemplate,
-  profileTemplate,
-  defaultTemplate,
-  templates,
-  getTemplate
-};
-//# sourceMappingURL=chunk-EPPJ2HBS.js.map