create-nextblock 0.0.1

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

@@ -0,0 +1,65 @@
+// app/actions/formActions.ts
+"use server";
+
+import { sendEmail } from './email';
+
+interface FormSubmissionResult {
+  success: boolean;
+  message: string;
+}
+
+export async function handleFormSubmission(
+  recipient: string,
+  prevState: unknown,
+  formData: FormData
+): Promise<FormSubmissionResult> {
+
+  const data: Record<string, string | File> = {};
+  let submitterEmail = 'a user'; // Default value
+
+  formData.forEach((value, key) => {
+    if (typeof value === 'string' && !key.startsWith('$')) {
+      data[key] = value;
+      // Attempt to find a field that looks like an email address to use in the subject
+      if (key.toLowerCase().includes('email')) {
+        submitterEmail = value;
+      }
+    }
+  });
+
+  // Create a more readable HTML body for the email
+  const htmlBody = `
+    <h2>New Form Submission</h2>
+    <p>You have received a new submission from your website form.</p>
+    <table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse;">
+      <tbody>
+        ${Object.entries(data)
+          .map(([key, value]) => `
+            <tr>
+              <td style="padding: 8px;"><strong>${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</strong></td>
+              <td style="padding: 8px;">${value}</td>
+            </tr>
+          `)
+          .join('')}
+      </tbody>
+    </table>
+  `;
+
+  const textBody = `
+    New Form Submission:
+    ${Object.entries(data).map(([key, value]) => `${key}: ${value}`).join('\n')}
+  `;
+
+  try {
+    await sendEmail({
+      to: recipient,
+      subject: `New Form Submission from ${submitterEmail}`,
+      text: textBody,
+      html: htmlBody,
+    });
+    return { success: true, message: "Submission successful!" };
+  } catch (error) {
+    console.error("Email sending failed:", error);
+    return { success: false, message: "Sorry, there was an error sending your message. Please try again later." };
+  }
+}

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

@@ -0,0 +1,130 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { getLanguageByCode } from '@/app/cms/settings/languages/actions';
+
+export interface Language {
+  id: number;
+  name: string;
+  code: string;
+  is_default: boolean;
+  created_at?: string;
+}
+
+export async function getAvailableLanguages(): Promise<Language[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase.from('languages').select('id, code, name, is_default, is_active, created_at, updated_at').order('name');
+  if (error) {
+    console.error('Error fetching languages:', error);
+    return [];
+  }
+  return data as Language[];
+}
+
+export async function getCurrentLocale(defaultLocale = 'en'): Promise<string> {
+  const cookieStore = await cookies();
+  return cookieStore.get('NEXT_LOCALE')?.value || defaultLocale;
+}
+
+export async function setCurrentLocaleCookie(locale: string) {
+  const cookieStore = await cookies();
+  cookieStore.set('NEXT_LOCALE', locale, { path: '/' });
+}
+
+export async function getPageTranslations(translationGroupId: string): Promise<{ slug: string, language_code: string }[]> {
+  if (!translationGroupId) {
+    console.warn('getPageTranslations called without translationGroupId');
+    return [];
+  }
+  const supabase = createClient();
+
+  const { data, error } = await supabase
+    .from('pages')
+    .select('slug, status, languages(code)') // Use actual table name for join
+    .eq('translation_group_id', translationGroupId)
+    .eq('status', 'published');
+
+  if (error) {
+    console.error('Error fetching page translations:', error);
+    return [];
+  }
+
+  interface PageWithLanguage {
+    slug: string;
+    status: string; // Or your actual status type
+    languages: { code: string } | { code: string }[] | null; // Can be object, array of objects, or null
+  }
+
+  // Map the data to the expected format { slug: string, language_code: string }
+  const formattedTranslations = data
+    ? (data as PageWithLanguage[]).map(page => {
+        let langCode = '';
+        if (page.languages) {
+          if (Array.isArray(page.languages)) {
+            langCode = page.languages[0]?.code || '';
+          } else { // It's an object
+            langCode = page.languages.code || '';
+          }
+        }
+        return {
+          slug: page.slug,
+          language_code: langCode,
+        };
+      }).filter(t => t.language_code)
+    : [];
+  
+  return formattedTranslations;
+}
+
+// Helper to get language details by code, potentially used by LanguageSwitcher or other components
+export async function getLanguageDetails(localeCode: string): Promise<Language | null> {
+    const { data, error } = await getLanguageByCode(localeCode);
+    if (error || !data) {
+        // Optionally log the error or handle it more gracefully
+        console.warn(`Could not fetch language details for ${localeCode}: ${error}`);
+        return null;
+    }
+    return data;
+}
+
+export async function getPageMetadataBySlugAndLocale(slug: string, localeCode: string): Promise<{ slug: string; translation_group_id: string | null } | null> {
+  if (!slug || !localeCode) {
+    console.warn('getPageMetadataBySlugAndLocale called without slug or localeCode');
+    return null;
+  }
+  const supabase = createClient();
+  const { data: languageData, error: langError } = await getLanguageByCode(localeCode);
+
+  if (langError || !languageData) {
+    console.warn(`Language with code ${localeCode} not found or error fetching: ${langError}`);
+    return null;
+  }
+
+  const { data: page, error } = await supabase
+    .from('pages')
+    .select('slug, translation_group_id')
+    .eq('slug', slug)
+    .eq('language_id', languageData.id)
+    .maybeSingle();
+
+  if (error) {
+    console.error(`Error fetching page metadata for slug ${slug} and locale ${localeCode}:`, error);
+    return null;
+  }
+  if (!page) {
+    // It's possible the slug is for a different content type (e.g. blog post) or doesn't exist.
+    // For now, we only search 'pages'. This might need to be expanded or handled gracefully.
+    console.warn(`No page found for slug ${slug} and locale ${localeCode}`);
+    return null;
+  }
+  return page;
+}
+
+export async function changeLanguage(newLocale: string, currentPath: string) {
+    await setCurrentLocaleCookie(newLocale);
+    // This is a basic redirect, LanguageSwitcher will have more complex logic
+    // For finding translated slugs.
+    redirect(currentPath); // Or redirect to a translated path if available
+}

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

@@ -0,0 +1,80 @@
+'use server';
+
+import { cache } from 'react';
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import type { PostWithMediaDimensions } from '../../components/blocks/types';
+
+export async function fetchPaginatedPublishedPosts(languageId: number, page: number, limit: number): Promise<{ posts: PostWithMediaDimensions[], totalCount: number, error?: string }> {
+  const supabase = createClient();
+  const offset = (page - 1) * limit;
+
+  const { data: posts, error, count } = await supabase
+    .from('posts')
+    .select('*, media:media!feature_image_id(*)', { count: 'exact' })
+    .eq('status', 'published')
+    .eq('language_id', languageId)
+    .order('published_at', { ascending: false })
+    .range(offset, offset + limit - 1);
+
+  if (error) {
+    console.error("Error fetching paginated posts:", error);
+    return { posts: [], totalCount: 0, error: error.message };
+  }
+  
+  return { posts: posts as PostWithMediaDimensions[], totalCount: count || 0, error: undefined }; // Return error: undefined on success
+}
+
+// You could also move fetchInitialPublishedPosts here if it makes sense for organization
+export const fetchInitialPublishedPosts = cache(async (languageId: number, limit: number): Promise<{ posts: PostWithMediaDimensions[], totalCount: number, error?: string | null }> => {
+  const supabase = createClient(); // This createClient is from utils/supabase/server
+  const { data: posts, error, count } = await supabase
+    .from('posts')
+    .select('*, media:media!feature_image_id(*)', { count: 'exact' })
+    .eq('status', 'published')
+    .eq('language_id', languageId)
+    .order('published_at', { ascending: false })
+    .limit(limit);
+
+  if (error) {
+    console.error("Error fetching initial posts:", error);
+    return { posts: [], totalCount: 0, error: error.message };
+  }
+  
+  return { posts: posts as PostWithMediaDimensions[], totalCount: count || 0, error: null };
+});
+export async function revalidateAndLog(path: string): Promise<{ success: boolean; error?: string }> {
+  try {
+    // Step 1: Revalidate the path
+    revalidatePath(path);
+
+    // Step 2: Log the revalidation by calling the API route
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+    if (!baseUrl) {
+      throw new Error('NEXT_PUBLIC_BASE_URL is not set in environment variables.');
+    }
+    
+    const logUrl = new URL('/api/revalidate-log', baseUrl);
+
+    const response = await fetch(logUrl.toString(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ path }),
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.json();
+      throw new Error(`Failed to log revalidation: ${response.status} ${response.statusText} - ${errorBody.error}`);
+    }
+
+    console.log(`Successfully revalidated and logged path: ${path}`);
+    return { success: true };
+
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+    console.error(`Error in revalidateAndLog for path "${path}":`, errorMessage);
+    return { success: false, error: errorMessage };
+  }
+}

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

@@ -0,0 +1,146 @@
+"use server";
+
+import { encodedRedirect } from "@nextblock-cms/utils/server";
+import { createClient } from "@nextblock-cms/db/server";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+
+export const signUpAction = async (formData: FormData) => {
+  const email = formData.get("email")?.toString();
+  const password = formData.get("password")?.toString();
+  const supabase = await createClient();
+  const origin = (await headers()).get("origin");
+
+  if (!email || !password) {
+    return encodedRedirect(
+      "error",
+      "/sign-up",
+      "Email and password are required",
+    );
+  }
+
+  const { error } = await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${origin}/auth/callback`,
+    },
+  });
+
+  if (error) {
+    console.error(error.code + " " + error.message);
+    return encodedRedirect("error", "/sign-up", error.message);
+  } else {
+    return encodedRedirect(
+      "success",
+      "/sign-up",
+      "Thanks for signing up! Please check your email for a verification link.",
+    );
+  }
+};
+
+export const signInAction = async (formData: FormData) => {
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+  const supabase = await createClient();
+
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  if (error) {
+    return encodedRedirect("error", "/sign-in", error.message);
+  }
+
+  if (data.user) {
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('role')
+      .eq('id', data.user.id)
+      .single();
+
+    if (profile && (profile.role === 'ADMIN' || profile.role === 'WRITER')) {
+      return redirect("/post-sign-in?redirect_to=/cms/dashboard");
+    }
+  }
+
+  return redirect("/post-sign-in");
+};
+
+export const forgotPasswordAction = async (formData: FormData) => {
+  const email = formData.get("email")?.toString();
+  const supabase = await createClient();
+  const origin = (await headers()).get("origin");
+  const callbackUrl = formData.get("callbackUrl")?.toString();
+
+  if (!email) {
+    return encodedRedirect("error", "/forgot-password", "Email is required");
+  }
+
+  const { error } = await supabase.auth.resetPasswordForEmail(email, {
+    redirectTo: `${origin}/auth/callback?redirect_to=/reset-password`,
+  });
+
+  if (error) {
+    console.error(error.message);
+    return encodedRedirect(
+      "error",
+      "/forgot-password",
+      "Could not reset password",
+    );
+  }
+
+  if (callbackUrl) {
+    return redirect(callbackUrl);
+  }
+
+  return encodedRedirect(
+    "success",
+    "/forgot-password",
+    "Check your email for a link to reset your password.",
+  );
+};
+
+export const resetPasswordAction = async (formData: FormData) => {
+  const supabase = await createClient();
+
+  const password = formData.get("password") as string;
+  const confirmPassword = formData.get("confirmPassword") as string;
+
+  if (!password || !confirmPassword) {
+    encodedRedirect(
+      "error",
+      "/reset-password",
+      "Password and confirm password are required",
+    );
+  }
+
+  if (password !== confirmPassword) {
+    encodedRedirect(
+      "error",
+      "/reset-password",
+      "Passwords do not match",
+    );
+  }
+
+  const { error } = await supabase.auth.updateUser({
+    password: password,
+  });
+
+  if (error) {
+    encodedRedirect(
+      "error",
+      "/reset-password",
+      "Password update failed",
+    );
+  }
+
+  encodedRedirect("success", "/reset-password", "Password updated");
+};
+
+export const signOutAction = async () => {
+  const supabase = await createClient();
+  await supabase.auth.signOut();
+  return redirect("/");
+};

package/templates/nextblock-template/app/api/process-image/route.ts

@@ -0,0 +1,210 @@
+// app/api/process-image/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import { getS3Client } from '@nextblock-cms/utils/server';
+import { GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3';
+import sharp from 'sharp';
+import { Readable } from 'stream';
+import { getPlaiceholder } from 'plaiceholder';
+
+// Helper to convert stream to buffer
+async function streamToBuffer(stream: Readable): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    stream.on('data', (chunk) => chunks.push(chunk as Buffer));
+    stream.on('error', reject);
+    stream.on('end', () => resolve(Buffer.concat(chunks)));
+  });
+}
+
+const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
+// Construct the public URL base. Assumes your R2 bucket is set up for public access.
+// Example: https://<your-bucket>.<account-id>.r2.cloudflarestorage.com
+// Or if you use a custom domain: https://your.custom.domain
+const R2_PUBLIC_URL_BASE = process.env.NEXT_PUBLIC_R2_BASE_URL;
+
+interface ProcessedImageVariant {
+  objectKey: string;
+  url: string;
+  width: number;
+  height: number;
+  fileType: string; // e.g., 'image/avif'
+  sizeBytes: number;
+  variantLabel: string; // e.g., 'large_avif', 'medium_avif', 'thumbnail_avif', 'original_avif'
+}
+
+// Define target sizes (widths) and the AVIF format
+const TARGET_SIZES = [
+  { width: 1920, label: 'xlarge_avif' },
+  { width: 1280, label: 'large_avif' },
+  { width: 768, label: 'medium_avif' },
+  { width: 384, label: 'small_avif' },
+  { width: 128, label: 'thumbnail_avif' }, // For very small previews or blur placeholders
+];
+const TARGET_FORMAT = 'avif';
+const TARGET_MIME_TYPE = 'image/avif';
+
+export async function POST(request: NextRequest) {
+  if (!R2_BUCKET_NAME) {
+    return NextResponse.json({ error: 'R2 bucket name is not configured.' }, { status: 500 });
+  }
+  if (!process.env.R2_S3_ENDPOINT && !process.env.R2_ACCOUNT_ID) {
+    console.error("R2_S3_ENDPOINT or R2_ACCOUNT_ID must be set to construct R2_PUBLIC_URL_BASE");
+    return NextResponse.json({ error: 'Server configuration error for R2 public URL.' }, { status: 500 });
+  }
+
+
+  try {
+    const s3Client = await getS3Client();
+    if (!s3Client) {
+      console.error('R2 client is not configured. Check your R2 environment variables.');
+      return NextResponse.json({ error: 'Image processing is not configured on this server.' }, { status: 500 });
+    }
+
+    const { objectKey: originalObjectKey, contentType: originalContentType } = await request.json();
+
+    if (!originalObjectKey || !originalContentType) {
+      return NextResponse.json({ error: 'Missing objectKey or contentType in request body.' }, { status: 400 });
+    }
+
+    if (!originalContentType.startsWith('image/')) {
+      // For now, we only process images. Could be extended for other file types if needed.
+      return NextResponse.json({
+        message: 'File is not an image. Skipping processing.',
+        originalImage: { objectKey: originalObjectKey, fileType: originalContentType, url: `${R2_PUBLIC_URL_BASE}/${originalObjectKey}` },
+        processedVariants: [],
+        blurDataURL: null // Or an empty string, depending on how you want to handle non-images
+      }, { status: 200 });
+    }
+
+    // 1. Fetch the original image from R2
+    const getObjectParams = {
+      Bucket: R2_BUCKET_NAME,
+      Key: originalObjectKey,
+    };
+    const getObjectCommand = new GetObjectCommand(getObjectParams);
+    const getObjectResponse = await s3Client.send(getObjectCommand);
+
+    if (!getObjectResponse.Body) {
+      throw new Error('Failed to retrieve image from R2: Empty body.');
+    }
+
+    let imageBuffer = await streamToBuffer(getObjectResponse.Body as Readable);
+    let sharpInstance = sharp(imageBuffer);
+    let originalMetadata = await sharpInstance.metadata();
+
+    const MAX_WIDTH = 2560; // Define max width
+
+    // Check if the image width is greater than MAX_WIDTH
+    if (originalMetadata.width && originalMetadata.width > MAX_WIDTH) {
+      // Resize the image
+      const resizedBuffer = await sharpInstance
+        .resize({
+          width: MAX_WIDTH,
+          // height is scaled automatically to maintain aspect ratio
+        })
+        .toBuffer();
+      
+      // Update buffer and sharp instance for all subsequent operations
+      imageBuffer = resizedBuffer;
+      sharpInstance = sharp(imageBuffer);
+      // Update metadata as well
+      originalMetadata = await sharpInstance.metadata();
+    }
+
+    const processedVariants: ProcessedImageVariant[] = [];
+    const baseName = originalObjectKey.substring(0, originalObjectKey.lastIndexOf('.'));
+    // const originalExtension = originalObjectKey.substring(originalObjectKey.lastIndexOf('.') + 1);
+
+    // 2. Process and upload variants (resized AVIF)
+    for (const size of TARGET_SIZES) {
+      if (!originalMetadata.width) continue; // Skip if original width is unknown
+
+      const targetWidth = Math.min(size.width, originalMetadata.width); // Don't upscale beyond original
+      
+      const processedImageBuffer = await sharpInstance
+        .clone() // Important: clone before each new operation
+        .resize({ width: targetWidth, withoutEnlargement: true })
+        .toFormat(TARGET_FORMAT, { quality: 75 }) // Adjust quality as needed
+        .toBuffer();
+      
+      const newObjectKey = `${baseName}_${size.label}.${TARGET_FORMAT}`;
+      const newPublicUrl = `${R2_PUBLIC_URL_BASE}/${newObjectKey}`;
+
+      const putObjectParams = {
+        Bucket: R2_BUCKET_NAME,
+        Key: newObjectKey,
+        Body: processedImageBuffer,
+        ContentType: TARGET_MIME_TYPE,
+      };
+      await s3Client.send(new PutObjectCommand(putObjectParams));
+
+      const newMetadata = await sharp(processedImageBuffer).metadata();
+      processedVariants.push({
+        objectKey: newObjectKey,
+        url: newPublicUrl,
+        width: newMetadata.width || targetWidth,
+        height: newMetadata.height || 0, // Sharp should provide this
+        fileType: TARGET_MIME_TYPE,
+        sizeBytes: processedImageBuffer.length,
+        variantLabel: size.label,
+      });
+    }
+
+    // 3. Optionally, convert the original image to AVIF if it's not already (and keep original size)
+    // This gives an AVIF version of the original uploaded image.
+    if (originalContentType !== TARGET_MIME_TYPE) {
+        const originalAvifBuffer = await sharp(imageBuffer)
+            .clone()
+            .toFormat(TARGET_FORMAT, { quality: 80 }) // Potentially higher quality for "original" AVIF
+            .toBuffer();
+        
+        const originalAvifObjectKey = `${baseName}_original.${TARGET_FORMAT}`;
+        const originalAvifPublicUrl = `${R2_PUBLIC_URL_BASE}/${originalAvifObjectKey}`;
+
+        await s3Client.send(new PutObjectCommand({
+            Bucket: R2_BUCKET_NAME,
+            Key: originalAvifObjectKey,
+            Body: originalAvifBuffer,
+            ContentType: TARGET_MIME_TYPE,
+        }));
+        const originalAvifMetadata = await sharp(originalAvifBuffer).metadata();
+        processedVariants.push({
+            objectKey: originalAvifObjectKey,
+            url: originalAvifPublicUrl,
+            width: originalAvifMetadata.width || originalMetadata.width || 0,
+            height: originalAvifMetadata.height || originalMetadata.height || 0,
+            fileType: TARGET_MIME_TYPE,
+            sizeBytes: originalAvifBuffer.length,
+            variantLabel: 'original_avif',
+        });
+    }
+
+
+    // Include original image details (even if not AVIF) for reference in the database
+    // The client already has some of this, but good to have a consistent structure.
+    const originalImageDetails: ProcessedImageVariant = {
+        objectKey: originalObjectKey,
+        url: `${R2_PUBLIC_URL_BASE}/${originalObjectKey}`,
+        width: originalMetadata.width || 0,
+        height: originalMetadata.height || 0,
+        fileType: originalContentType,
+        sizeBytes: imageBuffer.length,
+        variantLabel: 'original_uploaded',
+    };
+
+    // Generate blurDataURL
+    const { base64: blurDataURL } = await getPlaiceholder(imageBuffer, { size: 10 });
+ 
+    return NextResponse.json({
+        message: 'Image processed successfully.',
+        originalImage: originalImageDetails,
+        processedVariants,
+        blurDataURL
+    }, { status: 200 });
+
+  } catch (error: unknown) {
+    console.error('Error processing image:', error);
+    const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+    return NextResponse.json({ error: 'Failed to process image.', details: errorMessage }, { status: 500 });
+  }
+}