@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/routes/metadata/og-image.d.ts

@@ -0,0 +1,62 @@
+type OgImageEntryLike = {
+    key: string;
+    routePath: string;
+    title: string;
+    description?: string;
+    source: "asset" | "generated" | "remote";
+    url: string;
+    width: number;
+    height: number;
+    alt: string;
+    group?: string;
+    logo?: {
+        dataUri?: string;
+        height?: number;
+        kind: "logo" | "mark" | "wordmark";
+        url: string;
+        width?: number;
+    };
+    siteName?: string;
+    siteUrl?: string;
+    label?: string;
+    background?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    accent?: string;
+    stroke?: string;
+    theme?: "light" | "dark";
+    fonts?: {
+        main: OgFontRoleLike;
+        mono: OgFontRoleLike;
+    };
+};
+type OgManifestLike = {
+    width: number;
+    height: number;
+    generated: Record<string, OgImageEntryLike>;
+};
+type OgImageRouteConfig = {
+    manifest: OgManifestLike;
+};
+type RouteContext = {
+    params: Promise<{
+        key: string;
+    }> | {
+        key: string;
+    };
+};
+type OgFontRoleLike = {
+    family: string;
+    files?: ReadonlyArray<{
+        data: string;
+        style: "normal" | "italic";
+        weight: number;
+    }>;
+    sourceType: "google" | "local" | "url";
+};
+declare function createOgImageRoute({ manifest }: OgImageRouteConfig): (_request: Request, context: RouteContext) => Promise<Response>;
+declare function createOgImageStaticParams({ manifest }: OgImageRouteConfig): {
+    key: string;
+}[];
+
+export { type OgImageEntryLike, type OgImageRouteConfig, type OgManifestLike, createOgImageRoute, createOgImageStaticParams };

package/dist/kernel/routes/metadata/og-image.js

@@ -0,0 +1,604 @@
+// src/kernel/routes/metadata/og-image.tsx
+import { readFile } from "fs/promises";
+import { createRequire } from "module";
+import { ImageResponse } from "next/og";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ERROR_HEADERS = {
+  "cache-control": "public, max-age=60, must-revalidate",
+  "cdn-cache-control": "public, max-age=300",
+  "vercel-cdn-cache-control": "public, max-age=300",
+  "x-content-type-options": "nosniff"
+};
+var SUCCESS_HEADERS = {
+  "cache-control": "public, max-age=31536000, immutable",
+  "cdn-cache-control": "public, max-age=31536000, immutable",
+  "vercel-cdn-cache-control": "public, max-age=31536000, immutable",
+  "x-content-type-options": "nosniff"
+};
+var DEVELOPMENT_SUCCESS_HEADERS = {
+  "cache-control": "no-store",
+  "cdn-cache-control": "no-store",
+  "vercel-cdn-cache-control": "no-store",
+  "x-content-type-options": "nosniff"
+};
+var KEY_PATTERN = /^[a-f0-9]{16}$/;
+var DESCRIPTION_MAX_LENGTH = 260;
+var LABEL_MAX_LENGTH = 72;
+var SITE_NAME_MAX_LENGTH = 42;
+var TITLE_MAX_LENGTH = 220;
+var GRID_INSET = 86;
+var GRID_BOTTOM = 544;
+var CONTENT_X = 122;
+var CONTENT_WIDTH = 956;
+var TITLE_MAX_FONT_SIZE = 60;
+var TITLE_MIN_FONT_SIZE = 40;
+var LOGO_MAX_WIDTH = 300;
+var LOGO_MAX_HEIGHT = 46;
+var MAX_RESPONSE_CACHE_ENTRIES = 128;
+var BADGE_RADIUS = 999;
+var CONTENT_TYPE_HEADER = { "content-type": "image/png" };
+var PLATFORM_FONT_FAMILY = "PublishOS Geist";
+var PLATFORM_FONT_WEIGHTS = [
+  400,
+  500,
+  600,
+  700,
+  800
+];
+var fontArrayBufferCache = /* @__PURE__ */ new Map();
+var imageResponseFontCache = /* @__PURE__ */ new Map();
+var imageResponseCache = /* @__PURE__ */ new Map();
+var require2 = createRequire(`${process.cwd()}/package.json`);
+var platformFontPath = require2.resolve(
+  "next/dist/compiled/@vercel/og/Geist-Regular.ttf"
+);
+var platformFontData;
+function isDevelopment() {
+  return process.env.NODE_ENV === "development";
+}
+function successHeaders() {
+  return isDevelopment() ? DEVELOPMENT_SUCCESS_HEADERS : SUCCESS_HEADERS;
+}
+function clampText(value, maxLength) {
+  if (!value) return void 0;
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, maxLength - 3).trimEnd()}...`;
+}
+async function routeKey(context) {
+  const params = await context.params;
+  return params.key.replace(/\.png$/, "");
+}
+function ellipsize(value, maxLength) {
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, maxLength - 3).trimEnd()}...`;
+}
+function wrapText(options) {
+  const source = clampText(options.text, options.maxLength);
+  if (!source) return [];
+  const maxCharsPerLine = Math.max(
+    12,
+    Math.floor(options.width / (options.fontSize * 0.54))
+  );
+  const words = source.split(/\s+/).filter(Boolean);
+  const lines = [];
+  let line = "";
+  for (const word of words) {
+    const nextLine = line ? `${line} ${word}` : word;
+    if (nextLine.length <= maxCharsPerLine) {
+      line = nextLine;
+      continue;
+    }
+    if (line) lines.push(line);
+    line = word.length > maxCharsPerLine ? ellipsize(word, maxCharsPerLine) : word;
+    if (lines.length === options.maxLines) break;
+  }
+  if (line && lines.length < options.maxLines) lines.push(line);
+  const consumed = lines.join(" ").replace(/\.\.\.$/, "");
+  const didOverflow = words.join(" ").length > consumed.length || (lines.at(-1)?.endsWith("...") ?? false);
+  if (didOverflow && lines.length > 0) {
+    const lastIndex = lines.length - 1;
+    lines[lastIndex] = ellipsize(lines[lastIndex] ?? "", maxCharsPerLine);
+  }
+  return lines;
+}
+function singleLineText(options) {
+  const source = clampText(options.text, options.maxLength);
+  if (!source) return void 0;
+  const charWidth = options.fontSize * (options.mono ? 0.62 : 0.54);
+  const maxChars = Math.max(4, Math.floor(options.width / charWidth));
+  return ellipsize(source.replace(/\s+/g, " "), maxChars);
+}
+function titleFontSize(title) {
+  const length = title?.length ?? 0;
+  if (length > 130) return TITLE_MIN_FONT_SIZE;
+  if (length > 100) return 44;
+  if (length > 80) return 48;
+  if (length > 60) return 52;
+  if (length > 40) return 56;
+  return TITLE_MAX_FONT_SIZE;
+}
+function siteUrl(value) {
+  if (!value) return void 0;
+  const candidate = value.includes("://") ? value : `https://${value}`;
+  try {
+    return new URL(candidate);
+  } catch {
+    return void 0;
+  }
+}
+function displayUrlParts(entry) {
+  const url = siteUrl(entry.siteUrl);
+  const host = url?.hostname ?? entry.siteUrl?.replace(/\/.*$/, "") ?? "";
+  const basePath = url?.pathname.replace(/\/+$/, "") ?? "";
+  const routePath = entry.routePath === "/" ? "" : `/${entry.routePath.replace(/^\/+/, "")}`;
+  const path = `${basePath === "/" ? "" : basePath}${routePath}`;
+  if (host) return { host, path };
+  return { host: "", path: path || routePath };
+}
+function dataUrlToArrayBuffer(value) {
+  const cached = fontArrayBufferCache.get(value);
+  if (cached) return cached;
+  const binary = atob(value);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index += 1) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  fontArrayBufferCache.set(value, bytes.buffer);
+  return bytes.buffer;
+}
+function platformFonts() {
+  platformFontData ??= readFile(platformFontPath).then(
+    (data) => data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength)
+  );
+  return platformFontData.then(
+    (data) => PLATFORM_FONT_WEIGHTS.map((weight) => ({
+      data: data.slice(0),
+      name: PLATFORM_FONT_FAMILY,
+      style: "normal",
+      weight
+    }))
+  );
+}
+async function imageResponseFonts(entry) {
+  const cached = imageResponseFontCache.get(entry.key);
+  if (cached) return cached;
+  const manifestFonts = ["main", "mono"].flatMap((role) => {
+    const font = entry.fonts?.[role];
+    return font?.files?.map((file) => ({
+      data: dataUrlToArrayBuffer(file.data),
+      name: font.family,
+      style: file.style,
+      weight: file.weight
+    })) ?? [];
+  });
+  const fonts = manifestFonts.length > 0 ? [...manifestFonts, ...await platformFonts()] : await platformFonts();
+  imageResponseFontCache.set(entry.key, fonts);
+  return fonts;
+}
+function fontFamily(font, fallback) {
+  const fallbackStack = fallback === "mono" ? `"${PLATFORM_FONT_FAMILY}", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace` : `"${PLATFORM_FONT_FAMILY}", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  return font?.family ? `${JSON.stringify(font.family)}, ${fallbackStack}` : fallbackStack;
+}
+function fittedLogoDimensions(logo) {
+  if (!logo?.width || !logo.height) return void 0;
+  const scale = Math.min(
+    LOGO_MAX_WIDTH / logo.width,
+    LOGO_MAX_HEIGHT / logo.height,
+    1
+  );
+  return {
+    height: Math.max(1, Math.round(logo.height * scale)),
+    width: Math.max(1, Math.round(logo.width * scale))
+  };
+}
+function cacheImageResponse(key, render) {
+  if (isDevelopment()) return render();
+  const cached = imageResponseCache.get(key);
+  if (cached) return cached;
+  const promise = render().catch((error) => {
+    imageResponseCache.delete(key);
+    throw error;
+  });
+  imageResponseCache.set(key, promise);
+  if (imageResponseCache.size > MAX_RESPONSE_CACHE_ENTRIES) {
+    const oldest = imageResponseCache.keys().next().value;
+    if (oldest) imageResponseCache.delete(oldest);
+  }
+  return promise;
+}
+function responseFromCachedImage(cached) {
+  return new Response(cached.body.slice(0), {
+    headers: cached.headers,
+    status: cached.status
+  });
+}
+async function cachedImageResponse(response) {
+  const headersToApply = successHeaders();
+  const headers = new Headers(response.headers);
+  headers.set("cache-control", headersToApply["cache-control"]);
+  headers.set("cdn-cache-control", headersToApply["cdn-cache-control"]);
+  headers.set(
+    "vercel-cdn-cache-control",
+    headersToApply["vercel-cdn-cache-control"]
+  );
+  headers.set(
+    "x-content-type-options",
+    headersToApply["x-content-type-options"]
+  );
+  if (!headers.has("content-type")) {
+    headers.set("content-type", CONTENT_TYPE_HEADER["content-type"]);
+  }
+  return {
+    body: await response.arrayBuffer(),
+    headers,
+    status: response.status
+  };
+}
+function createOgImageRoute({ manifest }) {
+  return async function GET(_request, context) {
+    const key = await routeKey(context);
+    if (!KEY_PATTERN.test(key)) {
+      return new Response("Bad request", {
+        headers: ERROR_HEADERS,
+        status: 400
+      });
+    }
+    const entry = manifest.generated[key];
+    if (!entry || entry.source !== "generated") {
+      return new Response("Not found", {
+        headers: ERROR_HEADERS,
+        status: 404
+      });
+    }
+    const titleSize = titleFontSize(entry.title);
+    const titleLines = wrapText({
+      fontSize: titleSize,
+      maxLength: TITLE_MAX_LENGTH,
+      maxLines: 2,
+      text: entry.title,
+      width: 900
+    });
+    const descriptionLines = wrapText({
+      fontSize: 30,
+      maxLength: DESCRIPTION_MAX_LENGTH,
+      maxLines: 2,
+      text: entry.description,
+      width: 870
+    });
+    const label = singleLineText({
+      fontSize: 22,
+      maxLength: LABEL_MAX_LENGTH,
+      mono: true,
+      text: entry.label,
+      width: 520
+    });
+    const displayUrl = displayUrlParts(entry);
+    const siteName = clampText(
+      entry.siteName ?? entry.alt,
+      SITE_NAME_MAX_LENGTH
+    );
+    const background = entry.background ?? "#ffffff";
+    const textPrimary = entry.textPrimary ?? "#111111";
+    const textSecondary = entry.textSecondary ?? "#525252";
+    const accent = entry.accent ?? "#2563eb";
+    const stroke = entry.stroke ?? "#e5e7eb";
+    const logoSrc = entry.logo?.dataUri;
+    const logoDimensions = fittedLogoDimensions(entry.logo);
+    return responseFromCachedImage(
+      await cacheImageResponse(
+        entry.key,
+        async () => cachedImageResponse(
+          new ImageResponse(
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  background,
+                  color: textPrimary,
+                  display: "flex",
+                  fontFamily: fontFamily(entry.fonts?.main, "sans"),
+                  height: "100%",
+                  position: "relative",
+                  width: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        background: stroke,
+                        display: "flex",
+                        height: "100%",
+                        left: GRID_INSET,
+                        position: "absolute",
+                        top: 0,
+                        width: 2
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        background: stroke,
+                        display: "flex",
+                        height: "100%",
+                        position: "absolute",
+                        right: GRID_INSET,
+                        top: 0,
+                        width: 2
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        background: stroke,
+                        display: "flex",
+                        height: 2,
+                        left: 0,
+                        position: "absolute",
+                        top: GRID_INSET,
+                        width: "100%"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        background: stroke,
+                        bottom: GRID_INSET,
+                        display: "flex",
+                        height: 2,
+                        left: 0,
+                        position: "absolute",
+                        width: "100%"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        alignItems: "center",
+                        color: accent,
+                        display: "flex",
+                        fontFamily: fontFamily(entry.fonts?.main, "sans"),
+                        fontSize: 22,
+                        fontWeight: 700,
+                        height: GRID_INSET,
+                        justifyContent: "flex-start",
+                        left: CONTENT_X,
+                        lineHeight: 1,
+                        overflow: "hidden",
+                        position: "absolute",
+                        top: 0,
+                        width: 430
+                      },
+                      children: logoSrc ? (
+                        // biome-ignore lint/performance/noImgElement: ImageResponse renders static manifest-provided logo data; next/image is not available in Satori output.
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: "",
+                            src: logoSrc,
+                            style: {
+                              height: logoDimensions?.height ?? LOGO_MAX_HEIGHT,
+                              maxHeight: LOGO_MAX_HEIGHT,
+                              maxWidth: LOGO_MAX_WIDTH,
+                              objectFit: "contain",
+                              objectPosition: "left center",
+                              width: logoDimensions?.width ?? "auto"
+                            }
+                          }
+                        )
+                      ) : siteName
+                    }
+                  ),
+                  label ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        alignItems: "center",
+                        display: "flex",
+                        fontFamily: fontFamily(entry.fonts?.mono, "mono"),
+                        height: GRID_INSET,
+                        justifyContent: "flex-end",
+                        overflow: "hidden",
+                        position: "absolute",
+                        right: CONTENT_X,
+                        top: 0,
+                        width: 520
+                      },
+                      children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            alignItems: "center",
+                            borderRadius: BADGE_RADIUS,
+                            color: accent,
+                            display: "flex",
+                            fontSize: 20,
+                            fontWeight: 600,
+                            lineHeight: 1,
+                            maxWidth: 520,
+                            overflow: "hidden",
+                            paddingBottom: 6,
+                            paddingLeft: 12,
+                            paddingRight: 12,
+                            paddingTop: 6,
+                            position: "relative"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  background: accent,
+                                  borderRadius: BADGE_RADIUS,
+                                  bottom: 0,
+                                  display: "flex",
+                                  left: 0,
+                                  opacity: 0.14,
+                                  position: "absolute",
+                                  right: 0,
+                                  top: 0
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  borderColor: accent,
+                                  borderRadius: BADGE_RADIUS,
+                                  borderStyle: "solid",
+                                  borderWidth: 1,
+                                  bottom: 0,
+                                  display: "flex",
+                                  left: 0,
+                                  opacity: 0.32,
+                                  position: "absolute",
+                                  right: 0,
+                                  top: 0
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", position: "relative" }, children: label })
+                          ]
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 24,
+                        left: CONTENT_X,
+                        position: "absolute",
+                        top: 164,
+                        width: CONTENT_WIDTH
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              fontSize: titleSize,
+                              fontWeight: 800,
+                              letterSpacing: 0,
+                              lineHeight: 1.08,
+                              width: 900
+                            },
+                            children: titleLines.map((line) => /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: line }, line))
+                          }
+                        ),
+                        descriptionLines.length > 0 ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              color: textSecondary,
+                              display: "flex",
+                              flexDirection: "column",
+                              fontSize: 30,
+                              lineHeight: 1.25,
+                              width: 870
+                            },
+                            children: descriptionLines.map((line) => /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: line }, line))
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        alignItems: "center",
+                        display: "flex",
+                        fontFamily: fontFamily(entry.fonts?.mono, "mono"),
+                        fontSize: 22,
+                        height: GRID_INSET,
+                        justifyContent: "flex-start",
+                        left: CONTENT_X,
+                        lineHeight: 1.2,
+                        overflow: "hidden",
+                        position: "absolute",
+                        top: GRID_BOTTOM,
+                        width: CONTENT_WIDTH
+                      },
+                      children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            flexDirection: "row",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                            width: CONTENT_WIDTH
+                          },
+                          children: [
+                            displayUrl.host ? /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  color: textSecondary,
+                                  display: "flex",
+                                  flexShrink: 0,
+                                  whiteSpace: "nowrap"
+                                },
+                                children: displayUrl.host
+                              }
+                            ) : null,
+                            displayUrl.path ? /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  color: textPrimary,
+                                  display: "flex",
+                                  minWidth: 0,
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  whiteSpace: "nowrap"
+                                },
+                                children: displayUrl.path
+                              }
+                            ) : null
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            {
+              fonts: await imageResponseFonts(entry),
+              headers: {
+                ...CONTENT_TYPE_HEADER,
+                ...successHeaders()
+              },
+              height: manifest.height,
+              width: manifest.width
+            }
+          )
+        )
+      )
+    );
+  };
+}
+function createOgImageStaticParams({ manifest }) {
+  return Object.keys(manifest.generated).map((key) => ({ key: `${key}.png` }));
+}
+export {
+  createOgImageRoute,
+  createOgImageStaticParams
+};