create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/[slug]/page.utils.ts

@@ -1,9 +1,25 @@
 // app/[slug]/page.utils.ts
-import { getSsgSupabaseClient } from "@nextblock-cms/db/server";
+import { createClient, getSsgSupabaseClient } from "@nextblock-cms/db/server";
 import type { Database } from "@nextblock-cms/db";
+import { draftMode } from "next/headers";
+import { resolveMediaUrl } from "../../lib/media/resolveMediaUrl";
+import { getContentDraft } from "../../lib/visual-editing/draft-content";
+import type { ContentDraftRow, DraftBlockSnapshot } from "../../lib/visual-editing/types";
 
 type PageType = Database['public']['Tables']['pages']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row'];
+type PublicPageData = PageType & {
+  blocks: BlockType[];
+  language_code: string;
+  language_id: number;
+  translation_group_id: string | null;
+  feature_image_url?: string | null;
+  feature_image_blur_data_url?: string | null;
+  feature_image_width?: number | null;
+  feature_image_height?: number | null;
+  draft_id?: number | null;
+};
+
 
 // Define a more specific type for the content of an Image Block
 export type ImageBlockContent = {
@@ -11,115 +27,336 @@ export type ImageBlockContent = {
   object_key?: string; // Optional because it's added later
   blur_data_url?: string | null; // Optional because it's added later
 };
-interface SectionOrHeroBlockContent {
-  [key: string]: unknown;
-  background?: {
-    type?: 'image' | 'color';
-    image?: {
-      media_id?: string;
-      object_key?: string;
-      blur_data_url?: string;
-    };
+
+// Interface to represent a page object after the initial database query and selection
+interface SelectedPageType extends PageType { // Assumes PageType includes fields like id, slug, status, language_id, translation_group_id
+  language_details: { id: number; code: string } | null; // From the join; kept nullable due to original code's caution
+  blocks: BlockType[];
+  feature_media_object?: {
+    object_key?: string | null;
+    file_path?: string | null;
+    blur_data_url?: string | null;
+    width?: number | null;
+    height?: number | null;
+  } | null;
+}
+
+function hasMetaValue(draft: ContentDraftRow, key: string) {
+  return Object.prototype.hasOwnProperty.call(draft.meta, key);
+}
+
+function draftString(draft: ContentDraftRow, key: string, fallback: string): string {
+  const value = draft.meta[key];
+  return typeof value === "string" ? value : fallback;
+}
+
+function draftNullableString(
+  draft: ContentDraftRow,
+  key: string,
+  fallback: string | null
+): string | null {
+  if (!hasMetaValue(draft, key)) {
+    return fallback;
+  }
+
+  const value = draft.meta[key];
+  return typeof value === "string" ? value : null;
+}
+
+function draftNumber(draft: ContentDraftRow, key: string, fallback: number): number {
+  const value = draft.meta[key];
+  return typeof value === "number" ? value : fallback;
+}
+
+function draftBlockToPageBlock(
+  block: DraftBlockSnapshot,
+  pageId: number,
+  fallbackUpdatedAt: string
+): BlockType {
+  return {
+    id: block.id ?? -(block.order + 1),
+    page_id: pageId,
+    post_id: null,
+    product_id: null,
+    language_id: block.language_id,
+    block_type: block.block_type,
+    content: block.content,
+    order: block.order,
+    created_at: block.created_at ?? fallbackUpdatedAt,
+    updated_at: block.updated_at ?? fallbackUpdatedAt,
   };
 }
 
-// Interface to represent a page object after the initial database query and selection
-interface SelectedPageType extends PageType { // Assumes PageType includes fields like id, slug, status, language_id, translation_group_id
-  language_details: { id: number; code: string } | null; // From the join; kept nullable due to original code's caution
-  blocks: BlockType[];
-}
-
-export async function getPageDataBySlug(
-  slug: string,
-  preferredLanguageCode?: string,
-): Promise<(PageType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string | null; }) | null> {
-  const supabase = getSsgSupabaseClient();
-
-  const baseSelect = `
-      id, slug, title, meta_title, meta_description, status, language_id, translation_group_id, author_id, created_at, updated_at,
-      language_details:languages!inner(id, code),
-      blocks (id, page_id, block_type, content, order)
-    `;
-
-  const toSelected = (rows: any[] | null | undefined): SelectedPageType[] =>
-    (rows || []).map(page => ({
-      ...page,
-      language_details: Array.isArray(page.language_details) ? page.language_details[0] : page.language_details,
-    })) as SelectedPageType[];
-
-  let candidatePages: SelectedPageType[] = [];
-
-  // First try to fetch the preferred language explicitly when provided
-  if (preferredLanguageCode) {
-    const { data: preferredData, error: preferredError } = await supabase
-      .from("pages")
-      .select(baseSelect)
-      .eq("slug", slug)
-      .eq("status", "published")
-      .eq("languages.code", preferredLanguageCode)
-      .order('order', { foreignTable: 'blocks', ascending: true })
-      .maybeSingle();
-    if (!preferredError && preferredData) {
-      candidatePages = toSelected([preferredData]);
-    }
-  }
-
-  // Fallback: fetch all published pages with this slug
-  if (candidatePages.length === 0) {
-    const { data: candidatePagesData, error: pageError } = await supabase
-      .from("pages")
-      .select(baseSelect)
-      .eq("slug", slug)
-      .eq("status", "published")
-      .order('order', { foreignTable: 'blocks', ascending: true });
-
-    if (pageError) {
-      return null;
-    }
-    candidatePages = toSelected(candidatePagesData);
-  }
-
-  if (candidatePages.length === 0) {
-    return null;
-  }
+function applyDraftToPage(page: SelectedPageType, draft: ContentDraftRow): SelectedPageType {
+  const languageId = draftNumber(draft, "language_id", page.language_id);
 
-  let selectedPage: SelectedPageType | null = null;
-
-  if (preferredLanguageCode) {
-    selectedPage = candidatePages.find(
-      p => p.language_details && p.language_details.code === preferredLanguageCode,
-    ) || null;
-  }
-
-  if (!selectedPage && candidatePages.length === 1) {
-    selectedPage = candidatePages[0];
-  }
-
-  if (!selectedPage) {
-    // Prefer default language if available
-    const { data: defaultLang } = await supabase
-      .from('languages')
-      .select('id, code')
-      .eq('is_default', true)
-      .maybeSingle();
-    if (defaultLang) {
-      const match = candidatePages.find(p => p.language_details && p.language_details.id === defaultLang.id);
-      if (match) selectedPage = match;
-    }
-  }
-
-  if (!selectedPage) {
-    const enPage = candidatePages.find(p => p.language_details && p.language_details.code === 'en');
-    if (enPage) {
-      selectedPage = enPage;
-    } else {
-      selectedPage = candidatePages[0];
-    }
-  }
+  return {
+    ...page,
+    title: draftString(draft, "title", page.title),
+    slug: draftString(draft, "slug", page.slug),
+    language_id: languageId,
+    language_details: languageId === page.language_id ? page.language_details : null,
+    status: draftString(draft, "status", page.status) as PageType["status"],
+    meta_title: draftNullableString(draft, "meta_title", page.meta_title),
+    meta_description: draftNullableString(draft, "meta_description", page.meta_description),
+    feature_image_id: draftNullableString(draft, "feature_image_id", page.feature_image_id),
+    translation_group_id: draftString(
+      draft,
+      "translation_group_id",
+      page.translation_group_id
+    ),
+    blocks: draft.blocks.map((block) =>
+      draftBlockToPageBlock(block, page.id, draft.updated_at || page.updated_at)
+    ),
+  };
+}
+
+function extractMediaIdsFromBlock(block: any): string[] {
+  const ids: string[] = [];
+  if (!block || !block.block_type) return ids;
+
+  if (block.block_type === 'image') {
+    const mediaId = block.content?.media_id;
+    if (mediaId && typeof mediaId === 'string') {
+      ids.push(mediaId);
+    }
+  } else if (block.block_type === 'section') {
+    const content = block.content;
+    if (content) {
+      if (content.background?.type === 'image' && content.background.image?.media_id) {
+        ids.push(content.background.image.media_id);
+      }
+      if (Array.isArray(content.column_blocks)) {
+        for (const col of content.column_blocks) {
+          if (Array.isArray(col)) {
+            for (const nestedBlock of col) {
+              ids.push(...extractMediaIdsFromBlock(nestedBlock));
+            }
+          }
+        }
+      }
+      if (Array.isArray(content.slides)) {
+        for (const slide of content.slides) {
+          if (slide.background?.type === 'image' && slide.background.image?.media_id) {
+            ids.push(slide.background.image.media_id);
+          }
+          if (Array.isArray(slide.column_blocks)) {
+            for (const col of slide.column_blocks) {
+              if (Array.isArray(col)) {
+                for (const nestedBlock of col) {
+                  ids.push(...extractMediaIdsFromBlock(nestedBlock));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  return ids;
+}
+
+function mapMediaDataToBlock(
+  block: any,
+  mediaMap: Map<string, { object_key: string; blur_data_url?: string | null }>
+): any {
+  if (!block || !block.block_type) return block;
+
+  if (block.block_type === 'image') {
+    const content = block.content;
+    if (content?.media_id) {
+      const mediaData = mediaMap.get(content.media_id);
+      if (mediaData) {
+        return {
+          ...block,
+          content: {
+            ...content,
+            object_key: mediaData.object_key,
+            blur_data_url: mediaData.blur_data_url,
+          },
+        };
+      }
+    }
+  } else if (block.block_type === 'section') {
+    const content = block.content;
+    if (!content) return block;
+
+    const updatedContent = { ...content };
+
+    if (content.background?.type === 'image' && content.background.image?.media_id) {
+      const mediaData = mediaMap.get(content.background.image.media_id);
+      if (mediaData) {
+        updatedContent.background = {
+          ...content.background,
+          image: {
+            ...content.background.image,
+            object_key: mediaData.object_key,
+            blur_data_url: mediaData.blur_data_url,
+          },
+        };
+      }
+    }
+
+    if (Array.isArray(content.column_blocks)) {
+      updatedContent.column_blocks = content.column_blocks.map((col: any) => {
+        if (Array.isArray(col)) {
+          return col.map((nestedBlock: any) => mapMediaDataToBlock(nestedBlock, mediaMap));
+        }
+        return col;
+      });
+    }
+
+    if (Array.isArray(content.slides)) {
+      updatedContent.slides = content.slides.map((slide: any) => {
+        const updatedSlide = { ...slide };
+
+        if (slide.background?.type === 'image' && slide.background.image?.media_id) {
+          const mediaData = mediaMap.get(slide.background.image.media_id);
+          if (mediaData) {
+            updatedSlide.background = {
+              ...slide.background,
+              image: {
+                ...slide.background.image,
+                object_key: mediaData.object_key,
+                blur_data_url: mediaData.blur_data_url,
+              },
+            };
+          }
+        }
+
+        if (Array.isArray(slide.column_blocks)) {
+          updatedSlide.column_blocks = slide.column_blocks.map((col: any) => {
+            if (Array.isArray(col)) {
+              return col.map((nestedBlock: any) => mapMediaDataToBlock(nestedBlock, mediaMap));
+            }
+            return col;
+          });
+        }
+
+        return updatedSlide;
+      });
+    }
+
+    return {
+      ...block,
+      content: updatedContent,
+    };
+  }
+
+  return block;
+}
+
+export async function getPageDataBySlug(
+  slug: string,
+  preferredLanguageCode?: string,
+): Promise<PublicPageData | null> {
+  const draft = await draftMode();
+  const isDraftModeEnabled = draft.isEnabled;
+  const supabase = isDraftModeEnabled ? createClient() : getSsgSupabaseClient();
+
+  const baseSelect = `
+      id, slug, title, meta_title, meta_description, feature_image_id, status, language_id, translation_group_id, author_id, created_at, updated_at,
+      language_details:languages!inner(id, code),
+      feature_media_object:media!pages_feature_image_id_fkey(object_key, file_path, blur_data_url, width, height),
+      blocks (id, page_id, block_type, content, order)
+    `;
+
+  const toSelected = (rows: any[] | null | undefined): SelectedPageType[] =>
+    (rows || []).map(page => ({
+      ...page,
+      language_details: Array.isArray(page.language_details) ? page.language_details[0] : page.language_details,
+    })) as SelectedPageType[];
+
+  let candidatePages: SelectedPageType[] = [];
+
+  // First try to fetch the preferred language explicitly when provided
+  if (preferredLanguageCode) {
+    let preferredQuery = supabase
+      .from("pages")
+      .select(baseSelect)
+      .eq("slug", slug)
+      .eq("languages.code", preferredLanguageCode)
+      .order('order', { foreignTable: 'blocks', ascending: true });
+
+    if (!isDraftModeEnabled) {
+      preferredQuery = preferredQuery.eq("status", "published");
+    }
+
+    const { data: preferredData, error: preferredError } = await preferredQuery.maybeSingle();
+    if (!preferredError && preferredData) {
+      candidatePages = toSelected([preferredData]);
+    }
+  }
+
+  // Fallback: fetch all published pages with this slug
+  if (candidatePages.length === 0) {
+    let pageQuery = supabase
+      .from("pages")
+      .select(baseSelect)
+      .eq("slug", slug)
+      .order('order', { foreignTable: 'blocks', ascending: true });
+
+    if (!isDraftModeEnabled) {
+      pageQuery = pageQuery.eq("status", "published");
+    }
+
+    const { data: candidatePagesData, error: pageError } = await pageQuery;
+
+    if (pageError) {
+      return null;
+    }
+    candidatePages = toSelected(candidatePagesData);
+  }
+
+  if (candidatePages.length === 0) {
+    return null;
+  }
+
+  let selectedPage: SelectedPageType | null = null;
+
+  if (preferredLanguageCode) {
+    selectedPage = candidatePages.find(
+      p => p.language_details && p.language_details.code === preferredLanguageCode,
+    ) || null;
+  }
+
+  if (!selectedPage && candidatePages.length === 1) {
+    selectedPage = candidatePages[0];
+  }
+
+  if (!selectedPage) {
+    // Prefer default language if available
+    const { data: defaultLang } = await supabase
+      .from('languages')
+      .select('id, code')
+      .eq('is_default', true)
+      .maybeSingle();
+    if (defaultLang) {
+      const match = candidatePages.find(p => p.language_details && p.language_details.id === defaultLang.id);
+      if (match) selectedPage = match;
+    }
+  }
+
+  if (!selectedPage) {
+    const enPage = candidatePages.find(p => p.language_details && p.language_details.code === 'en');
+    if (enPage) {
+      selectedPage = enPage;
+    } else {
+      selectedPage = candidatePages[0];
+    }
+  }
   
   if (!selectedPage) {
     return null;
   }
+
+  const contentDraft = isDraftModeEnabled
+    ? await getContentDraft("page", selectedPage.id)
+    : null;
+
+  if (contentDraft) {
+    selectedPage = applyDraftToPage(selectedPage, contentDraft);
+  }
   
   let languageCode: string | undefined = selectedPage.language_details?.code;
   let languageId: number | undefined = selectedPage.language_details?.id;
@@ -148,6 +385,8 @@ export async function getPageDataBySlug(
     }
   }
 
+
+
   if (typeof languageCode !== 'string' || typeof languageId !== 'number') {
       return null;
   }
@@ -155,19 +394,8 @@ export async function getPageDataBySlug(
   let blocksWithMediaData: BlockType[] = selectedPage.blocks || [];
   if (blocksWithMediaData.length > 0) {
     const mediaIds = blocksWithMediaData
-      .map(block => {
-        if (block.block_type === 'image') {
-          return (block.content as ImageBlockContent)?.media_id;
-        }
-        if (block.block_type === 'section' || block.block_type === 'hero') {
-          const content = block.content as SectionOrHeroBlockContent;
-          if (content.background?.type === 'image' && content.background?.image?.media_id) {
-            return content.background.image.media_id;
-          }
-        }
-        return null;
-      })
-      .filter((id): id is string => id !== null && typeof id === 'string');
+      .flatMap(block => extractMediaIdsFromBlock(block))
+      .filter((id): id is string => id !== null && typeof id === 'string' && id !== '');
 
     if (mediaIds.length > 0) {
       // Optimized media query with specific fields only
@@ -176,55 +404,44 @@ export async function getPageDataBySlug(
         .select('id, object_key, blur_data_url')
         .in('id', mediaIds);
 
-      if (mediaError) {
-        console.error('Error fetching media data:', mediaError);
-      } else if (mediaItems) {
-        const mediaMap = new Map(mediaItems.map(m => [m.id, { object_key: m.object_key, blur_data_url: m.blur_data_url }]));
-        blocksWithMediaData = blocksWithMediaData.map(block => {
-          if (block.block_type === 'image') {
-            const content = block.content as ImageBlockContent;
-            if (content.media_id) {
-              const mediaData = mediaMap.get(content.media_id);
-              if (mediaData) {
-                return { ...block, content: { ...content, object_key: mediaData.object_key, blur_data_url: mediaData.blur_data_url } };
-              }
-            }
-          }
-          if (block.block_type === 'section' || block.block_type === 'hero') {
-            const content = block.content as SectionOrHeroBlockContent;
-            if (content.background?.type === 'image' && content.background?.image?.media_id) {
-              const mediaData = mediaMap.get(content.background.image.media_id);
-              if (mediaData) {
-                const newContent = {
-                  ...content,
-                  background: {
-                    ...content.background,
-                    image: {
-                      ...content.background.image,
-                      object_key: mediaData.object_key,
-                      blur_data_url: mediaData.blur_data_url,
-                    },
-                  },
-                };
-                return { ...block, content: newContent };
-              }
-            }
-          }
-          return block;
-        });
-      }
+      if (mediaError) {
+        console.error('Error fetching media data:', mediaError);
+      } else if (mediaItems) {
+        const mediaMap = new Map(mediaItems.map(m => [m.id, { object_key: m.object_key, blur_data_url: m.blur_data_url }]));
+        blocksWithMediaData = blocksWithMediaData.map(block => mapMediaDataToBlock(block, mediaMap));
+      }
+    }
+  }
+
+  let featureMedia = selectedPage.feature_media_object ?? null;
+  if (selectedPage.feature_image_id && (!featureMedia || contentDraft)) {
+    const { data: mediaItem, error: mediaError } = await supabase
+      .from("media")
+      .select("object_key, file_path, blur_data_url, width, height")
+      .eq("id", selectedPage.feature_image_id)
+      .maybeSingle();
+
+    if (mediaError) {
+      console.error("Error fetching page feature image data:", mediaError);
+    } else if (mediaItem) {
+      featureMedia = mediaItem;
     }
   }
   
-  const { language_details, blocks, ...basePageData } = selectedPage;
-  void language_details;
-  void blocks;
-
+  const { language_details, blocks, feature_media_object, ...basePageData } = selectedPage;
+  void language_details;
+  void blocks;
+  void feature_media_object;
   return {
     ...(basePageData as PageType),
     blocks: blocksWithMediaData,
     language_code: languageCode,
     language_id: languageId,
     translation_group_id: selectedPage.translation_group_id,
+    feature_image_url: resolveMediaUrl(featureMedia?.object_key || featureMedia?.file_path || null),
+    feature_image_blur_data_url: featureMedia?.blur_data_url ?? null,
+    feature_image_width: featureMedia?.width ?? null,
+    feature_image_height: featureMedia?.height ?? null,
+    draft_id: contentDraft?.id ?? null,
   };
-}
+}

package/templates/nextblock-template/app/[slug]/pageClientActions.ts

@@ -0,0 +1,7 @@
+'use server';
+
+import { getPageDataBySlug } from './page.utils';
+
+export async function getPublishedPageForLocale(slug: string, localeCode: string) {
+  return getPageDataBySlug(slug, localeCode);
+}

package/templates/nextblock-template/app/actions/consent.ts

@@ -0,0 +1,57 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { getServiceRoleSupabaseClient } from '@nextblock-cms/db/server';
+
+/** Reduce an IP to a non-identifying form for the consent audit log. */
+function maskIp(ip: string | null): string | null {
+  if (!ip) return null;
+  const first = ip.split(',')[0]?.trim();
+  if (!first) return null;
+  if (first.includes(':')) {
+    // IPv6: keep the first three hextets, drop the rest.
+    const hextets = first.split(':').filter(Boolean);
+    return `${hextets.slice(0, 3).join(':')}::x`;
+  }
+  const octets = first.split('.');
+  if (octets.length === 4) {
+    octets[3] = 'x';
+    return octets.join('.');
+  }
+  return null;
+}
+
+export interface ConsentLogInput {
+  token: string;
+  analytics: boolean;
+  marketing: boolean;
+}
+
+/**
+ * Record a consent decision for Law 25 / PIPEDA accountability. Best-effort:
+ * failures never block the visitor's choice from taking effect client-side.
+ */
+export async function logConsentDecision(input: ConsentLogInput): Promise<{ ok: boolean }> {
+  if (!input?.token) return { ok: false };
+  try {
+    const h = await headers();
+    const ip = h.get('x-forwarded-for') ?? h.get('x-real-ip');
+    const userAgent = h.get('user-agent');
+
+    const supabase = getServiceRoleSupabaseClient();
+    await supabase.from('privacy_consent_logs').insert({
+      consent_token: input.token,
+      categories: {
+        necessary: true,
+        analytics: Boolean(input.analytics),
+        marketing: Boolean(input.marketing),
+      },
+      ip_masked: maskIp(ip),
+      user_agent: userAgent ? userAgent.slice(0, 500) : null,
+    });
+    return { ok: true };
+  } catch (error) {
+    console.error('Failed to record consent decision:', error);
+    return { ok: false };
+  }
+}