create-nextblock 0.0.1

package/templates/nextblock-template/app/blog/[slug]/page.tsx

@@ -0,0 +1,177 @@
+// app/blog/[slug]/page.tsx
+import React from 'react';
+// Remove or alias the problematic import if only used by other functions:
+// import { createClient } from "@nextblock-cms/db/server";
+import { createClient as createSupabaseJsClient } from '@supabase/supabase-js'; // Import base client
+import { notFound } from "next/navigation";
+import type { Metadata } from 'next';
+import PostClientContent from "./PostClientContent";
+
+import { getPostDataBySlug } from "./page.utils";
+import BlockRenderer from "../../../components/BlockRenderer";
+import { getSsgSupabaseClient } from "@nextblock-cms/db"; // Correct import
+import type { HeroBlockContent } from '../../../lib/blocks/blockRegistry';
+
+export const dynamicParams = true;
+export const revalidate = 3600;
+
+interface ResolvedPostParams {
+  slug: string;
+}
+
+interface PostPageProps {
+  params: Promise<ResolvedPostParams>;
+}
+
+interface PostTranslation {
+  slug: string;
+  languages: {
+    code: string;
+  }[];
+}
+
+export async function generateStaticParams(): Promise<ResolvedPostParams[]> {
+  // Use a new Supabase client instance that doesn't rely on cookies
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  
+  if (!supabaseUrl || !supabaseAnonKey) {
+    throw new Error('Missing Supabase environment variables');
+  }
+  
+  const supabase = createSupabaseJsClient(supabaseUrl, supabaseAnonKey);
+
+  const { data: posts, error } = await supabase
+    .from("posts")
+    .select("slug")
+    .eq("status", "published")
+    .or(`published_at.is.null,published_at.lte.${new Date().toISOString()}`);
+
+  if (error || !posts) {
+    console.error("SSG (Posts): Error fetching post slugs for static params", error);
+    return [];
+  }
+  return posts.map((post) => ({ slug: post.slug }));
+}
+
+// Generate metadata for the specific post slug
+export async function generateMetadata(
+  { params: paramsPromise }: PostPageProps,
+): Promise<Metadata> {
+  const params = await paramsPromise; // Await the promise to get the actual params
+  const postData = await getPostDataBySlug(params.slug);
+
+  if (!postData) {
+    return {
+      title: "Post Not Found",
+      description: "The post you are looking for does not exist or is not yet published.",
+    };
+  }
+
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "";
+  const supabase = getSsgSupabaseClient();
+  const { data: languages } = await supabase.from('languages').select('id, code');
+  const { data: postTranslations } = await supabase
+    .from('posts')
+    .select('language_id, slug')
+    .eq('translation_group_id', postData.translation_group_id)
+    .eq('status', 'published')
+    .or(`published_at.is.null,published_at.lte.${new Date().toISOString()}`);
+
+  const alternates: { [key: string]: string } = {};
+  if (languages && postTranslations) {
+    postTranslations.forEach(pt => {
+      const langInfo = languages.find(l => l.id === pt.language_id);
+      if (langInfo) {
+        alternates[langInfo.code] = `${siteUrl}/blog/${pt.slug}`;
+      }
+    });
+  }
+
+  return {
+    title: postData.meta_title || postData.title,
+    description: postData.meta_description || postData.excerpt || "",
+    openGraph: {
+      title: postData.meta_title || postData.title,
+      description: postData.meta_description || postData.excerpt || "",
+      type: 'article',
+      publishedTime: postData.published_at || postData.created_at,
+      url: `${siteUrl}/blog/${params.slug}`,
+      images: postData.feature_image_url
+        ? [
+            {
+              url: postData.feature_image_url,
+              // You can optionally add width, height, and alt here if known
+              // width: 1200, // Example
+              // height: 630, // Example
+              // alt: postData.meta_title || postData.title, // Example
+            },
+          ]
+        : undefined, // Or an empty array if you prefer: [],
+    },
+    alternates: {
+      canonical: `${siteUrl}/blog/${params.slug}`,
+      languages: Object.keys(alternates).length > 0 ? alternates : undefined,
+    },
+  };
+}
+
+// Server Component: Fetches data for the specific slug and passes to Client Component
+export default async function DynamicPostPage({ params: paramsPromise }: PostPageProps) { // Destructure the promise
+  const params = await paramsPromise; // Await the promise
+  const initialPostData = await getPostDataBySlug(params.slug);
+
+  if (!initialPostData) {
+    notFound();
+  }
+
+  const translatedSlugs: { [key: string]: string } = {};
+  if (initialPostData.translation_group_id) {
+    const supabase = getSsgSupabaseClient(); // Use SSG client
+    const { data: translations } = await supabase
+      .from("posts")
+      .select("slug, languages!inner(code)")
+      .eq("translation_group_id", initialPostData.translation_group_id)
+      .eq("status", "published")
+      .or(`published_at.is.null,published_at.lte.${new Date().toISOString()}`);
+
+    if (translations) {
+      translations.forEach((translation: PostTranslation) => {
+        if (translation.languages && translation.languages.length > 0 && typeof translation.languages[0].code === 'string' && translation.slug) {
+          translatedSlugs[translation.languages[0].code] = translation.slug;
+        }
+      });
+    }
+  }
+
+  let lcpImageUrl: string | null = null;
+  const r2BaseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+  if (initialPostData && initialPostData.blocks && r2BaseUrl) {
+    const heroBlock = initialPostData.blocks.find(block => block.block_type === 'hero');
+    if (heroBlock) {
+      const heroContent = heroBlock.content as unknown as HeroBlockContent;
+      if (
+        heroContent.background &&
+        heroContent.background.type === "image" &&
+        heroContent.background.image &&
+        heroContent.background.image.object_key
+      ) {
+        lcpImageUrl = `${r2BaseUrl}/${heroContent.background.image.object_key}`;
+      }
+    }
+  }
+
+  const postBlocks = initialPostData ? <BlockRenderer blocks={initialPostData.blocks} languageId={initialPostData.language_id} /> : null;
+
+  return (
+    <>
+      {lcpImageUrl && (
+        <link rel="preload" as="image" href={lcpImageUrl} />
+      )}
+      <PostClientContent initialPostData={initialPostData} currentSlug={params.slug} translatedSlugs={translatedSlugs}>
+        {postBlocks}
+      </PostClientContent>
+    </>
+  );
+}

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

@@ -0,0 +1,136 @@
+// app/blog/[slug]/page.utils.ts
+import { createClient } from "@nextblock-cms/db/server";
+import type { Database } from "@nextblock-cms/db";
+
+type PostType = Database['public']['Tables']['posts']['Row'];
+type BlockType = Database['public']['Tables']['blocks']['Row'];
+
+// Define a more specific type for the content of an Image Block
+export type ImageBlockContent = {
+  media_id: string | null;
+  object_key?: string; // Optional because it's added later
+  blur_data_url?: string | null;
+};
+
+interface SectionOrHeroBlockContent {
+  [key: string]: unknown;
+  background?: {
+    type?: 'image' | 'color';
+    image?: {
+      media_id?: string;
+      object_key?: string;
+      blur_data_url?: string;
+    };
+  };
+}
+// Includes logic to fetch object_key for image blocks.
+export async function getPostDataBySlug(slug: string): Promise<(PostType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; feature_image_url?: string | null; feature_image_blur_data_url?: string | null; }) | null> {
+  const supabase = createClient();
+
+  const { data: postData, error: postError } = await supabase
+    .from("posts")
+    .select(`
+      *,
+      languages!inner (id, code),
+      blocks (*),
+      media ( object_key, blur_data_url )
+    `)
+    .eq("slug", slug) // Find the post by its unique slug for this language
+    .eq("status", "published")
+    .or(`published_at.is.null,published_at.lte.${new Date().toISOString()}`) // Check published_at
+    .order('order', { foreignTable: 'blocks', ascending: true })
+    .maybeSingle();
+
+  if (postError || !postData) {
+    if(postError) console.error(`Error fetching post data for slug '${slug}':`, postError);
+    return null;
+  }
+
+  // Ensure language information is correctly extracted
+  const langInfo = postData.languages as unknown as { id: number; code: string };
+  if (!langInfo || !langInfo.id || !langInfo.code) {
+      console.error(`Language information missing or incomplete for post slug '${slug}'. DB response:`, postData.languages);
+      if (!postData.language_id) return null; 
+      const {data: fallbackLang} = await supabase.from("languages").select("code").eq("id", postData.language_id).single();
+      if (!fallbackLang) return null;
+      Object.assign(langInfo, {id: postData.language_id, code: fallbackLang.code });
+  }
+  
+  if (!postData.translation_group_id) {
+      console.error(`Post with slug '${slug}' is missing a translation_group_id.`);
+      return null;
+  }
+
+  let blocksWithMediaData: BlockType[] = postData.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');
+
+    if (mediaIds.length > 0) {
+      const { data: mediaItems, error: mediaError } = await supabase
+        .from('media')
+        .select('id, object_key, blur_data_url')
+        .in('id', mediaIds);
+
+      if (mediaError) {
+        console.error("SSG (Posts): Error fetching media items for blocks:", 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;
+        });
+      }
+    }
+  }
+
+  return {
+    ...postData,
+    blocks: blocksWithMediaData,
+    language_code: langInfo.code,
+    language_id: langInfo.id,
+    translation_group_id: postData.translation_group_id,
+    feature_image_url: postData.media?.object_key ? `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${postData.media.object_key}` : null,
+    feature_image_blur_data_url: postData.media?.blur_data_url,
+  } as (PostType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; feature_image_url?: string | null; feature_image_blur_data_url?: string | null; });
+}

package/templates/nextblock-template/app/blog/page.tsx

@@ -0,0 +1,77 @@
+// app/blog/page.tsx
+import React from 'react';
+import { getSsgSupabaseClient } from "@nextblock-cms/db";
+import { notFound } from "next/navigation";
+import type { Metadata } from 'next';
+import PageClientContent from "../[slug]/PageClientContent";
+import { getPageDataBySlug } from "../[slug]/page.utils";
+import BlockRenderer from "../../components/BlockRenderer";
+import { getPageTranslations } from '@/app/actions/languageActions'; // Added import
+
+export const dynamicParams = true;
+export const revalidate = 3600;
+
+export async function generateMetadata(): Promise<Metadata> {
+  const slug = "blog"; // Hardcoded slug
+  const pageData = await getPageDataBySlug(slug);
+
+  if (!pageData) {
+    return { title: "Blog Page Not Found" };
+  }
+
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "";
+  const supabase = getSsgSupabaseClient();
+  const { data: languages } = await supabase.from('languages').select('id, code');
+  const { data: pageTranslations } = await supabase
+    .from('pages')
+    .select('language_id, slug')
+    .eq('translation_group_id', pageData.translation_group_id)
+    .eq('status', 'published');
+
+  const alternates: { [key: string]: string } = {};
+  if (languages && pageTranslations) {
+    pageTranslations.forEach(pt => {
+      const langInfo = languages.find(l => l.id === pt.language_id);
+      if (langInfo) {
+        alternates[langInfo.code] = `${siteUrl}/${pt.slug}`;
+      }
+    });
+  }
+
+  return {
+    title: pageData.meta_title || pageData.title,
+    description: pageData.meta_description || "",
+    alternates: {
+      canonical: `${siteUrl}/${slug}`,
+      languages: Object.keys(alternates).length > 0 ? alternates : undefined,
+    },
+  };
+}
+
+export default async function BlogPage() {
+  const slug = "blog"; // Hardcoded slug
+  const pageData = await getPageDataBySlug(slug);
+
+  if (!pageData) {
+    notFound();
+  }
+
+  const translatedSlugs: { [key: string]: string } = {};
+  // Ensure pageData and translation_group_id are available before fetching translations
+  if (pageData && pageData.translation_group_id) {
+    const translations = await getPageTranslations(pageData.translation_group_id);
+    translations.forEach(t => {
+      if (t.language_code && t.slug) { // Ensure both properties exist
+        translatedSlugs[t.language_code] = t.slug;
+      }
+    });
+  }
+
+  const pageBlocks = pageData ? <BlockRenderer blocks={pageData.blocks} languageId={pageData.language_id} /> : null;
+
+  return (
+    <PageClientContent initialPageData={pageData} currentSlug={slug} translatedSlugs={translatedSlugs}>
+      {pageBlocks}
+    </PageClientContent>
+  );
+}