create-nextblock 0.1.0 → 0.2.0

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

@@ -1,18 +1,19 @@
 // app/[slug]/PageClientContent.tsx
 "use client";
 
-import React, { useState, useEffect, useMemo } from 'react';
-import { useRouter } from 'next/navigation'; // For navigation on lang switch
-import type { Database } from "@nextblock-cms/db";
-import { useLanguage } from '@/context/LanguageContext';
-import { useCurrentContent } from '@/context/CurrentContentContext';
-import Link from 'next/link';
-
-type PageType = Database['public']['Tables']['pages']['Row'];
-type BlockType = Database['public']['Tables']['blocks']['Row'];
-
-interface PageClientContentProps {
-  initialPageData: (PageType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; }) | null;
+import React, { useState, useEffect, useMemo } from 'react';
+import { useRouter } from 'next/navigation'; // For navigation on lang switch
+import type { Database } from "@nextblock-cms/db";
+import { useLanguage } from '@/context/LanguageContext';
+import { useCurrentContent } from '@/context/CurrentContentContext';
+import Link from 'next/link';
+import { createClient } from '@nextblock-cms/db';
+
+type PageType = Database['public']['Tables']['pages']['Row'];
+type BlockType = Database['public']['Tables']['blocks']['Row'];
+
+interface PageClientContentProps {
+  initialPageData: (PageType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; }) | null;
   currentSlug: string; // The slug of the currently viewed page
   children: React.ReactNode;
   translatedSlugs?: { [key: string]: string };
@@ -42,36 +43,62 @@ interface PageClientContentProps {
 // }
 
 
-export default function PageClientContent({ initialPageData, currentSlug, children, translatedSlugs }: PageClientContentProps) {
-  const { currentLocale, isLoadingLanguages } = useLanguage();
-  const { currentContent, setCurrentContent } = useCurrentContent();
-  const router = useRouter();
-  // currentPageData is the data for the slug currently in the URL.
-  // It's initially set by the server for the slug it resolved.
-  const [currentPageData] = useState(initialPageData);
-  const [isLoadingTargetLang, setIsLoadingTargetLang] = useState(false);
+export default function PageClientContent({ initialPageData, currentSlug, children, translatedSlugs }: PageClientContentProps) {
+  const { currentLocale, isLoadingLanguages } = useLanguage();
+  const { currentContent, setCurrentContent } = useCurrentContent();
+  const router = useRouter();
+  // currentPageData is the data for the slug currently in the URL.
+  // It's initially set by the server for the slug it resolved.
+  const [currentPageData, setCurrentPageData] = useState(initialPageData);
+  const [isLoadingTargetLang, setIsLoadingTargetLang] = useState(false);
+  const supabase = useMemo(() => createClient(), []);
 
   // Memoize pageId and pageSlug
-  const pageId = useMemo(() => currentPageData?.id, [currentPageData?.id]);
-  const pageSlug = useMemo(() => currentPageData?.slug, [currentPageData?.slug]);
-
-  useEffect(() => {
-    if (currentLocale && currentPageData && currentPageData.language_code !== currentLocale && translatedSlugs) {
-      // Current page's language doesn't match context, try to navigate to translated version
-      setIsLoadingTargetLang(true);
-      const targetSlug = translatedSlugs[currentLocale];
-      
-      if (targetSlug && targetSlug !== currentSlug) {
-        router.push(`/${targetSlug}`); // Navigate to the translated slug's URL
-      } else if (targetSlug && targetSlug === currentSlug) {
-        // Already on the correct page for the selected language, do nothing or refresh data if needed
-      } else {
-        console.warn(`No published translation found for group ${currentPageData.translation_group_id} in language ${currentLocale} using pre-fetched slugs.`);
-        // Optionally, provide feedback to the user that translation is not available
-      }
-      setIsLoadingTargetLang(false);
-    }
-  }, [currentLocale, currentPageData, currentSlug, router, initialPageData, translatedSlugs]); // Rerun if initialPageData changes (e.g. after revalidation)
+  const pageId = useMemo(() => currentPageData?.id, [currentPageData?.id]);
+  const pageSlug = useMemo(() => currentPageData?.slug, [currentPageData?.id, currentLocale]); // include locale so updates propagate
+
+  useEffect(() => {
+    if (currentLocale && currentPageData && currentPageData.language_code !== currentLocale && translatedSlugs) {
+      // Current page's language doesn't match context, try to navigate to translated version
+      setIsLoadingTargetLang(true);
+      const targetSlug = translatedSlugs[currentLocale];
+      
+      if (targetSlug && targetSlug !== currentSlug) {
+        router.push(`/${targetSlug}`); // Navigate to the translated slug's URL
+      } else if (targetSlug && targetSlug === currentSlug) {
+        // Same slug across languages - refetch the page in the target language and update content
+        (async () => {
+          const { data, error } = await supabase
+            .from("pages")
+            .select("*, languages!inner(code), blocks(*)")
+            .eq("slug", targetSlug)
+            .eq("languages.code", currentLocale)
+            .eq("status", "published")
+            .order('order', { foreignTable: 'blocks', ascending: true })
+            .maybeSingle();
+
+          if (!error && data) {
+            const langInfo = Array.isArray(data.languages) ? data.languages[0] : (data.languages as unknown as { code?: string });
+            setCurrentPageData({
+              ...(data as PageType),
+              blocks: (data as any).blocks || [],
+              language_code: langInfo?.code || currentLocale,
+              language_id: data.language_id,
+              translation_group_id: data.translation_group_id || currentPageData.translation_group_id,
+            } as typeof currentPageData);
+          } else {
+            // fallback to refresh if fetch fails
+            router.refresh();
+          }
+          setIsLoadingTargetLang(false);
+        })();
+      } else {
+        console.warn(`No published translation found for group ${currentPageData.translation_group_id} in language ${currentLocale} using pre-fetched slugs.`);
+        // Optionally, provide feedback to the user that translation is not available
+        setIsLoadingTargetLang(false);
+      }
+    }
+  }, [currentLocale, currentPageData, currentSlug, router, initialPageData, translatedSlugs]); // Rerun if initialPageData changes (e.g. after revalidation)
 
   // Update HTML lang attribute based on the *actually displayed* content's language
   useEffect(() => {

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

@@ -4,12 +4,15 @@ import { getSsgSupabaseClient } from "@nextblock-cms/db/server";
 import { notFound } from "next/navigation";
 import type { Metadata } from 'next';
 import PageClientContent from "./PageClientContent";
-import { getPageDataBySlug } from "./page.utils";
-import BlockRenderer from "../../components/BlockRenderer";
-import type { HeroBlockContent } from '../../lib/blocks/blockRegistry';
+import { getPageDataBySlug } from "./page.utils";
+import BlockRenderer from "../../components/BlockRenderer";
+import type { HeroBlockContent } from '../../lib/blocks/blockRegistry';
+import { cookies, headers } from "next/headers";
 
-export const dynamicParams = true;
-export const revalidate = 3600;
+export const dynamicParams = true;
+export const revalidate = 360;
+export const dynamic = 'force-dynamic'; // keeps per-request locale; paired with short revalidate
+export const fetchCache = 'force-no-store';
 
 interface ResolvedPageParams {
   slug: string;
@@ -43,8 +46,24 @@ export async function generateStaticParams(): Promise<ResolvedPageParams[]> {
 export async function generateMetadata(
   { params: paramsPromise }: PageProps,
 ): Promise<Metadata> {
-  const params = await paramsPromise;
-  const pageData = await getPageDataBySlug(params.slug);
+  const params = await paramsPromise;
+  let preferredLocale: string | undefined;
+  try {
+    const store = await cookies();
+    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      const al = hdrs.get("accept-language");
+      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+    } catch {
+      // ignore header lookup errors
+    }
+  }
+  const pageData = await getPageDataBySlug(params.slug, preferredLocale);
 
   if (!pageData) {
     return { title: "Page Not Found" };
@@ -86,9 +105,25 @@ export async function generateMetadata(
   };
 }
 
-export default async function DynamicPage({ params: paramsPromise }: PageProps) {
-  const params = await paramsPromise;
-  const pageData = await getPageDataBySlug(params.slug);
+export default async function DynamicPage({ params: paramsPromise }: PageProps) {
+  const params = await paramsPromise;
+  let preferredLocale: string | undefined;
+  try {
+    const store = await cookies();
+    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      const al = hdrs.get("accept-language");
+      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+    } catch {
+      // ignore header lookup errors
+    }
+  }
+  const pageData = await getPageDataBySlug(params.slug, preferredLocale);
 
   if (!pageData) {
     notFound();

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

@@ -24,51 +24,98 @@ interface SectionOrHeroBlockContent {
 }
 
 // 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): Promise<(PageType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string | null; }) | null> {
-  const supabase = getSsgSupabaseClient();
-
-  // Optimized query with specific field selection instead of *
-  const { data: candidatePagesData, error: pageError } = await supabase
-    .from("pages")
-    .select(`
-      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)
-    `)
-    .eq("slug", slug)
-    .eq("status", "published")
-    .order('order', { foreignTable: 'blocks', ascending: true });
-
-  if (pageError) {
-    return null;
-  }
-
-  const candidatePages: SelectedPageType[] = (candidatePagesData || []).map(page => ({
-    ...page,
-    language_details: Array.isArray(page.language_details) ? page.language_details[0] : page.language_details
-  })) as SelectedPageType[];
-
-  if (candidatePages.length === 0) {
-    return null;
-  }
-
-  let selectedPage: SelectedPageType | null = null;
-
-  if (candidatePages.length === 1) {
-    selectedPage = candidatePages[0];
-  } else {
-    const enPage = candidatePages.find(p => p.language_details && p.language_details.code === 'en');
-    if (enPage) {
-      selectedPage = enPage;
-    } else {
-      return null;
-    }
-  }
+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;
+  }
+
+  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;

package/templates/nextblock-template/app/api/revalidate/route.ts

@@ -42,8 +42,8 @@ export async function POST(request: NextRequest) {
 
   if (table === 'pages') {
     pathToRevalidate = `/${relevantRecord.slug}`;
-  } else if (table === 'posts') {
-    pathToRevalidate = `/blog/${relevantRecord.slug}`;
+  } else if (table === 'posts') {
+    pathToRevalidate = `/article/${relevantRecord.slug}`;
   } else {
     console.log(`Revalidation not configured for table: ${table}`);
     return NextResponse.json({ message: `Revalidation not configured for table: ${table}` }, { status: 200 }); // Acknowledge but don't process
@@ -59,19 +59,19 @@ export async function POST(request: NextRequest) {
       await revalidatePath(normalizedPath, 'page'); 
       console.log(`Successfully revalidated path: ${normalizedPath}`);
       
-      // Additionally, if it's a blog post, you might want to revalidate the main blog listing page.
-      if (table === 'posts') {
-        // Assuming your main blog listing page is at '/blog' or similar.
-        // This path needs to be known and consistent.
-        // If your blog listing is at the root of the language segment (e.g. /en/blog),
-        // and you are NOT using [lang] in URL, then the path is just '/blog'.
-        // However, if your LanguageContext means /blog shows different content per lang,
-        // revalidating just '/blog' will rebuild its default language version.
-        // Client-side fetches would still get latest for other languages.
-        // For now, let's revalidate a generic /blog path if it exists.
-        // await revalidatePath('/blog', 'page'); // Example: revalidate main blog listing
-        // console.log("Also attempted to revalidate /blog listing page.");
-      }
+      // Additionally, if it's an article, you might want to revalidate the main listing page.
+      if (table === 'posts') {
+        // Assuming your main articles listing page is at '/articles' or similar.
+        // This path needs to be known and consistent.
+        // If your listing is at the root of the language segment (e.g. /en/articles),
+        // and you are NOT using [lang] in URL, then the path is just '/articles'.
+        // However, if your LanguageContext means /articles shows different content per lang,
+        // revalidating just '/articles' will rebuild its default language version.
+        // Client-side fetches would still get latest for other languages.
+        // For now, let's revalidate a generic /articles path if it exists.
+        // await revalidatePath('/articles', 'page'); // Example: revalidate main listing
+        // console.log("Also attempted to revalidate /articles listing page.");
+      }
 
       return NextResponse.json({ revalidated: true, revalidatedPath: normalizedPath, now: Date.now() });
     } catch (err: unknown) {

package/templates/nextblock-template/app/{blog → article}/[slug]/PostClientContent.tsx

@@ -1,7 +1,7 @@
-// app/blog/[slug]/PostClientContent.tsx
+// app/article/[slug]/PostClientContent.tsx
 "use client";
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import type { Database } from "@nextblock-cms/db";
@@ -17,22 +17,24 @@ export type ImageBlockContent = {
 import { useCurrentContent } from '@/context/CurrentContentContext';
 import Link from 'next/link';
 
-interface PostClientContentProps {
-  initialPostData: (PostType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; feature_image_url?: string | null; }) | null;
-  currentSlug: string; // The slug of the currently viewed page/post
-  children: React.ReactNode;
-  translatedSlugs?: { [key: string]: string };
-}
-
-export default function PostClientContent({ initialPostData, currentSlug, children, translatedSlugs }: PostClientContentProps) {
-  const { currentLocale, isLoadingLanguages } = useLanguage();
-  const { currentContent, setCurrentContent } = useCurrentContent();
-  const router = useRouter();
-  
-  // currentPostData is always for the slug in the URL.
-  // It's initially set by the server. It only changes if the URL itself changes (which happens on language switch).
-  const [currentPostData, setCurrentPostData] = useState(initialPostData);
-  const [isLoadingTargetLang, setIsLoadingTargetLang] = useState(false); // For feedback during navigation
+interface PostClientContentProps {
+  initialPostData: (PostType & { blocks: BlockType[]; language_code: string; language_id: number; translation_group_id: string; feature_image_url?: string | null; }) | null;
+  currentSlug: string; // The slug of the currently viewed page/post
+  children: React.ReactNode;
+  translatedSlugs?: { [key: string]: string };
+}
+
+export default function PostClientContent({ initialPostData, currentSlug, children, translatedSlugs }: PostClientContentProps) {
+  const { currentLocale, isLoadingLanguages } = useLanguage();
+  const { currentContent, setCurrentContent } = useCurrentContent();
+  const router = useRouter();
+  
+  const currentPrefix = "articles";
+
+  // currentPostData is always for the slug in the URL.
+  // It's initially set by the server. It only changes if the URL itself changes (which happens on language switch).
+  const [currentPostData, setCurrentPostData] = useState(initialPostData);
+  const [isLoadingTargetLang, setIsLoadingTargetLang] = useState(false); // For feedback during navigation
 
   // Memoize postId and postSlug
   const postId = useMemo(() => currentPostData?.id, [currentPostData?.id]);
@@ -40,20 +42,20 @@ export default function PostClientContent({ initialPostData, currentSlug, childr
 
   // This effect handles navigation when the language context changes
   useEffect(() => {
-    if (!isLoadingLanguages && currentLocale && initialPostData && initialPostData.language_code !== currentLocale && translatedSlugs) {
-      // The current page's language (from initialPostData.language_code)
-      // does not match the user's selected language (currentLocale).
-      // We need to find the slug for the currentLocale version of this post and navigate.
-      setIsLoadingTargetLang(true);
-      const targetSlug = translatedSlugs[currentLocale];
-
-      if (targetSlug && targetSlug !== currentSlug) {
-        router.push(`/blog/${targetSlug}`); // Navigate to the translated slug's URL
-      } else if (!targetSlug) {
-        console.warn(`No published translation found for post group ${initialPostData.translation_group_id} in language ${currentLocale} using pre-fetched slugs.`);
-        // Optionally, provide user feedback here (e.g., a toast message)
-        // For now, the user remains on the current page.
-      }
+    if (!isLoadingLanguages && currentLocale && initialPostData && initialPostData.language_code !== currentLocale && translatedSlugs) {
+      // The current page's language (from initialPostData.language_code)
+      // does not match the user's selected language (currentLocale).
+      // We need to find the slug for the currentLocale version of this post and navigate.
+      setIsLoadingTargetLang(true);
+      const targetSlug = translatedSlugs[currentLocale];
+
+      if (targetSlug && targetSlug !== currentSlug) {
+        router.push(`/article/${targetSlug}`); // Navigate to the translated slug's URL
+      } else if (!targetSlug) {
+        console.warn(`No published translation found for post group ${initialPostData.translation_group_id} in language ${currentLocale} using pre-fetched slugs.`);
+        // Optionally, provide user feedback here (e.g., a toast message)
+        // For now, the user remains on the current page.
+      }
       // If targetSlug === currentSlug, we are already on the correct page for the selected language.
       setIsLoadingTargetLang(false);
     }
@@ -114,25 +116,25 @@ export default function PostClientContent({ initialPostData, currentSlug, childr
     // This is a fallback or could indicate an issue if reached.
     return (
       <div className="container mx-auto px-4 py-8 text-center">
-        <h1 className="text-2xl font-bold mb-4">Post Not Found</h1>
-        <p className="text-muted-foreground">The post for slug &quot;{currentSlug}&quot; could not be loaded.</p>
-        <p className="mt-4">
-          <Link href="/blog" className="text-primary hover:underline">Back to Blog</Link>
-          <span className="mx-2">|</span>
-          <Link href="/" className="text-primary hover:underline">Go to Homepage</Link>
-        </p>
-      </div>
-    );
+        <h1 className="text-2xl font-bold mb-4">Article Not Found</h1>
+        <p className="text-muted-foreground">The article for slug &quot;{currentSlug}&quot; could not be loaded.</p>
+        <p className="mt-4">
+          <Link href={`/${currentPrefix}`} className="text-primary hover:underline">Back to Articles</Link>
+          <span className="mx-2">|</span>
+          <Link href="/" className="text-primary hover:underline">Go to Homepage</Link>
+        </p>
+      </div>
+    );
   }
   
   // If initialPostData was null but we are still loading language context or trying to navigate
   if (!currentPostData && (isLoadingLanguages || isLoadingTargetLang)) {
-     return <div className="container mx-auto px-4 py-20 text-center"><p>Loading post content...</p></div>;
+     return <div className="container mx-auto px-4 py-20 text-center"><p>Loading article content...</p></div>;
   }
 
   // If after all attempts, currentPostData is still null (should be caught by notFound in server component ideally)
   if (!currentPostData) {
-     return <div className="container mx-auto px-4 py-20 text-center"><p>Could not load post content for &quot;{currentSlug}&quot;.</p></div>;
+     return <div className="container mx-auto px-4 py-20 text-center"><p>Could not load article content for &quot;{currentSlug}&quot;.</p></div>;
   }
 
   return (