@softwareinfocus/next-og-image 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Software InFocus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# @softwareinfocus/next-og-image
+
+Reusable Open Graph image helpers for Next.js App Router metadata image routes, with an optional Software InFocus preset template.
+
+## Features
+
+- `next/og` image response wrapper with standard `1200x630` PNG defaults
+- Helpers for static and dynamic `opengraph-image.tsx` routes
+- Typed OG payload contract (`OgImageData`)
+- SIF preset renderer + fallback data builders
+- Works with Next.js 15+ App Router route metadata image files
+
+## Install
+
+```bash
+npm install @softwareinfocus/next-og-image
+```
+
+Peer dependencies:
+
+- `next@15`
+- `react@19`
+
+## Basic usage (static route)
+
+```tsx
+import {
+  OG_IMAGE_CONTENT_TYPE_PNG,
+  OG_IMAGE_SIZE_1200x630,
+  createStaticOgImageHandler,
+} from '@softwareinfocus/next-og-image'
+import { createSifFallbacks, createSifOgRenderer } from '@softwareinfocus/next-og-image/presets/sif'
+
+export const alt = 'Site social preview image'
+export const size = OG_IMAGE_SIZE_1200x630
+export const contentType = OG_IMAGE_CONTENT_TYPE_PNG
+export const runtime = 'edge'
+export const revalidate = 3600
+
+const render = createSifOgRenderer({
+  brandName: 'Software InFocus',
+  domainLabel: 'softwareinfocus.com',
+})
+
+const fallbacks = createSifFallbacks({ brandName: 'Software InFocus' })
+
+export default createStaticOgImageHandler({
+  fallbackData: fallbacks.global,
+  render,
+})
+```
+
+## Basic usage (dynamic route)
+
+```tsx
+import { createDynamicOgImageHandler } from '@softwareinfocus/next-og-image'
+import { createSifFallbacks, createSifOgRenderer } from '@softwareinfocus/next-og-image/presets/sif'
+
+const render = createSifOgRenderer()
+const fallbacks = createSifFallbacks()
+
+export default createDynamicOgImageHandler<{ slug: string }, 'blog'>({
+  resolveData: async ({ slug }) => {
+    const post = await getPostBySlug(slug)
+    if (!post) return null
+
+    return {
+      type: 'blog',
+      title: post.title,
+      subtitle: post.description,
+      chips: post.tags,
+    }
+  },
+  fallbackData: fallbacks.section.blog,
+  render,
+})
+```
+
+## Notes
+
+- Keep `export const runtime = 'edge'` in your route file for predictable `next/og` behavior.
+- Keep `export const revalidate = 3600` (or your preferred cache interval) in each route.
+- `twitter-image.tsx` can re-export from `./opengraph-image` in most projects.
+- Fonts are optional. Provide `loadFonts` in `createSifOgRenderer()` if you want custom typography.
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+pnpm test
+```
+
+## License
+
+MIT

package/dist/chunk-ZZJXXDAB.js

@@ -0,0 +1,12 @@
+// src/core/constants.ts
+var OG_IMAGE_SIZE_1200x630 = {
+  width: 1200,
+  height: 630
+};
+var OG_IMAGE_CONTENT_TYPE_PNG = "image/png";
+
+export {
+  OG_IMAGE_SIZE_1200x630,
+  OG_IMAGE_CONTENT_TYPE_PNG
+};
+//# sourceMappingURL=chunk-ZZJXXDAB.js.map

package/dist/chunk-ZZJXXDAB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/constants.ts"],"sourcesContent":["export const OG_IMAGE_SIZE_1200x630 = {\n  width: 1200,\n  height: 630,\n} as const\n\nexport const OG_IMAGE_CONTENT_TYPE_PNG = 'image/png' as const\n"],"mappings":";AAAO,IAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,IAAM,4BAA4B;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { ImageResponse } from 'next/og';
+import { O as OgImageData, M as MetadataImageRouteProps } from './types-CaggCk6z.js';
+export { a as OgFontDefinition } from './types-CaggCk6z.js';
+
+declare const OG_IMAGE_SIZE_1200x630: {
+    readonly width: 1200;
+    readonly height: 630;
+};
+declare const OG_IMAGE_CONTENT_TYPE_PNG: "image/png";
+
+declare function createStaticOgImageHandler<TType extends string>(options: {
+    resolveData?: () => Promise<OgImageData<TType> | null> | OgImageData<TType> | null;
+    fallbackData: OgImageData<TType> | (() => OgImageData<TType>);
+    render: (data: OgImageData<TType>) => Promise<ImageResponse> | ImageResponse;
+}): () => Promise<ImageResponse>;
+declare function createDynamicOgImageHandler<TParams extends Record<string, string>, TType extends string>(options: {
+    resolveData: (params: TParams) => Promise<OgImageData<TType> | null> | OgImageData<TType> | null;
+    fallbackData: OgImageData<TType> | ((params: TParams) => OgImageData<TType>);
+    render: (data: OgImageData<TType>) => Promise<ImageResponse> | ImageResponse;
+}): (props: MetadataImageRouteProps<TParams>) => Promise<ImageResponse>;
+
+export { MetadataImageRouteProps, OG_IMAGE_CONTENT_TYPE_PNG, OG_IMAGE_SIZE_1200x630, OgImageData, createDynamicOgImageHandler, createStaticOgImageHandler };

package/dist/index.js

@@ -0,0 +1,32 @@
+import {
+  OG_IMAGE_CONTENT_TYPE_PNG,
+  OG_IMAGE_SIZE_1200x630
+} from "./chunk-ZZJXXDAB.js";
+
+// src/core/route-handlers.ts
+function resolveStaticFallback(fallbackData) {
+  return typeof fallbackData === "function" ? fallbackData() : fallbackData;
+}
+function resolveDynamicFallback(fallbackData, params) {
+  return typeof fallbackData === "function" ? fallbackData(params) : fallbackData;
+}
+function createStaticOgImageHandler(options) {
+  return async function StaticOgImageHandler() {
+    const resolved = options.resolveData ? await options.resolveData() : null;
+    return options.render(resolved ?? resolveStaticFallback(options.fallbackData));
+  };
+}
+function createDynamicOgImageHandler(options) {
+  return async function DynamicOgImageHandler(props) {
+    const params = await props.params;
+    const resolved = await options.resolveData(params);
+    return options.render(resolved ?? resolveDynamicFallback(options.fallbackData, params));
+  };
+}
+export {
+  OG_IMAGE_CONTENT_TYPE_PNG,
+  OG_IMAGE_SIZE_1200x630,
+  createDynamicOgImageHandler,
+  createStaticOgImageHandler
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/route-handlers.ts"],"sourcesContent":["import type { ImageResponse } from 'next/og'\nimport type { MetadataImageRouteProps, OgImageData } from './types'\n\nfunction resolveStaticFallback<TType extends string>(\n  fallbackData: OgImageData<TType> | (() => OgImageData<TType>),\n): OgImageData<TType> {\n  return typeof fallbackData === 'function'\n    ? (fallbackData as () => OgImageData<TType>)()\n    : fallbackData\n}\n\nfunction resolveDynamicFallback<TParams extends Record<string, string>, TType extends string>(\n  fallbackData: OgImageData<TType> | ((params: TParams) => OgImageData<TType>),\n  params: TParams,\n): OgImageData<TType> {\n  return typeof fallbackData === 'function'\n    ? (fallbackData as (params: TParams) => OgImageData<TType>)(params)\n    : fallbackData\n}\n\nexport function createStaticOgImageHandler<TType extends string>(options: {\n  resolveData?: () => Promise<OgImageData<TType> | null> | OgImageData<TType> | null\n  fallbackData: OgImageData<TType> | (() => OgImageData<TType>)\n  render: (data: OgImageData<TType>) => Promise<ImageResponse> | ImageResponse\n}) {\n  return async function StaticOgImageHandler() {\n    const resolved = options.resolveData ? await options.resolveData() : null\n    return options.render(resolved ?? resolveStaticFallback(options.fallbackData))\n  }\n}\n\nexport function createDynamicOgImageHandler<\n  TParams extends Record<string, string>,\n  TType extends string,\n>(options: {\n  resolveData: (params: TParams) => Promise<OgImageData<TType> | null> | OgImageData<TType> | null\n  fallbackData: OgImageData<TType> | ((params: TParams) => OgImageData<TType>)\n  render: (data: OgImageData<TType>) => Promise<ImageResponse> | ImageResponse\n}) {\n  return async function DynamicOgImageHandler(props: MetadataImageRouteProps<TParams>) {\n    const params = await props.params\n    const resolved = await options.resolveData(params)\n    return options.render(resolved ?? resolveDynamicFallback(options.fallbackData, params))\n  }\n}\n"],"mappings":";;;;;;AAGA,SAAS,sBACP,cACoB;AACpB,SAAO,OAAO,iBAAiB,aAC1B,aAA0C,IAC3C;AACN;AAEA,SAAS,uBACP,cACA,QACoB;AACpB,SAAO,OAAO,iBAAiB,aAC1B,aAAyD,MAAM,IAChE;AACN;AAEO,SAAS,2BAAiD,SAI9D;AACD,SAAO,eAAe,uBAAuB;AAC3C,UAAM,WAAW,QAAQ,cAAc,MAAM,QAAQ,YAAY,IAAI;AACrE,WAAO,QAAQ,OAAO,YAAY,sBAAsB,QAAQ,YAAY,CAAC;AAAA,EAC/E;AACF;AAEO,SAAS,4BAGd,SAIC;AACD,SAAO,eAAe,sBAAsB,OAAyC;AACnF,UAAM,SAAS,MAAM,MAAM;AAC3B,UAAM,WAAW,MAAM,QAAQ,YAAY,MAAM;AACjD,WAAO,QAAQ,OAAO,YAAY,uBAAuB,QAAQ,cAAc,MAAM,CAAC;AAAA,EACxF;AACF;","names":[]}

package/dist/presets/sif/index.d.ts

@@ -0,0 +1,31 @@
+import { ImageResponse } from 'next/og';
+import { O as OgImageData, a as OgFontDefinition } from '../../types-CaggCk6z.js';
+
+type SifOgType = 'brand' | 'blog' | 'service' | 'portfolio';
+type SifOgData = OgImageData<SifOgType>;
+type SifOgTheme = {
+    label: string;
+    accent: string;
+    accentSoft: string;
+    glow: string;
+    chipBorder: string;
+    chipBg: string;
+};
+type SifPresetConfig = {
+    brandName?: string;
+    domainLabel?: string;
+    themes?: Partial<Record<SifOgType, SifOgTheme>>;
+    loadFonts?: () => Promise<OgFontDefinition[]>;
+};
+type SifOgRenderer = (data: SifOgData) => Promise<ImageResponse>;
+
+declare function createSifFallbacks(config?: {
+    brandName?: string;
+}): {
+    global: SifOgData;
+    section: Record<SifOgType, SifOgData>;
+};
+
+declare function createSifOgRenderer(config?: SifPresetConfig): SifOgRenderer;
+
+export { type SifOgData, type SifOgRenderer, type SifOgTheme, type SifOgType, type SifPresetConfig, createSifFallbacks, createSifOgRenderer };

package/dist/presets/sif/index.js

@@ -0,0 +1,488 @@
+import {
+  OG_IMAGE_SIZE_1200x630
+} from "../../chunk-ZZJXXDAB.js";
+
+// src/core/image-response.tsx
+import { ImageResponse } from "next/og";
+function createPngImageResponse(element, options = {}) {
+  const size = options.size ?? OG_IMAGE_SIZE_1200x630;
+  const fonts = options.fonts?.length ? options.fonts : void 0;
+  return new ImageResponse(element, {
+    width: size.width,
+    height: size.height,
+    ...fonts ? { fonts } : {}
+  });
+}
+
+// src/core/normalize.ts
+function clampText(text, maxLength) {
+  const normalized = text.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) return normalized;
+  const clipped = normalized.slice(0, Math.max(1, maxLength - 1));
+  const lastSpace = clipped.lastIndexOf(" ");
+  const safe = lastSpace > Math.floor(maxLength * 0.6) ? clipped.slice(0, lastSpace) : clipped;
+  return `${safe.trimEnd()}\u2026`;
+}
+function normalizeChips(chips, max = 3) {
+  if (!chips?.length) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const chip of chips) {
+    const normalized = chip.replace(/\s+/g, " ").trim();
+    if (!normalized) continue;
+    const key = normalized.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    result.push(clampText(normalized, 24));
+    if (result.length >= max) break;
+  }
+  return result;
+}
+function normalizeOgImageData(data, options = {}) {
+  const title = clampText(data.title, options.maxTitleLength ?? 140);
+  const brand = (data.brand ?? options.defaultBrand ?? "").trim();
+  const subtitleSeed = data.subtitle ?? options.defaultSubtitle ?? brand;
+  const subtitle = clampText(subtitleSeed || title, options.maxSubtitleLength ?? 160);
+  const chips = normalizeChips(data.chips, options.maxChips ?? 3);
+  return {
+    type: data.type,
+    title,
+    subtitle,
+    chips: chips.length > 0 ? chips : brand ? [brand] : [],
+    brand
+  };
+}
+
+// src/presets/sif/theme.ts
+var SIF_BRAND_COLORS = {
+  primary: "#EE6C4D",
+  primaryBright: "#FF8A67",
+  ink: "#292A38",
+  slate: "#C7D3DD",
+  paper: "#E8EEF2",
+  night: "#121726"
+};
+var SIF_DEFAULT_THEMES = {
+  blog: {
+    label: "Blog",
+    accent: SIF_BRAND_COLORS.primary,
+    accentSoft: "rgba(238, 108, 77, 0.16)",
+    glow: "rgba(238, 108, 77, 0.28)",
+    chipBorder: "rgba(238, 108, 77, 0.28)",
+    chipBg: "rgba(238, 108, 77, 0.1)"
+  },
+  service: {
+    label: "Service",
+    accent: "#F27C62",
+    accentSoft: "rgba(242, 124, 98, 0.16)",
+    glow: "rgba(242, 124, 98, 0.27)",
+    chipBorder: "rgba(242, 124, 98, 0.26)",
+    chipBg: "rgba(242, 124, 98, 0.09)"
+  },
+  portfolio: {
+    label: "Portfolio",
+    accent: SIF_BRAND_COLORS.primaryBright,
+    accentSoft: "rgba(255, 138, 103, 0.16)",
+    glow: "rgba(255, 138, 103, 0.25)",
+    chipBorder: "rgba(255, 138, 103, 0.24)",
+    chipBg: "rgba(255, 138, 103, 0.08)"
+  },
+  brand: {
+    label: "Software InFocus",
+    accent: SIF_BRAND_COLORS.primary,
+    accentSoft: "rgba(238, 108, 77, 0.18)",
+    glow: "rgba(238, 108, 77, 0.28)",
+    chipBorder: "rgba(238, 108, 77, 0.28)",
+    chipBg: "rgba(238, 108, 77, 0.1)"
+  }
+};
+var SIF_LOGO_MARK_VIEWBOX = "0 0 256 128";
+var SIF_LOGO_MARK_PATHS = [
+  "M64 24 L24 64 L64 104",
+  "M144 16 L112 112",
+  "M192 24 L232 64 L192 104"
+];
+
+// src/presets/sif/template.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SifLogoMark({
+  width = 132,
+  height = 66,
+  color = "#EE6C4D",
+  opacity = 1
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: SIF_LOGO_MARK_VIEWBOX,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { opacity },
+      children: SIF_LOGO_MARK_PATHS.map((path) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: path,
+          stroke: color,
+          strokeWidth: "16",
+          strokeLinecap: "square",
+          strokeLinejoin: "miter"
+        },
+        path
+      ))
+    }
+  );
+}
+function SifOgTemplate({ data, theme, domainLabel }) {
+  const chipsToRender = data.chips.slice(0, 3);
+  const titleFontSize = data.title.length < 36 ? 58 : data.title.length < 60 ? 50 : 42;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: OG_IMAGE_SIZE_1200x630.width,
+        height: OG_IMAGE_SIZE_1200x630.height,
+        display: "flex",
+        position: "relative",
+        overflow: "hidden",
+        background: `linear-gradient(145deg, ${SIF_BRAND_COLORS.night} 0%, #0d1424 38%, #171c2b 68%, ${SIF_BRAND_COLORS.ink} 100%)`,
+        color: SIF_BRAND_COLORS.paper
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: "linear-gradient(rgba(199,211,221,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(199,211,221,0.025) 1px, transparent 1px)",
+              backgroundSize: "36px 36px",
+              opacity: 0.35
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: -140,
+              right: -80,
+              width: 480,
+              height: 480,
+              borderRadius: 480,
+              background: `radial-gradient(circle, ${theme.glow} 0%, rgba(0,0,0,0) 70%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: -120,
+              left: -80,
+              width: 320,
+              height: 320,
+              borderRadius: 320,
+              background: "radial-gradient(circle, rgba(238,108,77,0.14) 0%, rgba(0,0,0,0) 72%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: -30,
+              top: 183,
+              display: "flex"
+            },
+            children: /* @__PURE__ */ jsx(SifLogoMark, { width: 528, height: 264, color: theme.accent, opacity: 0.055 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 2,
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              height: "100%",
+              padding: "52px 60px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 12
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(SifLogoMark, { width: 52, height: 26, color: theme.accent, opacity: 0.95 }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                display: "flex",
+                                fontSize: 20,
+                                fontWeight: 600,
+                                color: SIF_BRAND_COLORS.paper,
+                                letterSpacing: 0.2
+                              },
+                              children: data.brand
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 10,
+                          borderRadius: 999,
+                          border: `1px solid ${theme.chipBorder}`,
+                          background: "rgba(18,23,38,0.55)",
+                          height: 44,
+                          padding: "0 20px"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: 8,
+                                background: theme.accent,
+                                boxShadow: `0 0 14px ${theme.glow}`
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 17,
+                                fontWeight: 500,
+                                color: SIF_BRAND_COLORS.paper,
+                                letterSpacing: 0.2,
+                                display: "flex"
+                              },
+                              children: theme.label
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    justifyContent: "center",
+                    paddingBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: 52,
+                          height: 3,
+                          borderRadius: 999,
+                          background: theme.accent,
+                          boxShadow: `0 0 20px ${theme.glow}`,
+                          marginBottom: 24
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: titleFontSize,
+                          fontWeight: 700,
+                          lineHeight: 1.18,
+                          color: SIF_BRAND_COLORS.paper,
+                          maxWidth: 760,
+                          letterSpacing: -0.5,
+                          display: "flex",
+                          flexWrap: "wrap"
+                        },
+                        children: data.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 21,
+                          lineHeight: 1.55,
+                          color: "rgba(232,238,242,0.62)",
+                          maxWidth: 680,
+                          marginTop: 18,
+                          display: "flex",
+                          flexWrap: "wrap"
+                        },
+                        children: data.subtitle
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 10 }, children: chipsToRender.map((chip) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          height: 38,
+                          borderRadius: 999,
+                          padding: "0 16px",
+                          fontSize: 15,
+                          border: `1px solid ${theme.chipBorder}`,
+                          background: theme.chipBg,
+                          color: SIF_BRAND_COLORS.paper
+                        },
+                        children: chip
+                      },
+                      chip
+                    )) }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 15,
+                          color: "rgba(232,238,242,0.38)",
+                          letterSpacing: 0.4,
+                          display: "flex"
+                        },
+                        children: domainLabel
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/presets/sif/fallbacks.ts
+function createSifFallbacks(config = {}) {
+  const brandName = config.brandName?.trim() || "Software InFocus";
+  const global = {
+    type: "brand",
+    title: brandName,
+    subtitle: "Custom websites, software, and growth systems for Delaware businesses",
+    chips: ["Web Development", "Design", "SEO"],
+    brand: brandName
+  };
+  const section = {
+    brand: global,
+    blog: {
+      type: "blog",
+      title: `${brandName} Blog`,
+      subtitle: "Practical insights on websites, software, SEO, and growth",
+      chips: ["Articles", "Guides", "Case Notes"],
+      brand: brandName
+    },
+    portfolio: {
+      type: "portfolio",
+      title: `${brandName} Portfolio`,
+      subtitle: "Case studies and project outcomes across web, SEO, and software delivery",
+      chips: ["Case Studies", "Web Builds", "Results"],
+      brand: brandName
+    },
+    service: {
+      type: "service",
+      title: `${brandName} Services`,
+      subtitle: "Design, development, SEO, hosting, and long-term support",
+      chips: ["Delaware", "Custom", "Lead-Focused"],
+      brand: brandName
+    }
+  };
+  return { global, section };
+}
+
+// src/presets/sif/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function mergeSifThemes(overrides) {
+  return {
+    brand: overrides?.brand ?? SIF_DEFAULT_THEMES.brand,
+    blog: overrides?.blog ?? SIF_DEFAULT_THEMES.blog,
+    service: overrides?.service ?? SIF_DEFAULT_THEMES.service,
+    portfolio: overrides?.portfolio ?? SIF_DEFAULT_THEMES.portfolio
+  };
+}
+function normalizeSifOgData(input, brandName) {
+  const normalized = normalizeOgImageData(input, {
+    defaultBrand: brandName,
+    defaultSubtitle: brandName,
+    maxTitleLength: 140,
+    maxSubtitleLength: 160,
+    maxChips: 3
+  });
+  return {
+    type: normalized.type,
+    title: normalized.title,
+    subtitle: normalized.subtitle,
+    chips: normalized.chips,
+    brand: normalized.brand || brandName
+  };
+}
+function createSifOgRenderer(config = {}) {
+  const brandName = config.brandName?.trim() || "Software InFocus";
+  const domainLabel = config.domainLabel?.trim() || "softwareinfocus.com";
+  const themes = mergeSifThemes(config.themes);
+  const loadFonts = config.loadFonts;
+  return async (input) => {
+    const data = normalizeSifOgData(input, brandName);
+    const theme = themes[data.type];
+    const fonts = loadFonts ? await loadFonts() : [];
+    return createPngImageResponse(
+      /* @__PURE__ */ jsx2(SifOgTemplate, { data, theme, domainLabel }),
+      { fonts }
+    );
+  };
+}
+export {
+  createSifFallbacks,
+  createSifOgRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/presets/sif/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/core/image-response.tsx","../../../src/core/normalize.ts","../../../src/presets/sif/theme.ts","../../../src/presets/sif/template.tsx","../../../src/presets/sif/fallbacks.ts","../../../src/presets/sif/index.tsx"],"sourcesContent":["import { ImageResponse } from 'next/og'\nimport type { ReactElement } from 'react'\nimport { OG_IMAGE_SIZE_1200x630 } from './constants'\nimport type { OgFontDefinition, OgImageSize } from './types'\n\nexport function createPngImageResponse(\n  element: ReactElement,\n  options: {\n    fonts?: OgFontDefinition[]\n    size?: OgImageSize\n  } = {},\n) {\n  const size = options.size ?? OG_IMAGE_SIZE_1200x630\n  const fonts = options.fonts?.length ? options.fonts : undefined\n\n  return new ImageResponse(element, {\n    width: size.width,\n    height: size.height,\n    ...(fonts ? { fonts } : {}),\n  })\n}\n","import type { OgImageData } from './types'\n\nexport function clampText(text: string, maxLength: number): string {\n  const normalized = text.replace(/\\s+/g, ' ').trim()\n  if (normalized.length <= maxLength) return normalized\n\n  const clipped = normalized.slice(0, Math.max(1, maxLength - 1))\n  const lastSpace = clipped.lastIndexOf(' ')\n  const safe = lastSpace > Math.floor(maxLength * 0.6) ? clipped.slice(0, lastSpace) : clipped\n\n  return `${safe.trimEnd()}…`\n}\n\nexport function normalizeChips(chips: string[] | undefined, max = 3): string[] {\n  if (!chips?.length) return []\n\n  const seen = new Set<string>()\n  const result: string[] = []\n\n  for (const chip of chips) {\n    const normalized = chip.replace(/\\s+/g, ' ').trim()\n    if (!normalized) continue\n\n    const key = normalized.toLowerCase()\n    if (seen.has(key)) continue\n    seen.add(key)\n\n    result.push(clampText(normalized, 24))\n    if (result.length >= max) break\n  }\n\n  return result\n}\n\nexport function normalizeOgImageData<TType extends string>(\n  data: OgImageData<TType>,\n  options: {\n    defaultBrand?: string\n    defaultSubtitle?: string\n    maxTitleLength?: number\n    maxSubtitleLength?: number\n    maxChips?: number\n  } = {},\n): Required<Pick<OgImageData<TType>, 'type' | 'title' | 'subtitle' | 'chips' | 'brand'>> {\n  const title = clampText(data.title, options.maxTitleLength ?? 140)\n  const brand = (data.brand ?? options.defaultBrand ?? '').trim()\n  const subtitleSeed = data.subtitle ?? options.defaultSubtitle ?? brand\n  const subtitle = clampText(subtitleSeed || title, options.maxSubtitleLength ?? 160)\n  const chips = normalizeChips(data.chips, options.maxChips ?? 3)\n\n  return {\n    type: data.type,\n    title,\n    subtitle,\n    chips: chips.length > 0 ? chips : (brand ? [brand] : []),\n    brand,\n  }\n}\n","import type { SifOgTheme, SifOgType } from './types'\n\nexport const SIF_BRAND_COLORS = {\n  primary: '#EE6C4D',\n  primaryBright: '#FF8A67',\n  ink: '#292A38',\n  slate: '#C7D3DD',\n  paper: '#E8EEF2',\n  night: '#121726',\n} as const\n\nexport const SIF_DEFAULT_THEMES: Record<SifOgType, SifOgTheme> = {\n  blog: {\n    label: 'Blog',\n    accent: SIF_BRAND_COLORS.primary,\n    accentSoft: 'rgba(238, 108, 77, 0.16)',\n    glow: 'rgba(238, 108, 77, 0.28)',\n    chipBorder: 'rgba(238, 108, 77, 0.28)',\n    chipBg: 'rgba(238, 108, 77, 0.1)',\n  },\n  service: {\n    label: 'Service',\n    accent: '#F27C62',\n    accentSoft: 'rgba(242, 124, 98, 0.16)',\n    glow: 'rgba(242, 124, 98, 0.27)',\n    chipBorder: 'rgba(242, 124, 98, 0.26)',\n    chipBg: 'rgba(242, 124, 98, 0.09)',\n  },\n  portfolio: {\n    label: 'Portfolio',\n    accent: SIF_BRAND_COLORS.primaryBright,\n    accentSoft: 'rgba(255, 138, 103, 0.16)',\n    glow: 'rgba(255, 138, 103, 0.25)',\n    chipBorder: 'rgba(255, 138, 103, 0.24)',\n    chipBg: 'rgba(255, 138, 103, 0.08)',\n  },\n  brand: {\n    label: 'Software InFocus',\n    accent: SIF_BRAND_COLORS.primary,\n    accentSoft: 'rgba(238, 108, 77, 0.18)',\n    glow: 'rgba(238, 108, 77, 0.28)',\n    chipBorder: 'rgba(238, 108, 77, 0.28)',\n    chipBg: 'rgba(238, 108, 77, 0.1)',\n  },\n}\n\nexport const SIF_LOGO_MARK_VIEWBOX = '0 0 256 128'\n\nexport const SIF_LOGO_MARK_PATHS = [\n  'M64 24 L24 64 L64 104',\n  'M144 16 L112 112',\n  'M192 24 L232 64 L192 104',\n] as const\n","import { OG_IMAGE_SIZE_1200x630 } from '../../core/constants'\nimport type { SifNormalizedOgData, SifOgTheme } from './types'\nimport { SIF_BRAND_COLORS, SIF_LOGO_MARK_PATHS, SIF_LOGO_MARK_VIEWBOX } from './theme'\n\ntype SifLogoMarkProps = {\n  width?: number\n  height?: number\n  color?: string\n  opacity?: number\n}\n\nfunction SifLogoMark({\n  width = 132,\n  height = 66,\n  color = '#EE6C4D',\n  opacity = 1,\n}: SifLogoMarkProps) {\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={SIF_LOGO_MARK_VIEWBOX}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ opacity }}\n    >\n      {SIF_LOGO_MARK_PATHS.map((path) => (\n        <path\n          key={path}\n          d={path}\n          stroke={color}\n          strokeWidth=\"16\"\n          strokeLinecap=\"square\"\n          strokeLinejoin=\"miter\"\n        />\n      ))}\n    </svg>\n  )\n}\n\ntype SifOgTemplateProps = {\n  data: SifNormalizedOgData\n  theme: SifOgTheme\n  domainLabel: string\n}\n\nexport function SifOgTemplate({ data, theme, domainLabel }: SifOgTemplateProps) {\n  const chipsToRender = data.chips.slice(0, 3)\n  const titleFontSize = data.title.length < 36 ? 58 : data.title.length < 60 ? 50 : 42\n\n  return (\n    <div\n      style={{\n        width: OG_IMAGE_SIZE_1200x630.width,\n        height: OG_IMAGE_SIZE_1200x630.height,\n        display: 'flex',\n        position: 'relative',\n        overflow: 'hidden',\n        background: `linear-gradient(145deg, ${SIF_BRAND_COLORS.night} 0%, #0d1424 38%, #171c2b 68%, ${SIF_BRAND_COLORS.ink} 100%)`,\n        color: SIF_BRAND_COLORS.paper,\n      }}\n    >\n      <div\n        style={{\n          position: 'absolute',\n          inset: 0,\n          backgroundImage:\n            'linear-gradient(rgba(199,211,221,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(199,211,221,0.025) 1px, transparent 1px)',\n          backgroundSize: '36px 36px',\n          opacity: 0.35,\n        }}\n      />\n\n      <div\n        style={{\n          position: 'absolute',\n          top: -140,\n          right: -80,\n          width: 480,\n          height: 480,\n          borderRadius: 480,\n          background: `radial-gradient(circle, ${theme.glow} 0%, rgba(0,0,0,0) 70%)`,\n        }}\n      />\n\n      <div\n        style={{\n          position: 'absolute',\n          bottom: -120,\n          left: -80,\n          width: 320,\n          height: 320,\n          borderRadius: 320,\n          background: 'radial-gradient(circle, rgba(238,108,77,0.14) 0%, rgba(0,0,0,0) 72%)',\n        }}\n      />\n\n      <div\n        style={{\n          position: 'absolute',\n          right: -30,\n          top: 183,\n          display: 'flex',\n        }}\n      >\n        <SifLogoMark width={528} height={264} color={theme.accent} opacity={0.055} />\n      </div>\n\n      <div\n        style={{\n          position: 'relative',\n          zIndex: 2,\n          display: 'flex',\n          flexDirection: 'column',\n          width: '100%',\n          height: '100%',\n          padding: '52px 60px',\n        }}\n      >\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n          }}\n        >\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 12,\n            }}\n          >\n            <SifLogoMark width={52} height={26} color={theme.accent} opacity={0.95} />\n            <span\n              style={{\n                display: 'flex',\n                fontSize: 20,\n                fontWeight: 600,\n                color: SIF_BRAND_COLORS.paper,\n                letterSpacing: 0.2,\n              }}\n            >\n              {data.brand}\n            </span>\n          </div>\n\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: 10,\n              borderRadius: 999,\n              border: `1px solid ${theme.chipBorder}`,\n              background: 'rgba(18,23,38,0.55)',\n              height: 44,\n              padding: '0 20px',\n            }}\n          >\n            <div\n              style={{\n                width: 8,\n                height: 8,\n                borderRadius: 8,\n                background: theme.accent,\n                boxShadow: `0 0 14px ${theme.glow}`,\n              }}\n            />\n            <span\n              style={{\n                fontSize: 17,\n                fontWeight: 500,\n                color: SIF_BRAND_COLORS.paper,\n                letterSpacing: 0.2,\n                display: 'flex',\n              }}\n            >\n              {theme.label}\n            </span>\n          </div>\n        </div>\n\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            flex: 1,\n            justifyContent: 'center',\n            paddingBottom: 8,\n          }}\n        >\n          <div\n            style={{\n              width: 52,\n              height: 3,\n              borderRadius: 999,\n              background: theme.accent,\n              boxShadow: `0 0 20px ${theme.glow}`,\n              marginBottom: 24,\n            }}\n          />\n\n          <div\n            style={{\n              fontSize: titleFontSize,\n              fontWeight: 700,\n              lineHeight: 1.18,\n              color: SIF_BRAND_COLORS.paper,\n              maxWidth: 760,\n              letterSpacing: -0.5,\n              display: 'flex',\n              flexWrap: 'wrap',\n            }}\n          >\n            {data.title}\n          </div>\n\n          <div\n            style={{\n              fontSize: 21,\n              lineHeight: 1.55,\n              color: 'rgba(232,238,242,0.62)',\n              maxWidth: 680,\n              marginTop: 18,\n              display: 'flex',\n              flexWrap: 'wrap',\n            }}\n          >\n            {data.subtitle}\n          </div>\n        </div>\n\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n          }}\n        >\n          <div style={{ display: 'flex', gap: 10 }}>\n            {chipsToRender.map((chip) => (\n              <div\n                key={chip}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  height: 38,\n                  borderRadius: 999,\n                  padding: '0 16px',\n                  fontSize: 15,\n                  border: `1px solid ${theme.chipBorder}`,\n                  background: theme.chipBg,\n                  color: SIF_BRAND_COLORS.paper,\n                }}\n              >\n                {chip}\n              </div>\n            ))}\n          </div>\n\n          <span\n            style={{\n              fontSize: 15,\n              color: 'rgba(232,238,242,0.38)',\n              letterSpacing: 0.4,\n              display: 'flex',\n            }}\n          >\n            {domainLabel}\n          </span>\n        </div>\n      </div>\n    </div>\n  )\n}\n","import type { SifOgData } from './types'\n\nexport function createSifFallbacks(config: { brandName?: string } = {}) {\n  const brandName = config.brandName?.trim() || 'Software InFocus'\n\n  const global: SifOgData = {\n    type: 'brand',\n    title: brandName,\n    subtitle: 'Custom websites, software, and growth systems for Delaware businesses',\n    chips: ['Web Development', 'Design', 'SEO'],\n    brand: brandName,\n  }\n\n  const section: Record<SifOgData['type'], SifOgData> = {\n    brand: global,\n    blog: {\n      type: 'blog',\n      title: `${brandName} Blog`,\n      subtitle: 'Practical insights on websites, software, SEO, and growth',\n      chips: ['Articles', 'Guides', 'Case Notes'],\n      brand: brandName,\n    },\n    portfolio: {\n      type: 'portfolio',\n      title: `${brandName} Portfolio`,\n      subtitle: 'Case studies and project outcomes across web, SEO, and software delivery',\n      chips: ['Case Studies', 'Web Builds', 'Results'],\n      brand: brandName,\n    },\n    service: {\n      type: 'service',\n      title: `${brandName} Services`,\n      subtitle: 'Design, development, SEO, hosting, and long-term support',\n      chips: ['Delaware', 'Custom', 'Lead-Focused'],\n      brand: brandName,\n    },\n  }\n\n  return { global, section }\n}\n","import { createPngImageResponse } from '../../core/image-response'\nimport { normalizeOgImageData } from '../../core/normalize'\nimport { SifOgTemplate } from './template'\nimport { createSifFallbacks } from './fallbacks'\nimport { SIF_DEFAULT_THEMES } from './theme'\nimport type {\n  SifNormalizedOgData,\n  SifOgData,\n  SifOgRenderer,\n  SifOgTheme,\n  SifPresetConfig,\n  SifOgType,\n} from './types'\n\nfunction mergeSifThemes(\n  overrides: Partial<Record<SifOgType, SifOgTheme>> | undefined,\n): Record<SifOgType, SifOgTheme> {\n  return {\n    brand: overrides?.brand ?? SIF_DEFAULT_THEMES.brand,\n    blog: overrides?.blog ?? SIF_DEFAULT_THEMES.blog,\n    service: overrides?.service ?? SIF_DEFAULT_THEMES.service,\n    portfolio: overrides?.portfolio ?? SIF_DEFAULT_THEMES.portfolio,\n  }\n}\n\nfunction normalizeSifOgData(input: SifOgData, brandName: string): SifNormalizedOgData {\n  const normalized = normalizeOgImageData(input, {\n    defaultBrand: brandName,\n    defaultSubtitle: brandName,\n    maxTitleLength: 140,\n    maxSubtitleLength: 160,\n    maxChips: 3,\n  })\n\n  return {\n    type: normalized.type,\n    title: normalized.title,\n    subtitle: normalized.subtitle,\n    chips: normalized.chips,\n    brand: normalized.brand || brandName,\n  }\n}\n\nexport function createSifOgRenderer(config: SifPresetConfig = {}): SifOgRenderer {\n  const brandName = config.brandName?.trim() || 'Software InFocus'\n  const domainLabel = config.domainLabel?.trim() || 'softwareinfocus.com'\n  const themes = mergeSifThemes(config.themes)\n  const loadFonts = config.loadFonts\n\n  return async (input: SifOgData) => {\n    const data = normalizeSifOgData(input, brandName)\n    const theme = themes[data.type]\n    const fonts = loadFonts ? await loadFonts() : []\n\n    return createPngImageResponse(\n      <SifOgTemplate data={data} theme={theme} domainLabel={domainLabel} />,\n      { fonts },\n    )\n  }\n}\n\nexport { createSifFallbacks }\nexport type {\n  SifOgData,\n  SifOgRenderer,\n  SifOgTheme,\n  SifOgType,\n  SifPresetConfig,\n} from './types'\n"],"mappings":"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","names":["jsx"]}

package/dist/types-CaggCk6z.d.ts

@@ -0,0 +1,18 @@
+type OgImageData<TType extends string = string> = {
+    type: TType;
+    title: string;
+    subtitle?: string;
+    chips?: string[];
+    brand?: string;
+};
+type OgFontDefinition = {
+    name: string;
+    data: ArrayBuffer;
+    style?: 'normal' | 'italic';
+    weight: 400 | 500 | 600 | 700;
+};
+type MetadataImageRouteProps<TParams extends Record<string, string>> = {
+    params: Promise<TParams> | TParams;
+};
+
+export type { MetadataImageRouteProps as M, OgImageData as O, OgFontDefinition as a };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@softwareinfocus/next-og-image",
+  "version": "0.1.0",
+  "description": "Reusable Open Graph image toolkit for Next.js App Router with an optional Software InFocus preset",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./presets/sif": {
+      "types": "./dist/presets/sif/index.d.ts",
+      "import": "./dist/presets/sif/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "next": ">=15 <16",
+    "react": ">=19 <20"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.7",
+    "@eslint/js": "^9.20.0",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "eslint": "^9.20.1",
+    "globals": "^15.15.0",
+    "next": "^15.3.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.1",
+    "vitest": "^3.0.7"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "release:check": "changeset status --verbose"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}