@ewanc26/og 0.1.1

package/src/png-encoder.ts

@@ -0,0 +1,101 @@
+/**
+ * Minimal PNG encoder for noise backgrounds.
+ * Uses node:zlib for deflate compression.
+ */
+
+import { deflateSync } from 'node:zlib'
+
+const PNG_SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+
+function crc32(data: Buffer): number {
+	let crc = 0xffffffff
+	const table: number[] = []
+
+	// Build CRC table
+	for (let n = 0; n < 256; n++) {
+		let c = n
+		for (let k = 0; k < 8; k++) {
+			c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1
+		}
+		table[n] = c
+	}
+
+	// Calculate CRC
+	for (let i = 0; i < data.length; i++) {
+		crc = table[(crc ^ data[i]) & 0xff] ^ (crc >>> 8)
+	}
+
+	return (crc ^ 0xffffffff) >>> 0
+}
+
+function createChunk(type: string, data: Buffer): Buffer {
+	const length = Buffer.alloc(4)
+	length.writeUInt32BE(data.length, 0)
+
+	const typeBuffer = Buffer.from(type, 'ascii')
+	const crcData = Buffer.concat([typeBuffer, data])
+	const crc = Buffer.alloc(4)
+	crc.writeUInt32BE(crc32(crcData), 0)
+
+	return Buffer.concat([length, typeBuffer, data, crc])
+}
+
+function createIHDR(width: number, height: number): Buffer {
+	const data = Buffer.alloc(13)
+	data.writeUInt32BE(width, 0)  // Width
+	data.writeUInt32BE(height, 4) // Height
+	data.writeUInt8(8, 8)   // Bit depth: 8 bits
+	data.writeUInt8(2, 9)   // Colour type: 2 (RGB)
+	data.writeUInt8(0, 10)  // Compression method
+	data.writeUInt8(0, 11)  // Filter method
+	data.writeUInt8(0, 12)  // Interlace method
+
+	return createChunk('IHDR', data)
+}
+
+function createIDAT(pixels: Uint8ClampedArray, width: number, height: number): Buffer {
+	// Apply filter (none filter = 0) per row
+	const rawData = Buffer.alloc(height * (width * 3 + 1))
+
+	let srcOffset = 0
+	let dstOffset = 0
+
+	for (let y = 0; y < height; y++) {
+		rawData[dstOffset++] = 0 // Filter type: none
+		for (let x = 0; x < width; x++) {
+			const r = pixels[srcOffset++]
+			const g = pixels[srcOffset++]
+			const b = pixels[srcOffset++]
+			srcOffset++ // Skip alpha
+			rawData[dstOffset++] = r
+			rawData[dstOffset++] = g
+			rawData[dstOffset++] = b
+		}
+	}
+
+	const compressed = deflateSync(rawData)
+	return createChunk('IDAT', compressed)
+}
+
+function createIEND(): Buffer {
+	return createChunk('IEND', Buffer.alloc(0))
+}
+
+/**
+ * Encode raw RGBA pixel data as a PNG Buffer.
+ */
+export function encodePNG(pixels: Uint8ClampedArray, width: number, height: number): Buffer {
+	return Buffer.concat([
+		PNG_SIGNATURE,
+		createIHDR(width, height),
+		createIDAT(pixels, width, height),
+		createIEND(),
+	])
+}
+
+/**
+ * PNGEncoder namespace for cleaner imports.
+ */
+export const PNGEncoder = {
+	encode: encodePNG,
+}

package/src/svg.ts

@@ -0,0 +1,51 @@
+/**
+ * SVG to PNG conversion using @resvg/resvg-js.
+ */
+
+import { Resvg } from '@resvg/resvg-js'
+
+export interface SvgToPngOptions {
+	/** Scale to fit width in pixels */
+	fitWidth?: number
+	/** Background colour for transparent areas */
+	backgroundColor?: string
+}
+
+/**
+ * Convert an SVG string to PNG Buffer.
+ */
+export function svgToPng(svg: string, options: SvgToPngOptions = {}): Buffer {
+	const opts = {
+		fitTo: options.fitWidth
+			? { mode: 'width' as const, value: options.fitWidth }
+			: undefined,
+		background: options.backgroundColor,
+	}
+
+	const resvg = new Resvg(svg, opts)
+	const rendered = resvg.render()
+
+	return Buffer.from(rendered.asPng())
+}
+
+/**
+ * Convert an SVG string to PNG data URL.
+ */
+export function svgToPngDataUrl(svg: string, options: SvgToPngOptions = {}): string {
+	const png = svgToPng(svg, options)
+	return `data:image/png;base64,${png.toString('base64')}`
+}
+
+/**
+ * Convert an SVG string to PNG Response (for SvelteKit endpoints).
+ */
+export function svgToPngResponse(svg: string, options: SvgToPngOptions = {}, cacheMaxAge = 3600): Response {
+	const png = svgToPng(svg, options)
+
+	return new Response(png, {
+		headers: {
+			'Content-Type': 'image/png',
+			'Cache-Control': `public, max-age=${cacheMaxAge}`,
+		},
+	})
+}

package/src/templates/blog.ts

@@ -0,0 +1,79 @@
+/**
+ * Blog OG template.
+ * Clean centered layout.
+ */
+
+import type { OgTemplateProps } from '../types.js'
+
+export function blogTemplate({
+	title,
+	description,
+	siteName,
+	colors,
+	width,
+	height,
+}: OgTemplateProps) {
+	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: 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),
+		},
+	}
+}

package/src/templates/default.ts

@@ -0,0 +1,76 @@
+/**
+ * Default OG template.
+ * Clean, centered layout.
+ */
+
+import type { OgTemplateProps } from '../types.js'
+
+export function defaultTemplate({
+	title,
+	description,
+	siteName,
+	colors,
+	width,
+	height,
+}: OgTemplateProps) {
+	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),
+		},
+	}
+}

package/src/templates/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Built-in OG templates.
+ */
+
+export { blogTemplate } from './blog.js'
+export { profileTemplate } from './profile.js'
+export { defaultTemplate } from './default.js'
+
+import { blogTemplate } from './blog.js'
+import { profileTemplate } from './profile.js'
+import { defaultTemplate } from './default.js'
+import type { OgTemplate } from '../types.js'
+
+export const templates = {
+	blog: blogTemplate,
+	profile: profileTemplate,
+	default: defaultTemplate,
+} as const
+
+export type TemplateName = keyof typeof templates
+
+export function getTemplate(name: TemplateName | OgTemplate): OgTemplate {
+	if (typeof name === 'function') {
+		return name
+	}
+	return templates[name]
+}

package/src/templates/profile.ts

@@ -0,0 +1,102 @@
+/**
+ * Profile OG template.
+ * Centered layout.
+ */
+
+import type { OgTemplateProps } from '../types.js'
+
+export function profileTemplate({
+	title,
+	description,
+	siteName,
+	image,
+	colors,
+	width,
+	height,
+}: OgTemplateProps) {
+	const children: unknown[] = []
+
+	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,
+		},
+	}
+}

package/src/types.ts

@@ -0,0 +1,92 @@
+/**
+ * @ewanc26/og types
+ */
+
+// ─── Colour Configuration ─────────────────────────────────────────────────────
+
+export interface OgColorConfig {
+	/** Background color (very dark). @default '#0f1a15' */
+	background: string
+	/** Primary text color. @default '#e8f5e9' */
+	text: string
+	/** Secondary/accent text (mint). @default '#86efac' */
+	accent: string
+}
+
+export const defaultColors: OgColorConfig = {
+	background: '#0f1a15',
+	text: '#e8f5e9',
+	accent: '#86efac',
+}
+
+// ─── Font Configuration ───────────────────────────────────────────────────────
+
+export interface OgFontConfig {
+	heading?: string
+	body?: string
+}
+
+// ─── Noise Configuration ──────────────────────────────────────────────────────
+
+export interface OgNoiseConfig {
+	enabled?: boolean
+	seed?: string
+	opacity?: number
+	colorMode?: 'grayscale' | 'hsl'
+}
+
+// ─── Template Props ────────────────────────────────────────────────────────────
+
+export interface OgTemplateProps {
+	title: string
+	description?: string
+	siteName: string
+	image?: string
+	colors: OgColorConfig
+	noiseDataUrl?: string
+	circleNoiseDataUrl?: string
+	width: number
+	height: number
+}
+
+export type OgTemplate = (props: OgTemplateProps) => unknown
+
+// ─── Generation Options ───────────────────────────────────────────────────────
+
+export interface OgGenerateOptions {
+	title: string
+	description?: string
+	siteName: string
+	image?: string
+	template?: 'blog' | 'profile' | 'default' | OgTemplate
+	colors?: Partial<OgColorConfig>
+	fonts?: OgFontConfig
+	noise?: OgNoiseConfig
+	noiseSeed?: string
+	width?: number
+	height?: number
+	debugSvg?: boolean
+}
+
+// ─── SvelteKit Endpoint Options ───────────────────────────────────────────────
+
+export interface OgEndpointOptions {
+	siteName: string
+	defaultTemplate?: 'blog' | 'profile' | 'default' | OgTemplate
+	colors?: Partial<OgColorConfig>
+	fonts?: OgFontConfig
+	noise?: OgNoiseConfig
+	cacheMaxAge?: number
+	width?: number
+	height?: number
+}
+
+// ─── Internal Types ────────────────────────────────────────────────────────────
+
+export interface InternalGenerateContext {
+	width: number
+	height: number
+	fonts: { heading: ArrayBuffer; body: ArrayBuffer }
+	colors: OgColorConfig
+	noiseDataUrl?: string
+}