create-nextblock 0.0.1

package/templates/nextblock-template/app/(auth-pages)/sign-in/page.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { signInAction } from "../../actions";
+import { FormMessage, Message } from "../../../components/form-message";
+import { SubmitButton } from "../../../components/submit-button";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useSearchParams } from "next/navigation";
+
+function getMessage(searchParams: URLSearchParams): Message | undefined {
+    if (searchParams.has('error')) {
+        const error = searchParams.get('error');
+        if (error) return { error };
+    }
+    if (searchParams.has('success')) {
+        const success = searchParams.get('success');
+        if (success) return { success };
+    }
+    if (searchParams.has('message')) {
+        const message = searchParams.get('message');
+        if (message) return { message };
+    }
+    return undefined;
+}
+
+export default function Login() {
+  const { t } = useTranslations();
+  const searchParams = useSearchParams();
+  const formMessage = getMessage(searchParams);
+
+  return (
+    <form className="flex-1 flex flex-col min-w-64">
+      <h1 className="text-2xl font-medium">{t('sign_in')}</h1>
+      <p className="text-sm text-foreground">
+        {t('dont_have_account')}{" "}
+        <Link className="text-foreground font-medium underline" href="/sign-up">
+          {t('sign_up')}
+        </Link>
+      </p>
+      <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
+        <Label htmlFor="email">{t('email')}</Label>
+        <Input name="email" placeholder={t('you_at_example_com')} required />
+        <div className="flex justify-between items-center">
+          <Label htmlFor="password">{t('password')}</Label>
+          <Link
+            className="text-xs text-foreground underline"
+            href="/forgot-password"
+          >
+            {t('forgot_password')}
+          </Link>
+        </div>
+        <Input
+          type="password"
+          name="password"
+          placeholder={t('your_password')}
+          required
+        />
+        <SubmitButton pendingText={t('signing_in_pending')} formAction={signInAction}>
+          {t('sign_in')}
+        </SubmitButton>
+        <FormMessage message={formMessage} />
+      </div>
+    </form>
+  );
+}

package/templates/nextblock-template/app/(auth-pages)/sign-up/page.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { signUpAction } from "../../actions";
+import { FormMessage, Message } from "../../../components/form-message";
+import { SubmitButton } from "../../../components/submit-button";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useSearchParams } from "next/navigation";
+
+function getMessage(searchParams: URLSearchParams): Message | undefined {
+    if (searchParams.has('error')) {
+        const error = searchParams.get('error');
+        if (error) return { error };
+    }
+    if (searchParams.has('success')) {
+        const success = searchParams.get('success');
+        if (success) return { success };
+    }
+    if (searchParams.has('message')) {
+        const message = searchParams.get('message');
+        if (message) return { message };
+    }
+    return undefined;
+}
+
+export default function Signup() {
+  const { t } = useTranslations();
+  const searchParams = useSearchParams();
+  const formMessage = getMessage(searchParams);
+
+  if (formMessage && 'message' in formMessage) {
+    return (
+      <div className="w-full flex-1 flex items-center h-screen sm:max-w-md justify-center gap-2 p-4">
+        <FormMessage message={formMessage} />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <form className="flex flex-col min-w-64 max-w-64 mx-auto">
+        <h1 className="text-2xl font-medium">{t('sign_up')}</h1>
+        <p className="text-sm text text-foreground">
+          {t('already_have_account')}{" "}
+          <Link className="text-primary font-medium underline" href="/sign-in">
+            {t('sign_in')}
+          </Link>
+        </p>
+        <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
+          <Label htmlFor="email">{t('email')}</Label>
+          <Input name="email" placeholder={t('you_at_example_com')} required />
+          <Label htmlFor="password">{t('password')}</Label>
+          <Input
+            type="password"
+            name="password"
+            placeholder={t('your_password')}
+            minLength={6}
+            required
+          />
+          <SubmitButton formAction={signUpAction} pendingText={t('signing_up_pending')}>
+            {t('sign_up')}
+          </SubmitButton>
+          <FormMessage message={formMessage} />
+        </div>
+      </form>
+    </>
+  );
+}

package/templates/nextblock-template/app/ToasterProvider.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Toaster } from "react-hot-toast";
+
+export function ToasterProvider() {
+  return (
+    <Toaster
+      position="top-right"
+      toastOptions={{
+        style: { fontSize: 14 },
+        success: { iconTheme: { primary: '#16a34a', secondary: 'white' } },
+        error: { iconTheme: { primary: '#dc2626', secondary: 'white' } },
+      }}
+    />
+  );
+}
+

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

@@ -0,0 +1,147 @@
+// 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;
+  currentSlug: string; // The slug of the currently viewed page
+  children: React.ReactNode;
+  translatedSlugs?: { [key: string]: string };
+}
+
+// Fetches the slug for a given translation_group_id and target language_code
+// This function is no longer needed here as slugs are pre-fetched.
+// async function getSlugForTranslatedPage(
+//   translationGroupId: string,
+//   targetLanguageCode: string,
+//   supabase: ReturnType<typeof createClient>
+// ): Promise<string | null> {
+//   const { data: langInfo, error: langErr } = await supabase
+//     .from("languages").select("id").eq("code", targetLanguageCode).single();
+//   if (langErr || !langInfo) return null;
+
+//   const { data: page, error: pageErr } = await supabase
+//     .from("pages")
+//     .select("slug")
+//     .eq("translation_group_id", translationGroupId)
+//     .eq("language_id", langInfo.id)
+//     .eq("status", "published")
+//     .single();
+  
+//   if (pageErr || !page) return null;
+//   return page.slug;
+// }
+
+
+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);
+
+  // 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)
+
+  // Update HTML lang attribute based on the *actually displayed* content's language
+  useEffect(() => {
+    if (currentPageData?.language_code) {
+      document.documentElement.lang = currentPageData.language_code;
+      if (currentPageData.meta_title || currentPageData.title) {
+         document.title = currentPageData.meta_title || currentPageData.title;
+      }
+    }
+  }, [currentPageData]);
+
+  // Effect for setting or updating the context
+  useEffect(() => {
+    const newType = 'page' as const;
+    const slugToSet = pageSlug ?? null; // Ensures slug is string or null
+
+    const needsUpdate = pageId &&
+                        (currentContent.id !== pageId ||
+                         currentContent.type !== newType ||
+                         currentContent.slug !== slugToSet);
+
+    const needsClearing = !pageId &&
+                          (currentContent.id !== null ||
+                           currentContent.type !== null ||
+                           currentContent.slug !== null);
+
+    if (needsUpdate) {
+      setCurrentContent({ id: pageId, type: newType, slug: slugToSet });
+    } else if (needsClearing) {
+      setCurrentContent({ id: null, type: null, slug: null });
+    }
+  }, [pageId, pageSlug, setCurrentContent, currentContent.id, currentContent.type, currentContent.slug]);
+
+  // Separate useEffect for cleanup
+  useEffect(() => {
+    const idToClean = pageId; // Capture the pageId when this effect runs
+
+    return () => {
+      // Cleanup logic: only clear context if the current context ID matches the ID this instance was managing
+      if (idToClean && currentContent.id === idToClean) {
+        setCurrentContent({ id: null, type: null, slug: null });
+      }
+    };
+  }, [pageId, setCurrentContent, currentContent.id]);
+
+  if (!currentPageData && !isLoadingLanguages && !isLoadingTargetLang) { // If initial data was null and no target lang found
+    return (
+      <div className="container mx-auto px-4 py-8 text-center">
+        <h1 className="text-2xl font-bold mb-4">Page Not Found</h1>
+        <p className="text-muted-foreground">The page for slug &quot;{currentSlug}&quot; could not be loaded or is not available in any language.</p>
+        <p className="mt-4"><Link href="/" className="text-primary hover:underline">Go to Homepage</Link></p>
+      </div>
+    );
+  }
+  
+  if (!currentPageData && (isLoadingLanguages || isLoadingTargetLang)) {
+     return <div className="container mx-auto px-4 py-20 text-center"><p>Loading page content...</p></div>;
+  }
+  
+  if (!currentPageData) { // Fallback if still no data after loading attempts
+     return <div className="container mx-auto px-4 py-20 text-center"><p>Could not load page content.</p></div>;
+  }
+
+
+  return (
+    <article className="w-full mx-auto">
+      {isLoadingTargetLang && <div className="text-center py-2 text-sm text-muted-foreground">Switching language...</div>}
+      
+      {/* Render blocks passed as children */}
+      {children}
+    </article>
+  );
+}

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

@@ -0,0 +1,145 @@
+// app/[slug]/page.tsx
+import React from 'react';
+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';
+
+export const dynamicParams = true;
+export const revalidate = 3600;
+
+interface ResolvedPageParams {
+  slug: string;
+}
+
+interface PageProps {
+  params: Promise<ResolvedPageParams>;
+}
+
+interface PageTranslation {
+  slug: string;
+  languages: {
+    code: string;
+  }[];
+}
+
+export async function generateStaticParams(): Promise<ResolvedPageParams[]> {
+  const supabase = getSsgSupabaseClient();
+  const { data: pages, error } = await supabase
+    .from("pages")
+    .select("slug")
+    .eq("status", "published");
+
+  if (error || !pages) {
+    console.error("SSG: Error fetching page slugs for static params:", error);
+    return [];
+  }
+  return pages.map((page) => ({ slug: page.slug }));
+}
+
+export async function generateMetadata(
+  { params: paramsPromise }: PageProps,
+): Promise<Metadata> {
+  const params = await paramsPromise;
+  const pageData = await getPageDataBySlug(params.slug);
+
+  if (!pageData) {
+    return { title: "Page Not Found" };
+  }
+
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "";
+  const supabase = getSsgSupabaseClient();
+  
+  // Parallel queries for better performance
+  const [languagesResult, pageTranslationsResult] = await Promise.all([
+    supabase.from('languages').select('id, code'),
+    supabase
+      .from('pages')
+      .select('language_id, slug')
+      .eq('translation_group_id', pageData.translation_group_id)
+      .eq('status', 'published')
+  ]);
+
+  const { data: languages } = languagesResult;
+  const { data: pageTranslations } = pageTranslationsResult;
+
+  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}/${params.slug}`,
+      languages: Object.keys(alternates).length > 0 ? alternates : undefined,
+    },
+  };
+}
+
+export default async function DynamicPage({ params: paramsPromise }: PageProps) {
+  const params = await paramsPromise;
+  const pageData = await getPageDataBySlug(params.slug);
+
+  if (!pageData) {
+    notFound();
+  }
+
+  const translatedSlugs: { [key: string]: string } = {};
+  if (pageData.translation_group_id) {
+    const supabase = getSsgSupabaseClient();
+    const { data: translations } = await supabase
+      .from("pages")
+      .select("slug, languages!inner(code)")
+      .eq("translation_group_id", pageData.translation_group_id)
+      .eq("status", "published");
+
+    if (translations) {
+      translations.forEach((translation: PageTranslation) => {
+        if (translation.languages && translation.languages.length > 0 && translation.slug) {
+          translatedSlugs[translation.languages[0].code] = translation.slug;
+        }
+      });
+    }
+  }
+
+  let lcpImageUrl: string | null = null;
+  const r2BaseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+  if (pageData && pageData.blocks && r2BaseUrl) {
+    const heroBlock = pageData.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 pageBlocks = pageData ? <BlockRenderer blocks={pageData.blocks} languageId={pageData.language_id} /> : null;
+
+  return (
+    <>
+      {lcpImageUrl && (
+        <link rel="preload" as="image" href={lcpImageUrl} />
+      )}
+      <PageClientContent initialPageData={pageData} currentSlug={params.slug} translatedSlugs={translatedSlugs}>
+        {pageBlocks}
+      </PageClientContent>
+    </>
+  );
+}

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

@@ -0,0 +1,183 @@
+// app/[slug]/page.utils.ts
+import { getSsgSupabaseClient } from "@nextblock-cms/db/server";
+import type { Database } from "@nextblock-cms/db";
+
+type PageType = Database['public']['Tables']['pages']['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; // 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[];
+}
+
+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;
+    }
+  }
+  
+  if (!selectedPage) {
+    return null;
+  }
+  
+  let languageCode: string | undefined = selectedPage.language_details?.code;
+  let languageId: number | undefined = selectedPage.language_details?.id;
+
+  // Optimize fallback language query with specific fields
+  if (!languageCode || typeof languageId !== 'number') {
+    if (typeof selectedPage.language_id === 'number') {
+        const { data: fallbackLang, error: langFetchError } = await supabase
+            .from("languages")
+            .select("id, code")
+            .eq("id", selectedPage.language_id)
+            .single();
+
+        if (langFetchError) {
+            return null;
+        }
+        
+        if (fallbackLang) {
+            languageCode = fallbackLang.code;
+            languageId = fallbackLang.id;
+        } else {
+            return null;
+        }
+    } else {
+        return null;
+    }
+  }
+
+  if (typeof languageCode !== 'string' || typeof languageId !== 'number') {
+      return null;
+  }
+
+  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');
+
+    if (mediaIds.length > 0) {
+      // Optimized media query with specific fields only
+      const { data: mediaItems, error: mediaError } = await supabase
+        .from('media')
+        .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;
+        });
+      }
+    }
+  }
+  
+  const { language_details, blocks, ...basePageData } = selectedPage;
+  void language_details;
+  void blocks;
+
+  return {
+    ...(basePageData as PageType),
+    blocks: blocksWithMediaData,
+    language_code: languageCode,
+    language_id: languageId,
+    translation_group_id: selectedPage.translation_group_id,
+  };
+}

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

@@ -0,0 +1,31 @@
+"use server";
+
+import { getEmailServerConfig } from '@nextblock-cms/utils/server';
+import nodemailer from 'nodemailer';
+
+interface EmailParams {
+  to: string;
+  subject: string;
+  text: string;
+  html: string;
+}
+
+export async function sendEmail({ to, subject, text, html }: EmailParams) {
+  const emailConfig = await getEmailServerConfig();
+
+  if (!emailConfig) {
+    throw new Error("Email server is not configured. Please check environment variables.");
+  }
+
+  const transporter = nodemailer.createTransport(emailConfig);
+
+  const options = {
+    from: emailConfig.from,
+    to,
+    subject,
+    text,
+    html,
+  };
+
+  return transporter.sendMail(options);
+}