create-nextblock 0.2.46 → 0.2.48

package/templates/nextblock-template/app/cms/blocks/components/EditableBlock.tsx

@@ -6,13 +6,15 @@ import type { Database } from "@nextblock-cms/db";
 import PostsGridBlockEditor from '../editors/PostsGridBlockEditor';
 
 type Block = Database['public']['Tables']['blocks']['Row'];
-import { Button } from "@nextblock-cms/ui";
-import { GripVertical, Edit2 } from "lucide-react";
+import { Button, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from "@nextblock-cms/ui";
+import { GripVertical, Edit2, Image as ImageIcon, MessageSquareQuote } from "lucide-react";
 import { getBlockDefinition, blockRegistry, BlockType } from "@/lib/blocks/blockRegistry";
 import { BlockEditorModal } from './BlockEditorModal';
 import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
 import { cn } from '@nextblock-cms/utils';
 
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+
 export interface EditableBlockProps {
   block: Block;
   onDelete: (blockId: number) => void;
@@ -100,28 +102,174 @@ export default function EditableBlock({
       return <div className="text-red-500">Error: Block type missing for preview.</div>;
     }
 
-    const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
-    const blockLabel = blockDefinition?.label || currentBlockType;
-
-    // Default preview for other block types
-    return (
-      <div
-        className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
-        onClick={handleCardClick}
-      >
-        <div className="text-center">
-          <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
-          <p className="text-xs text-muted-foreground">Click edit to modify content</p>
-        </div>
-        {/* This button is for non-section blocks which are not yet implemented for inline editing */}
-        <Button variant="outline" size="sm" onClick={(e) => {
-          e.stopPropagation();
-          handleEditClick();
-        }}>
-          Edit Block
-        </Button>
-      </div>
-    );
+    switch (currentBlockType) {
+       case 'text': {
+         const content = (block.content || {}) as any;
+         const htmlContent = String(content.html_content || '');
+         const isCentered = htmlContent.includes('text-align: center') || htmlContent.includes('class="text-center"');
+         const isRight = htmlContent.includes('text-align: right') || htmlContent.includes('class="text-right"');
+         const alignmentClass = isCentered ? 'text-center' : isRight ? 'text-right' : 'text-left';
+
+         return (
+             <div className="py-2">
+                 <div className={cn("text-xs w-full", alignmentClass)}>
+                     {htmlContent ? (
+                          <div 
+                            dangerouslySetInnerHTML={{ __html: htmlContent }} 
+                            className={cn(
+                              "prose prose-sm max-w-none [&>p]:my-0 [&>h1]:my-0 [&>h2]:my-0 [&>h3]:my-0 dark:prose-invert",
+                              isCentered && "[&_*]:text-center",
+                              isRight && "[&_*]:text-right"
+                            )} 
+                          />
+                     ) : <span className="text-muted-foreground italic">Empty text block</span>}
+                 </div>
+             </div>
+         );
+       }
+       case 'heading': {
+          const content = (block.content || {}) as any;
+          const level = content.level || 1;
+          const headingAlign = content.textAlign || 'left';
+          const textColor = content.textColor || 'foreground';
+          
+          const sizeClasses: Record<number, string> = {
+            1: "text-4xl font-extrabold",
+            2: "text-3xl font-bold",
+            3: "text-2xl font-semibold",
+            4: "text-xl font-semibold",
+            5: "text-lg font-semibold",
+            6: "text-base font-semibold",
+          };
+
+          const colorClasses: Record<string, string> = {
+             primary: "text-primary",
+             secondary: "text-secondary",
+             accent: "text-accent",
+             destructive: "text-destructive",
+             muted: "text-muted-foreground",
+             background: "text-background",
+             foreground: "text-foreground"
+          };
+
+          return (
+             <div className="py-2">
+                  <div className={cn(
+                     "w-full leading-tight",
+                     sizeClasses[level] || sizeClasses[1],
+                     colorClasses[textColor] || "text-foreground",
+                     headingAlign === 'center' && 'text-center',
+                     headingAlign === 'right' && 'text-right'
+                  )}>
+                     {content.text_content || <span className="text-muted-foreground italic text-sm font-normal">Empty heading</span>}
+                  </div>
+             </div>
+          );
+       }
+       case 'image': {
+         const content = (block.content || {}) as any;
+         const imageUrl = content.object_key ? `${R2_BASE_URL}/${content.object_key}` : content.src;
+         return (
+              <div className="flex gap-4 py-2">
+                 <div className="flex-shrink-0 h-16 w-16 bg-muted rounded overflow-hidden flex items-center justify-center border">
+                     {imageUrl ? (
+                         /* eslint-disable-next-line @next/next/no-img-element */
+                         <img src={imageUrl} alt={content.alt_text || 'Block image'} className="h-full w-full object-cover" />
+                     ) : (
+                         <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                     )}
+                 </div>
+                 <div className="flex flex-col justify-center">
+                     <span className="text-sm font-medium truncate max-w-[200px]">{content.alt_text || 'No description'}</span>
+                     <span className="text-xs text-muted-foreground truncate max-w-[200px]">{imageUrl ? 'Image set' : 'No image selected'}</span>
+                 </div>
+              </div>
+         );
+       }
+       case 'button': {
+           const content = (block.content || {}) as any;
+           return (
+               <div className={cn("py-2 flex", 
+                   content.position === 'center' ? 'justify-center' : 
+                   content.position === 'right' ? 'justify-end' : 'justify-start'
+               )}>
+                   <Button 
+                     variant={content.variant || 'default'} 
+                     size={content.size || 'default'}
+                     className={cn("pointer-events-none", content.variant === 'outline' && "text-foreground")}
+                     tabIndex={-1}
+                   >
+                       {content.text || 'Button'}
+                   </Button>
+               </div>
+           );
+       }
+       case 'video_embed': {
+            const content = (block.content || {}) as any;
+            return (
+                <div className="py-2">
+                    <div className="text-sm text-muted-foreground truncate">
+                        📹 {content.title || content.url || 'No Video configured'}
+                    </div>
+                </div>
+            );
+       }
+       case 'posts_grid': {
+             const content = (block.content || {}) as any;
+             return (
+                 <div className="py-2">
+                     <div className="text-sm text-muted-foreground">
+                         Posts Grid: {content.columns || 3} cols, {content.postsPerPage || 12} items
+                     </div>
+                 </div>
+             );
+       }
+       case 'testimonial': {
+            const content = (block.content || {}) as any;
+            return (
+                <div className="py-2">
+                    <Card className="h-full border-none shadow-none bg-transparent">
+                      <CardContent className="pt-2 flex flex-col gap-4 h-full p-4">
+                        <MessageSquareQuote className="w-8 h-8 text-primary/40" />
+                        
+                        <blockquote className="flex-grow text-lg italic text-muted-foreground leading-relaxed">
+                          "{content.quote || 'No quote provided'}"
+                        </blockquote>
+
+                        <div className="flex items-center gap-3 mt-2">
+                          <Avatar>
+                            {content.image_url && <AvatarImage src={content.image_url} alt={content.author_name} />}
+                            <AvatarFallback>{(content.author_name || 'A').slice(0, 2).toUpperCase()}</AvatarFallback>
+                          </Avatar>
+                          
+                          <div>
+                            <div className="font-semibold">{content.author_name || 'Author Name'}</div>
+                            {content.author_title && (
+                              <div className="text-sm text-muted-foreground">{content.author_title}</div>
+                            )}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                </div>
+            );
+       }
+       default: {
+        const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
+        const blockLabel = blockDefinition?.label || currentBlockType;
+        return (
+          <div
+            className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
+            onClick={handleCardClick}
+          >
+            <div className="text-center">
+              <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
+              <p className="text-xs text-muted-foreground">Click edit to modify content</p>
+            </div>
+          </div>
+        );
+       }
+    }
   };
 
   const isSection = block?.block_type === 'section' || block?.block_type === 'hero';
@@ -129,8 +277,10 @@ export default function EditableBlock({
 
   return (
     <div
+      onClick={handleCardClick}
       className={cn(
         "p-4 border rounded-lg bg-card shadow",
+        !isSection && "cursor-pointer hover:border-primary transition-colors",
         className
       )}
     >
@@ -139,7 +289,7 @@ export default function EditableBlock({
           <button {...dragHandleProps} className="p-1 rounded-md hover:bg-muted cursor-grab" aria-label="Drag to reorder">
             <GripVertical className="h-5 w-5" />
           </button>
-          <h3 className="font-semibold">{blockDefinition?.label || block.block_type}</h3>
+          <h4 className="font-semibold p-0 m-0 mb-1">{blockDefinition?.label || block.block_type}</h4>
         </div>
         <div className="flex items-center gap-1">
             <Button

package/templates/nextblock-template/app/cms/blocks/editors/ButtonBlockEditor.tsx

@@ -11,18 +11,18 @@ export type ButtonBlockContent = {
     text?: string;
     url?: string;
     variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg';
+    size?: 'default' | 'sm' | 'lg' | 'full';
+    position?: 'left' | 'center' | 'right';
 };
 
 const buttonVariants: ButtonBlockContent['variant'][] = ['default', 'outline', 'secondary', 'ghost', 'link'];
-const buttonSizes: ButtonBlockContent['size'][] = ['default', 'sm', 'lg'];
+const buttonSizes: ButtonBlockContent['size'][] = ['default', 'sm', 'lg', 'full'];
+const buttonPositions: ButtonBlockContent['position'][] = ['left', 'center', 'right'];
 
 
 export default function ButtonBlockEditor({ content, onChange }: BlockEditorProps<Partial<ButtonBlockContent>>) {
 
   const handleChange = (field: keyof ButtonBlockContent, value: string) => {
-    // Ensure that when variant or size is cleared, it's set to undefined or a valid default, not an empty string if your type doesn't allow it.
-    // However, the Select component's onValueChange will provide valid values from the list or an empty string if placeholder is re-selected (which shouldn't happen here).
     onChange({ ...content, [field]: value });
   };
 
@@ -48,34 +48,52 @@ export default function ButtonBlockEditor({ content, onChange }: BlockEditorProp
           className="mt-1"
         />
       </div>
-      <div>
-        <Label htmlFor="btn-variant">Variant</Label>
-        <Select
-          value={content.variant || "default"}
-          onValueChange={(val: string) => handleChange('variant', val)}
-        >
-          <SelectTrigger id="btn-variant" className="mt-1">
-            <SelectValue placeholder="Select variant" />
-          </SelectTrigger>
-          <SelectContent>
-            {buttonVariants.filter((v): v is Exclude<ButtonBlockContent['variant'], undefined> => v !== undefined).map(v => (
-              <SelectItem key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+      <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="btn-variant">Variant</Label>
+            <Select
+              value={content.variant || "default"}
+              onValueChange={(val: string) => handleChange('variant', val)}
+            >
+              <SelectTrigger id="btn-variant" className="mt-1">
+                <SelectValue placeholder="Select variant" />
+              </SelectTrigger>
+              <SelectContent>
+                {buttonVariants.filter((v): v is Exclude<ButtonBlockContent['variant'], undefined> => v !== undefined).map(v => (
+                  <SelectItem key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="btn-size">Size</Label>
+            <Select
+              value={content.size || "default"}
+              onValueChange={(val: string) => handleChange('size', val)}
+            >
+              <SelectTrigger id="btn-size" className="mt-1">
+                <SelectValue placeholder="Select size" />
+              </SelectTrigger>
+              <SelectContent>
+                {buttonSizes.filter((s): s is Exclude<ButtonBlockContent['size'], undefined> => s !== undefined).map(s => (
+                  <SelectItem key={s} value={s}>{s.toUpperCase()}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
       </div>
       <div>
-        <Label htmlFor="btn-size">Size</Label>
+        <Label htmlFor="btn-position">Alignment</Label>
         <Select
-          value={content.size || "default"}
-          onValueChange={(val: string) => handleChange('size', val)}
+          value={content.position || "left"}
+          onValueChange={(val: string) => handleChange('position', val)}
         >
-          <SelectTrigger id="btn-size" className="mt-1">
-            <SelectValue placeholder="Select size" />
+          <SelectTrigger id="btn-position" className="mt-1">
+            <SelectValue placeholder="Select alignment" />
           </SelectTrigger>
           <SelectContent>
-            {buttonSizes.filter((s): s is Exclude<ButtonBlockContent['size'], undefined> => s !== undefined).map(s => (
-              <SelectItem key={s} value={s}>{s.toUpperCase()}</SelectItem>
+            {buttonPositions.filter((p): p is Exclude<ButtonBlockContent['position'], undefined> => p !== undefined).map(p => (
+              <SelectItem key={p} value={p}>{p.charAt(0).toUpperCase() + p.slice(1)}</SelectItem>
             ))}
           </SelectContent>
         </Select>

package/templates/nextblock-template/app/cms/blocks/editors/SectionBlockEditor.tsx

@@ -38,6 +38,67 @@ interface SectionBlockEditorProps {
   blockType: 'section' | 'hero';
 }
 
+// Background style generator (Mirrors SectionBlockRenderer logic)
+function generateBackgroundStyles(background: SectionBlockContent['background']) {
+  const styles: React.CSSProperties = {};
+  let className = '';
+  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+  switch (background?.type) {
+    case 'theme': {
+      // Theme-based backgrounds using CSS classes
+      const themeClasses: Record<string, string> = {
+        primary: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        muted: 'bg-muted text-muted-foreground',
+        accent: 'bg-accent text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground'
+      };
+      className = background.theme ? themeClasses[background.theme] || '' : '';
+      break;
+    }
+    
+    case 'solid':
+      if (background.solid_color) {
+          styles.backgroundColor = background.solid_color;
+      }
+      break;
+    
+    case 'gradient':
+      if (background.gradient) {
+        const { type, direction, stops } = background.gradient;
+        const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+        styles.background = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+      }
+      break;
+    
+    case 'image':
+      if (background.image) {
+        const imageUrl = `${R2_BASE_URL}/${background.image.object_key}`;
+        styles.backgroundSize = background.image.size || 'cover';
+        styles.backgroundPosition = background.image.position || 'center';
+
+        let finalBackgroundImage = `url(${imageUrl})`;
+
+        if (background.image.overlay && background.image.overlay.gradient) {
+          const { type, direction, stops } = background.image.overlay.gradient;
+          const gradientStops = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+          const gradient = `${type}-gradient(${direction || 'to right'}, ${gradientStops})`;
+          finalBackgroundImage = `${gradient}, ${finalBackgroundImage}`;
+        }
+        
+        styles.backgroundImage = finalBackgroundImage;
+      }
+      break;
+    
+    default:
+      // No background
+      break;
+  }
+
+  return { styles, className };
+}
+
 export default function SectionBlockEditor({
   content,
   onChange,
@@ -72,6 +133,9 @@ export default function SectionBlockEditor({
   const [activeId, setActiveId] = useState<string | null>(null);
   const [draggedBlock, setDraggedBlock] = useState<any>(null);
 
+  // Generate background styles
+  const { styles: backgroundStyles, className: backgroundClassName } = generateBackgroundStyles(processedContent.background);
+  
   // DND sensors for cross-column dragging
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -236,13 +300,6 @@ return (
         )}
 
         {/* Column Content Management */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
-              Column Content
-            </h3>
-          </div>
-
           <SortableContext
             items={(processedContent.column_blocks || [])
               .flatMap((columnBlocks, columnIndex) =>
@@ -260,14 +317,15 @@ return (
             strategy={verticalListSortingStrategy}
           >
             <div
-              className={
-                (processedContent.column_blocks || []).length === 1
-                  ? "block"
-                  : `grid gap-4
-                    grid-cols-${processedContent.responsive_columns.mobile}
-                    md:grid-cols-${processedContent.responsive_columns.tablet}
-                    lg:grid-cols-${processedContent.responsive_columns.desktop}`
-              }
+              className={`grid gap-4 rounded-lg border transition-colors ${backgroundClassName} ${
+                 (processedContent.column_blocks || []).length === 1
+                   ? "grid-cols-1"
+                   : `grid-cols-${processedContent.responsive_columns.mobile} md:grid-cols-${processedContent.responsive_columns.tablet} lg:grid-cols-${processedContent.responsive_columns.desktop}`
+              }`}
+              style={{
+                ...backgroundStyles,
+                minHeight: '200px'
+              }}
             >
               {Array.from({ length: (processedContent.column_blocks || []).length }, (_, columnIndex) => (
                 <ColumnEditor
@@ -278,6 +336,7 @@ return (
                     handleColumnBlocksChange(columnIndex, newBlocks)
                   }
                   blockType={blockType}
+                  sectionBackground={processedContent.background}
                 />
               ))}
             </div>
@@ -332,7 +391,6 @@ return (
               </div>
             ) : null}
           </DragOverlay>
-        </div>
       </div>
     </DndContext>
   );

package/templates/nextblock-template/app/cms/blocks/editors/TextBlockEditor.tsx

@@ -27,6 +27,7 @@ export type TextBlockContent = {
 export default function TextBlockEditor({
   content,
   onChange,
+  className,
 }: BlockEditorProps<Partial<TextBlockContent>>) {
   const labelId = useId();
   const [pickerOpen, setPickerOpen] = useState(false);
@@ -50,6 +51,7 @@ export default function TextBlockEditor({
           content={content?.html_content ?? ''}
           onChange={(html) => onChange({ html_content: html })}
           openImagePicker={openImagePicker}
+          className={className}
         />
 
         {/* Hidden controlled MediaPickerDialog for image selection */}

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

@@ -0,0 +1,98 @@
+'use server'
+
+import { createClient } from "@nextblock-cms/db/server";
+import { formatDistanceToNow } from 'date-fns';
+
+export type DashboardStats = {
+  totalPages: number;
+  totalPosts: number;
+  totalUsers: number;
+  recentContent: {
+    type: 'post' | 'page';
+    title: string;
+    author: string;
+    date: string;
+    status: string;
+  }[];
+  scheduledContent: {
+    title: string;
+    date: string;
+    type: string;
+  }[];
+};
+
+export async function getDashboardStats(): Promise<DashboardStats> {
+  const supabase = createClient();
+  const now = new Date().toISOString();
+
+  // Parallelize queries
+  const [
+    { count: totalPages },
+    { count: totalPosts },
+    { count: totalUsers },
+    { data: recentPosts },
+    { data: recentPages },
+    { data: scheduledPosts }
+  ] = await Promise.all([
+    supabase.from('pages').select('*', { count: 'exact', head: true }),
+    supabase.from('posts').select('*', { count: 'exact', head: true }),
+    supabase.from('profiles').select('*', { count: 'exact', head: true }),
+    
+    // Recent Posts
+    supabase.from('posts')
+      .select('title, status, updated_at, created_at, profiles(full_name)')
+      .order('updated_at', { ascending: false })
+      .limit(5),
+      
+    // Recent Pages
+    supabase.from('pages')
+      .select('title, status, updated_at, created_at')
+      .order('updated_at', { ascending: false })
+      .limit(5),
+
+    // Scheduled Posts (published_at > now)
+    supabase.from('posts')
+      .select('title, published_at')
+      .gt('published_at', now)
+      .order('published_at', { ascending: true })
+      .limit(5)
+  ]);
+
+  // Process Recent Content
+  const combinedRecent = [
+    ...(recentPosts?.map((p: any) => ({
+      type: 'post' as const,
+      title: p.title,
+      author: p.profiles?.full_name || 'Unknown',
+      date: p.updated_at || p.created_at,
+      status: p.status
+    })) || []),
+    ...(recentPages?.map((p: any) => ({
+      type: 'page' as const,
+      title: p.title,
+      author: 'System', // Pages don't always track author in this schema
+      date: p.updated_at || p.created_at,
+      status: p.status
+    })) || [])
+  ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+   .slice(0, 5)
+   .map(item => ({
+     ...item,
+     date: formatDistanceToNow(new Date(item.date), { addSuffix: true })
+   }));
+
+  // Process Scheduled Content
+  const processedScheduled = (scheduledPosts || []).map((p: any) => ({
+    title: p.title,
+    date: new Date(p.published_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }),
+    type: 'Post'
+  }));
+
+  return {
+    totalPages: totalPages || 0,
+    totalPosts: totalPosts || 0,
+    totalUsers: totalUsers || 0,
+    recentContent: combinedRecent,
+    scheduledContent: processedScheduled
+  };
+}