create-nextblock 0.0.1

package/templates/nextblock-template/components/blocks/renderers/SectionBlockRenderer.tsx

@@ -0,0 +1,189 @@
+// components/blocks/renderers/SectionBlockRenderer.tsx
+import React from "react";
+import type { SectionBlockContent } from "../../../lib/blocks/blockRegistry";
+import { getBlockDefinition } from "../../../lib/blocks/blockRegistry";
+import dynamic from "next/dynamic";
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+interface SectionBlockRendererProps {
+  content: SectionBlockContent;
+  languageId: number;
+}
+
+// Container class mapping
+const containerClasses = {
+  'full-width': 'w-full',
+  'container': 'container mx-auto px-4',
+  'container-sm': 'container mx-auto px-4 max-w-screen-sm',
+  'container-lg': 'container mx-auto px-4 max-w-screen-lg',
+  'container-xl': 'container mx-auto px-4 max-w-screen-xl'
+};
+
+// Column grid classes
+const columnClasses = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+};
+
+// Gap classes
+const gapClasses = {
+  none: 'gap-0',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8'
+};
+
+// Padding classes
+const paddingClasses = {
+  none: '',
+  sm: 'py-2',
+  md: 'py-4',
+  lg: 'py-8',
+  xl: 'py-12'
+};
+
+// Background style generator
+function generateBackgroundStyles(background: SectionBlockContent['background']) {
+  const styles: React.CSSProperties = {};
+  let className = '';
+
+  switch (background.type) {
+    case 'theme': {
+      // Theme-based backgrounds using CSS classes
+      const themeClasses = {
+        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':
+      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 };
+}
+
+// Dynamic block renderer component
+const DynamicNestedBlockRenderer: React.FC<{
+  block: SectionBlockContent['column_blocks'][0][0];
+  languageId: number;
+}> = ({ block, languageId }) => {
+  const blockDefinition = getBlockDefinition(block.block_type);
+  
+  if (!blockDefinition) {
+    return (
+      <div className="p-2 border rounded bg-destructive/10 text-destructive text-sm">
+        <strong>Unsupported block type:</strong> {block.block_type}
+      </div>
+    );
+  }
+
+  // Create dynamic component with proper SSR handling
+  const RendererComponent = dynamic(
+    () => import(`./${blockDefinition.rendererComponentFilename}`),
+    {
+      loading: () => (
+        <div className="animate-pulse bg-muted rounded h-8"></div>
+      ),
+      ssr: true,
+    }
+  ) as React.ComponentType<any>;
+
+  // Handle different prop requirements for different renderers
+  if (block.block_type === 'posts_grid') {
+    return (
+      <RendererComponent
+        content={block.content}
+        languageId={languageId}
+        block={{ ...block, id: 0, language_id: languageId, order: 0, created_at: '', updated_at: '' }}
+      />
+    );
+  }
+
+  return (
+    <RendererComponent
+      content={block.content}
+      languageId={languageId}
+    />
+  );
+};
+
+const SectionBlockRenderer: React.FC<SectionBlockRendererProps> = ({
+  content,
+  languageId,
+}) => {
+  const { styles, className: backgroundClassName } = generateBackgroundStyles(content.background);
+  
+  // Build CSS classes
+  const containerClass = containerClasses[content.container_type] || containerClasses.container;
+  const gridClass = columnClasses[content.responsive_columns.desktop] || columnClasses[3];
+  const gapClass = gapClasses[content.column_gap] || gapClasses.md;
+  const paddingTopClass = paddingClasses[content.padding.top] || paddingClasses.md;
+  const paddingBottomClass = paddingClasses[content.padding.bottom] || paddingClasses.md;
+
+  return (
+    <section
+      className={`w-full ${paddingTopClass} ${paddingBottomClass} ${backgroundClassName}`.trim()}
+      style={styles}
+    >
+      <div className={containerClass}>
+        <div className={`grid ${gridClass} ${gapClass}`}>
+          {content.column_blocks.map((columnBlocks, columnIndex) => (
+            <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
+              {(Array.isArray(columnBlocks) ? columnBlocks : []).map((block, blockIndex) => (
+                <DynamicNestedBlockRenderer
+                  key={`${block.block_type}-${columnIndex}-${blockIndex}`}
+                  block={block}
+                  languageId={languageId}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SectionBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/TextBlockRenderer.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { headers } from 'next/headers';
+import ClientTextBlockRenderer from "./ClientTextBlockRenderer";
+
+export type TextBlockContent = {
+    html_content?: string;
+};
+
+interface TextBlockRendererProps {
+  content: TextBlockContent;
+  languageId: number;
+}
+
+function addNonceToInlineScripts(html: string, nonce: string): string {
+  if (!html || !nonce) return html || '';
+  // Add nonce to <script> tags that do not already have a nonce
+  // and do not have a src attribute (inline scripts)
+  return html.replace(/<script(?![^>]*\bsrc=)([^>]*)(?<!nonce=["'][^"']*["'])>/gi, (_m, attrs) => {
+    return `<script nonce="${nonce}"${attrs}>`;
+  });
+}
+
+const TextBlockRenderer: React.FC<TextBlockRendererProps> = async ({ content, languageId }) => {
+  const hdrs = await headers();
+  const nonce = hdrs.get('x-nonce') || '';
+  const htmlWithNonce = content.html_content ? addNonceToInlineScripts(content.html_content, nonce) : '';
+  const patchedContent = { ...content, html_content: htmlWithNonce };
+  return <ClientTextBlockRenderer content={patchedContent} languageId={languageId} />;
+};
+
+export default TextBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/VideoEmbedBlockRenderer.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { validateBlockContent, VideoEmbedBlockContent } from "@/lib/blocks/blockRegistry";
+
+interface VideoEmbedBlockRendererProps {
+  content: VideoEmbedBlockContent;
+  languageId: number;
+}
+
+const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
+  content,
+  languageId,
+}) => {
+  void languageId;
+  // Optional: Validate content against registry schema
+  const validation = validateBlockContent("video_embed", content);
+  if (!validation.isValid) {
+    console.warn("Invalid video embed content:", validation.errors);
+  }
+
+  if (!content.url) {
+    return null;
+  }
+
+  // Convert YouTube URLs to embed format
+  const getEmbedUrl = (url: string) => {
+    const youtubeRegex = /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/;
+    const match = url.match(youtubeRegex);
+    
+    if (match) {
+      const videoId = match[1];
+      const params = new URLSearchParams();
+      if (content.autoplay) params.set('autoplay', '1');
+      if (!content.controls) params.set('controls', '0');
+      
+      return `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+    }
+    
+    return url; // Return original URL if not YouTube
+  };
+
+  return (
+    <div className="my-4">
+      {content.title && (
+        <h3 className="text-lg font-semibold mb-2">{content.title}</h3>
+      )}
+      <div className="relative aspect-video">
+        <iframe
+          src={getEmbedUrl(content.url)}
+          title={content.title || "Video"}
+          className="w-full h-full rounded-lg"
+          allowFullScreen
+          loading="lazy"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default VideoEmbedBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/inline/AlertWidgetRenderer.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+interface AlertWidgetRendererProps {
+  type: 'info' | 'warning' | 'notification' | 'danger';
+  title: string;
+  message: string;
+  align: 'left' | 'center' | 'right';
+  size: 'fit-content' | 'full-width';
+  textAlign: 'left' | 'center' | 'right';
+}
+
+const AlertWidgetRenderer = ({ type, title, message, align, size, textAlign }: AlertWidgetRendererProps) => {
+  const alertClasses: { [key: string]: string } = {
+    info:         'bg-accent/60 text-accent-foreground border-2 border-accent',
+    warning:      'bg-warning/60 text-warning-foreground border-2 border-warning',
+    notification: 'bg-muted/60 text-muted-foreground border-2 border-muted-foreground',
+    danger:       'bg-destructive/60 text-destructive-foreground border-2 border-destructive',
+  };
+
+  const sizeClasses: { [key: string]: string } = {
+    'fit-content': 'w-auto',
+    'full-width': 'w-full',
+  };
+
+  const alignClasses: { [key: string]: string } = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  const textAlignClasses: { [key: string]: string } = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  return (
+    <div className={`${alignClasses[align] || 'text-left'}`}>
+      <div
+        className={`inline-block rounded-lg border p-2 m-1 ${alertClasses[type] || alertClasses.info} ${
+          sizeClasses[size] || sizeClasses['fit-content']
+        } ${textAlignClasses[textAlign] || textAlignClasses.left}`}
+      >
+        <strong className="font-bold block">{title}</strong>
+        <span>{message}</span>
+      </div>
+    </div>
+  );
+};
+
+export default AlertWidgetRenderer;

package/templates/nextblock-template/components/blocks/renderers/inline/CtaWidgetRenderer.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Link from 'next/link';
+
+interface CtaWidgetRendererProps {
+  text: string;
+  url: string;
+  style: 'primary' | 'secondary';
+  size: 'fit-content' | 'full-width';
+  textAlign: 'left' | 'center' | 'right';
+}
+
+const CtaWidgetRenderer = ({ text, url, style, size, textAlign }: CtaWidgetRendererProps) => {
+  const buttonClasses: { [key: string]: string } = {
+    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  };
+
+  const sizeClasses: { [key: string]: string } = {
+    'fit-content': 'w-auto',
+    'full-width': 'w-full',
+  };
+
+
+  const textAlignClasses: { [key: string]: string } = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+
+  return (
+    <div className={`p-2 ${textAlignClasses[textAlign] || textAlignClasses.left}`}>
+      <Link href={url} className={`inline-block px-4 py-2 rounded-md ${buttonClasses[style]} ${sizeClasses[size] || sizeClasses['fit-content']}`}>
+        {text}
+      </Link>
+    </div>
+  );
+};
+
+export default CtaWidgetRenderer;

package/templates/nextblock-template/components/blocks/types.ts

@@ -0,0 +1,8 @@
+import type { Database } from '@nextblock-cms/db';
+
+export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
+    feature_image_url: string | null;
+    feature_image_width: number | null;
+    feature_image_height: number | null;
+    blur_data_url: string | null;
+};

package/templates/nextblock-template/components/env-var-warning.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { Badge } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
+
+export function EnvVarWarning() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge variant={"outline"} className="font-normal">
+        Supabase environment variables required
+      </Badge>
+      <div className="flex gap-2">
+        <Button
+          asChild
+          size="sm"
+          variant={"outline"}
+          disabled
+          className="opacity-75 cursor-none pointer-events-none"
+        >
+          <Link href="/sign-in">Sign in</Link>
+        </Button>
+        <Button
+          asChild
+          size="sm"
+          variant={"default"}
+          disabled
+          className="opacity-75 cursor-none pointer-events-none"
+        >
+          <Link href="/sign-up">Sign up</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/components/form-message.tsx

@@ -0,0 +1,26 @@
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export function FormMessage({ message }: { message?: Message }) {
+  if (!message) return null;
+
+  return (
+    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
+      {"success" in message && message.success && (
+        <div className="text-foreground border-l-2 border-foreground px-4">
+          {message.success}
+        </div>
+      )}
+      {"error" in message && message.error && (
+        <div className="text-destructive-foreground border-l-2 border-destructive-foreground px-4">
+          {message.error}
+        </div>
+      )}
+      {"message" in message && message.message && (
+        <div className="text-foreground border-l-2 px-4">{message.message}</div>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/components/header-auth.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { signOutAction } from "@/app/actions";
+import { hasPublicEnvVars } from "@nextblock-cms/utils";
+import Link from "next/link";
+import { Badge } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
+import { useAuth } from "@/context/AuthContext";
+import { useTranslations } from "@nextblock-cms/utils";
+
+export default function AuthButton() {
+  const { user, profile } = useAuth();
+  const { t } = useTranslations();
+  const username = profile?.username || null;
+
+  if (!hasPublicEnvVars) {
+    return (
+      <>
+        <div className="flex gap-4 items-center">
+          <div>
+            <Badge
+              variant={"default"}
+              className="font-normal pointer-events-none"
+            >
+              {t('update_env_file_warning')}
+            </Badge>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              asChild
+              size="sm"
+              variant={"outline"}
+              disabled
+              className="opacity-75 cursor-none pointer-events-none"
+            >
+              <Link href="/sign-in">{t('sign_in')}</Link>
+            </Button>
+            <Button
+              asChild
+              size="sm"
+              variant={"default"}
+              disabled
+              className="opacity-75 cursor-none pointer-events-none"
+            >
+              <Link href="/sign-up">{t('sign_up')}</Link>
+            </Button>
+          </div>
+        </div>
+      </>
+    );
+  }
+  return user ? (
+    <div className="flex items-center gap-4">
+      {t('greeting', { username: username || user.email || 'User' })}
+      <form action={signOutAction}>
+        <Button type="submit" variant={"outline"}>
+          {t('sign_out')}
+        </Button>
+      </form>
+    </div>
+  ) : (
+    <div className="flex gap-2">
+      <Button asChild size="sm" variant={"outline"}>
+        <Link href="/sign-in">{t('sign_in')}</Link>
+      </Button>
+      <Button asChild size="sm" variant={"default"}>
+        <Link href="/sign-up">{t('sign_up')}</Link>
+      </Button>
+    </div>
+  );
+}

package/templates/nextblock-template/components/submit-button.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Button } from "@nextblock-cms/ui";
+import { type ComponentProps } from "react";
+import { useFormStatus } from "react-dom";
+
+type Props = ComponentProps<typeof Button> & {
+  pendingText?: string;
+};
+
+export function SubmitButton({
+  children,
+  pendingText = "Submitting...",
+  ...props
+}: Props) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit" aria-disabled={pending} {...props}>
+      {pending ? pendingText : children}
+    </Button>
+  );
+}

package/templates/nextblock-template/components/theme-switcher.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@nextblock-cms/ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import { Laptop, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const ICON_SIZE = 16;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size={"sm"} aria-label="Theme Switcher">
+          {theme === "light" ? (
+            <Sun
+              key="light"
+              size={ICON_SIZE}
+              className={"text-muted-foreground"}
+            />
+          ) : theme === "dark" ? (
+            <Moon
+              key="dark"
+              size={ICON_SIZE}
+              className={"text-muted-foreground"}
+            />
+          ) : (
+            <Laptop
+              key="system"
+              size={ICON_SIZE}
+              className={"text-muted-foreground"}
+            />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-content" align="start">
+        <DropdownMenuRadioGroup
+          value={theme}
+          onValueChange={(e) => setTheme(e)}
+        >
+          <DropdownMenuRadioItem className="flex gap-2" value="light">
+            <Sun size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>Light</span>
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem className="flex gap-2" value="dark">
+            <Moon size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>Dark</span>
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem className="flex gap-2" value="system">
+            <Laptop size={ICON_SIZE} className="text-muted-foreground" />{" "}
+            <span>System</span>
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export { ThemeSwitcher };