basic

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

const buffer = await renderer.renderToImage("basic", {
  title: "Hello World",
  subtitle: "My first OG image",
  layout: "centered",
});

const buffer = await renderer.renderToImage("basic", {
  title: "Product Launch 2026",
  subtitle: "Introducing our latest innovation",
  brandName: "Acme Corp",
  brandLogo: "https://acme.com/logo.png",
  layout: "aligned",
  primaryColor: "#0066cc",
  secondaryColor: "#e6f2ff",
  extras: ["Tech", "Innovation"],
});

const buffer = await renderer.renderToImage("basic", {
  title: "Join Our Community",
  subtitle: "Connect with thousands of developers",
  cta: "Sign Up Now",
  layout: "centered",
  primaryColor: "#8b5cf6",
  textColor: "#ffffff",
});

const buffer = await renderer.renderToImage("basic", {
  title: "Generate beautiful OG images",
  subtitle:
    '<span class="font-bold">Zero-config</span> dynamic OG images for Next.js, Nuxt, and Remix.',
  layout: "aligned",
});

const buffer = await renderer.renderToImage(
  "basic",
  {
    title: "مرحبا بالعالم",
    subtitle: "هذه أول صورة OG لي",
    brandName: "شركة",
    layout: "aligned",
  },
  {
    isRTL: true,
  }
);

const buffer = await renderer.renderToImage("basic", {
  title: "Custom Design",
  subtitle: "Fully customizable appearance",
  layout: "split",
  primaryColor: "#ff6b6b",
  secondaryColor: "#4ecdc4",
  textColor: "#ffffff",
  pattern: "https://example.com/custom-pattern.png",
});