@ogify/core 0.5.0 → 1.0.0

package/README.md

@@ -6,7 +6,7 @@
 
 Zero-config dynamic Open Graph images for Next.js, Nuxt, Remix, and more. Just copy & paste the production-ready templates.
 
-![OGify](../../apps/examples/outputs/aligned-aligned-ltr.png)
+![OGify](/docs/assets/preview.png)
 
 ## ⚡ Why OGify?
 
@@ -17,399 +17,11 @@ Zero-config dynamic Open Graph images for Next.js, Nuxt, Remix, and more. Just c
 - ⚡ **Smart caching**: Automatically caches fonts, emojis, and generated images - no configuration required.
 - 🌍 **RTL Support**: Built-in support for Right-to-Left languages like Arabic, Hebrew, and Persian.
 
-## 📦 Installation
+## 📚 Documentation
 
-```bash
-pnpm add @ogify/core @ogify/templates
-```
-
-or
-
-```bash
-npm install @ogify/core @ogify/templates
-```
-
-or
-
-```bash
-yarn add @ogify/core @ogify/templates
-```
-
-## 🚀 Quick Start
-
-### 1. Choose a Template
-
-OGify comes with a collection of beautiful, production-ready templates. Check out [our gallery](https://ogify.dev/templates) for more.
-
-```typescript
-import template from '@ogify/templates/basic';
-import type { TemplateParams } from '@ogify/templates/basic';
-```
-
-### 2. Create a Renderer
-
-Create a renderer instance and register your template:
-
-```typescript
-import { createRenderer } from '@ogify/core';
-import template from '@ogify/templates/basic';
-import type { TemplateParams } from '@ogify/templates/basic';
-
-const renderer = createRenderer<{ basic: TemplateParams }>({
-  templates: { basic: template },
-  sharedParams: {
-    brandLogo: 'https://ogify.dev/logo.svg',
-    brandName: 'OGify',
-  }
-});
-```
-
-### 3. Generate an Image
-
-Render the template to a PNG buffer:
-
-```typescript
-// Basic usage (1200x630)
-const imageBuffer = await renderer.renderToImage('basic', {
-  title: 'Hello World',
-  subtitle: 'My first OG image',
-  layout: 'centered', // aligned | centered | split
-  cta: 'Read More',
-  primaryColor: '#000000',
-});
-
-// Custom dimensions for Twitter (1200x675)
-const twitterImage = await renderer.renderToImage('basic', {
-  title: 'Hello World',
-  subtitle: 'My first OG image',
-  layout: 'split',
-}, {
-  width: 1200,
-  height: 675
-});
-
-// RTL Support (Arabic/Hebrew/Persian)
-const rtlImage = await renderer.renderToImage('basic', {
-  title: 'مرحبا بالعالم',
-  subtitle: 'هذه أول صورة OG لي',
-  layout: 'aligned',
-}, {
-  isRTL: true
-});
-```
-
-**That's it!** You're ready for production. No font files to download, no build configuration, no asset pipeline.
-
-## 🚀 Time-Saving Features
-
-### **Rich Templates**
-
-Access a growing library of beautiful, production-ready templates. [Browse Templates](https://ogify.dev/templates)
-
-**Time saved**: Hours of design and implementation time
-
-### **Zero-Config Google Fonts**
-
-Traditional approach (manual setup):
-
-```typescript
-// ❌ Manual: Download fonts, manage files, configure paths
-import fs from 'fs';
-
-const fontData = fs.readFileSync('./fonts/Inter-Regular.ttf');
-const font2Data = fs.readFileSync('./fonts/Inter-Bold.ttf');
-
-const fonts = [
-  { name: 'Inter', data: fontData, weight: 400 },
-  { name: 'Inter', data: font2Data, weight: 700 }
-];
-```
-
-OGify approach (zero-config):
-
-```typescript
-// ✅ OGify: Just specify the font name - we handle the rest
-const template = defineTemplate({
-  fonts: [
-    { name: 'Inter', weight: 400 },  // Automatically loaded from Google Fonts
-    { name: 'Inter', weight: 700 }
-  ],
-  // ...
-});
-```
-
-**Time saved**: ~15 minutes per font family
-
-### **Automatic Caching**
-
-```typescript
-// First render: Downloads fonts from Google (~500ms)
-await renderer.renderToImage('basic', { title: 'Post 1', subtitle: '...' });
-
-// Second render: Uses cached fonts (~50ms) - 10x faster! ⚡
-await renderer.renderToImage('basic', { title: 'Post 2', subtitle: '...' });
-
-// All subsequent renders: Lightning fast
-await renderer.renderToImage('basic', { title: 'Post 3', subtitle: '...' });
-```
-
-**Performance**: 10x faster after first render, no configuration needed
-
-### **Dynamic Emoji Loading**
-
-```typescript
-// ✅ Emojis just work - loaded dynamically from CDN
-renderer: ({ params }) => `
-  <div>
-    <h1>${params.title}</h1>
-    <div>👋 😄 🎉 🚀</div>  <!-- Automatically rendered -->
-  </div>
-`
-```
-
-**Time saved**: No emoji sprite sheets, no asset management, no build step
-
-## 🛠️ Creating Custom Templates
-
-If you want to build your own templates from scratch, you can use `defineTemplate`.
-
-```typescript
-import { defineTemplate, OgTemplateOptions } from '@ogify/core';
-
-const blogTemplate = defineTemplate({
-  fonts: [
-    { name: 'Inter', weight: 400 },
-    { name: 'Inter', weight: 700 }
-  ],
-  renderer: ({ params }: OgTemplateOptions) => {
-    return `
-      <div style="display: flex; flex-direction: column; width: 100%; height: 100%; background: white; padding: 40px;">
-        <h1 style="font-size: 60px; font-weight: 700; color: #000;">
-          ${params.title}
-        </h1>
-        <p style="font-size: 30px; color: #666;">
-          ${params.description}
-        </p>
-      </div>
-    `;
-  },
-});
-```
-
-## 📚 Advanced Usage
-
-### Custom Fonts
-
-Load fonts from Google Fonts, custom URLs, or embedded data:
-
-```typescript
-const template = defineTemplate({
-  fonts: [
-    // Google Fonts (automatic)
-    { name: 'Roboto', weight: 400 },
-    
-    // Custom URL
-    { name: 'MyFont', url: 'https://example.com/font.woff2', weight: 700 },
-    
-    // Embedded data
-    { name: 'EmbeddedFont', data: fontBuffer, weight: 400 }
-  ],
-  renderer: ({ params }) => `<div>${params.title}</div>`
-});
-```
-
-### Emoji Support
-
-Choose from multiple emoji providers:
-
-```typescript
-const template = defineTemplate({
-  fonts: [{ name: 'Inter', weight: 400 }],
-  emojiProvider: 'twemoji', // 'fluent' | 'fluentFlat' | 'noto' | 'blobmoji' | 'openmoji'
-  renderer: ({ params }) => `
-    <div>
-      <h1>${params.title}</h1>
-      <div>👋 😄 🎉</div>
-    </div>
-  `
-});
-```
-
-### Lifecycle Hooks
-
-Add custom logic before and after rendering:
-
-```typescript
-const renderer = createRenderer({
-  templates: { 'blog-post': blogTemplate },
-  beforeRender: async (templateId, params) => {
-    console.log(`Rendering ${templateId}`, params);
-    // Log analytics, validate params, etc.
-  },
-  afterRender: async (templateId, params, imageBuffer) => {
-    console.log(`Rendered ${templateId} successfully`);
-    // Cache image, send notifications, etc.
-  }
-});
-```
-
-### Caching Configuration
-
-Configure caching strategy for fonts and emojis/icons:
-
-```typescript
-// Memory Cache (default)
-const memoryRenderer = createRenderer({
-  templates: { 'blog-post': blogTemplate },
-  cache: {
-    type: 'memory',
-    ttl: 3600000, // 1 hour
-    max: 100 // max items
-  }
-});
-
-// Filesystem Cache
-const fsRenderer = createRenderer({
-  templates: { 'blog-post': blogTemplate },
-  cache: {
-    type: 'filesystem',
-    dir: './.ogify-cache', // cache directory
-    ttl: 3600000, // 1 hour
-    max: 100 // max items
-  }
-});
-```
-
-### Platform-Specific Dimensions
-
-Generate images for different platforms:
-
-```typescript
-// Facebook/LinkedIn (1200x630)
-const facebookImage = await renderer.renderToImage('basic', {
-  title: 'Hello World',
-  subtitle: 'My first OG image',
-});
-
-// Twitter (1200x675)
-const twitterImage = await renderer.renderToImage('basic', {
-  title: 'Hello World',
-  subtitle: 'My first OG image',
-}, {
-  width: 1200,
-  height: 675
-});
-```
-
-## 🎨 Template Features
-
-### Supported CSS Properties
-
-Templates support a subset of CSS properties via Satori. See [Satori CSS](https://github.com/vercel/satori?tab=readme-ov-file#css) for more details.
-
-- **Layout**: `display: flex`, `flexDirection`, `alignItems`, `justifyContent`
-- **Spacing**: `padding`, `margin`, `gap`
-- **Typography**: `fontSize`, `fontWeight`, `color`, `lineHeight`, `textAlign`
-- **Background**: `backgroundColor`, `backgroundImage`
-- **Border**: `border`, `borderRadius`
-- **Size**: `width`, `height`, `maxWidth`, `maxHeight`
-- ...
-
-### Tailwind-like Utilities
-
-You can use Tailwind-like class names:
-
-```typescript
-renderer: ({ params }) => `
-  <div class="flex flex-col items-center justify-center w-full h-full bg-white p-4">
-    <h1 class="text-[60px] font-bold text-black">${params.title}</h1>
-    <p class="text-[30px] text-gray-600">${params.description}</p>
-  </div>
-`
-```
-
-## 📖 API Reference
-
-### `defineTemplate(config)`
-
-Defines a new OG template.
-
-**Parameters:**
-
-- `renderer` (function): Function that returns HTML string
-- `fonts` (array): Array of font configurations
-- `emojiProvider` (optional): Emoji provider to use
-
-**Returns:** `OgTemplate`
-
-### `createRenderer(config)`
-
-Creates a new template renderer instance.
-
-**Parameters:**
-
-- `templates` (object): Map of template definitions keyed by ID
-- `sharedParams` (optional): Default parameters for all templates
-- `cache` (optional): Cache configuration object
-- `beforeRender` (optional): Hook called before rendering
-- `afterRender` (optional): Hook called after rendering
-
-**Returns:** `TemplateRenderer`
-
-### `renderer.renderToImage(templateId, params, options?)`
-
-Renders a template to a PNG buffer.
-
-**Parameters:**
-
-- `templateId` (string): ID of the template to render
-- `params` (object | function): Parameters (or function returning params) to pass to the template
-- `options` (optional): Rendering options
-  - `width` (number): Image width (default: 1200)
-  - `height` (number): Image height (default: 630)
-  - `isRTL` (boolean): Enable Right-to-Left text direction (default: false)
-
-**Returns:** `Promise<Buffer>`
-
-### RTL Support
-
-OGify supports Right-to-Left (RTL) languages via the `isRTL` option.
-
-```typescript
-const image = await renderer.renderToImage('basic', {
-  title: 'مرحبا بالعالم', // Arabic: Hello World
-  subtitle: 'هذه أول صورة OG لي',
-}, {
-  isRTL: true
-});
-```
-
-### `renderer.getTemplate(id)`
-
-Retrieves a template by ID.
-
-**Returns:** `OgTemplate | undefined`
-
-## ⚡ Performance & Production
-
-### **Automatic Caching (Zero Config)**
-
-OGify automatically caches fonts, emojis, and generated images in memory - no configuration required
-
-```typescript
-// First render: Downloads fonts from Google Fonts (~500ms)
-await renderer.renderToImage('basic', { title: 'Post 1', subtitle: '...' });
-
-// Second render: Uses cached fonts (~50ms) - 10x faster! ⚡
-await renderer.renderToImage('basic', { title: 'Post 2', subtitle: '...' });
-
-// Third+ renders: Lightning fast from cache
-await renderer.renderToImage('basic', { title: 'Post 3', subtitle: '...' });
-```
-
-## 📋 Changelog
-
-See [CHANGELOG.md](CHANGELOG.md) for a complete history of changes and releases.
+- 🌐 **[Website](https://ogify.dev)** - Official website
+- 🎨 **[Template Gallery](https://ogify.dev/templates)** - Browse all available templates
+- 📖 **[Documentation](/docs/README.md)** - Complete guides and API reference
 
 ## 🤝 Contributing
 

package/dist/index.js

@@ -595,7 +595,7 @@ async function renderTemplate(template, params, options) {
       value: width
     }
   });
-  return Buffer.from(pngData.asPng());
+  return pngData.asPng();
 }
 
 // src/renderer.ts

package/dist/index.mjs

@@ -567,7 +567,7 @@ async function renderTemplate(template, params, options) {
       value: width
     }
   });
-  return Buffer.from(pngData.asPng());
+  return pngData.asPng();
 }
 
 // src/renderer.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogify/core",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "Core types and utilities for OGify Open Graph image generator",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",