@ogpipe/next 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+export { OGPipeClient, OGPipeClientOptions, RenderError, RenderOutcome, RenderRequest, RenderResponse, RenderResult } from './client/index.js';
+
+/**
+ * OGPipe configuration schema.
+ *
+ * Developers define this in ogpipe.config.ts at their project root.
+ * The CLI reads this to know which templates to use for which routes.
+ */
+interface OGPipeTemplate {
+    /** Inline HTML string with {{variable}} placeholders */
+    html?: string;
+    /** Path to an HTML template file (relative to config file) */
+    file?: string;
+    /** Image width (default: 1200) */
+    width?: number;
+    /** Image height (default: 630) */
+    height?: number;
+    /** Output format (default: png) */
+    format?: "png" | "jpeg" | "webp";
+}
+interface RouteConfig {
+    /** Template ID to use for this route */
+    template: string;
+    /** Function to extract variables from page metadata */
+    vars?: (metadata: RouteMetadata) => Record<string, string>;
+}
+interface RouteMetadata {
+    /** Page title from metadata export */
+    title?: string;
+    /** Page description from metadata export */
+    description?: string;
+    /** Route path (e.g., /blog/my-post) */
+    path: string;
+    /** Route params (e.g., { slug: 'my-post' }) */
+    params?: Record<string, string>;
+    /** Any additional metadata from the page */
+    [key: string]: unknown;
+}
+interface OnDemandConfig {
+    /** Cache duration in seconds (default: 86400 = 24h) */
+    revalidate?: number;
+    /** Fallback image path if API is unavailable */
+    fallback?: string;
+}
+interface OGPipeConfig {
+    /** API key. Defaults to OGPIPE_API_KEY env var. */
+    apiKey?: string;
+    /** API base URL. Defaults to https://api.ogpipe.dev */
+    baseUrl?: string;
+    /** Named templates */
+    templates: Record<string, OGPipeTemplate>;
+    /** Route-to-template mapping. Supports glob patterns. */
+    routes: Record<string, RouteConfig>;
+    /** On-demand rendering config (for dynamic routes) */
+    onDemand?: OnDemandConfig;
+    /** Output directory for generated images (default: public/og) */
+    outDir?: string;
+}
+/**
+ * Helper to define a type-safe OGPipe config.
+ *
+ * Usage in ogpipe.config.ts:
+ * ```ts
+ * import { defineConfig } from '@ogpipe/next'
+ *
+ * export default defineConfig({
+ *   templates: { ... },
+ *   routes: { ... },
+ * })
+ * ```
+ */
+declare function defineConfig(config: OGPipeConfig): OGPipeConfig;
+
+/**
+ * On-demand OG Image handler for Next.js App Router.
+ *
+ * Use this for dynamic routes where build-time generation isn't possible.
+ * The handler calls the OGPipe API on first request, then CDN-caches the result.
+ *
+ * Usage in app/blog/[slug]/opengraph-image.ts:
+ * ```ts
+ * import { OGImageHandler } from '@ogpipe/next'
+ *
+ * export default OGImageHandler({
+ *   template: 'blog',
+ *   revalidate: 86400,
+ *   fallback: '/og-fallback.png',
+ * })
+ * ```
+ */
+interface OGImageHandlerOptions {
+    /** Template ID (must exist in ogpipe.config.ts templates) */
+    template?: string;
+    /** Inline HTML (alternative to template) */
+    html?: string;
+    /** Variables to inject into the template */
+    vars?: Record<string, string> | ((params: Record<string, string>) => Record<string, string>);
+    /** Cache duration in seconds (default: 86400 = 24h) */
+    revalidate?: number;
+    /** Fallback image path if API is unavailable */
+    fallback?: string;
+    /** Image width (default: 1200) */
+    width?: number;
+    /** Image height (default: 630) */
+    height?: number;
+}
+/**
+ * Create an on-demand OG image route handler.
+ *
+ * Returns a Next.js-compatible route handler that:
+ * 1. Resolves the template HTML with variables
+ * 2. Calls OGPipe API to render
+ * 3. Returns the image with cache headers
+ * 4. Falls back to a static image if API is down
+ */
+declare function OGImageHandler(options: OGImageHandlerOptions): (request: Request, context: {
+    params?: Record<string, string | string[]>;
+}) => Promise<Response>;
+
+export { OGImageHandler, type OGImageHandlerOptions, type OGPipeConfig, type OGPipeTemplate, type OnDemandConfig, type RouteConfig, type RouteMetadata, defineConfig };

package/dist/index.js

@@ -0,0 +1,168 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  OGImageHandler: () => OGImageHandler,
+  OGPipeClient: () => OGPipeClient,
+  defineConfig: () => defineConfig
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/next/config.ts
+function defineConfig(config) {
+  return config;
+}
+function injectVariables(html, variables) {
+  return html.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    return variables[key] ?? "";
+  });
+}
+
+// src/client/index.ts
+var OGPipeClient = class {
+  apiKey;
+  baseUrl;
+  timeout;
+  constructor(options = {}) {
+    this.apiKey = options.apiKey || process.env.OGPIPE_API_KEY || "";
+    this.baseUrl = options.baseUrl || process.env.OGPIPE_BASE_URL || "https://api.ogpipe.dev";
+    this.timeout = options.timeout || 3e4;
+    if (!this.apiKey) {
+      throw new Error(
+        "[OGPipe] Missing API key. Set OGPIPE_API_KEY environment variable or pass apiKey option."
+      );
+    }
+  }
+  /**
+   * Render HTML to an image. Returns the CDN URL.
+   */
+  async render(request) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), this.timeout);
+    try {
+      const res = await fetch(`${this.baseUrl}/images`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${this.apiKey}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          html: request.html,
+          width: request.width || 1200,
+          height: request.height || 630,
+          format: request.format || "png"
+        }),
+        signal: controller.signal
+      });
+      const body = await res.json();
+      if (!res.ok) {
+        return {
+          success: false,
+          error: body.error || `HTTP ${res.status}`,
+          statusCode: res.status
+        };
+      }
+      return {
+        success: true,
+        data: body
+      };
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") {
+        return { success: false, error: "Request timed out", statusCode: 408 };
+      }
+      return {
+        success: false,
+        error: err instanceof Error ? err.message : "Unknown error",
+        statusCode: 500
+      };
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+  /**
+   * Render HTML and return the raw image buffer (for writing to disk).
+   */
+  async renderToBuffer(request) {
+    const result = await this.render(request);
+    if (!result.success) return null;
+    const res = await fetch(result.data.url);
+    if (!res.ok) return null;
+    return Buffer.from(await res.arrayBuffer());
+  }
+};
+
+// src/next/handler.ts
+function OGImageHandler(options) {
+  const {
+    revalidate = 86400,
+    fallback,
+    width = 1200,
+    height = 630
+  } = options;
+  return async function handler(request, context) {
+    try {
+      const client = new OGPipeClient();
+      let html;
+      if (options.html) {
+        html = options.html;
+      } else {
+        html = options.html || "<div>{{title}}</div>";
+      }
+      const params = flattenParams(context.params || {});
+      const vars = typeof options.vars === "function" ? options.vars(params) : options.vars || {};
+      html = injectVariables(html, vars);
+      const result = await client.render({ html, width, height });
+      if (!result.success) {
+        if (fallback) {
+          return Response.redirect(new URL(fallback, request.url), 302);
+        }
+        return new Response("OG image generation failed", { status: 500 });
+      }
+      const imageRes = await fetch(result.data.url);
+      const imageBuffer = await imageRes.arrayBuffer();
+      return new Response(imageBuffer, {
+        headers: {
+          "Content-Type": `image/${result.data.format}`,
+          "Cache-Control": `public, s-maxage=${revalidate}, stale-while-revalidate=${revalidate * 2}`
+        }
+      });
+    } catch (err) {
+      if (fallback) {
+        return Response.redirect(new URL(fallback, request.url), 302);
+      }
+      return new Response("OG image generation failed", { status: 500 });
+    }
+  };
+}
+function flattenParams(params) {
+  const flat = {};
+  for (const [key, value] of Object.entries(params)) {
+    flat[key] = Array.isArray(value) ? value.join("/") : value;
+  }
+  return flat;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OGImageHandler,
+  OGPipeClient,
+  defineConfig
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/next/config.ts","../src/client/index.ts","../src/next/handler.ts"],"sourcesContent":["/**\n * @ogpipe/next — Pixel-perfect OG images for Next.js\n *\n * Full CSS support. Any font. Any hosting platform.\n * Framework-agnostic alternative to @vercel/og.\n *\n * @example\n * ```ts\n * // ogpipe.config.ts\n * import { defineConfig } from '@ogpipe/next'\n *\n * export default defineConfig({\n *   templates: {\n *     blog: { file: './og-templates/blog.html' },\n *   },\n *   routes: {\n *     '/blog/[slug]': { template: 'blog', vars: (meta) => ({ title: meta.title }) },\n *     '*': { template: 'default' },\n *   },\n * })\n * ```\n *\n * @example\n * ```ts\n * // app/blog/[slug]/opengraph-image.ts\n * import { OGImageHandler } from '@ogpipe/next'\n *\n * export default OGImageHandler({\n *   html: '<div class=\"...\">{{title}}</div>',\n *   vars: (params) => ({ title: params.slug.replace(/-/g, ' ') }),\n *   revalidate: 86400,\n * })\n * ```\n */\n\n// Config\nexport { defineConfig } from \"./next/config.js\";\nexport type {\n  OGPipeConfig,\n  OGPipeTemplate,\n  RouteConfig,\n  RouteMetadata,\n  OnDemandConfig,\n} from \"./next/config.js\";\n\n// On-demand handler\nexport { OGImageHandler } from \"./next/handler.js\";\nexport type { OGImageHandlerOptions } from \"./next/handler.js\";\n\n// Client (also available via @ogpipe/next/client)\nexport { OGPipeClient } from \"./client/index.js\";\nexport type {\n  OGPipeClientOptions,\n  RenderRequest,\n  RenderResponse,\n  RenderResult,\n  RenderError,\n  RenderOutcome,\n} from \"./client/index.js\";\n","/**\n * OGPipe configuration schema.\n *\n * Developers define this in ogpipe.config.ts at their project root.\n * The CLI reads this to know which templates to use for which routes.\n */\n\nimport { readFileSync } from \"fs\";\nimport { resolve, dirname } from \"path\";\n\n// ─────────────────────────────────────────────\n// Config Types\n// ─────────────────────────────────────────────\n\nexport interface OGPipeTemplate {\n  /** Inline HTML string with {{variable}} placeholders */\n  html?: string;\n  /** Path to an HTML template file (relative to config file) */\n  file?: string;\n  /** Image width (default: 1200) */\n  width?: number;\n  /** Image height (default: 630) */\n  height?: number;\n  /** Output format (default: png) */\n  format?: \"png\" | \"jpeg\" | \"webp\";\n}\n\nexport interface RouteConfig {\n  /** Template ID to use for this route */\n  template: string;\n  /** Function to extract variables from page metadata */\n  vars?: (metadata: RouteMetadata) => Record<string, string>;\n}\n\nexport interface RouteMetadata {\n  /** Page title from metadata export */\n  title?: string;\n  /** Page description from metadata export */\n  description?: string;\n  /** Route path (e.g., /blog/my-post) */\n  path: string;\n  /** Route params (e.g., { slug: 'my-post' }) */\n  params?: Record<string, string>;\n  /** Any additional metadata from the page */\n  [key: string]: unknown;\n}\n\nexport interface OnDemandConfig {\n  /** Cache duration in seconds (default: 86400 = 24h) */\n  revalidate?: number;\n  /** Fallback image path if API is unavailable */\n  fallback?: string;\n}\n\nexport interface OGPipeConfig {\n  /** API key. Defaults to OGPIPE_API_KEY env var. */\n  apiKey?: string;\n  /** API base URL. Defaults to https://api.ogpipe.dev */\n  baseUrl?: string;\n  /** Named templates */\n  templates: Record<string, OGPipeTemplate>;\n  /** Route-to-template mapping. Supports glob patterns. */\n  routes: Record<string, RouteConfig>;\n  /** On-demand rendering config (for dynamic routes) */\n  onDemand?: OnDemandConfig;\n  /** Output directory for generated images (default: public/og) */\n  outDir?: string;\n}\n\n// ─────────────────────────────────────────────\n// Config Helper\n// ─────────────────────────────────────────────\n\n/**\n * Helper to define a type-safe OGPipe config.\n *\n * Usage in ogpipe.config.ts:\n * ```ts\n * import { defineConfig } from '@ogpipe/next'\n *\n * export default defineConfig({\n *   templates: { ... },\n *   routes: { ... },\n * })\n * ```\n */\nexport function defineConfig(config: OGPipeConfig): OGPipeConfig {\n  return config;\n}\n\n// ─────────────────────────────────────────────\n// Template Resolution\n// ─────────────────────────────────────────────\n\n/**\n * Resolve a template to its final HTML string.\n * If the template uses a `file` path, reads the file from disk.\n */\nexport function resolveTemplateHtml(\n  template: OGPipeTemplate,\n  configDir: string\n): string {\n  if (template.html) {\n    return template.html;\n  }\n\n  if (template.file) {\n    const filePath = resolve(configDir, template.file);\n    try {\n      return readFileSync(filePath, \"utf-8\");\n    } catch (err) {\n      throw new Error(`[OGPipe] Template file not found: ${filePath}`);\n    }\n  }\n\n  throw new Error(\"[OGPipe] Template must have either 'html' or 'file' property.\");\n}\n\n/**\n * Inject variables into an HTML template string.\n * Replaces {{variable}} placeholders with values.\n */\nexport function injectVariables(\n  html: string,\n  variables: Record<string, string>\n): string {\n  return html.replace(/\\{\\{(\\w+)\\}\\}/g, (_, key: string) => {\n    return variables[key] ?? \"\";\n  });\n}\n\n/**\n * Match a route path against a glob pattern.\n * Supports:\n *   /blog/[slug]  → matches /blog/anything\n *   /blog/*       → matches /blog/anything\n *   *             → matches everything (default fallback)\n */\nexport function matchRoute(\n  path: string,\n  pattern: string\n): boolean {\n  if (pattern === \"*\") return true;\n\n  // Convert Next.js dynamic route pattern to regex\n  const regexStr = pattern\n    .replace(/\\[\\.\\.\\.[\\w]+\\]/g, \".*\")     // [...slug] → .*\n    .replace(/\\[[\\w]+\\]/g, \"[^/]+\")        // [slug] → [^/]+\n    .replace(/\\*/g, \"[^/]+\");              // * → [^/]+\n\n  const regex = new RegExp(`^${regexStr}$`);\n  return regex.test(path);\n}\n\n/**\n * Find the best matching route config for a given path.\n * More specific patterns take priority over wildcards.\n */\nexport function findRouteConfig(\n  path: string,\n  routes: Record<string, RouteConfig>\n): RouteConfig | null {\n  // Sort routes by specificity (longer patterns first, * last)\n  const sortedPatterns = Object.keys(routes).sort((a, b) => {\n    if (a === \"*\") return 1;\n    if (b === \"*\") return -1;\n    return b.length - a.length;\n  });\n\n  for (const pattern of sortedPatterns) {\n    if (matchRoute(path, pattern)) {\n      return routes[pattern];\n    }\n  }\n\n  return null;\n}\n","/**\n * @ogpipe/next/client — Framework-agnostic API client for OGPipe\n *\n * This is the thin HTTP client that communicates with the OGPipe rendering API.\n * Can be used standalone (Python, Go, curl equivalent) or via the Next.js integration.\n */\n\nexport interface OGPipeClientOptions {\n  /** API key (og_live_xxx). Defaults to OGPIPE_API_KEY env var. */\n  apiKey?: string;\n  /** API base URL. Defaults to https://api.ogpipe.dev */\n  baseUrl?: string;\n  /** Request timeout in ms. Defaults to 30000. */\n  timeout?: number;\n}\n\nexport interface RenderRequest {\n  /** HTML content to render */\n  html: string;\n  /** Image width (default: 1200) */\n  width?: number;\n  /** Image height (default: 630) */\n  height?: number;\n  /** Output format (default: png) */\n  format?: \"png\" | \"jpeg\" | \"webp\";\n}\n\nexport interface RenderResponse {\n  /** CDN URL of the rendered image */\n  url: string;\n  /** Image width */\n  width: number;\n  /** Image height */\n  height: number;\n  /** Output format */\n  format: string;\n  /** Whether served from cache */\n  cached: boolean;\n}\n\nexport interface RenderResult {\n  success: true;\n  data: RenderResponse;\n}\n\nexport interface RenderError {\n  success: false;\n  error: string;\n  statusCode: number;\n}\n\nexport type RenderOutcome = RenderResult | RenderError;\n\n/**\n * OGPipe API client.\n *\n * Usage:\n * ```ts\n * import { OGPipeClient } from '@ogpipe/next/client'\n *\n * const client = new OGPipeClient({ apiKey: 'og_live_xxx' })\n * const result = await client.render({ html: '<div>Hello</div>' })\n * ```\n */\nexport class OGPipeClient {\n  private apiKey: string;\n  private baseUrl: string;\n  private timeout: number;\n\n  constructor(options: OGPipeClientOptions = {}) {\n    this.apiKey = options.apiKey || process.env.OGPIPE_API_KEY || \"\";\n    this.baseUrl = options.baseUrl || process.env.OGPIPE_BASE_URL || \"https://api.ogpipe.dev\";\n    this.timeout = options.timeout || 30_000;\n\n    if (!this.apiKey) {\n      throw new Error(\n        \"[OGPipe] Missing API key. Set OGPIPE_API_KEY environment variable or pass apiKey option.\"\n      );\n    }\n  }\n\n  /**\n   * Render HTML to an image. Returns the CDN URL.\n   */\n  async render(request: RenderRequest): Promise<RenderOutcome> {\n    const controller = new AbortController();\n    const timer = setTimeout(() => controller.abort(), this.timeout);\n\n    try {\n      const res = await fetch(`${this.baseUrl}/images`, {\n        method: \"POST\",\n        headers: {\n          Authorization: `Bearer ${this.apiKey}`,\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify({\n          html: request.html,\n          width: request.width || 1200,\n          height: request.height || 630,\n          format: request.format || \"png\",\n        }),\n        signal: controller.signal,\n      });\n\n      const body = await res.json() as { error?: string };\n\n      if (!res.ok) {\n        return {\n          success: false,\n          error: body.error || `HTTP ${res.status}`,\n          statusCode: res.status,\n        };\n      }\n\n      return {\n        success: true,\n        data: body as RenderResponse,\n      };\n    } catch (err) {\n      if (err instanceof Error && err.name === \"AbortError\") {\n        return { success: false, error: \"Request timed out\", statusCode: 408 };\n      }\n      return {\n        success: false,\n        error: err instanceof Error ? err.message : \"Unknown error\",\n        statusCode: 500,\n      };\n    } finally {\n      clearTimeout(timer);\n    }\n  }\n\n  /**\n   * Render HTML and return the raw image buffer (for writing to disk).\n   */\n  async renderToBuffer(request: RenderRequest): Promise<Buffer | null> {\n    const result = await this.render(request);\n    if (!result.success) return null;\n\n    // Fetch the image from CDN URL\n    const res = await fetch(result.data.url);\n    if (!res.ok) return null;\n\n    return Buffer.from(await res.arrayBuffer());\n  }\n}\n","/**\n * On-demand OG Image handler for Next.js App Router.\n *\n * Use this for dynamic routes where build-time generation isn't possible.\n * The handler calls the OGPipe API on first request, then CDN-caches the result.\n *\n * Usage in app/blog/[slug]/opengraph-image.ts:\n * ```ts\n * import { OGImageHandler } from '@ogpipe/next'\n *\n * export default OGImageHandler({\n *   template: 'blog',\n *   revalidate: 86400,\n *   fallback: '/og-fallback.png',\n * })\n * ```\n */\n\nimport { OGPipeClient } from \"../client/index.js\";\nimport {\n  OGPipeConfig,\n  OGPipeTemplate,\n  resolveTemplateHtml,\n  injectVariables,\n} from \"./config.js\";\n\nexport interface OGImageHandlerOptions {\n  /** Template ID (must exist in ogpipe.config.ts templates) */\n  template?: string;\n  /** Inline HTML (alternative to template) */\n  html?: string;\n  /** Variables to inject into the template */\n  vars?: Record<string, string> | ((params: Record<string, string>) => Record<string, string>);\n  /** Cache duration in seconds (default: 86400 = 24h) */\n  revalidate?: number;\n  /** Fallback image path if API is unavailable */\n  fallback?: string;\n  /** Image width (default: 1200) */\n  width?: number;\n  /** Image height (default: 630) */\n  height?: number;\n}\n\n/**\n * Create an on-demand OG image route handler.\n *\n * Returns a Next.js-compatible route handler that:\n * 1. Resolves the template HTML with variables\n * 2. Calls OGPipe API to render\n * 3. Returns the image with cache headers\n * 4. Falls back to a static image if API is down\n */\nexport function OGImageHandler(options: OGImageHandlerOptions) {\n  const {\n    revalidate = 86400,\n    fallback,\n    width = 1200,\n    height = 630,\n  } = options;\n\n  return async function handler(\n    request: Request,\n    context: { params?: Record<string, string | string[]> }\n  ): Promise<Response> {\n    try {\n      const client = new OGPipeClient();\n\n      // Resolve HTML\n      let html: string;\n      if (options.html) {\n        html = options.html;\n      } else {\n        // Template-based — caller must provide resolved HTML\n        // In practice, the developer passes vars directly\n        html = options.html || \"<div>{{title}}</div>\";\n      }\n\n      // Resolve variables\n      const params = flattenParams(context.params || {});\n      const vars =\n        typeof options.vars === \"function\"\n          ? options.vars(params)\n          : options.vars || {};\n\n      html = injectVariables(html, vars);\n\n      // Render via API\n      const result = await client.render({ html, width, height });\n\n      if (!result.success) {\n        // Fallback to static image\n        if (fallback) {\n          return Response.redirect(new URL(fallback, request.url), 302);\n        }\n        return new Response(\"OG image generation failed\", { status: 500 });\n      }\n\n      // Fetch the rendered image and return it\n      const imageRes = await fetch(result.data.url);\n      const imageBuffer = await imageRes.arrayBuffer();\n\n      return new Response(imageBuffer, {\n        headers: {\n          \"Content-Type\": `image/${result.data.format}`,\n          \"Cache-Control\": `public, s-maxage=${revalidate}, stale-while-revalidate=${revalidate * 2}`,\n        },\n      });\n    } catch (err) {\n      // On any error, try fallback\n      if (fallback) {\n        return Response.redirect(new URL(fallback, request.url), 302);\n      }\n      return new Response(\"OG image generation failed\", { status: 500 });\n    }\n  };\n}\n\n/**\n * Flatten Next.js route params (which can be string | string[]) to Record<string, string>.\n */\nfunction flattenParams(params: Record<string, string | string[]>): Record<string, string> {\n  const flat: Record<string, string> = {};\n  for (const [key, value] of Object.entries(params)) {\n    flat[key] = Array.isArray(value) ? value.join(\"/\") : value;\n  }\n  return flat;\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,139 @@
+// src/next/config.ts
+function defineConfig(config) {
+  return config;
+}
+function injectVariables(html, variables) {
+  return html.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+    return variables[key] ?? "";
+  });
+}
+
+// src/client/index.ts
+var OGPipeClient = class {
+  apiKey;
+  baseUrl;
+  timeout;
+  constructor(options = {}) {
+    this.apiKey = options.apiKey || process.env.OGPIPE_API_KEY || "";
+    this.baseUrl = options.baseUrl || process.env.OGPIPE_BASE_URL || "https://api.ogpipe.dev";
+    this.timeout = options.timeout || 3e4;
+    if (!this.apiKey) {
+      throw new Error(
+        "[OGPipe] Missing API key. Set OGPIPE_API_KEY environment variable or pass apiKey option."
+      );
+    }
+  }
+  /**
+   * Render HTML to an image. Returns the CDN URL.
+   */
+  async render(request) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), this.timeout);
+    try {
+      const res = await fetch(`${this.baseUrl}/images`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${this.apiKey}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          html: request.html,
+          width: request.width || 1200,
+          height: request.height || 630,
+          format: request.format || "png"
+        }),
+        signal: controller.signal
+      });
+      const body = await res.json();
+      if (!res.ok) {
+        return {
+          success: false,
+          error: body.error || `HTTP ${res.status}`,
+          statusCode: res.status
+        };
+      }
+      return {
+        success: true,
+        data: body
+      };
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") {
+        return { success: false, error: "Request timed out", statusCode: 408 };
+      }
+      return {
+        success: false,
+        error: err instanceof Error ? err.message : "Unknown error",
+        statusCode: 500
+      };
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+  /**
+   * Render HTML and return the raw image buffer (for writing to disk).
+   */
+  async renderToBuffer(request) {
+    const result = await this.render(request);
+    if (!result.success) return null;
+    const res = await fetch(result.data.url);
+    if (!res.ok) return null;
+    return Buffer.from(await res.arrayBuffer());
+  }
+};
+
+// src/next/handler.ts
+function OGImageHandler(options) {
+  const {
+    revalidate = 86400,
+    fallback,
+    width = 1200,
+    height = 630
+  } = options;
+  return async function handler(request, context) {
+    try {
+      const client = new OGPipeClient();
+      let html;
+      if (options.html) {
+        html = options.html;
+      } else {
+        html = options.html || "<div>{{title}}</div>";
+      }
+      const params = flattenParams(context.params || {});
+      const vars = typeof options.vars === "function" ? options.vars(params) : options.vars || {};
+      html = injectVariables(html, vars);
+      const result = await client.render({ html, width, height });
+      if (!result.success) {
+        if (fallback) {
+          return Response.redirect(new URL(fallback, request.url), 302);
+        }
+        return new Response("OG image generation failed", { status: 500 });
+      }
+      const imageRes = await fetch(result.data.url);
+      const imageBuffer = await imageRes.arrayBuffer();
+      return new Response(imageBuffer, {
+        headers: {
+          "Content-Type": `image/${result.data.format}`,
+          "Cache-Control": `public, s-maxage=${revalidate}, stale-while-revalidate=${revalidate * 2}`
+        }
+      });
+    } catch (err) {
+      if (fallback) {
+        return Response.redirect(new URL(fallback, request.url), 302);
+      }
+      return new Response("OG image generation failed", { status: 500 });
+    }
+  };
+}
+function flattenParams(params) {
+  const flat = {};
+  for (const [key, value] of Object.entries(params)) {
+    flat[key] = Array.isArray(value) ? value.join("/") : value;
+  }
+  return flat;
+}
+export {
+  OGImageHandler,
+  OGPipeClient,
+  defineConfig
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/next/config.ts","../src/client/index.ts","../src/next/handler.ts"],"sourcesContent":["/**\n * OGPipe configuration schema.\n *\n * Developers define this in ogpipe.config.ts at their project root.\n * The CLI reads this to know which templates to use for which routes.\n */\n\nimport { readFileSync } from \"fs\";\nimport { resolve, dirname } from \"path\";\n\n// ─────────────────────────────────────────────\n// Config Types\n// ─────────────────────────────────────────────\n\nexport interface OGPipeTemplate {\n  /** Inline HTML string with {{variable}} placeholders */\n  html?: string;\n  /** Path to an HTML template file (relative to config file) */\n  file?: string;\n  /** Image width (default: 1200) */\n  width?: number;\n  /** Image height (default: 630) */\n  height?: number;\n  /** Output format (default: png) */\n  format?: \"png\" | \"jpeg\" | \"webp\";\n}\n\nexport interface RouteConfig {\n  /** Template ID to use for this route */\n  template: string;\n  /** Function to extract variables from page metadata */\n  vars?: (metadata: RouteMetadata) => Record<string, string>;\n}\n\nexport interface RouteMetadata {\n  /** Page title from metadata export */\n  title?: string;\n  /** Page description from metadata export */\n  description?: string;\n  /** Route path (e.g., /blog/my-post) */\n  path: string;\n  /** Route params (e.g., { slug: 'my-post' }) */\n  params?: Record<string, string>;\n  /** Any additional metadata from the page */\n  [key: string]: unknown;\n}\n\nexport interface OnDemandConfig {\n  /** Cache duration in seconds (default: 86400 = 24h) */\n  revalidate?: number;\n  /** Fallback image path if API is unavailable */\n  fallback?: string;\n}\n\nexport interface OGPipeConfig {\n  /** API key. Defaults to OGPIPE_API_KEY env var. */\n  apiKey?: string;\n  /** API base URL. Defaults to https://api.ogpipe.dev */\n  baseUrl?: string;\n  /** Named templates */\n  templates: Record<string, OGPipeTemplate>;\n  /** Route-to-template mapping. Supports glob patterns. */\n  routes: Record<string, RouteConfig>;\n  /** On-demand rendering config (for dynamic routes) */\n  onDemand?: OnDemandConfig;\n  /** Output directory for generated images (default: public/og) */\n  outDir?: string;\n}\n\n// ─────────────────────────────────────────────\n// Config Helper\n// ─────────────────────────────────────────────\n\n/**\n * Helper to define a type-safe OGPipe config.\n *\n * Usage in ogpipe.config.ts:\n * ```ts\n * import { defineConfig } from '@ogpipe/next'\n *\n * export default defineConfig({\n *   templates: { ... },\n *   routes: { ... },\n * })\n * ```\n */\nexport function defineConfig(config: OGPipeConfig): OGPipeConfig {\n  return config;\n}\n\n// ─────────────────────────────────────────────\n// Template Resolution\n// ─────────────────────────────────────────────\n\n/**\n * Resolve a template to its final HTML string.\n * If the template uses a `file` path, reads the file from disk.\n */\nexport function resolveTemplateHtml(\n  template: OGPipeTemplate,\n  configDir: string\n): string {\n  if (template.html) {\n    return template.html;\n  }\n\n  if (template.file) {\n    const filePath = resolve(configDir, template.file);\n    try {\n      return readFileSync(filePath, \"utf-8\");\n    } catch (err) {\n      throw new Error(`[OGPipe] Template file not found: ${filePath}`);\n    }\n  }\n\n  throw new Error(\"[OGPipe] Template must have either 'html' or 'file' property.\");\n}\n\n/**\n * Inject variables into an HTML template string.\n * Replaces {{variable}} placeholders with values.\n */\nexport function injectVariables(\n  html: string,\n  variables: Record<string, string>\n): string {\n  return html.replace(/\\{\\{(\\w+)\\}\\}/g, (_, key: string) => {\n    return variables[key] ?? \"\";\n  });\n}\n\n/**\n * Match a route path against a glob pattern.\n * Supports:\n *   /blog/[slug]  → matches /blog/anything\n *   /blog/*       → matches /blog/anything\n *   *             → matches everything (default fallback)\n */\nexport function matchRoute(\n  path: string,\n  pattern: string\n): boolean {\n  if (pattern === \"*\") return true;\n\n  // Convert Next.js dynamic route pattern to regex\n  const regexStr = pattern\n    .replace(/\\[\\.\\.\\.[\\w]+\\]/g, \".*\")     // [...slug] → .*\n    .replace(/\\[[\\w]+\\]/g, \"[^/]+\")        // [slug] → [^/]+\n    .replace(/\\*/g, \"[^/]+\");              // * → [^/]+\n\n  const regex = new RegExp(`^${regexStr}$`);\n  return regex.test(path);\n}\n\n/**\n * Find the best matching route config for a given path.\n * More specific patterns take priority over wildcards.\n */\nexport function findRouteConfig(\n  path: string,\n  routes: Record<string, RouteConfig>\n): RouteConfig | null {\n  // Sort routes by specificity (longer patterns first, * last)\n  const sortedPatterns = Object.keys(routes).sort((a, b) => {\n    if (a === \"*\") return 1;\n    if (b === \"*\") return -1;\n    return b.length - a.length;\n  });\n\n  for (const pattern of sortedPatterns) {\n    if (matchRoute(path, pattern)) {\n      return routes[pattern];\n    }\n  }\n\n  return null;\n}\n","/**\n * @ogpipe/next/client — Framework-agnostic API client for OGPipe\n *\n * This is the thin HTTP client that communicates with the OGPipe rendering API.\n * Can be used standalone (Python, Go, curl equivalent) or via the Next.js integration.\n */\n\nexport interface OGPipeClientOptions {\n  /** API key (og_live_xxx). Defaults to OGPIPE_API_KEY env var. */\n  apiKey?: string;\n  /** API base URL. Defaults to https://api.ogpipe.dev */\n  baseUrl?: string;\n  /** Request timeout in ms. Defaults to 30000. */\n  timeout?: number;\n}\n\nexport interface RenderRequest {\n  /** HTML content to render */\n  html: string;\n  /** Image width (default: 1200) */\n  width?: number;\n  /** Image height (default: 630) */\n  height?: number;\n  /** Output format (default: png) */\n  format?: \"png\" | \"jpeg\" | \"webp\";\n}\n\nexport interface RenderResponse {\n  /** CDN URL of the rendered image */\n  url: string;\n  /** Image width */\n  width: number;\n  /** Image height */\n  height: number;\n  /** Output format */\n  format: string;\n  /** Whether served from cache */\n  cached: boolean;\n}\n\nexport interface RenderResult {\n  success: true;\n  data: RenderResponse;\n}\n\nexport interface RenderError {\n  success: false;\n  error: string;\n  statusCode: number;\n}\n\nexport type RenderOutcome = RenderResult | RenderError;\n\n/**\n * OGPipe API client.\n *\n * Usage:\n * ```ts\n * import { OGPipeClient } from '@ogpipe/next/client'\n *\n * const client = new OGPipeClient({ apiKey: 'og_live_xxx' })\n * const result = await client.render({ html: '<div>Hello</div>' })\n * ```\n */\nexport class OGPipeClient {\n  private apiKey: string;\n  private baseUrl: string;\n  private timeout: number;\n\n  constructor(options: OGPipeClientOptions = {}) {\n    this.apiKey = options.apiKey || process.env.OGPIPE_API_KEY || \"\";\n    this.baseUrl = options.baseUrl || process.env.OGPIPE_BASE_URL || \"https://api.ogpipe.dev\";\n    this.timeout = options.timeout || 30_000;\n\n    if (!this.apiKey) {\n      throw new Error(\n        \"[OGPipe] Missing API key. Set OGPIPE_API_KEY environment variable or pass apiKey option.\"\n      );\n    }\n  }\n\n  /**\n   * Render HTML to an image. Returns the CDN URL.\n   */\n  async render(request: RenderRequest): Promise<RenderOutcome> {\n    const controller = new AbortController();\n    const timer = setTimeout(() => controller.abort(), this.timeout);\n\n    try {\n      const res = await fetch(`${this.baseUrl}/images`, {\n        method: \"POST\",\n        headers: {\n          Authorization: `Bearer ${this.apiKey}`,\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify({\n          html: request.html,\n          width: request.width || 1200,\n          height: request.height || 630,\n          format: request.format || \"png\",\n        }),\n        signal: controller.signal,\n      });\n\n      const body = await res.json() as { error?: string };\n\n      if (!res.ok) {\n        return {\n          success: false,\n          error: body.error || `HTTP ${res.status}`,\n          statusCode: res.status,\n        };\n      }\n\n      return {\n        success: true,\n        data: body as RenderResponse,\n      };\n    } catch (err) {\n      if (err instanceof Error && err.name === \"AbortError\") {\n        return { success: false, error: \"Request timed out\", statusCode: 408 };\n      }\n      return {\n        success: false,\n        error: err instanceof Error ? err.message : \"Unknown error\",\n        statusCode: 500,\n      };\n    } finally {\n      clearTimeout(timer);\n    }\n  }\n\n  /**\n   * Render HTML and return the raw image buffer (for writing to disk).\n   */\n  async renderToBuffer(request: RenderRequest): Promise<Buffer | null> {\n    const result = await this.render(request);\n    if (!result.success) return null;\n\n    // Fetch the image from CDN URL\n    const res = await fetch(result.data.url);\n    if (!res.ok) return null;\n\n    return Buffer.from(await res.arrayBuffer());\n  }\n}\n","/**\n * On-demand OG Image handler for Next.js App Router.\n *\n * Use this for dynamic routes where build-time generation isn't possible.\n * The handler calls the OGPipe API on first request, then CDN-caches the result.\n *\n * Usage in app/blog/[slug]/opengraph-image.ts:\n * ```ts\n * import { OGImageHandler } from '@ogpipe/next'\n *\n * export default OGImageHandler({\n *   template: 'blog',\n *   revalidate: 86400,\n *   fallback: '/og-fallback.png',\n * })\n * ```\n */\n\nimport { OGPipeClient } from \"../client/index.js\";\nimport {\n  OGPipeConfig,\n  OGPipeTemplate,\n  resolveTemplateHtml,\n  injectVariables,\n} from \"./config.js\";\n\nexport interface OGImageHandlerOptions {\n  /** Template ID (must exist in ogpipe.config.ts templates) */\n  template?: string;\n  /** Inline HTML (alternative to template) */\n  html?: string;\n  /** Variables to inject into the template */\n  vars?: Record<string, string> | ((params: Record<string, string>) => Record<string, string>);\n  /** Cache duration in seconds (default: 86400 = 24h) */\n  revalidate?: number;\n  /** Fallback image path if API is unavailable */\n  fallback?: string;\n  /** Image width (default: 1200) */\n  width?: number;\n  /** Image height (default: 630) */\n  height?: number;\n}\n\n/**\n * Create an on-demand OG image route handler.\n *\n * Returns a Next.js-compatible route handler that:\n * 1. Resolves the template HTML with variables\n * 2. Calls OGPipe API to render\n * 3. Returns the image with cache headers\n * 4. Falls back to a static image if API is down\n */\nexport function OGImageHandler(options: OGImageHandlerOptions) {\n  const {\n    revalidate = 86400,\n    fallback,\n    width = 1200,\n    height = 630,\n  } = options;\n\n  return async function handler(\n    request: Request,\n    context: { params?: Record<string, string | string[]> }\n  ): Promise<Response> {\n    try {\n      const client = new OGPipeClient();\n\n      // Resolve HTML\n      let html: string;\n      if (options.html) {\n        html = options.html;\n      } else {\n        // Template-based — caller must provide resolved HTML\n        // In practice, the developer passes vars directly\n        html = options.html || \"<div>{{title}}</div>\";\n      }\n\n      // Resolve variables\n      const params = flattenParams(context.params || {});\n      const vars =\n        typeof options.vars === \"function\"\n          ? options.vars(params)\n          : options.vars || {};\n\n      html = injectVariables(html, vars);\n\n      // Render via API\n      const result = await client.render({ html, width, height });\n\n      if (!result.success) {\n        // Fallback to static image\n        if (fallback) {\n          return Response.redirect(new URL(fallback, request.url), 302);\n        }\n        return new Response(\"OG image generation failed\", { status: 500 });\n      }\n\n      // Fetch the rendered image and return it\n      const imageRes = await fetch(result.data.url);\n      const imageBuffer = await imageRes.arrayBuffer();\n\n      return new Response(imageBuffer, {\n        headers: {\n          \"Content-Type\": `image/${result.data.format}`,\n          \"Cache-Control\": `public, s-maxage=${revalidate}, stale-while-revalidate=${revalidate * 2}`,\n        },\n      });\n    } catch (err) {\n      // On any error, try fallback\n      if (fallback) {\n        return Response.redirect(new URL(fallback, request.url), 302);\n      }\n      return new Response(\"OG image generation failed\", { status: 500 });\n    }\n  };\n}\n\n/**\n * Flatten Next.js route params (which can be string | string[]) to Record<string, string>.\n */\nfunction flattenParams(params: Record<string, string | string[]>): Record<string, string> {\n  const flat: Record<string, string> = {};\n  for (const [key, value] of Object.entries(params)) {\n    flat[key] = Array.isArray(value) ? value.join(\"/\") : value;\n  }\n  return flat;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ogpipe/next",
+  "version": "0.1.0",
+  "description": "Pixel-perfect OG images for Next.js — full CSS, any font, any hosting platform",
+  "keywords": ["og-image", "open-graph", "next.js", "social-cards", "seo", "chromium"],
+  "license": "MIT",
+  "author": "Order Udye Pvt Ltd",
+  "homepage": "https://ogpipe.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ogpipe/ogpipe-next"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.js",
+      "require": "./dist/client/index.cjs"
+    }
+  },
+  "bin": {
+    "ogpipe": "./dist/bin/ogpipe.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": { "optional": false },
+    "react": { "optional": false },
+    "react-dom": { "optional": false }
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.4.0",
+    "vitest": "^2.0.0"
+  }
+}

package/templates/blog.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] } } } }</script>
+</head>
+<body class="w-[1200px] h-[630px] flex flex-col justify-between p-16 font-sans bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
+  <!-- Subtle glow -->
+  <div class="absolute top-[-200px] right-[-100px] w-[500px] h-[500px] rounded-full bg-blue-500/10 blur-3xl"></div>
+  <div class="absolute bottom-[-200px] left-[-100px] w-[400px] h-[400px] rounded-full bg-purple-500/8 blur-3xl"></div>
+
+  <!-- Content -->
+  <div class="relative z-10 flex-1 flex flex-col justify-center">
+    <h1 class="text-[56px] font-bold text-white leading-[1.15] tracking-tight max-w-[900px]">{{title}}</h1>
+    <p class="text-[22px] text-slate-400 mt-5 max-w-[700px] leading-relaxed">{{description}}</p>
+  </div>
+
+  <!-- Footer -->
+  <div class="relative z-10 flex items-center justify-between">
+    <div class="flex items-center gap-3">
+      <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">{{author_initial}}</div>
+      <div>
+        <p class="text-white font-medium text-base">{{author}}</p>
+        <p class="text-slate-500 text-sm">{{date}}</p>
+      </div>
+    </div>
+    <p class="text-slate-600 text-base">{{site}}</p>
+  </div>
+</body>
+</html>

package/templates/changelog.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] } } } }</script>
+</head>
+<body class="w-[1200px] h-[630px] flex flex-col justify-center p-16 font-sans bg-[#0a0a0f] relative overflow-hidden">
+  <!-- Gradient accent -->
+  <div class="absolute top-0 left-0 w-full h-[3px] bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500"></div>
+  <div class="absolute top-0 right-16 w-[300px] h-[300px] rounded-full bg-emerald-500/5 blur-3xl"></div>
+
+  <!-- Version badge -->
+  <div class="relative z-10 flex items-center gap-3 mb-6">
+    <span class="px-3 py-1.5 rounded-md bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 font-mono text-sm font-medium">{{version}}</span>
+    <span class="text-slate-600 text-sm">{{date}}</span>
+  </div>
+
+  <!-- Headline -->
+  <h1 class="relative z-10 text-[52px] font-bold text-white leading-[1.15] tracking-tight max-w-[900px]">{{title}}</h1>
+
+  <!-- Summary -->
+  <p class="relative z-10 text-[20px] text-slate-400 mt-5 max-w-[700px] leading-relaxed">{{description}}</p>
+
+  <!-- Footer -->
+  <div class="relative z-10 mt-auto flex items-center gap-2">
+    <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
+    <span class="text-slate-600 text-sm font-medium">{{site}}</span>
+  </div>
+</body>
+</html>

package/templates/docs.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] } } } }</script>
+</head>
+<body class="w-[1200px] h-[630px] flex flex-col justify-center p-16 font-sans bg-[#fafafa] relative">
+  <!-- Top accent line -->
+  <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-cyan-500 to-teal-500"></div>
+
+  <!-- Category badge -->
+  <span class="inline-flex items-center w-fit px-3 py-1.5 rounded-md bg-blue-50 border border-blue-100 text-blue-700 font-mono text-sm font-medium mb-6">{{category}}</span>
+
+  <!-- Title -->
+  <h1 class="text-[48px] font-semibold text-gray-900 leading-[1.2] tracking-tight max-w-[900px]">{{title}}</h1>
+
+  <!-- Description -->
+  <p class="text-[22px] text-gray-500 mt-4 max-w-[750px] leading-relaxed">{{description}}</p>
+
+  <!-- Brand -->
+  <p class="absolute bottom-14 right-16 text-[20px] font-medium text-gray-400">{{site}}</p>
+</body>
+</html>