@djangocfg/nextjs 2.1.225 → 2.1.227

package/src/og-image/route.tsx

@@ -1,312 +0,0 @@
-/**
- * OG Image Route Handler
- *
- * Factory function to create OG Image route handler for Next.js App Router
- *
- * Usage:
- * ```tsx
- * // app/api/og/route.tsx
- * import { createOgImageHandler } from '@djangocfg/nextjs/og-image';
- * import { MyTemplate } from './templates';
- *
- * export const { GET, runtime } = createOgImageHandler({
- *   template: MyTemplate,
- *   defaultProps: {
- *     siteName: 'My Site',
- *   },
- *   fonts: [{ family: 'Manrope', weight: 700 }],
- * });
- * ```
- */
-
-import { ImageResponse } from 'next/og';
-import { NextRequest } from 'next/server';
-
-import { DefaultTemplate } from './components/DefaultTemplate';
-import { loadGoogleFonts } from './utils';
-import { parseOgImageData } from './utils/url';
-
-import type { ReactElement } from 'react';
-import type { OgImageTemplateProps } from './types';
-
-export interface OgImageHandlerConfig {
-  /** Custom template component (optional, defaults to DefaultTemplate) */
-  template?: (props: OgImageTemplateProps) => ReactElement;
-  /** Default props to merge with query params */
-  defaultProps?: Partial<OgImageTemplateProps>;
-  /** Google Fonts to load */
-  fonts?: Array<{ family: string; weight: 400 | 500 | 600 | 700 | 800 | 900 }>;
-  /** Image size */
-  size?: { width: number; height: number };
-  /** Enable debug mode */
-  debug?: boolean;
-}
-
-/**
- * Factory function to create OG Image route handler
- * 
- * @example
- * ```tsx
- * // app/api/og/route.tsx
- * import { createOgImageHandler } from '@djangocfg/nextjs/og-image';
- * import { MyTemplate } from '@/components/MyTemplate';
- * 
- * export const { GET, runtime } = createOgImageHandler({
- *   template: MyTemplate,
- *   defaultProps: { siteName: 'My Site' },
- *   fonts: [{ family: 'Inter', weight: 700 }],
- * });
- * ```
- */
-export function createOgImageHandler(config: OgImageHandlerConfig) {
-  const {
-    template: Template = DefaultTemplate,
-    defaultProps = {},
-    fonts: fontConfig = [],
-    size = { width: 1200, height: 630 },
-    debug = false,
-  } = config;
-
-  async function GET(req: NextRequest) {
-    let searchParams: URLSearchParams = new URLSearchParams();
-    
-    // Try to get searchParams from multiple sources
-    if (req.nextUrl?.searchParams && req.nextUrl.searchParams.size > 0) {
-      searchParams = req.nextUrl.searchParams;
-    } else if (req.nextUrl?.search && req.nextUrl.search.length > 1) {
-      searchParams = new URLSearchParams(req.nextUrl.search);
-    } else {
-      try {
-        const url = new URL(req.url);
-        if (url.searchParams.size > 0) {
-          searchParams = url.searchParams;
-        }
-      } catch (error) {
-        // Ignore
-      }
-      
-      if (searchParams.size === 0 && req.url) {
-        const queryIndex = req.url.indexOf('?');
-        if (queryIndex !== -1) {
-          const queryString = req.url.substring(queryIndex + 1);
-          searchParams = new URLSearchParams(queryString);
-        }
-      }
-      
-      if (searchParams.size === 0) {
-        const customParams = req.headers.get('x-og-search-params');
-        if (customParams) {
-          searchParams = new URLSearchParams(customParams);
-        }
-      }
-    }
-
-    // Initialize with defaults
-    let title = defaultProps.title || 'Untitled';
-    let subtitle = defaultProps.subtitle || '';
-    let description = defaultProps.description || subtitle;
-
-    // Support base64 data parameter (priority: base64 > query params > defaults)
-    // All template props can be encoded in base64, including styling params
-    const dataParam = searchParams.get('data');
-    let decodedParams: Record<string, any> = {};
-    
-    if (dataParam) {
-      try {
-        const paramsObj: Record<string, string> = { data: dataParam };
-        for (const [key, value] of searchParams.entries()) {
-          if (key !== 'data') {
-            paramsObj[key] = value;
-          }
-        }
-        decodedParams = parseOgImageData(paramsObj);
-        
-        // Base64 data takes precedence - apply all decoded values
-        if (decodedParams.title && typeof decodedParams.title === 'string' && decodedParams.title.trim() !== '') {
-          title = decodedParams.title.trim();
-        }
-        if (decodedParams.subtitle && typeof decodedParams.subtitle === 'string' && decodedParams.subtitle.trim() !== '') {
-          subtitle = decodedParams.subtitle.trim();
-        }
-        if (decodedParams.description && typeof decodedParams.description === 'string' && decodedParams.description.trim() !== '') {
-          description = decodedParams.description.trim();
-        }
-      } catch (error) {
-        // Silently fall back to defaults
-      }
-    }
-
-    // Fallback to query params if not set from base64
-    if (!title || title === 'Untitled') {
-      const titleParam = searchParams.get('title');
-      if (titleParam) {
-        title = titleParam;
-      }
-    }
-    if (!subtitle) {
-      const subtitleParam = searchParams.get('subtitle');
-      if (subtitleParam) {
-        subtitle = subtitleParam;
-      }
-    }
-    if (!description || description === subtitle) {
-      const descParam = searchParams.get('description');
-      if (descParam) {
-        description = descParam;
-      }
-    }
-
-    // Load fonts if configured
-    let fonts: any[] = [];
-    if (fontConfig.length > 0) {
-      fonts = await loadGoogleFonts(fontConfig);
-    }
-
-    // Helper function to parse numeric/boolean values from decoded params
-    const parseValue = (value: any, type: 'number' | 'boolean' | 'string' = 'string'): any => {
-      if (value === undefined || value === null || value === '') {
-        return undefined;
-      }
-      if (type === 'number') {
-        const num = Number(value);
-        return isNaN(num) ? undefined : num;
-      }
-      if (type === 'boolean') {
-        if (typeof value === 'boolean') return value;
-        if (typeof value === 'string') {
-          return value.toLowerCase() === 'true' || value === '1';
-        }
-        return Boolean(value);
-      }
-      return String(value);
-    };
-
-    // Merge props: decoded params from URL override defaultProps
-    const templateProps: OgImageTemplateProps = {
-      ...defaultProps,
-      // Content
-      title,
-      subtitle,
-      description,
-      // Override with decoded params if present
-      siteName: decodedParams.siteName || defaultProps.siteName,
-      logo: decodedParams.logo || defaultProps.logo,
-      // Background
-      backgroundType: (decodedParams.backgroundType as 'gradient' | 'solid') || defaultProps.backgroundType,
-      gradientStart: decodedParams.gradientStart || defaultProps.gradientStart,
-      gradientEnd: decodedParams.gradientEnd || defaultProps.gradientEnd,
-      backgroundColor: decodedParams.backgroundColor || defaultProps.backgroundColor,
-      // Typography - Title
-      titleSize: parseValue(decodedParams.titleSize, 'number') ?? defaultProps.titleSize,
-      titleWeight: parseValue(decodedParams.titleWeight, 'number') ?? defaultProps.titleWeight,
-      titleColor: decodedParams.titleColor || defaultProps.titleColor,
-      // Typography - Description
-      descriptionSize: parseValue(decodedParams.descriptionSize, 'number') ?? defaultProps.descriptionSize,
-      descriptionColor: decodedParams.descriptionColor || defaultProps.descriptionColor,
-      // Typography - Site Name
-      siteNameSize: parseValue(decodedParams.siteNameSize, 'number') ?? defaultProps.siteNameSize,
-      siteNameColor: decodedParams.siteNameColor || defaultProps.siteNameColor,
-      // Layout
-      padding: parseValue(decodedParams.padding, 'number') ?? defaultProps.padding,
-      logoSize: parseValue(decodedParams.logoSize, 'number') ?? defaultProps.logoSize,
-      // Visibility flags
-      showLogo: parseValue(decodedParams.showLogo, 'boolean') ?? defaultProps.showLogo,
-      showSiteName: parseValue(decodedParams.showSiteName, 'boolean') ?? defaultProps.showSiteName,
-    };
-
-
-    return new ImageResponse(
-      <Template {...templateProps} />,
-      {
-        width: size.width,
-        height: size.height,
-        fonts,
-        debug: debug || process.env.NODE_ENV === 'development',
-      }
-    );
-  }
-
-  return {
-    GET,
-    runtime: 'edge' as const,
-  };
-}
-
-/**
- * Create OG Image route handler for dynamic route with path parameter
- * 
- * This is a convenience wrapper for Next.js dynamic routes like `/api/og/[data]/route.tsx`.
- * It extracts the `data` parameter from the path and passes it to the handler as a query parameter.
- * Also handles static export mode automatically.
- * 
- * @example
- * ```tsx
- * // app/api/og/[data]/route.tsx
- * import { createOgImageDynamicRoute } from '@djangocfg/nextjs/og-image';
- * import { OgImageTemplate } from '@/components/OgImageTemplate';
- * 
- * export const runtime = 'nodejs';
- * export const dynamic = 'force-static';
- * export const revalidate = false;
- * 
- * const handler = createOgImageDynamicRoute({
- *   template: OgImageTemplate,
- *   defaultProps: {
- *     siteName: 'My App',
- *     logo: '/logo.svg',
- *   },
- * });
- * 
- * export async function GET(
- *   request: NextRequest,
- *   { params }: { params: { data: string } }
- ) {
- *   return handler(request, params);
- * }
- * ```
- */
-export function createOgImageDynamicRoute(config: OgImageHandlerConfig) {
-  const handler = createOgImageHandler(config);
-  const isStaticBuild = typeof process !== 'undefined' && process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
-
-  async function GET(
-    request: NextRequest,
-    context: { params: Promise<{ data: string }> }
-  ) {
-    // In static export mode, return a simple error response
-    if (isStaticBuild) {
-      return new Response('OG Image generation is not available in static export mode', {
-        status: 404,
-        headers: { 'Content-Type': 'text/plain' },
-      });
-    }
-
-    // Await params (Next.js 15+ uses Promise)
-    const params = await context.params;
-    
-    // Extract data from path parameter
-    const dataParam = params.data;
-    
-    // Create a request with the data parameter as a query param for the handler
-    const url = new URL(request.url);
-    url.searchParams.set('data', dataParam);
-    
-    const modifiedRequest = new NextRequest(url.toString(), {
-      method: request.method,
-      headers: request.headers,
-    });
-
-    return handler.GET(modifiedRequest);
-  }
-
-  // For static export, provide generateStaticParams that returns empty array
-  // This allows the route to be excluded from static build
-  async function generateStaticParams(): Promise<Array<{ data: string }>> {
-    return [];
-  }
-
-  return {
-    GET,
-    generateStaticParams,
-  };
-}

package/src/og-image/utils/fonts.ts

@@ -1,150 +0,0 @@
-/**
- * Font Utilities for OG Image Generation
- *
- * Provides dynamic font loading from Google Fonts without requiring files in public/
- * Based on Vercel's official @vercel/og documentation
- */
-
-export interface FontConfig {
-  name: string;
-  weight?: 400 | 500 | 600 | 700 | 800 | 900;
-  style?: 'normal' | 'italic';
-  data: ArrayBuffer;
-}
-
-/**
- * Load a Google Font dynamically
- *
- * @param font - Font family name (e.g., "Inter", "Roboto", "Manrope")
- * @param text - Text to optimize font for (optional, reduces file size)
- * @param weight - Font weight (default: 700)
- * @returns ArrayBuffer of font data
- *
- * @example
- * const fontData = await loadGoogleFont('Manrope', 'Hello World', 700);
- */
-export async function loadGoogleFont(
-  font: string,
-  text?: string,
-  weight: number = 700
-): Promise<ArrayBuffer> {
-  // Construct Google Fonts API URL
-  let url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}`;
-
-  // Add text parameter to optimize font subset (reduces size)
-  if (text) {
-    url += `&text=${encodeURIComponent(text)}`;
-  }
-
-  try {
-    // Fetch CSS containing font URL
-    const css = await fetch(url, {
-      headers: {
-        // Required to get TTF format instead of WOFF2
-        'User-Agent':
-          'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
-      },
-    }).then((res) => res.text());
-
-    // Extract font URL from CSS
-    const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/);
-
-    if (!resource || !resource[1]) {
-      throw new Error(`Failed to parse font URL from CSS for font: ${font}`);
-    }
-
-    // Fetch actual font file
-    const response = await fetch(resource[1]);
-
-    if (response.status !== 200) {
-      throw new Error(`Failed to fetch font data: HTTP ${response.status}`);
-    }
-
-    return await response.arrayBuffer();
-  } catch (error) {
-    console.error(`Error loading Google Font "${font}":`, error);
-    throw new Error(`Failed to load font "${font}": ${error instanceof Error ? error.message : 'Unknown error'}`);
-  }
-}
-
-/**
- * Load multiple Google Fonts
- *
- * @param fonts - Array of font configurations to load
- * @returns Array of FontConfig objects ready for ImageResponse
- *
- * @example
- * const fonts = await loadGoogleFonts([
- *   { family: 'Manrope', weight: 700 },
- *   { family: 'Inter', weight: 400 }
- * ]);
- */
-export async function loadGoogleFonts(
-  fonts: Array<{
-    family: string;
-    weight?: 400 | 500 | 600 | 700 | 800 | 900;
-    style?: 'normal' | 'italic';
-    text?: string;
-  }>
-): Promise<FontConfig[]> {
-  const fontConfigs = await Promise.all(
-    fonts.map(async ({ family, weight = 700, style = 'normal', text }) => {
-      const data = await loadGoogleFont(family, text, weight);
-      return {
-        name: family,
-        weight,
-        style,
-        data,
-      };
-    })
-  );
-
-  return fontConfigs;
-}
-
-/**
- * Create a font loader with caching
- *
- * Useful for reusing font data across multiple OG image requests
- *
- * @example
- * const fontLoader = createFontLoader();
- * const font = await fontLoader.load('Manrope', 700);
- */
-export function createFontLoader() {
-  const cache = new Map<string, Promise<ArrayBuffer>>();
-
-  return {
-    /**
-     * Load a font with caching
-     */
-    async load(
-      family: string,
-      weight: number = 700,
-      text?: string
-    ): Promise<ArrayBuffer> {
-      const cacheKey = `${family}-${weight}-${text || 'all'}`;
-
-      if (!cache.has(cacheKey)) {
-        cache.set(cacheKey, loadGoogleFont(family, text, weight));
-      }
-
-      return cache.get(cacheKey)!;
-    },
-
-    /**
-     * Clear the cache
-     */
-    clear() {
-      cache.clear();
-    },
-
-    /**
-     * Get cache size
-     */
-    size() {
-      return cache.size;
-    },
-  };
-}
-

package/src/og-image/utils/index.ts

@@ -1,28 +0,0 @@
-/**
- * Utilities for OG Image Generation
- */
-
-export {
-  loadGoogleFont,
-  loadGoogleFonts,
-  createFontLoader,
-  type FontConfig,
-} from './fonts';
-
-export {
-  generateOgImageUrl,
-  getAbsoluteOgImageUrl,
-  createOgImageUrlBuilder,
-  parseOgImageUrl,
-  parseOgImageData,
-  encodeBase64,
-  decodeBase64,
-  type OgImageUrlParams,
-} from './url';
-
-export {
-  generateAppMetadata,
-  createAppMetadataGenerator,
-  type AppMetadataOptions,
-} from './metadata';
-