@ewanc26/og 0.1.1

package/dist/index.cjs

@@ -0,0 +1,663 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BUNDLED_FONTS: () => BUNDLED_FONTS,
+  OG_HEIGHT: () => OG_HEIGHT,
+  OG_WIDTH: () => OG_WIDTH,
+  createOgEndpoint: () => createOgEndpoint,
+  createSatoriFonts: () => createSatoriFonts,
+  defaultColors: () => defaultColors,
+  generateCircleNoiseDataUrl: () => generateCircleNoiseDataUrl,
+  generateNoiseDataUrl: () => generateNoiseDataUrl,
+  generateOgImage: () => generateOgImage,
+  generateOgImageDataUrl: () => generateOgImageDataUrl,
+  generateOgResponse: () => generateOgResponse,
+  loadFonts: () => loadFonts,
+  svgToPng: () => svgToPng,
+  svgToPngDataUrl: () => svgToPngDataUrl,
+  svgToPngResponse: () => svgToPngResponse
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/generate.ts
+var import_satori = __toESM(require("satori"), 1);
+var import_resvg_js = require("@resvg/resvg-js");
+
+// src/fonts.ts
+var import_promises = require("fs/promises");
+var import_node_path = require("path");
+var import_node_url = require("url");
+var import_meta = {};
+function getModuleDir() {
+  if (typeof import_meta !== "undefined" && import_meta.url) {
+    return (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
+  }
+  if (typeof __dirname !== "undefined") {
+    return __dirname;
+  }
+  return (0, import_node_path.resolve)(process.cwd(), "node_modules/@ewanc26/og/dist");
+}
+function getFontsDir() {
+  return (0, import_node_path.resolve)(getModuleDir(), "../fonts");
+}
+var BUNDLED_FONTS = {
+  get heading() {
+    return (0, import_node_path.resolve)(getFontsDir(), "Inter-Bold.ttf");
+  },
+  get body() {
+    return (0, import_node_path.resolve)(getFontsDir(), "Inter-Regular.ttf");
+  }
+};
+async function loadFonts(config) {
+  const headingPath = config?.heading ?? BUNDLED_FONTS.heading;
+  const bodyPath = config?.body ?? BUNDLED_FONTS.body;
+  const [heading, body] = await Promise.all([
+    loadFontFile(headingPath),
+    loadFontFile(bodyPath)
+  ]);
+  return { heading, body };
+}
+async function loadFontFile(source) {
+  if (source.startsWith("http://") || source.startsWith("https://")) {
+    const response = await fetch(source);
+    if (!response.ok) {
+      throw new Error(`Failed to load font from URL: ${source}`);
+    }
+    return response.arrayBuffer();
+  }
+  const buffer = await (0, import_promises.readFile)(source);
+  return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+}
+function createSatoriFonts(fonts) {
+  return [
+    {
+      name: "Inter",
+      data: fonts.heading,
+      weight: 700,
+      style: "normal"
+    },
+    {
+      name: "Inter",
+      data: fonts.body,
+      weight: 400,
+      style: "normal"
+    }
+  ];
+}
+
+// src/noise.ts
+var import_noise = require("@ewanc26/noise");
+
+// src/png-encoder.ts
+var import_node_zlib = require("zlib");
+var PNG_SIGNATURE = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+function crc32(data) {
+  let crc = 4294967295;
+  const table = [];
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) {
+      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    }
+    table[n] = c;
+  }
+  for (let i = 0; i < data.length; i++) {
+    crc = table[(crc ^ data[i]) & 255] ^ crc >>> 8;
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function createChunk(type, data) {
+  const length = Buffer.alloc(4);
+  length.writeUInt32BE(data.length, 0);
+  const typeBuffer = Buffer.from(type, "ascii");
+  const crcData = Buffer.concat([typeBuffer, data]);
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(crcData), 0);
+  return Buffer.concat([length, typeBuffer, data, crc]);
+}
+function createIHDR(width, height) {
+  const data = Buffer.alloc(13);
+  data.writeUInt32BE(width, 0);
+  data.writeUInt32BE(height, 4);
+  data.writeUInt8(8, 8);
+  data.writeUInt8(2, 9);
+  data.writeUInt8(0, 10);
+  data.writeUInt8(0, 11);
+  data.writeUInt8(0, 12);
+  return createChunk("IHDR", data);
+}
+function createIDAT(pixels, width, height) {
+  const rawData = Buffer.alloc(height * (width * 3 + 1));
+  let srcOffset = 0;
+  let dstOffset = 0;
+  for (let y = 0; y < height; y++) {
+    rawData[dstOffset++] = 0;
+    for (let x = 0; x < width; x++) {
+      const r = pixels[srcOffset++];
+      const g = pixels[srcOffset++];
+      const b = pixels[srcOffset++];
+      srcOffset++;
+      rawData[dstOffset++] = r;
+      rawData[dstOffset++] = g;
+      rawData[dstOffset++] = b;
+    }
+  }
+  const compressed = (0, import_node_zlib.deflateSync)(rawData);
+  return createChunk("IDAT", compressed);
+}
+function createIEND() {
+  return createChunk("IEND", Buffer.alloc(0));
+}
+function encodePNG(pixels, width, height) {
+  return Buffer.concat([
+    PNG_SIGNATURE,
+    createIHDR(width, height),
+    createIDAT(pixels, width, height),
+    createIEND()
+  ]);
+}
+var PNGEncoder = {
+  encode: encodePNG
+};
+
+// src/noise.ts
+function generateNoiseDataUrl(options) {
+  const { seed, width, height, opacity = 0.4, colorMode = "grayscale" } = options;
+  const pixels = (0, import_noise.generateNoisePixels)(width, height, seed, {
+    gridSize: 4,
+    octaves: 3,
+    colorMode: colorMode === "grayscale" ? { type: "grayscale", range: [20, 60] } : { type: "hsl", hueRange: 40, saturationRange: [30, 50], lightnessRange: [30, 50] }
+  });
+  if (opacity < 1) {
+    for (let i = 3; i < pixels.length; i += 4) {
+      pixels[i] = Math.round(pixels[i] * opacity);
+    }
+  }
+  const pngBuffer = PNGEncoder.encode(pixels, width, height);
+  return `data:image/png;base64,${pngBuffer.toString("base64")}`;
+}
+function generateCircleNoiseDataUrl(options) {
+  const { seed, size, opacity = 0.15, colorMode = "grayscale" } = options;
+  const pixels = (0, import_noise.generateNoisePixels)(size, size, seed, {
+    gridSize: 4,
+    octaves: 3,
+    colorMode: colorMode === "grayscale" ? { type: "grayscale", range: [30, 70] } : { type: "hsl", hueRange: 40, saturationRange: [30, 50], lightnessRange: [30, 50] }
+  });
+  const center = size / 2;
+  const radius = size / 2;
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const idx = (y * size + x) * 4;
+      const dx = x - center + 0.5;
+      const dy = y - center + 0.5;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist > radius) {
+        pixels[idx + 3] = 0;
+      } else if (dist > radius - 2) {
+        const edgeOpacity = (radius - dist) / 2;
+        pixels[idx + 3] = Math.round(255 * edgeOpacity * opacity);
+      } else {
+        pixels[idx + 3] = Math.round(255 * opacity);
+      }
+    }
+  }
+  const pngBuffer = PNGEncoder.encode(pixels, size, size);
+  return `data:image/png;base64,${pngBuffer.toString("base64")}`;
+}
+
+// src/templates/blog.ts
+function blogTemplate({
+  title,
+  description,
+  siteName,
+  colors,
+  width,
+  height
+}) {
+  return {
+    type: "div",
+    props: {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width,
+        height,
+        backgroundColor: colors.background
+      },
+      children: [
+        {
+          type: "h1",
+          props: {
+            style: {
+              fontSize: 64,
+              fontWeight: 700,
+              color: colors.text,
+              letterSpacing: "-0.02em",
+              margin: 0,
+              textAlign: "center",
+              lineHeight: 1.1,
+              maxWidth: 1e3
+            },
+            children: title
+          }
+        },
+        description ? {
+          type: "p",
+          props: {
+            style: {
+              fontSize: 28,
+              fontWeight: 400,
+              color: colors.accent,
+              marginTop: 28,
+              marginBottom: 0,
+              textAlign: "center",
+              lineHeight: 1.4,
+              maxWidth: 900
+            },
+            children: description
+          }
+        } : null,
+        {
+          type: "p",
+          props: {
+            style: {
+              fontSize: 24,
+              fontWeight: 400,
+              color: colors.accent,
+              marginTop: 56,
+              marginBottom: 0,
+              textAlign: "center",
+              opacity: 0.7
+            },
+            children: siteName
+          }
+        }
+      ].filter(Boolean)
+    }
+  };
+}
+
+// src/templates/profile.ts
+function profileTemplate({
+  title,
+  description,
+  siteName,
+  image,
+  colors,
+  width,
+  height
+}) {
+  const children = [];
+  if (image) {
+    children.push({
+      type: "img",
+      props: {
+        src: image,
+        width: 120,
+        height: 120,
+        style: {
+          borderRadius: "50%",
+          marginBottom: 32,
+          objectFit: "cover"
+        }
+      }
+    });
+  }
+  children.push({
+    type: "h1",
+    props: {
+      style: {
+        fontSize: 56,
+        fontWeight: 700,
+        color: colors.text,
+        letterSpacing: "-0.02em",
+        margin: 0,
+        textAlign: "center",
+        lineHeight: 1.1,
+        maxWidth: 900
+      },
+      children: title
+    }
+  });
+  if (description) {
+    children.push({
+      type: "p",
+      props: {
+        style: {
+          fontSize: 26,
+          fontWeight: 400,
+          color: colors.accent,
+          marginTop: 20,
+          marginBottom: 0,
+          textAlign: "center",
+          lineHeight: 1.4,
+          maxWidth: 700
+        },
+        children: description
+      }
+    });
+  }
+  children.push({
+    type: "p",
+    props: {
+      style: {
+        fontSize: 24,
+        fontWeight: 400,
+        color: colors.accent,
+        marginTop: 48,
+        marginBottom: 0,
+        textAlign: "center",
+        opacity: 0.7
+      },
+      children: siteName
+    }
+  });
+  return {
+    type: "div",
+    props: {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width,
+        height,
+        backgroundColor: colors.background
+      },
+      children
+    }
+  };
+}
+
+// src/templates/default.ts
+function defaultTemplate({
+  title,
+  description,
+  siteName,
+  colors,
+  width,
+  height
+}) {
+  return {
+    type: "div",
+    props: {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width,
+        height,
+        backgroundColor: colors.background
+      },
+      children: [
+        {
+          type: "h1",
+          props: {
+            style: {
+              fontSize: 72,
+              fontWeight: 700,
+              color: colors.text,
+              letterSpacing: "-0.02em",
+              margin: 0,
+              textAlign: "center"
+            },
+            children: title
+          }
+        },
+        description ? {
+          type: "p",
+          props: {
+            style: {
+              fontSize: 32,
+              fontWeight: 400,
+              color: colors.accent,
+              marginTop: 24,
+              marginBottom: 0,
+              textAlign: "center",
+              maxWidth: 900
+            },
+            children: description
+          }
+        } : null,
+        {
+          type: "p",
+          props: {
+            style: {
+              fontSize: 28,
+              fontWeight: 400,
+              color: colors.accent,
+              marginTop: 64,
+              marginBottom: 0,
+              textAlign: "center",
+              opacity: 0.7
+            },
+            children: siteName
+          }
+        }
+      ].filter(Boolean)
+    }
+  };
+}
+
+// src/templates/index.ts
+var templates = {
+  blog: blogTemplate,
+  profile: profileTemplate,
+  default: defaultTemplate
+};
+function getTemplate(name) {
+  if (typeof name === "function") {
+    return name;
+  }
+  return templates[name];
+}
+
+// src/types.ts
+var defaultColors = {
+  background: "#0f1a15",
+  text: "#e8f5e9",
+  accent: "#86efac"
+};
+
+// src/generate.ts
+var OG_WIDTH = 1200;
+var OG_HEIGHT = 630;
+async function generateOgImage(options) {
+  const {
+    title,
+    description,
+    siteName,
+    image,
+    template = "blog",
+    colors: colorOverrides,
+    fonts: fontConfig,
+    noise: noiseConfig,
+    noiseSeed,
+    width = OG_WIDTH,
+    height = OG_HEIGHT,
+    debugSvg = false
+  } = options;
+  const colors = {
+    ...defaultColors,
+    ...colorOverrides
+  };
+  const fonts = await loadFonts(fontConfig);
+  const satoriFonts = createSatoriFonts(fonts);
+  const noiseEnabled = noiseConfig?.enabled !== false;
+  const noiseSeedValue = noiseSeed || noiseConfig?.seed || title;
+  const noiseDataUrl = noiseEnabled ? generateNoiseDataUrl({
+    seed: noiseSeedValue,
+    width,
+    height,
+    opacity: noiseConfig?.opacity ?? 0.4,
+    colorMode: noiseConfig?.colorMode ?? "grayscale"
+  }) : void 0;
+  const circleNoiseDataUrl = noiseEnabled ? generateCircleNoiseDataUrl({
+    seed: `${noiseSeedValue}-circle`,
+    size: 200,
+    opacity: noiseConfig?.opacity ?? 0.15,
+    colorMode: noiseConfig?.colorMode ?? "grayscale"
+  }) : void 0;
+  const templateFn = getTemplate(template);
+  const props = {
+    title,
+    description,
+    siteName,
+    image,
+    colors,
+    noiseDataUrl,
+    circleNoiseDataUrl,
+    width,
+    height
+  };
+  const element = templateFn(props);
+  const svg = await (0, import_satori.default)(element, {
+    width,
+    height,
+    fonts: satoriFonts
+  });
+  if (debugSvg) {
+    return Buffer.from(svg);
+  }
+  const resvg = new import_resvg_js.Resvg(svg, {
+    fitTo: {
+      mode: "width",
+      value: width
+    }
+  });
+  const pngData = resvg.render();
+  return Buffer.from(pngData.asPng());
+}
+async function generateOgImageDataUrl(options) {
+  const png = await generateOgImage(options);
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+async function generateOgResponse(options, cacheMaxAge = 3600) {
+  const png = await generateOgImage(options);
+  return new Response(png, {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": `public, max-age=${cacheMaxAge}`
+    }
+  });
+}
+
+// src/endpoint.ts
+function createOgEndpoint(options) {
+  const {
+    siteName,
+    defaultTemplate: template = "default",
+    colors,
+    fonts,
+    noise,
+    cacheMaxAge = 3600,
+    width,
+    height
+  } = options;
+  return async ({ url }) => {
+    const title = url.searchParams.get("title");
+    const description = url.searchParams.get("description") ?? void 0;
+    const image = url.searchParams.get("image") ?? void 0;
+    const noiseSeed = url.searchParams.get("seed") ?? void 0;
+    if (!title) {
+      return new Response("Missing title parameter", { status: 400 });
+    }
+    try {
+      return await generateOgResponse(
+        {
+          title,
+          description,
+          siteName,
+          image,
+          template,
+          colors,
+          fonts,
+          noise,
+          noiseSeed,
+          width,
+          height
+        },
+        cacheMaxAge
+      );
+    } catch (error) {
+      console.error("Failed to generate OG image:", error);
+      return new Response("Failed to generate image", { status: 500 });
+    }
+  };
+}
+
+// src/svg.ts
+var import_resvg_js2 = require("@resvg/resvg-js");
+function svgToPng(svg, options = {}) {
+  const opts = {
+    fitTo: options.fitWidth ? { mode: "width", value: options.fitWidth } : void 0,
+    background: options.backgroundColor
+  };
+  const resvg = new import_resvg_js2.Resvg(svg, opts);
+  const rendered = resvg.render();
+  return Buffer.from(rendered.asPng());
+}
+function svgToPngDataUrl(svg, options = {}) {
+  const png = svgToPng(svg, options);
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+function svgToPngResponse(svg, options = {}, cacheMaxAge = 3600) {
+  const png = svgToPng(svg, options);
+  return new Response(png, {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": `public, max-age=${cacheMaxAge}`
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BUNDLED_FONTS,
+  OG_HEIGHT,
+  OG_WIDTH,
+  createOgEndpoint,
+  createSatoriFonts,
+  defaultColors,
+  generateCircleNoiseDataUrl,
+  generateNoiseDataUrl,
+  generateOgImage,
+  generateOgImageDataUrl,
+  generateOgResponse,
+  loadFonts,
+  svgToPng,
+  svgToPngDataUrl,
+  svgToPngResponse
+});
+//# sourceMappingURL=index.cjs.map