jskelet 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -10,6 +10,10 @@ one is listed under a **Breaking** heading.
 
 ### Added
 
+- Dynamic Open Graph images (Next.js `ImageResponse` / `opengraph-image`):
+  `ogImage`, `sendOgImage`, `ogHandler`, and `ImageResponse` turn card fields or
+  raw SVG into PNG when `sharp` is installed (SVG fallback otherwise). Wired in
+  `examples/blog` as `/og/blog/:slug.png` and `metadata.openGraph.image`.
 - Early HTML cache refresh before TTL expiry: the last successful produce time
   (`produceMs`) sets a lead window (`min(max(produceMs×2, 250ms), ttl/2)`). A
   still-fresh `HIT` in that window revalidates in the background; idle entries

package/docs/03-routing.md

@@ -35,6 +35,10 @@ gerekmez:
 | `redirect` | `jskelet` → `redirect` |
 | `permanentRedirect` | `jskelet` → `permanentRedirect` |
 | `seeOther` | `jskelet` → `seeOther` |
+| `ogHandler` | `jskelet` → `ogHandler` |
+| `ogImage` | `jskelet` → `ogImage` |
+| `sendOgImage` | `jskelet` → `sendOgImage` |
+| `ImageResponse` | `jskelet` → `ImageResponse` |
 
 İstersen doğrudan import da edebilirsin; `api` yalnızca kolaylık:
 

package/docs/04-render-ve-sablonlar.md

@@ -511,6 +511,64 @@ return {
 `renderHeadMeta(metadata)` fonksiyonu dışa açıktır; layout dışında (ör. bir
 fragment ya da e-posta) aynı etiketleri üretmek gerekirse kullanılabilir.
 
+## Dinamik OG görselleri
+
+Next.js `ImageResponse` / `opengraph-image.tsx` karşılığı. JSX yok: kart
+alanları (`title`, `description`, `siteName`, renkler) ya da ham `svg` verilir.
+`sharp` (opsiyonel peer) kuruluysa PNG, yoksa SVG döner. Sosyal kazıyıcıların
+çoğu PNG beklediği için prod'da `sharp` önerilir.
+
+HTML değil görsel döndüğü için `route()` kullanılmaz — `ogHandler` düz bir
+Express handler üretir. `notFound()` ve `null` dönüşü 404 olur.
+
+```js
+// routes/35-og.mjs
+export default function register(app, { ogHandler, notFound }) {
+  app.get(
+    "/og/blog/:slug.png",
+    ogHandler(async ({ params }) => {
+      const post = getPost(params.slug);
+      if (!post) notFound();
+      return {
+        title: post.title,
+        description: post.excerpt,
+        siteName: "Blog",
+      };
+    }),
+  );
+}
+```
+
+Sayfa metadata'sında mutlak URL ve boyut verin:
+
+```js
+openGraph: {
+  type: "article",
+  image: `${SITE_URL}/og/blog/${post.slug}.png`,
+  imageWidth: 1200,
+  imageHeight: 630,
+},
+```
+
+Ham SVG veya Next benzeri sınıf:
+
+```js
+import { ImageResponse, sendOgImage, OG_SIZE } from "jskelet";
+
+app.get("/og/custom.png", async (req, res) => {
+  const image = new ImageResponse(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630">…</svg>`,
+    OG_SIZE,
+  );
+  await image.send(res);
+  // veya: await sendOgImage(res, { title: "…", format: "svg" });
+});
+```
+
+Varsayılan `Cache-Control`:
+`public, max-age=0, s-maxage=86400, stale-while-revalidate=604800`.
+`cacheControl` seçeneğiyle ezilir. Çalışan örnek: `examples/blog/routes/35-og.mjs`.
+
 ## Hook'lar
 
 Hook'lar `jskelet.config.mjs` → `hooks` altında tanımlanır. Hepsi opsiyonel,

package/docs/11-tasima.md

@@ -40,6 +40,7 @@ alt kümesine benzetildi — `next.config` sözdizimi, Metadata API, `notFound()
 | `loading.js` / Suspense | — | Sunucu HTML'i tam; iskelet gerekmiyor |
 | Streaming SSR | — | Yanıt tek parça |
 | `generateMetadata()` | Controller `metadata` + `hooks.metadata()` | Aynı alan adları ([04](./04-render-ve-sablonlar.md)) |
+| `opengraph-image.tsx` / `ImageResponse` | `ogHandler` + `ImageResponse` / `sendOgImage` | SVG veya kart alanları → PNG (`sharp`); [04](./04-render-ve-sablonlar.md) |
 | `generateStaticParams()` | `hooks.prewarmPaths()` | Build zamanı değil, açılış zamanı ısıtma |
 | Route Handlers (`route.js`) | Düz Express handler'ı | `app.get/post(...)` |
 | Middleware (`middleware.ts`) | Express middleware + config `rewrites`/`headers`/`redirects` | `app.use(...)` |
@@ -68,6 +69,7 @@ başlığı elle okuyun.
 | `next/link` | `link({ href, text })` — `jskelet/tags` | `title` otomatik, dış bağlantıya `rel`/`target` otomatik |
 | `next/link` prefetch'i | `navigation: { prefetch, prerender }` | Speculation Rules; client runtime'ı yok ([07](./07-yapilandirma.md)) |
 | `next/image` | `image({ src, alt, priority })` — `jskelet/tags` | `srcset` build manifest'inden |
+| `next/og` `ImageResponse` | `ImageResponse` / `ogHandler` — `jskelet` | JSX yok; SVG veya `title`/`description` kartı |
 | `next/font/google` | `fonts: [{ family, weights }]` | Self-host woff2, commit edilir |
 | `@phosphor-icons/react` | `icon({ name, weight })` — `jskelet/tags` | Build zamanı SVG sprite |
 | `react-dom` preconnect/preload | `preconnect: [...]` + `headHints()` | ([04](./04-render-ve-sablonlar.md)) |

package/docs/README.md

@@ -57,8 +57,9 @@ npm --prefix examples/minimal run dev
 
 **`examples/blog/`** — dinamik route (`/blog/:slug`), etiket sayfaları,
 `redirects`/`rewrites`/`headers`/`cache` yapılandırmasının tamamı, fragment ile
-gelen sekme panelleri, form gönderimi, prewarm, `robots.txt`/`sitemap.xml`/`rss.xml`
-ve dört island (tema, sekme, arama, form).
+gelen sekme panelleri, form gönderimi, prewarm, `robots.txt`/`sitemap.xml`/`rss.xml`,
+dinamik OG görselleri (`/og/blog/:slug.png`) ve dört island (tema, sekme, arama,
+form).
 
 ```bash
 npm --prefix examples/blog install

package/docs/en/03-routing.md

@@ -36,6 +36,10 @@ don't have to import things one by one in every file:
 | `redirect` | `jskelet` → `redirect` |
 | `permanentRedirect` | `jskelet` → `permanentRedirect` |
 | `seeOther` | `jskelet` → `seeOther` |
+| `ogHandler` | `jskelet` → `ogHandler` |
+| `ogImage` | `jskelet` → `ogImage` |
+| `sendOgImage` | `jskelet` → `sendOgImage` |
+| `ImageResponse` | `jskelet` → `ImageResponse` |
 
 You can also import directly if you prefer; `api` is only a convenience:
 

package/docs/en/04-rendering.md

@@ -522,6 +522,64 @@ The `renderHeadMeta(metadata)` function is exported; it can be used when you
 need to produce the same tags outside the layout (for example in a fragment or
 an email).
 
+## Dynamic OG images
+
+Counterpart to Next.js `ImageResponse` / `opengraph-image.tsx`. There is no JSX:
+pass card fields (`title`, `description`, `siteName`, colours) or a raw `svg`.
+With the optional `sharp` peer installed the response is PNG; otherwise SVG.
+Most social scrapers expect PNG, so install `sharp` in production.
+
+Because the response is an image, not HTML, do not use `route()` — `ogHandler`
+returns a plain Express handler. `notFound()` and a `null` return yield 404.
+
+```js
+// routes/35-og.mjs
+export default function register(app, { ogHandler, notFound }) {
+  app.get(
+    "/og/blog/:slug.png",
+    ogHandler(async ({ params }) => {
+      const post = getPost(params.slug);
+      if (!post) notFound();
+      return {
+        title: post.title,
+        description: post.excerpt,
+        siteName: "Blog",
+      };
+    }),
+  );
+}
+```
+
+Point page metadata at the absolute URL and size:
+
+```js
+openGraph: {
+  type: "article",
+  image: `${SITE_URL}/og/blog/${post.slug}.png`,
+  imageWidth: 1200,
+  imageHeight: 630,
+},
+```
+
+Raw SVG or a Next-like class:
+
+```js
+import { ImageResponse, sendOgImage, OG_SIZE } from "jskelet";
+
+app.get("/og/custom.png", async (req, res) => {
+  const image = new ImageResponse(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630">…</svg>`,
+    OG_SIZE,
+  );
+  await image.send(res);
+  // or: await sendOgImage(res, { title: "…", format: "svg" });
+});
+```
+
+Default `Cache-Control`:
+`public, max-age=0, s-maxage=86400, stale-while-revalidate=604800`.
+Override with `cacheControl`. Working example: `examples/blog/routes/35-og.mjs`.
+
 ## Hooks
 
 Hooks are defined in `jskelet.config.mjs` under `hooks`. They are all optional

package/docs/en/11-migration.md

@@ -41,6 +41,7 @@ will feel familiar. The *reasons* behind the differences are in
 | `loading.js` / Suspense | — | The server HTML is complete; no skeleton needed |
 | Streaming SSR | — | The response is a single chunk |
 | `generateMetadata()` | Controller `metadata` + `hooks.metadata()` | Same field names ([04](./04-rendering.md)) |
+| `opengraph-image.tsx` / `ImageResponse` | `ogHandler` + `ImageResponse` / `sendOgImage` | SVG or card fields → PNG (`sharp`); [04](./04-rendering.md) |
 | `generateStaticParams()` | `hooks.prewarmPaths()` | Warming at startup time, not build time |
 | Route Handlers (`route.js`) | A plain Express handler | `app.get/post(...)` |
 | Middleware (`middleware.ts`) | Express middleware + config `rewrites`/`headers`/`redirects` | `app.use(...)` |
@@ -69,6 +70,7 @@ header manually.
 | `next/link` | `link({ href, text })` — `jskelet/tags` | `title` automatic, `rel`/`target` automatic for external links |
 | `next/link` prefetching | `navigation: { prefetch, prerender }` | Speculation Rules; no client runtime ([07](./07-configuration.md)) |
 | `next/image` | `image({ src, alt, priority })` — `jskelet/tags` | `srcset` from the build manifest |
+| `next/og` `ImageResponse` | `ImageResponse` / `ogHandler` — `jskelet` | No JSX; SVG or `title`/`description` card |
 | `next/font/google` | `fonts: [{ family, weights }]` | Self-hosted woff2, committed |
 | `@phosphor-icons/react` | `icon({ name, weight })` — `jskelet/tags` | Build-time SVG sprite |
 | `react-dom` preconnect/preload | `preconnect: [...]` + `headHints()` | ([04](./04-rendering.md)) |

package/docs/en/README.md

@@ -62,8 +62,8 @@ npm --prefix examples/minimal run dev
 **`examples/blog/`** — a dynamic route (`/blog/:slug`), tag pages, the whole of
 the `redirects`/`rewrites`/`headers`/`cache` configuration, tab panels arriving
 as fragments, form submission, prewarm,
-`robots.txt`/`sitemap.xml`/`rss.xml` and four islands (theme, tabs, search,
-form).
+`robots.txt`/`sitemap.xml`/`rss.xml`, dynamic OG images (`/og/blog/:slug.png`)
+and four islands (theme, tabs, search, form).
 
 ```bash
 npm --prefix examples/blog install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jskelet",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "A framework that feels like no framework: Express 5 + build-time .jsk (or EJS) SSR, vanilla JS islands, Tailwind v4 and an in-process HTML TTL cache.",
   "type": "module",
   "license": "MIT",

package/src/index.js

@@ -38,6 +38,16 @@ export {
 export { reportUpstreamFailure } from "./server/upstream-tracking.js";
 export { asset, hasAsset, optimizedImage, getSpriteIds } from "./server/assets.js";
 export { remoteImageUrl, parseAllowedRemoteUrl } from "./server/image-optimizer.js";
+export {
+  ImageResponse,
+  OG_SIZE,
+  buildOgSvg,
+  escapeXml,
+  ogHandler,
+  ogImage,
+  sendOgImage,
+  wrapText,
+} from "./server/og-image.js";
 export { headHints } from "./server/head-hints.js";
 export { renderHeadMeta } from "./server/metadata.js";
 export {

package/src/server/og-image.js

@@ -0,0 +1,356 @@
+/**
+ * Dinamik Open Graph görselleri — Next.js `ImageResponse` /
+ * `opengraph-image.tsx` karşılığı.
+ *
+ * JSX yok: ya hazır kart alanları (`title`, `description`, `siteName`) ya da
+ * ham `svg` verilir. sharp (opsiyonel peer) varsa PNG üretilir; yoksa SVG
+ * döner. Sosyal kazıyıcıların çoğu PNG beklediği için prod'da sharp önerilir.
+ *
+ * Domain bilgisi taşınmaz — metin, renk ve SVG uygulama tarafındandır.
+ */
+import { tryImportFromApp } from "../build/resolve-peer.mjs";
+import { getConfig } from "../config/index.js";
+import { isNotFoundError } from "../http/control-flow.js";
+
+/** @type {((input: Buffer, opts?: object) => import('sharp').Sharp) | null | undefined} */
+let sharpModule;
+
+/** Sosyal kartlar için yaygın boyut (Facebook / X / LinkedIn). */
+export const OG_SIZE = Object.freeze({ width: 1200, height: 630 });
+
+const DEFAULT_CACHE =
+  "public, max-age=0, s-maxage=86400, stale-while-revalidate=604800";
+
+/**
+ * @typedef {object} OgCardOptions
+ * @property {string} [title]
+ * @property {string} [description]
+ * @property {string} [siteName]
+ * @property {string} [background] Düz SVG rengi (`#0f172a`)
+ * @property {string} [color] Ana metin rengi
+ * @property {string} [mutedColor] Açıklama / site adı
+ * @property {string} [accent] Sol şerit rengi
+ */
+
+/**
+ * @typedef {OgCardOptions & {
+ *   svg?: string,
+ *   width?: number,
+ *   height?: number,
+ *   format?: 'png' | 'svg',
+ *   cacheControl?: string,
+ * }} OgImageOptions
+ */
+
+/**
+ * @typedef {object} OgImageResult
+ * @property {Buffer} body
+ * @property {string} contentType
+ * @property {number} width
+ * @property {number} height
+ */
+
+/**
+ * XML metin kaçışı — kullanıcı başlığı SVG'ye gömülür.
+ * @param {unknown} value
+ * @returns {string}
+ */
+export function escapeXml(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+/**
+ * Kelime sınırında satır kır. Uzun kelime kesilir; taşan içerik son satırda `…`.
+ * @param {string} text
+ * @param {number} maxChars
+ * @param {number} maxLines
+ * @returns {string[]}
+ */
+export function wrapText(text, maxChars, maxLines) {
+  const words = String(text ?? "")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+  if (!words.length || maxLines < 1 || maxChars < 1) return [];
+
+  /** @type {string[]} */
+  const lines = [];
+  let current = "";
+  let overflow = false;
+
+  const pushCurrent = () => {
+    if (!current) return;
+    lines.push(current);
+    current = "";
+  };
+
+  for (const word of words) {
+    if (lines.length >= maxLines) {
+      overflow = true;
+      break;
+    }
+
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length <= maxChars) {
+      current = candidate;
+      continue;
+    }
+
+    pushCurrent();
+    if (lines.length >= maxLines) {
+      overflow = true;
+      break;
+    }
+
+    if (word.length <= maxChars) {
+      current = word;
+      continue;
+    }
+
+    let rest = word;
+    while (rest.length > maxChars) {
+      if (lines.length >= maxLines) {
+        overflow = true;
+        rest = "";
+        break;
+      }
+      lines.push(rest.slice(0, maxChars));
+      rest = rest.slice(maxChars);
+    }
+    current = rest;
+  }
+
+  if (current && lines.length < maxLines) {
+    lines.push(current);
+  } else if (current) {
+    overflow = true;
+  }
+
+  if (overflow && lines.length) {
+    const last = lines[lines.length - 1];
+    const base = last.endsWith("…") ? last.slice(0, -1) : last;
+    const trimmed = base.slice(0, Math.max(1, maxChars - 1));
+    lines[lines.length - 1] = `${trimmed}…`;
+  }
+
+  return lines;
+}
+
+/**
+ * Hazır kart SVG'si. Uygulama kendi SVG'sini vermek isterse `svg` kullanır.
+ * @param {OgCardOptions & { width?: number, height?: number }} options
+ * @returns {string}
+ */
+export function buildOgSvg(options = {}) {
+  const width = options.width ?? OG_SIZE.width;
+  const height = options.height ?? OG_SIZE.height;
+  const background = options.background ?? "#0f172a";
+  const color = options.color ?? "#f8fafc";
+  const muted = options.mutedColor ?? "#94a3b8";
+  const accent = options.accent ?? "#38bdf8";
+
+  const titleLines = wrapText(options.title ?? "", 28, 3);
+  const descLines = wrapText(options.description ?? "", 52, 2);
+  const siteName = options.siteName ? escapeXml(options.siteName) : "";
+
+  const titleTs = titleLines
+    .map((line, i) => {
+      const dy = i === 0 ? 0 : 72;
+      return `<tspan x="80" dy="${dy}">${escapeXml(line)}</tspan>`;
+    })
+    .join("");
+
+  const descTs = descLines
+    .map((line, i) => {
+      const dy = i === 0 ? 0 : 40;
+      return `<tspan x="80" dy="${dy}">${escapeXml(line)}</tspan>`;
+    })
+    .join("");
+
+  const titleY = 200;
+  const descY = titleY + Math.max(titleLines.length, 1) * 72 + 36;
+
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
+    `<rect width="100%" height="100%" fill="${escapeXml(background)}"/>` +
+    `<rect x="0" y="0" width="14" height="${height}" fill="${escapeXml(accent)}"/>` +
+    (titleTs
+      ? `<text x="80" y="${titleY}" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="64" font-weight="700" fill="${escapeXml(color)}">${titleTs}</text>`
+      : "") +
+    (descTs
+      ? `<text x="80" y="${descY}" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="30" font-weight="400" fill="${escapeXml(muted)}">${descTs}</text>`
+      : "") +
+    (siteName
+      ? `<text x="80" y="${height - 64}" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="24" font-weight="600" fill="${escapeXml(muted)}">${siteName}</text>`
+      : "") +
+    `</svg>`
+  );
+}
+
+/**
+ * @returns {Promise<((input: Buffer, opts?: object) => import('sharp').Sharp) | null>}
+ */
+async function loadSharp() {
+  if (sharpModule !== undefined) return sharpModule;
+
+  /** @type {any} */
+  let mod = null;
+  try {
+    mod = await tryImportFromApp(getConfig().root, "sharp");
+  } catch {
+    // Config yoksa (birim test) doğrudan çözümle.
+    try {
+      mod = await import("sharp");
+    } catch {
+      mod = null;
+    }
+  }
+
+  sharpModule = mod?.default ?? mod ?? null;
+  return sharpModule;
+}
+
+/**
+ * SVG veya kart alanlarından PNG/SVG gövde üretir.
+ * @param {OgImageOptions} [options]
+ * @returns {Promise<OgImageResult>}
+ */
+export async function ogImage(options = {}) {
+  const width = options.width ?? OG_SIZE.width;
+  const height = options.height ?? OG_SIZE.height;
+  const svg =
+    typeof options.svg === "string" && options.svg.trim()
+      ? options.svg
+      : buildOgSvg({ ...options, width, height });
+
+  const preferSvg = options.format === "svg";
+  const sharp = preferSvg ? null : await loadSharp();
+
+  if (!sharp) {
+    return {
+      body: Buffer.from(svg, "utf8"),
+      contentType: "image/svg+xml; charset=utf-8",
+      width,
+      height,
+    };
+  }
+
+  const body = await sharp(Buffer.from(svg, "utf8"))
+    .resize(width, height, { fit: "fill" })
+    .png()
+    .toBuffer();
+
+  return {
+    body,
+    contentType: "image/png",
+    width,
+    height,
+  };
+}
+
+/**
+ * Express yanıtına OG görseli basar.
+ * @param {import('express').Response} res
+ * @param {OgImageOptions} [options]
+ * @returns {Promise<OgImageResult>}
+ */
+export async function sendOgImage(res, options = {}) {
+  const result = await ogImage(options);
+  const cacheControl = options.cacheControl ?? DEFAULT_CACHE;
+
+  res.status(200);
+  res.setHeader("Content-Type", result.contentType);
+  res.setHeader("Cache-Control", cacheControl);
+  res.setHeader("Content-Length", String(result.body.length));
+  // Kazıyıcılar ve CDN'ler için boyut ipucu (meta ile de verilir).
+  res.setHeader("X-Og-Width", String(result.width));
+  res.setHeader("X-Og-Height", String(result.height));
+  res.end(result.body);
+  return result;
+}
+
+/**
+ * Next `opengraph-image` route handler'ına yakın Express sarmalayıcı.
+ *
+ * Factory `null` dönerse veya `notFound()` fırlatırsa 404.
+ *
+ * @param {(ctx: { params: Record<string, string>, query: import('express').Request['query'], req: import('express').Request }) =>
+ *   OgImageOptions | null | Promise<OgImageOptions | null>} factory
+ * @param {OgImageOptions} [defaults] Her istekte birleşen varsayılanlar
+ * @returns {import('express').RequestHandler}
+ */
+export function ogHandler(factory, defaults = {}) {
+  return async (req, res, next) => {
+    try {
+      const result = await factory({
+        params: req.params ?? {},
+        query: req.query,
+        req,
+      });
+      if (result == null) {
+        res.status(404).end();
+        return;
+      }
+      await sendOgImage(res, { ...defaults, ...result });
+    } catch (error) {
+      if (isNotFoundError(error)) {
+        res.status(404).end();
+        return;
+      }
+      next(error);
+    }
+  };
+}
+
+/**
+ * Next.js `new ImageResponse(...)` DX'si. JSX yok — ilk argüman SVG string
+ * veya kart alanları nesnesi.
+ *
+ * @example
+ * ```js
+ * return new ImageResponse(
+ *   { title: post.title, description: post.excerpt, siteName: "Blog" },
+ *   { width: 1200, height: 630 },
+ * );
+ * // handler içinde: await image.send(res)
+ * ```
+ */
+export class ImageResponse {
+  /** @type {OgImageOptions} */
+  #options;
+
+  /**
+   * @param {string | OgCardOptions} element
+   * @param {Omit<OgImageOptions, keyof OgCardOptions | 'svg'> & { width?: number, height?: number }} [init]
+   */
+  constructor(element, init = {}) {
+    if (typeof element === "string") {
+      this.#options = { ...init, svg: element };
+    } else {
+      this.#options = { ...element, ...init };
+    }
+  }
+
+  /** @returns {OgImageOptions} */
+  get options() {
+    return this.#options;
+  }
+
+  /** @returns {Promise<OgImageResult>} */
+  async buffer() {
+    return ogImage(this.#options);
+  }
+
+  /**
+   * @param {import('express').Response} res
+   * @returns {Promise<OgImageResult>}
+   */
+  async send(res) {
+    return sendOgImage(res, this.#options);
+  }
+}

package/src/server/router.js

@@ -14,8 +14,9 @@
  *
  * Modül sözleşmesi: default export ya da `register` adlı named export,
  * `(app, api) => void | Promise<void>` imzasıyla. `api` içinde `route`,
- * `fragment`, `renderView`, `renderPage` ve `notFound`/`redirect` hazır gelir,
- * böylece route dosyaları framework'ten tek tek import yapmak zorunda kalmaz.
+ * `fragment`, `renderView`, `renderPage`, `notFound`/`redirect` ve
+ * `ogHandler` hazır gelir, böylece route dosyaları framework'ten tek tek
+ * import yapmak zorunda kalmaz.
  */
 import fs from "node:fs";
 import path from "node:path";
@@ -29,6 +30,7 @@ import {
   redirect,
   seeOther,
 } from "../http/control-flow.js";
+import { ImageResponse, ogHandler, ogImage, sendOgImage } from "./og-image.js";
 
 const isDev = process.env.NODE_ENV === "development";
 
@@ -96,6 +98,10 @@ const api = {
   redirect,
   permanentRedirect,
   seeOther,
+  ogHandler,
+  ogImage,
+  sendOgImage,
+  ImageResponse,
 };
 
 /**