@djangocfg/nextjs 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/nextjs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Next.js utilities and components: sitemap, health, OG images, legal pages, error pages",
   "keywords": [
     "nextjs",
@@ -109,14 +109,14 @@
     "next": "^15.4.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@djangocfg/ui": "^1.4.31",
-    "@djangocfg/layouts": "^2.0.1",
-    "@djangocfg/api": "^1.4.31",
+    "@djangocfg/ui": "^1.4.32",
+    "@djangocfg/layouts": "^2.0.2",
+    "@djangocfg/api": "^1.4.32",
     "lucide-react": "^0.469.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.31",
-    "@djangocfg/layouts": "^2.0.1",
+    "@djangocfg/typescript-config": "^1.4.32",
+    "@djangocfg/layouts": "^2.0.2",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/config/base-next-config.ts

@@ -199,6 +199,10 @@ export function createBaseNextConfig(
         buildDependencies: {},
       };
 
+      // Note: Dynamic API routes should use `export const dynamic = 'force-dynamic'`
+      // in the route file itself to exclude them from static export.
+      // This is simpler than using webpack plugins.
+
       // Compression plugins (only for static build in production)
       // Note: compression-webpack-plugin should be installed in the consuming project
       if (!isServer && isStaticBuild && !dev) {
@@ -252,6 +256,7 @@ export function createBaseNextConfig(
   // Cleanup: Remove our custom options that are not part of NextConfig
   // These are internal to BaseNextConfigOptions and should not be in the final config
   delete (finalConfig as any).basePath;
+  delete (finalConfig as any).staticBuildPath;
   delete (finalConfig as any).optimizePackageImports;
   // Note: We don't delete transpilePackages, experimental, env, webpack
   // as they are valid NextConfig keys and may have been overridden by user

package/src/og-image/route.tsx

@@ -105,7 +105,9 @@ export function createOgImageHandler(config: OgImageHandlerConfig) {
     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 {
@@ -115,17 +117,17 @@ export function createOgImageHandler(config: OgImageHandlerConfig) {
             paramsObj[key] = value;
           }
         }
-        const decodedData = parseOgImageData(paramsObj);
+        decodedParams = parseOgImageData(paramsObj);
         
         // Base64 data takes precedence - apply all decoded values
-        if (decodedData.title && typeof decodedData.title === 'string' && decodedData.title.trim() !== '') {
-          title = decodedData.title.trim();
+        if (decodedParams.title && typeof decodedParams.title === 'string' && decodedParams.title.trim() !== '') {
+          title = decodedParams.title.trim();
         }
-        if (decodedData.subtitle && typeof decodedData.subtitle === 'string' && decodedData.subtitle.trim() !== '') {
-          subtitle = decodedData.subtitle.trim();
+        if (decodedParams.subtitle && typeof decodedParams.subtitle === 'string' && decodedParams.subtitle.trim() !== '') {
+          subtitle = decodedParams.subtitle.trim();
         }
-        if (decodedData.description && typeof decodedData.description === 'string' && decodedData.description.trim() !== '') {
-          description = decodedData.description.trim();
+        if (decodedParams.description && typeof decodedParams.description === 'string' && decodedParams.description.trim() !== '') {
+          description = decodedParams.description.trim();
         }
       } catch (error) {
         // Silently fall back to defaults
@@ -158,12 +160,56 @@ export function createOgImageHandler(config: OgImageHandlerConfig) {
       fonts = await loadGoogleFonts(fontConfig);
     }
 
-    // Merge props
+    // 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,
     };
 
 
@@ -221,7 +267,7 @@ export function createOgImageDynamicRoute(config: OgImageHandlerConfig) {
   const handler = createOgImageHandler(config);
   const isStaticBuild = typeof process !== 'undefined' && process.env.NEXT_PUBLIC_STATIC_BUILD === 'true';
 
-  return async function GET(
+  async function GET(
     request: NextRequest,
     context: { params: Promise<{ data: string }> }
   ) {
@@ -249,5 +295,16 @@ export function createOgImageDynamicRoute(config: OgImageHandlerConfig) {
     });
 
     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/metadata.ts

@@ -108,7 +108,7 @@ export function generateOgImageMetadata(
   options: OgImageMetadataOptions = {}
 ): Metadata {
   const {
-    ogImageBaseUrl = '/api/og',
+    ogImageBaseUrl = 'https://djangocfg.com/api/og',
     siteUrl: providedSiteUrl,
     defaultParams = {},
     useBase64 = true,

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

@@ -45,6 +45,7 @@ function decodeBase64(str: string): string {
 
 /**
  * OG Image URL parameters
+ * All parameters can be encoded in URL via base64
  */
 export interface OgImageUrlParams {
   /** Page title */
@@ -55,6 +56,36 @@ export interface OgImageUrlParams {
   siteName?: string;
   /** Logo URL (optional) */
   logo?: string;
+  /** Background type: 'gradient' or 'solid' */
+  backgroundType?: 'gradient' | 'solid';
+  /** Gradient start color (hex) */
+  gradientStart?: string;
+  /** Gradient end color (hex) */
+  gradientEnd?: string;
+  /** Background color (for solid type) */
+  backgroundColor?: string;
+  /** Title font size (px) */
+  titleSize?: number;
+  /** Title font weight */
+  titleWeight?: number;
+  /** Title text color */
+  titleColor?: string;
+  /** Description font size (px) */
+  descriptionSize?: number;
+  /** Description text color */
+  descriptionColor?: string;
+  /** Site name font size (px) */
+  siteNameSize?: number;
+  /** Site name text color */
+  siteNameColor?: string;
+  /** Padding (px) */
+  padding?: number;
+  /** Logo size (px) */
+  logoSize?: number;
+  /** Show logo flag */
+  showLogo?: boolean;
+  /** Show site name flag */
+  showSiteName?: boolean;
   /** Additional custom parameters */
   [key: string]: string | number | boolean | undefined;
 }
@@ -69,12 +100,26 @@ export interface OgImageUrlParams {
  *
  * @example
  * ```typescript
- * // Base64 encoding (safe, default)
+ * // Base64 encoding (safe, default) - all parameters can be encoded
  * const url = generateOgImageUrl('/api/og', {
  *   title: 'My Page Title',
  *   description: 'Page description here',
+ *   siteName: 'My Site',
+ *   logo: '/logo.svg',
+ *   backgroundType: 'gradient',
+ *   gradientStart: '#0f172a',
+ *   gradientEnd: '#334155',
+ *   titleSize: 80,
+ *   titleWeight: 800,
+ *   titleColor: 'white',
+ *   descriptionSize: 36,
+ *   descriptionColor: 'rgba(226, 232, 240, 0.9)',
+ *   siteNameSize: 32,
+ *   siteNameColor: 'rgba(255, 255, 255, 0.95)',
+ *   padding: 80,
+ *   logoSize: 56,
  * });
- * // Result: /api/og?data=eyJ0aXRsZSI6Ik15IFBhZ2UgVGl0bGUiLCJkZXNjcmlwdGlvbiI6IlBhZ2UgZGVzY3JpcHRpb24gaGVyZSJ9
+ * // Result: /api/og/[base64-encoded-json]
  *
  * // Query params (legacy)
  * const url = generateOgImageUrl('/api/og', { title: 'Hello' }, false);