create-nextblock 0.2.61 → 0.2.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.61",
+  "version": "0.2.64",
   "description": "",
   "main": "index.js",
   "bin": {

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

@@ -9,6 +9,8 @@ import Link from "next/link";
 import { useTranslations } from "@nextblock-cms/utils";
 import { useSearchParams } from "next/navigation";
 
+import { SandboxCredentialsAlert } from "../../../components/SandboxCredentialsAlert";
+
 function getMessage(searchParams: URLSearchParams): Message | undefined {
     if (searchParams.has('error')) {
         const error = searchParams.get('error');
@@ -31,7 +33,8 @@ export default function Login() {
   const formMessage = getMessage(searchParams);
 
   return (
-    <form className="flex-1 flex flex-col min-w-64 mx-auto">
+    <form className="flex-1 flex flex-col w-full max-w-160 mx-auto">
+      <SandboxCredentialsAlert />
       <h1 className="text-2xl font-medium">{t('sign_in')}</h1>
       <p className="text-sm text-foreground">
         {t('dont_have_account')}{" "}

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

@@ -9,6 +9,8 @@ import Link from "next/link";
 import { useTranslations } from "@nextblock-cms/utils";
 import { useSearchParams } from "next/navigation";
 
+import { SandboxCredentialsAlert } from "../../../components/SandboxCredentialsAlert";
+
 function getMessage(searchParams: URLSearchParams): Message | undefined {
     if (searchParams.has('error')) {
         const error = searchParams.get('error');
@@ -40,7 +42,8 @@ export default function Signup() {
 
   return (
     <>
-      <form className="flex flex-col min-w-64 max-w-64 mx-auto">
+      <form className="flex flex-col w-full max-w-160 mx-auto">
+        <SandboxCredentialsAlert />
         <h1 className="text-2xl font-medium">{t('sign_up')}</h1>
         <p className="text-sm text text-foreground">
           {t('already_have_account')}{" "}

package/templates/nextblock-template/app/api/cron/reset-sandbox/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@supabase/supabase-js';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: NextRequest) {
+  // 1. Guard: Only run in Sandbox Mode
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX !== 'true') {
+    return NextResponse.json({ message: 'Sandbox reset skipped: Not in Sandbox Mode' });
+  }
+
+  // 2. Guard: Verify Cron Secret
+  const authHeader = request.headers.get('authorization');
+  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
+    return new NextResponse('Unauthorized', {
+      status: 401,
+    });
+  }
+
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+  if (!supabaseUrl || !supabaseServiceKey) {
+    return NextResponse.json({ error: 'Missing Supabase environment variables' }, { status: 500 });
+  }
+
+  const supabase = createClient(supabaseUrl, supabaseServiceKey, {
+    auth: {
+      autoRefreshToken: false,
+      persistSession: false,
+    },
+  });
+
+  try {
+    const { error } = await supabase.rpc('reset_sandbox');
+
+    if (error) {
+      console.error('Error resetting sandbox:', error);
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true, message: 'Sandbox reset successfully' });
+  } catch (err) {
+    console.error('Unexpected error resetting sandbox:', err);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}

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

@@ -114,6 +114,7 @@ export function BlockEditorModal({
 
             {/* Editor Area with Contextual Background */}
             <div 
+              onClick={(e) => e.stopPropagation()}
               className={cn(
                   "flex-1 overflow-y-auto p-6",
                   // Conditional Background Logic:

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

@@ -2,6 +2,8 @@ import '@nextblock-cms/ui/styles/globals.css';
 import '@nextblock-cms/editor/styles/editor.css';
 // app/layout.tsx
 import { EnvVarWarning } from "@/components/env-var-warning";
+import { SandboxBanner } from "@/components/SandboxBanner";
+import { Analytics } from "@vercel/analytics/next"
 import { ThemeSwitcher } from '@/components/theme-switcher';
 import type { Metadata } from 'next';
 import Header from "@/components/Header";
@@ -172,6 +174,7 @@ export default async function RootLayout({
         <link rel="dns-prefetch" href="https://db.ppcppwsfnrptznvbxnsz.supabase.co" />
         <link rel="dns-prefetch" href="https://realtime.supabase.com" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Analytics/>
       </head>
       <body className="bg-background text-foreground min-h-screen flex flex-col">
         <Providers
@@ -183,6 +186,7 @@ export default async function RootLayout({
           translations={translations}
           nonce={nonce}
         >
+          {process.env.NEXT_PUBLIC_IS_SANDBOX === 'true' && <SandboxBanner />}
           <ToasterProvider />
           <div className="flex-1 w-full flex flex-col items-center">
             <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">

package/templates/nextblock-template/components/SandboxBanner.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { TriangleAlert } from 'lucide-react';
+import { useTranslations } from '@nextblock-cms/utils';
+
+export function SandboxBanner() {
+  const { t } = useTranslations();
+  
+  return (
+    <div className="w-full z-[100] bg-amber-500 text-amber-950 px-4 py-2 text-center text-sm font-medium shadow-md flex items-center justify-center gap-2">
+      <TriangleAlert className="w-4 h-4" />
+      <span>
+        {t('sandbox_mode_banner')}
+      </span>
+    </div>
+  );
+}

package/templates/nextblock-template/components/SandboxCredentialsAlert.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Info } from 'lucide-react';
+import { useTranslations } from '@nextblock-cms/utils';
+
+export function SandboxCredentialsAlert() {
+  const { t } = useTranslations();
+
+  // Only show in sandbox mode
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX !== 'true') {
+    return null;
+  }
+
+  return (
+    <div className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mt-6 flex items-start gap-3 text-sm">
+      <Info className="w-5 h-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
+      <div className="text-blue-900 dark:text-blue-100">
+        <p className="font-semibold mb-1">{t('demo_access_title')}</p>
+        <p className="mb-2">
+          {t('demo_access_desc')}
+        </p>
+        <ul className="space-y-1 font-mono text-xs bg-white/50 dark:bg-black/20 p-2 rounded border border-blue-100 dark:border-blue-900/50">
+          <li>{t('demo_user_label')} <span className="font-bold select-all">demo@nextblock.ca</span></li>
+          <li>{t('demo_password_label')} <span className="font-bold select-all">password</span></li>
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextblock-template/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.2.39",
+  "version": "0.2.42",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "deploy:supabase": "node tools/deploy-supabase.js"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.920.0",

package/templates/nextblock-template/proxy.ts

@@ -214,13 +214,13 @@ export default async function proxy(request: NextRequest) {
 
       const csp = [
         "default-src 'self'",
-        `script-src 'self' blob: data: 'nonce-${nonceValue}'`,
-        "style-src 'self' 'unsafe-inline'",
-        `img-src 'self' data: blob:${r2Hostnames}`,
-        "font-src 'self'",
+        `script-src 'self' blob: data: 'nonce-${nonceValue}' https://vercel.live https://vercel.com`,
+        "style-src 'self' 'unsafe-inline' https://vercel.live https://vercel.com",
+        `img-src 'self' data: blob:${r2Hostnames} https://vercel.live https://vercel.com`,
+        "font-src 'self' https://vercel.live https://assets.vercel.com",
         "object-src 'none'",
-        `connect-src 'self' https://${supabaseHostname} wss://${supabaseHostname}${r2Hostnames}`,
-        "frame-src 'self' blob: data: https://www.youtube.com",
+        `connect-src 'self' https://${supabaseHostname} wss://${supabaseHostname}${r2Hostnames} https://vercel.live https://vercel.com`,
+        "frame-src 'self' blob: data: https://www.youtube.com https://vercel.live https://vercel.com",
         "form-action 'self'",
         "base-uri 'self'",
       ].join('; ');

package/templates/nextblock-template/tools/deploy-supabase.js

@@ -0,0 +1,161 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+  blue: '\x1b[34m',
+};
+
+function getDbPassword() {
+  if (process.env.SUPABASE_DB_PASSWORD) {
+    return process.env.SUPABASE_DB_PASSWORD;
+  }
+  if (process.env.POSTGRES_URL) {
+    try {
+      const url = new URL(process.env.POSTGRES_URL);
+      return url.password;
+    } catch (e) {
+      return null;
+    }
+  }
+  return null;
+}
+
+function checkEnv() {
+  const missing = [];
+
+  if (!process.env.SUPABASE_ACCESS_TOKEN) {
+    missing.push('SUPABASE_ACCESS_TOKEN');
+  }
+  if (!process.env.SUPABASE_PROJECT_ID) {
+    missing.push('SUPABASE_PROJECT_ID');
+  }
+  if (!process.env.NEXT_PUBLIC_URL) {
+    missing.push('NEXT_PUBLIC_URL');
+  }
+
+  const dbPassword = getDbPassword();
+  if (!dbPassword) {
+    missing.push('SUPABASE_DB_PASSWORD (or POSTGRES_URL)');
+  }
+
+  if (missing.length > 0) {
+    console.log(
+      `${colors.yellow}⚠️  Skipping Supabase deployment: Missing environment variables: ${missing.join(', ')}${colors.reset}`,
+    );
+    console.log(
+      `${colors.yellow}   This is expected for Pull Requests or forks without secrets configured.${colors.reset}`,
+    );
+    return false;
+  }
+  return true;
+}
+
+function runCommand(command) {
+  try {
+    console.log(`${colors.blue}Running: ${command}${colors.reset}`);
+    execSync(command, { stdio: 'inherit' });
+  } catch (error) {
+    console.error(`${colors.red}❌ Command failed: ${command}${colors.reset}`);
+    process.exit(1);
+  }
+}
+
+async function deploy() {
+  console.log(
+    `${colors.green}🚀 Starting Supabase Deployment...${colors.reset}`,
+  );
+
+  if (!checkEnv()) {
+    process.exit(0);
+  }
+
+  const dbPassword = getDbPassword();
+  if (!dbPassword) {
+    console.error(
+      `${colors.red}❌ Could not determine database password.${colors.reset}`,
+    );
+    process.exit(1);
+  }
+
+  // Detect Supabase location
+  // 1. Monorepo Dev (apps/nextblock -> libs/db/src)
+  // 2. Standalone (root -> supabase)
+  let workDirFlag = '';
+
+  // Check if we are in monorepo structure relative to this script
+  // Script is in apps/nextblock/tools/deploy-supabase.js
+  // So monorepo root is ../../../
+  // libs/db/src is ../../../libs/db/src
+
+  // More robust check: check if libs/db/src/supabase/config.toml exists
+  // We assume the command is run from the project root (process.cwd())
+
+  // If running from apps/nextblock root (monorepo dev)
+  const monorepoDbPath = path.join(
+    process.cwd(),
+    '../../libs/db/src/supabase/config.toml',
+  );
+
+  // If running from workspace root (standalone)
+  const standaloneDbPath = path.join(process.cwd(), 'supabase/config.toml');
+
+  if (fs.existsSync(monorepoDbPath)) {
+    console.log(
+      `${colors.blue}ℹ️  Detected Monorepo environment (libs/db/src)${colors.reset}`,
+    );
+    workDirFlag = '--workdir ../../libs/db/src';
+  } else if (fs.existsSync(standaloneDbPath)) {
+    console.log(
+      `${colors.blue}ℹ️  Detected Standalone environment (./supabase)${colors.reset}`,
+    );
+    workDirFlag = '';
+  } else {
+    // Fallback or maybe we are running from root of monorepo?
+    const rootDbPath = path.join(
+      process.cwd(),
+      'libs/db/src/supabase/config.toml',
+    );
+    if (fs.existsSync(rootDbPath)) {
+      workDirFlag = '--workdir libs/db/src';
+    }
+  }
+
+  console.log(
+    `${colors.green}🔗 Linking to Supabase project...${colors.reset}`,
+  );
+  runCommand(
+    `npx supabase link --project-ref ${process.env.SUPABASE_PROJECT_ID} --password ${dbPassword} ${workDirFlag}`,
+  );
+
+  console.log(
+    `${colors.green}📦 Pushing database migrations...${colors.reset}`,
+  );
+  runCommand(`npx supabase db push --include-all ${workDirFlag}`, {
+    stdio: 'inherit',
+  }); // db push input 'y' handled?
+  // npx supabase db push usually asks for confirmation if destructive. --include-all might implies force? using input 'y' might be safer or --force if avail.
+  // Actually, CI usually needs --no-interactive or equivalent if prompts exist.
+  // But our previous script used just db push without input 'y' and relied on process.stdin or just worked.
+  // Wait, in create-nextblock.js we piped 'y\n'.
+  // In deploy-supabase.js we are using inherit stdio, so it might prompt if strictly necessary, but usually db push to remote is fine unless destructive.
+  // However, I previously wrote `npx supabase db push ...` and it seemed fine.
+
+  // Re-reading previous script: runCommand used `execSync(command, { stdio: 'inherit' });`
+
+  // Let's stick to the previous working command.
+
+  console.log(
+    `${colors.green}⚙️  Pushing Supabase config (Site URL: ${process.env.NEXT_PUBLIC_URL})...${colors.reset}`,
+  );
+  runCommand(`npx supabase config push ${workDirFlag}`);
+
+  console.log(`${colors.green}✅ Supabase deployment complete!${colors.reset}`);
+}
+
+deploy();