create-nextblock 0.0.1

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

@@ -0,0 +1,86 @@
+// app/api/revalidate/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import { revalidatePath } from 'next/cache';
+
+const REVALIDATE_SECRET = process.env.REVALIDATE_SECRET_TOKEN;
+
+// Define the expected structure of the Supabase webhook payload
+interface SupabaseWebhookPayload {
+  type: 'INSERT' | 'UPDATE' | 'DELETE';
+  table: string;
+  schema: string;
+  record?: { slug?: string; [key: string]: unknown }; // Record for INSERT/UPDATE
+  old_record?: { slug?: string; [key: string]: unknown }; // Old record for DELETE
+}
+
+export async function POST(request: NextRequest) {
+  const secret = request.headers.get('x-revalidate-secret');
+
+  if (secret !== REVALIDATE_SECRET) {
+    console.warn("Revalidation attempt with invalid secret token.");
+    return NextResponse.json({ message: 'Invalid secret token' }, { status: 401 });
+  }
+
+  let payload: SupabaseWebhookPayload;
+  try {
+    payload = await request.json();
+    console.log("Received Supabase webhook payload for revalidation:", JSON.stringify(payload, null, 2));
+  } catch (e) {
+    console.error("Failed to parse revalidation request JSON:", e);
+    return NextResponse.json({ message: 'Bad Request: Could not parse JSON payload.' }, { status: 400 });
+  }
+
+  const { type, table, record, old_record } = payload;
+  const relevantRecord = type === 'DELETE' ? old_record : record;
+
+  if (!relevantRecord || typeof relevantRecord.slug !== 'string') {
+    console.warn("Revalidation payload missing relevant record or slug.", { table, type });
+    return NextResponse.json({ message: 'Payload missing slug information.' }, { status: 400 });
+  }
+
+  let pathToRevalidate: string | null = null;
+
+  if (table === 'pages') {
+    pathToRevalidate = `/${relevantRecord.slug}`;
+  } else if (table === 'posts') {
+    pathToRevalidate = `/blog/${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
+  }
+
+  if (pathToRevalidate) {
+    try {
+      // Ensure path starts with a slash (it should based on construction above)
+      const normalizedPath = pathToRevalidate.startsWith('/') ? pathToRevalidate : `/${pathToRevalidate}`;
+      
+      // Revalidate the specific path.
+      // Using 'page' type for revalidation as we are revalidating individual content pages.
+      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.");
+      }
+
+      return NextResponse.json({ revalidated: true, revalidatedPath: normalizedPath, now: Date.now() });
+    } catch (err: unknown) {
+      console.error("Error during revalidation process:", err);
+      const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+      return NextResponse.json({ message: `Error revalidating: ${errorMessage}` }, { status: 500 });
+    }
+  } else {
+    // This case should ideally not be reached if table and slug checks are done.
+    return NextResponse.json({ message: 'Could not determine path to revalidate.' }, { status: 400 });
+  }
+}

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

@@ -0,0 +1,23 @@
+import { NextResponse, type NextRequest } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const path = body.path;
+
+    if (!path) {
+      return NextResponse.json({ error: 'Path is required' }, { status: 400 });
+    }
+
+    console.log(JSON.stringify({
+      type: 'isr_revalidate',
+      path: path,
+    }));
+
+    return NextResponse.json({ success: true, path: path });
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+    console.error('Revalidation log error:', errorMessage);
+    return NextResponse.json({ error: 'Invalid request body', details: errorMessage }, { status: 400 });
+  }
+}

package/templates/nextblock-template/app/api/upload/presigned-url/route.ts

@@ -0,0 +1,106 @@
+// app/api/upload/presigned-url/route.ts
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@nextblock-cms/db/server"; // Server client for auth
+import { getS3Client } from "@nextblock-cms/utils/server";
+import { PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+
+const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
+
+export async function POST(request: NextRequest) {
+  const supabase = createClient();
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  // Check user role - only WRITER or ADMIN can upload
+  const { data: profile } = await supabase
+    .from("profiles")
+    .select("role")
+    .eq("id", user.id)
+    .single();
+
+  if (!profile || !["ADMIN", "WRITER"].includes(profile.role)) {
+    return NextResponse.json({ error: "Forbidden: Insufficient permissions" }, { status: 403 });
+  }
+
+  if (!R2_BUCKET_NAME) {
+    console.error("R2_BUCKET_NAME is not set.");
+    return NextResponse.json({ error: "Server configuration error for file uploads." }, { 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: 'File uploads are not configured on this server.' }, { status: 500 });
+    }
+
+    const { filename, contentType, size, folder: rawFolder } = await request.json();
+
+    if (!filename || !contentType || !size) {
+      return NextResponse.json({ error: "Missing filename, contentType, or size" }, { status: 400 });
+    }
+
+    // Basic validation (you can enhance this)
+    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10 MB
+    if (size > MAX_FILE_SIZE) {
+        return NextResponse.json({ error: `File size exceeds limit of ${MAX_FILE_SIZE / (1024*1024)}MB.` }, { status: 400 });
+    }
+    // Add content type validation if needed
+
+    const fileExtension = filename.split('.').pop() || '';
+    const baseFilename = fileExtension ? filename.substring(0, filename.length - (fileExtension.length + 1)) : filename;
+
+    // Sanitize baseFilename to remove characters not suitable for URLs/filenames, replace spaces with hyphens
+    const sanitizedBaseFilename = baseFilename
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/[^\w.-]+/g, ''); // Remove non-alphanumeric characters except hyphen and period
+
+    const now = new Date();
+    const timestamp = `${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}${now.getSeconds().toString().padStart(2, '0')}`;
+
+    // Sanitize and normalize folder path
+    const sanitizeFolder = (input?: string | null) => {
+      const f = (input ?? '').toString().trim();
+      if (!f) return 'uploads/';
+      // remove leading slashes, collapse .. and illegal chars
+      let cleaned = f.replace(/^\/+/, '');
+      cleaned = cleaned.replace(/\\/g, '/');
+      cleaned = cleaned.replace(/\.{2,}/g, '');
+      cleaned = cleaned.replace(/[^a-zA-Z0-9_\-/]+/g, '-');
+      if (cleaned && !cleaned.endsWith('/')) cleaned += '/';
+      return cleaned || 'uploads/';
+    };
+    const folder = sanitizeFolder(rawFolder);
+
+    const uniqueKey = `${folder}${sanitizedBaseFilename}_${timestamp}${fileExtension ? '.' + fileExtension : ''}`;
+
+    const command = new PutObjectCommand({
+      Bucket: R2_BUCKET_NAME,
+      Key: uniqueKey,
+      ContentType: contentType,
+      // ACL: 'public-read', // R2 objects are private by default unless bucket is public or presigned URL for GET is used
+                           // For direct PUT, ACL is not typically set this way with R2. Permissions are on bucket/token.
+      Metadata: { // Optional: add any metadata
+        'uploader-user-id': user.id,
+      }
+    });
+
+    const expiresIn = 300; // 5 minutes
+    const presignedUrl = await getSignedUrl(s3Client, command, { expiresIn });
+
+    return NextResponse.json({
+      presignedUrl,
+      objectKey: `${uniqueKey}`, // Send back the key prefixed with bucket name
+      method: "PUT",
+    });
+
+  } catch (error) {
+    console.error("Error generating pre-signed URL:", error);
+    return NextResponse.json({ error: "Failed to generate upload URL." }, { status: 500 });
+  }
+}

package/templates/nextblock-template/app/api/upload/proxy/route.ts

@@ -0,0 +1,84 @@
+// apps/nextblock/app/api/upload/proxy/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@nextblock-cms/db/server';
+import { getS3Client } from '@nextblock-cms/utils/server';
+import { PutObjectCommand } from '@aws-sdk/client-s3';
+
+const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
+
+export async function POST(request: NextRequest) {
+  const supabase = createClient();
+  const { data: { user }, error: authError } = await supabase.auth.getUser();
+
+  if (authError || !user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  if (!R2_BUCKET_NAME) {
+    console.error('R2_BUCKET_NAME is not set.');
+    return NextResponse.json({ error: 'Server configuration error for file uploads.' }, { 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: 'File uploads are not configured on this server.' }, { status: 500 });
+    }
+
+    const formData = await request.formData();
+    const file = formData.get('file') as File | null;
+    const rawFolder = (formData.get('folder') as string | null) ?? undefined;
+
+    if (!file) {
+      return NextResponse.json({ error: 'No file provided.' }, { status: 400 });
+    }
+
+    const fileExtension = file.name.split('.').pop() || '';
+    const baseFilename = fileExtension ? file.name.substring(0, file.name.length - (fileExtension.length + 1)) : file.name;
+    const sanitizedBaseFilename = baseFilename.toLowerCase().replace(/\s+/g, '-').replace(/[^\w.-]+/g, '');
+    const now = new Date();
+    const timestamp = `${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}${now.getSeconds().toString().padStart(2, '0')}`;
+    // Sanitize and normalize folder path
+    const sanitizeFolder = (input?: string | null) => {
+      const f = (input ?? '').toString().trim();
+      if (!f) return 'uploads/';
+      let cleaned = f.replace(/^\/+/, '');
+      cleaned = cleaned.replace(/\\/g, '/');
+      cleaned = cleaned.replace(/\.{2,}/g, '');
+      cleaned = cleaned.replace(/[^a-zA-Z0-9_\-/]+/g, '-');
+      if (cleaned && !cleaned.endsWith('/')) cleaned += '/';
+      return cleaned || 'uploads/';
+    };
+    const folder = sanitizeFolder(rawFolder);
+
+    const uniqueKey = `${folder}${sanitizedBaseFilename}_${timestamp}${fileExtension ? '.' + fileExtension : ''}`;
+
+    // Convert file to buffer
+    const bytes = await file.arrayBuffer();
+    const buffer = Buffer.from(bytes);
+
+    const command = new PutObjectCommand({
+      Bucket: R2_BUCKET_NAME,
+      Key: uniqueKey,
+      Body: buffer,
+      ContentType: file.type,
+      ContentLength: file.size,
+      Metadata: {
+        'uploader-user-id': user.id,
+      },
+    });
+
+    await s3Client.send(command);
+
+    return NextResponse.json({
+      objectKey: uniqueKey,
+      message: 'File uploaded successfully.',
+    });
+
+  } catch (error) {
+    console.error('Error proxying file upload:', error);
+    const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred.';
+    return NextResponse.json({ error: `Upload failed on server: ${errorMessage}` }, { status: 500 });
+  }
+}

package/templates/nextblock-template/app/auth/callback/route.ts

@@ -0,0 +1,58 @@
+import { createClient, getProfileWithRoleServerSide } from "@nextblock-cms/db/server";
+import { NextResponse } from "next/server";
+import type { Database } from "@nextblock-cms/db";
+
+export type UserRole = Database['public']['Enums']['user_role'];
+
+export async function GET(request: Request) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const origin = requestUrl.origin;
+  const initialRedirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
+  const dashboardPath = "/cms/dashboard";
+  const homePath = "/";
+
+  if (code) {
+    const supabase = await createClient();
+    const { data: { user } , error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);
+
+    if (exchangeError) {
+      console.error("Auth callback: Error exchanging code for session:", exchangeError.message);
+      // Fallback: if initialRedirectTo is valid (not dashboard) use it, else home
+      if (initialRedirectTo && initialRedirectTo !== dashboardPath && !initialRedirectTo.startsWith(dashboardPath + '/')) {
+        return NextResponse.redirect(`${origin}${initialRedirectTo}`);
+      }
+      return NextResponse.redirect(`${origin}${homePath}`);
+    }
+
+    if (user) {
+      const profile = await getProfileWithRoleServerSide(user.id);
+      const role = profile?.role as UserRole | null;
+
+      if (role === 'ADMIN' || role === 'WRITER') {
+        return NextResponse.redirect(`${origin}${dashboardPath}`);
+      } else {
+        // For USER, null, or other roles:
+        // Redirect to initialRedirectTo if it's present and NOT the dashboard.
+        // Otherwise, redirect to the homepage.
+        if (initialRedirectTo && initialRedirectTo !== dashboardPath && !initialRedirectTo.startsWith(dashboardPath + '/')) {
+          return NextResponse.redirect(`${origin}${initialRedirectTo}`);
+        }
+        return NextResponse.redirect(`${origin}${homePath}`);
+      }
+    } else {
+      // User object is null after successful exchange
+      console.warn("Auth callback: User object is null after code exchange.");
+      if (initialRedirectTo && initialRedirectTo !== dashboardPath && !initialRedirectTo.startsWith(dashboardPath + '/')) {
+        return NextResponse.redirect(`${origin}${initialRedirectTo}`);
+      }
+      return NextResponse.redirect(`${origin}${homePath}`);
+    }
+  }
+
+  // If no code parameter:
+  if (initialRedirectTo && initialRedirectTo !== dashboardPath && !initialRedirectTo.startsWith(dashboardPath + '/')) {
+    return NextResponse.redirect(`${origin}${initialRedirectTo}`);
+  }
+  return NextResponse.redirect(`${origin}${homePath}`);
+}

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

@@ -0,0 +1,169 @@
+// app/blog/[slug]/PostClientContent.tsx
+"use client";
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import type { Database } from "@nextblock-cms/db";
+import { useLanguage } from '@/context/LanguageContext';
+
+type PostType = Database['public']['Tables']['posts']['Row'];
+type BlockType = Database['public']['Tables']['blocks']['Row'];
+
+export type ImageBlockContent = {
+  media_id: string | null;
+  object_key?: string;
+};
+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
+
+  // Memoize postId and postSlug
+  const postId = useMemo(() => currentPostData?.id, [currentPostData?.id]);
+  const postSlug = useMemo(() => currentPostData?.slug, [currentPostData?.slug]);
+
+  // 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 targetSlug === currentSlug, we are already on the correct page for the selected language.
+      setIsLoadingTargetLang(false);
+    }
+  }, [currentLocale, isLoadingLanguages, initialPostData, currentSlug, router, translatedSlugs]);
+
+  // This effect updates the document based on the currently displayed data
+  useEffect(() => {
+    if (currentPostData?.language_code) {
+      document.documentElement.lang = currentPostData.language_code;
+      if (currentPostData.meta_title || currentPostData.title) {
+         document.title = currentPostData.meta_title || currentPostData.title;
+      }
+    }
+  }, [currentPostData]);
+
+  // Update currentPostData if initialPostData changes (e.g., after ISR revalidation of the current slug)
+  useEffect(() => {
+    setCurrentPostData(initialPostData);
+  }, [initialPostData]);
+
+  // Effect for setting or updating the context
+  useEffect(() => {
+    const newType = 'post' as const;
+    const slugToSet = postSlug ?? null; // Ensures slug is string or null
+
+    const needsUpdate = postId &&
+                        (currentContent.id !== postId ||
+                         currentContent.type !== newType ||
+                         currentContent.slug !== slugToSet);
+
+    const needsClearing = !postId &&
+                          (currentContent.id !== null ||
+                           currentContent.type !== null ||
+                           currentContent.slug !== null);
+
+    if (needsUpdate) {
+      setCurrentContent({ id: postId, type: newType, slug: slugToSet });
+    } else if (needsClearing) {
+      setCurrentContent({ id: null, type: null, slug: null });
+    }
+  }, [postId, postSlug, setCurrentContent, currentContent.id, currentContent.type, currentContent.slug]);
+
+  // Separate useEffect for cleanup
+  useEffect(() => {
+    const idToClean = postId; // Capture the postId 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 });
+      }
+    };
+  }, [postId, setCurrentContent, currentContent.id]);
+
+  if (!currentPostData && !isLoadingLanguages && !isLoadingTargetLang) {
+    // This state means the initial slug from the URL didn't resolve to any data.
+    // The server component (page.tsx) would have already called notFound().
+    // 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>
+    );
+  }
+  
+  // 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>;
+  }
+
+  // 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 (
+    <article className="w-full mx-auto">
+      {isLoadingTargetLang && <div className="text-center py-2 text-sm text-muted-foreground">Switching language...</div>}
+      
+      {currentPostData?.feature_image_url && (
+        <div className="mb-8 relative"> {/* Adjust negative margins for full-bleed effect if container has padding */}
+          <Image
+            src={currentPostData.feature_image_url}
+            alt={`Hero image for ${currentPostData.title}`}
+            width={800}
+            height={400}
+            className="w-full h-auto max-h-[400px] md:max-h-[500px] object-cover shadow-lg" // Adjust max-h as needed, add rounded corners/shadow
+            priority
+          />
+        </div>
+      )}
+      <header className="mb-8 text-center border-b pb-6 dark:border-slate-700">
+        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-2 text-slate-900 dark:text-slate-100">{currentPostData.title}</h1>
+        {currentPostData.published_at && (
+          <p className="text-sm text-slate-500 dark:text-slate-400">
+            Published on {new Date(currentPostData.published_at).toLocaleDateString(currentPostData.language_code, { year: 'numeric', month: 'long', day: 'numeric' })}
+          </p>
+        )}
+        {currentPostData.excerpt && <p className="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">{currentPostData.excerpt}</p>}
+      </header>
+
+      <div className="prose dark:prose-invert lg:prose-xl max-w-none mx-auto">
+        {children}
+      </div>
+    </article>
+  );
+}