create-nextblock 0.2.77 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.77",
+  "version": "0.8.0",
   "description": "",
   "main": "index.js",
   "bin": {
@@ -23,7 +23,6 @@
     "execa": "^9.3.0",
     "fs-extra": "^11.3.2",
     "inquirer": "^12.10.0",
-    "open": "^10.1.0",
     "ora": "^8.0.1",
     "picocolors": "^1.1.1"
   }

package/scripts/sync-template.js

@@ -11,6 +11,7 @@ const PROJECT_ROOT = resolve(__dirname, '..');
 const SOURCE_DIR = resolve(PROJECT_ROOT, '../nextblock');
 const TARGET_DIR = resolve(PROJECT_ROOT, 'templates/nextblock-template');
 const REPO_ROOT = resolve(PROJECT_ROOT, '..', '..');
+const ROOT_DOCS_DIR = resolve(REPO_ROOT, 'docs');
 const ROOT_PACKAGE_JSON = resolve(REPO_ROOT, 'package.json');
 const UI_GLOBALS_SOURCE = resolve(
   PROJECT_ROOT,
@@ -87,6 +88,7 @@ async function ensureTemplateSync() {
   await ensureTemplateGitignore();
   await ensureGlobalStyles();
   await ensureClientTranslations();
+  await ensureDocsSync();
   await sanitizeBlockEditorImports();
   await sanitizeUiImports();
   await ensureUiProxies();
@@ -116,7 +118,7 @@ async function ensureEnvExample() {
     }
   }
 
-  const placeholder = `# Environment variables for NextBlock CMS
+  const placeholder = `# Environment variables for NextBlock™ CMS
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 SUPABASE_SERVICE_ROLE_KEY=
@@ -127,6 +129,21 @@ NEXT_PUBLIC_URL=http://localhost:3000
   await fs.writeFile(destination, placeholder);
 }
 
+async function ensureDocsSync() {
+  const destination = resolve(TARGET_DIR, 'docs');
+  console.log(
+    chalk.blue(
+      `Syncing docs from ${chalk.bold(relative(PROJECT_ROOT, ROOT_DOCS_DIR))}`,
+    ),
+  );
+
+  await fs.emptyDir(destination);
+  await fs.copy(ROOT_DOCS_DIR, destination, {
+    dereference: true,
+    filter: (src) => !src.includes('node_modules'),
+  });
+}
+
 async function ensureTemplateGitignore() {
   const destination = resolve(TARGET_DIR, 'gitignore'); // Rename to gitignore
   const content = `.DS_Store

package/templates/nextblock-template/.browserslistrc

@@ -0,0 +1,11 @@
+chrome >= 109
+edge >= 109
+firefox >= 115
+safari >= 15.4
+ios_saf >= 15.4
+and_chr >= 109
+and_ff >= 115
+samsung >= 21
+opera >= 95
+not dead
+not op_mini all

package/templates/nextblock-template/.swcrc

@@ -1,30 +1,30 @@
-{
-  "jsc": {
-    "target": "es2017",
-    "parser": {
-      "syntax": "typescript",
-      "decorators": true,
-      "dynamicImport": true
-    },
-    "transform": {
-      "decoratorMetadata": true,
-      "legacyDecorator": true
-    },
-    "keepClassNames": true,
-    "externalHelpers": true,
-    "loose": true
-  },
-  "module": {
-    "type": "commonjs"
-  },
-  "sourceMaps": true,
-  "exclude": [
-    "jest.config.ts",
-    ".*\\.spec.tsx?$",
-    ".*\\.test.tsx?$",
-    "./src/jest-setup.ts$",
-    "./**/jest-setup.ts$",
-    ".*.js$",
-    ".*.d.ts$"
-  ]
-}
+{
+  "jsc": {
+    "target": "es2022",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "commonjs"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$",
+    ".*.d.ts$"
+  ]
+}

package/templates/nextblock-template/README.md

@@ -1,125 +1,34 @@
-# Next.js 16 & Supabase - Ultra-Fast CMS Template
+# apps/nextblock
 
-This project is a starter template for building an ultra-fast, localized, block-based Content Management System (CMS) using Next.js 16 (App Router), Supabase for the backend (PostgreSQL, Auth, Storage via R2), Tailwind CSS for styling, and shadcn/ui for components.
+`apps/nextblock` is the canonical NextBlock™ application. It contains:
 
-It features:
+- the public site
+- the authenticated CMS
+- checkout and webhook routes
+- cron routes
+- the route tree used as the source for the scaffold template
 
-- Role-Based Access Control (Admin, Writer, User)
-- Internationalization (i18n) with client-side language switching on single URLs
-- Block-based content editor for Pages and Posts
-- Media uploads to Cloudflare R2 with a Media Library
-- Static Site Generation (SSG) with Incremental Static Regeneration (ISR) for public-facing content
-- On-demand revalidation via Supabase Database Webhooks
+If you are trying to understand current runtime behavior, start here before you
+look at generated template output.
 
-## Features Implemented (Phases 1-6)
+## Related Docs
 
-- **Authentication & Authorization (Phase 1):** User roles (ADMIN, WRITER, USER), profiles table linked to `auth.users`, Row Level Security (RLS) on tables, Next.js middleware for route protection, and client-side auth context.
-- **Internationalization (Phase 2):** `languages` table in Supabase, client-side language switching using `LanguageContext` without URL path changes (e.g., `/about-us` serves content based on selected language), and auto-creation of localized placeholder content.
-- **CMS Schema & Core CRUD (Phase 3):** Database tables for `pages`, `posts`, `media`, `blocks`, `navigation_items`. CRUD UIs and server actions for managing Pages, Posts, Navigation Items, Users (role changes), and Languages.
-- **Block-Based Content Builder (Phase 4):** Dynamic block system for Pages (and Posts), UI for adding, editing (basic forms), deleting, and drag-and-drop reordering of content blocks.
-- **Rich Text & Media (Phase 5):** Tiptap rich text editor integrated into "Text" blocks, image insertion from Media Library into Tiptap, and media uploads to Cloudflare R2 with a Media Library UI (upload, view, delete, edit metadata).
-- **SSG & Revalidation (Phase 6):** Static generation of public pages/posts (default language), client-side content fetching for language changes, `generateStaticParams`, `generateMetadata`, and on-demand revalidation via Supabase Database Webhooks calling a Next.js API route.
+- [Project Overview](../../docs/01-PROJECT-OVERVIEW.md)
+- [Ecommerce Capabilities](../../docs/02-ECOMMERCE-CAPABILITIES.md)
+- [CMS and Editor](../../docs/03-CMS-AND-EDITOR.md)
+- [Database and Auth](../../docs/04-DATABASE-AND-AUTH.md)
+- [Developer Guide](../../docs/05-DEVELOPER-GUIDE.md)
+- [CLI and Scaffolding](../../docs/06-CLI-AND-SCAFFOLDING.md)
 
-## 🚀 Getting Started
+## Common Workflows
 
-The fastest way to start a new project is with our interactive setup wizard.
+From the repo root:
 
 ```bash
-npm create nextblock@latest
+npx nx serve nextblock
+npx nx build nextblock
+npx nx lint nextblock --skip-nx-cache
 ```
 
-This command will:
-
-1.  Scaffold a new NextBlock project.
-2.  Guide you through Supabase and Cloudflare R2 configuration.
-3.  Set up your local environment variables automatically.
-
-### Manual Setup
-
-If you are contributing to the core repo or prefer manual setup:
-
-1.  **Clone the repo:**
-
-    ```bash
-    git clone https://github.com/nextblock-cms/nextblock.git
-    cd nextblock
-    ```
-
-2.  **Install dependencies:**
-
-    ```bash
-    npm install
-    ```
-
-3.  **Setup Environment:**
-    Copy `.env.exemple` to `apps/nextblock/.env.local` and fill in your Supabase/R2 credentials.
-
-4.  **Run the Dev Server:**
-
-    ```bash
-    nx serve nextblock
-    ```
-
-5.  **Initial Admin User Setup:**
-    - Sign up for a new user account through the application's sign-up page.
-    - After signing up and verifying the email, you'll need to manually update this user's role to `ADMIN` in the Supabase `profiles` table.
-
-6.  **Shadcn/UI Styling (Optional):**
-    - This template comes with the default shadcn/ui style initialized. If you want to customize the theme or use a different base color, you can delete `components.json` and re-initialize shadcn/ui following their [official documentation](https://ui.shadcn.com/docs/installation/next).
-
-## Project Structure Highlights
-
-- `app/`: Next.js App Router.
-  - `app/(auth-pages)/`: Routes for sign-in, sign-up, etc.
-  - `app/cms/`: CMS admin panel routes and layouts.
-    - `app/cms/[entity]/`: CRUD pages for different content types (pages, posts, media, users, navigation, languages).
-    - `app/cms/blocks/`: Components and actions related to the block editor.
-  - `app/[slug]/`: Dynamic route for public "Pages".
-  - `app/article/[slug]/`: Dynamic route for public "Articles".
-  - `app/api/`: API routes (e.g., for revalidation, R2 pre-signed URLs).
-- `components/`: Shared UI components (shadcn/ui based).
-  - `components/ui/`: shadcn/ui components.
-- `context/`: React Context providers (e.g., `AuthContext`, `LanguageContext`).
-- `lib/`: Utility functions and configurations.
-  - `lib/cloudflare/`: Client for Cloudflare R2.
-- `utils/supabase/`: Supabase client setup, types, and middleware helpers.
-- `supabase/migrations/`: SQL database migrations.
-
-## Documentation
-
-For a deeper understanding of the CMS's internal workings, please refer to the detailed documentation:
-
-- **[CMS Application Overview](./docs/cms-application-overview.md):** A high-level guide to the Next.js application structure, core modules, and key functionalities.
-- **[Block Editor Architecture](./docs/cms-architecture-overview.md):** A technical deep-dive into the architecture of the block-based content editor.
-
-## Deployment
-
-This project is optimized for deployment on [Vercel](https://vercel.com/).
-
-1.  Push your code to a GitHub/GitLab/Bitbucket repository.
-2.  Import the project into Vercel.
-3.  **Configure Environment Variables in Vercel:**
-    - Add all the environment variables from your `.env.local` file to your Vercel project settings (Project Settings -> Environment Variables). This includes Supabase keys, R2 keys, `NEXT_PUBLIC_SITE_URL` (set to your production domain), and `REVALIDATE_SECRET_TOKEN`.
-4.  Vercel will automatically build and deploy your Next.js application.
-5.  Ensure your Supabase Database Webhooks are pointing to your production Next.js API endpoint for revalidation.
-
-## Database Backup
-
-This project includes a simple script to backup your Supabase PostgreSQL database.
-
-**Requirements:**
-
-- You must have the PostgreSQL command-line tools (`pg_dump`) installed and available in your system's PATH.
-
-**Usage:**
-To create a backup, run the following command from your project root:
-
-```bash
-npm run db:backup
-```
-
-This command will generate a timestamped SQL dump file and save it to the `backup/` directory.
-
-## Feedback and Issues
-
-Please file feedback and issues on the GitHub repository for this project.
+Use the root docs for architecture and workflow details instead of maintaining a
+second app-specific guide here.

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

@@ -1,28 +1,27 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
-
-export default function PostSignIn() {
-  const searchParams = useSearchParams();
-  const redirectTo = searchParams.get('redirect_to');
-
-  useEffect(() => {
-    if (redirectTo) {
-      window.location.href = redirectTo;
-    } else {
-      window.location.href = '/';
-    }
-  }, [redirectTo]);
-
-  return (
-    <div className="flex justify-center items-center h-full w-full py-20">
-      <div className="relative">
-        <div className="h-16 w-16 rounded-full border-t-4 border-b-4 border-primary animate-spin"></div>
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-10 w-10 rounded-full bg-background"></div>
-        </div>
-      </div>
-    </div>
-  );
-}
+import { createClient } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+import { resolvePostAuthRedirect } from '../../../lib/auth-redirects';
+
+export default async function PostSignIn({
+  searchParams,
+}: {
+  searchParams: Promise<{ redirect_to?: string }>;
+}) {
+  const params = await searchParams;
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect('/sign-in');
+  }
+
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('role, full_name')
+    .eq('id', user.id)
+    .single();
+
+  redirect(resolvePostAuthRedirect(profile ?? null, params.redirect_to));
+}

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

@@ -3,8 +3,7 @@
 import { signInAction } from "../../actions";
 import { FormMessage, Message } from "../../../components/form-message";
 import { SubmitButton } from "../../../components/submit-button";
-import { Input } from "@nextblock-cms/ui";
-import { Label } from "@nextblock-cms/ui";
+import { Input, Label } from "@nextblock-cms/ui";
 import Link from "next/link";
 import { useTranslations } from "@nextblock-cms/utils";
 import { useSearchParams } from "next/navigation";
@@ -27,13 +26,16 @@ function getMessage(searchParams: URLSearchParams): Message | undefined {
     return undefined;
 }
 
+import { GitHubLoginButton } from "../../../components/GitHubLoginButton";
+
 export default function Login() {
   const { t } = useTranslations();
   const searchParams = useSearchParams();
   const formMessage = getMessage(searchParams);
+  const redirectParam = searchParams.get('redirect');
 
   return (
-    <form className="flex-1 flex flex-col w-full max-w-160 mx-auto">
+    <div 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">
@@ -42,29 +44,52 @@ export default function Login() {
           {t('sign_up')}
         </Link>
       </p>
-      <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
-        <Label htmlFor="email">{t('email')}</Label>
-        <Input name="email" placeholder={t('you_at_example_com')} required />
-        <div className="flex justify-between items-center">
-          <Label htmlFor="password">{t('password')}</Label>
-          <Link
-            className="text-xs text-foreground underline"
-            href="/forgot-password"
-          >
-            {t('forgot_password')}
-          </Link>
+
+      <div className="flex flex-col gap-2 mt-8">
+        <GitHubLoginButton t={t} redirectTo={redirectParam || undefined} />
+
+        <div className="relative py-2">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">{t('or_continue_with') || "Or continue with"}</span>
+          </div>
         </div>
-        <Input
-          type="password"
-          name="password"
-          placeholder={t('your_password')}
-          required
-        />
-        <SubmitButton pendingText={t('signing_in_pending')} formAction={signInAction}>
-          {t('sign_in')}
-        </SubmitButton>
-        <FormMessage message={formMessage} />
+
+        <form className="flex flex-col gap-2 [&>input]:mb-3">
+          {redirectParam && <input type="hidden" name="redirect" value={redirectParam} />}
+          <Label htmlFor="email">{t('email')}</Label>
+          <Input name="email" placeholder={t('you_at_example_com')} required />
+          <div className="flex justify-between items-center">
+            <Label htmlFor="password">{t('password')}</Label>
+            {process.env.NEXT_PUBLIC_IS_SANDBOX !== 'true' && <Link
+              className="text-xs text-foreground underline"
+              href="/forgot-password"
+            >
+              {t('forgot_password')}
+            </Link>}
+          </div>
+          <Input
+            type="password"
+            name="password"
+            placeholder={t('your_password')}
+            required
+          />
+          <label className="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
+            <input
+              type="checkbox"
+              name="remember_device"
+              className="h-4 w-4 rounded border-input accent-primary"
+            />
+            {t('remember_this_device') || 'Remember this device'}
+          </label>
+          <SubmitButton pendingText={t('signing_in_pending')} formAction={signInAction}>
+            {t('sign_in')}
+          </SubmitButton>
+          <FormMessage message={formMessage} />
+        </form>
       </div>
-    </form>
+    </div>
   );
 }

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

@@ -1,15 +1,16 @@
-'use client';
-
-import { signUpAction } from "../../actions";
-import { FormMessage, Message } from "../../../components/form-message";
-import { SubmitButton } from "../../../components/submit-button";
-import { Input } from "@nextblock-cms/ui";
-import { Label } from "@nextblock-cms/ui";
-import Link from "next/link";
-import { useTranslations } from "@nextblock-cms/utils";
-import { useSearchParams } from "next/navigation";
-
-import { SandboxCredentialsAlert } from "../../../components/SandboxCredentialsAlert";
+'use client';
+
+import { signUpAction } from "../../actions";
+import { FormMessage, Message } from "../../../components/form-message";
+import { SubmitButton } from "../../../components/submit-button";
+import { Button, Input, Label } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { useTranslations } from "@nextblock-cms/utils";
+import { useSearchParams } from "next/navigation";
+import { GitHubLoginButton } from "../../../components/GitHubLoginButton";
+import { ArrowRight, CheckCircle2, Mail } from "lucide-react";
+
+import { SandboxCredentialsAlert } from "../../../components/SandboxCredentialsAlert";
 
 function getMessage(searchParams: URLSearchParams): Message | undefined {
     if (searchParams.has('error')) {
@@ -27,47 +28,101 @@ function getMessage(searchParams: URLSearchParams): Message | undefined {
     return undefined;
 }
 
-export default function Signup() {
-  const { t } = useTranslations();
-  const searchParams = useSearchParams();
-  const formMessage = getMessage(searchParams);
-
-  if (formMessage && 'message' in formMessage) {
-    return (
-      <div className="w-full flex-1 flex items-center h-screen sm:max-w-md justify-center gap-2 p-4">
-        <FormMessage message={formMessage} />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <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')}{" "}
-          <Link className="text-primary font-medium underline" href="/sign-in">
-            {t('sign_in')}
-          </Link>
-        </p>
-        <div className="flex flex-col gap-2 [&>input]:mb-3 mt-8">
-          <Label htmlFor="email">{t('email')}</Label>
-          <Input name="email" placeholder={t('you_at_example_com')} required />
-          <Label htmlFor="password">{t('password')}</Label>
-          <Input
-            type="password"
-            name="password"
-            placeholder={t('your_password')}
-            minLength={6}
-            required
-          />
-          <SubmitButton formAction={signUpAction} pendingText={t('signing_up_pending')}>
-            {t('sign_up')}
-          </SubmitButton>
-          <FormMessage message={formMessage} />
-        </div>
-      </form>
-    </>
-  );
-}
+export default function Signup() {
+  const { t } = useTranslations();
+  const searchParams = useSearchParams();
+  const formMessage = getMessage(searchParams);
+  const successKey = searchParams.get('success');
+
+  if (successKey) {
+    return (
+      <div className="flex-1 flex flex-col w-full max-w-160 mx-auto">
+        <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 text-primary">
+          <CheckCircle2 className="h-5 w-5" />
+        </div>
+        <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+          {t('auth.signup_success_badge')}
+        </p>
+        <h1 className="mt-3 text-2xl font-medium">{t('auth.signup_success_title')}</h1>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
+          {t(successKey)}
+        </p>
+
+        <div className="mt-8 rounded-lg border p-5">
+          <div className="flex items-start gap-3">
+            <div className="mt-0.5 rounded-full bg-muted p-2 text-muted-foreground">
+              <Mail className="h-4 w-4" />
+            </div>
+            <div className="space-y-3 text-sm text-muted-foreground">
+              <p>{t('auth.signup_success_step_confirm')}</p>
+              <p>{t('auth.signup_success_step_profile')}</p>
+              <p>{t('auth.signup_success_step_spam')}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+          <Button asChild>
+            <Link href="/sign-in">
+              {t('auth.back_to_sign_in')}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+          <Button asChild variant="outline">
+            <Link href="/sign-up">{t('auth.signup_use_different_email')}</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col w-full max-w-160 mx-auto">
+      <form className="flex flex-col">
+        <SandboxCredentialsAlert />
+        <h1 className="text-2xl font-medium">{t('sign_up')}</h1>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
+          {t('auth.signup_form_description')}
+        </p>
+        <p className="text-sm text-foreground">
+          {t('already_have_account')}{" "}
+          <Link className="text-foreground font-medium underline" href="/sign-in">
+            {t('sign_in')}
+          </Link>
+        </p>
+
+        <div className="mt-8 flex flex-col gap-2">
+          <GitHubLoginButton t={t} redirectTo="/profile" />
+
+          <div className="relative py-2">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-background px-2 text-muted-foreground">
+                {t('or_continue_with') || "Or continue with"}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2 [&>input]:mb-3">
+            <Label htmlFor="email">{t('email')}</Label>
+            <Input name="email" placeholder={t('you_at_example_com')} required />
+            <Label htmlFor="password">{t('password')}</Label>
+            <Input
+              type="password"
+              name="password"
+              placeholder={t('your_password')}
+              minLength={6}
+              required
+            />
+            <SubmitButton formAction={signUpAction} pendingText={t('signing_up_pending')}>
+              {t('sign_up')}
+            </SubmitButton>
+            <FormMessage message={formMessage} />
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}