create-nextblock 0.9.5 → 0.9.6

package/package.json

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

package/templates/nextblock-template/app/api/process-image/route.ts

@@ -1,6 +1,6 @@
 // app/api/process-image/route.ts
 import { NextRequest, NextResponse } from 'next/server';
-import { getS3Client } from '@nextblock-cms/utils/server';
+import { getS3Client } from '@nextblock-cms/utils/server';
 import { GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3';
 import sharp from 'sharp';
 import { Readable } from 'stream';
@@ -54,13 +54,13 @@ export async function POST(request: NextRequest) {
 
 
   try {
-    const s3Client = await getS3Client();
-    if (!s3Client) {
-      console.error('R2 client is not configured. Check your R2 environment variables.');
-      return NextResponse.json({ error: 'Image processing is not configured on this server.' }, { status: 500 });
-    }
-
-    const { objectKey: originalObjectKey, contentType: originalContentType } = await request.json();
+    const s3Client = await getS3Client();
+    if (!s3Client) {
+      console.error('R2 client is not configured. Check your R2 environment variables.');
+      return NextResponse.json({ error: 'Image processing is not configured on this server.' }, { status: 500 });
+    }
+
+    const { objectKey: originalObjectKey, contentType: originalContentType } = await request.json();
 
     if (!originalObjectKey || !originalContentType) {
       return NextResponse.json({ error: 'Missing objectKey or contentType in request body.' }, { status: 400 });
@@ -127,7 +127,11 @@ export async function POST(request: NextRequest) {
         .toFormat(TARGET_FORMAT, { quality: 75 }) // Adjust quality as needed
         .toBuffer();
       
-      const newObjectKey = `${baseName}_${size.label}.${TARGET_FORMAT}`;
+      // size.label keeps its '_avif' suffix as the stored variantLabel (used for
+      // variant selection), but it's redundant in the filename since the extension is
+      // already .avif — strip it so keys read `..._large.avif`, not `..._large_avif.avif`.
+      const fileSuffix = size.label.replace(/_avif$/, '');
+      const newObjectKey = `${baseName}_${fileSuffix}.${TARGET_FORMAT}`;
       const newPublicUrl = `${R2_PUBLIC_URL_BASE}/${newObjectKey}`;
 
       const putObjectParams = {

package/templates/nextblock-template/app/cms/components/ContentLanguageSwitcher.tsx

@@ -67,7 +67,13 @@ export default function ContentLanguageSwitcher({
         .eq('translation_group_id', currentItem.translation_group_id);
 
       if (error) {
-        console.error(`Error fetching translations for ${itemType} group ${currentItem.translation_group_id}:`, error);
+        // Surface a useful message: a network "Failed to fetch" (e.g. the browser
+        // Supabase client before the runtime public env is in place) serializes to {},
+        // so log the message/code explicitly.
+        console.error(
+          `Error fetching translations for ${itemType} group ${currentItem.translation_group_id}:`,
+          error.message || error.code || JSON.stringify(error),
+        );
         setTranslations([]);
       } else if (data) {
         const mappedTranslations = data.map(item => {
@@ -116,17 +122,17 @@ export default function ContentLanguageSwitcher({
 
           // Link to create new translation if it doesn't exist
           // This requires a more complex "create translation" flow or pre-created placeholders
-          const tableMap = {
-            'page': 'pages',
-            'post': 'posts',
-            'product': 'products'
-          };
-          const baseUrl = `/cms/${tableMap[itemType]}`;
-          const editUrl = version
-            ? `${baseUrl}/${version.id}/edit`
-            : itemType === 'product'
-              ? `${baseUrl}/${currentItemAny.id}/edit?missing_lang_id=${lang.id}`
-              : `${baseUrl}/new?from_group=${currentItemAny.translation_group_id}&target_lang_id=${lang.id}&base_slug=${currentItemAny.slug}`; // Example URL for creating new translation
+          const tableMap = {
+            'page': 'pages',
+            'post': 'posts',
+            'product': 'products'
+          };
+          const baseUrl = `/cms/${tableMap[itemType]}`;
+          const editUrl = version
+            ? `${baseUrl}/${version.id}/edit`
+            : itemType === 'product'
+              ? `${baseUrl}/${currentItemAny.id}/edit?missing_lang_id=${lang.id}`
+              : `${baseUrl}/new?from_group=${currentItemAny.translation_group_id}&target_lang_id=${lang.id}&base_slug=${currentItemAny.slug}`; // Example URL for creating new translation
 
           if (version) {
             return (
@@ -160,4 +166,4 @@ export default function ContentLanguageSwitcher({
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+}

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

@@ -8,6 +8,7 @@ import { DeferredCartDrawer } from '../components/DeferredCartDrawer';
 import { CURRENCY_COOKIE_NAME } from '@nextblock-cms/ecommerce/currency-constants';
 import { ToasterProvider } from './ToasterProvider';
 import { AppShell } from '../components/AppShell';
+import { PublicEnvBootstrap } from '../components/PublicEnvBootstrap';
 import { ConsentGatedAnalytics } from '../components/privacy/ConsentGatedAnalytics';
 import { ConsentBanner } from '../components/privacy/ConsentBanner';
 import { getPrivacySettings } from '../lib/privacy/settings';
@@ -447,21 +448,13 @@ export default async function RootLayout({
     ? (await import('@vercel/toolbar/next')).VercelToolbar
     : null;
 
-  // Expose the PUBLIC Supabase values (url + anon key — both safe to ship to the
-  // browser) at runtime. In production the client uses the build-time-inlined
-  // NEXT_PUBLIC_* and ignores this; it only matters in local dev, where the wizard
-  // writes those vars at runtime and the already-loaded browser bundle would otherwise
-  // hold stale empties until a dev-server restart. Read from server process.env here,
-  // so it's always fresh.
-  const publicEnvBootstrap = (() => {
-    const url = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
-    const anonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
-    if (!url || !anonKey) return '';
-    return `window.__NEXTBLOCK_PUBLIC_ENV__=${JSON.stringify({ url, anonKey }).replace(
-      /</g,
-      '\\u003c',
-    )};`;
-  })();
+  // Expose the PUBLIC Supabase values (url + anon key — both safe to ship to the browser)
+  // to the client at runtime via <PublicEnvBootstrap>. In production the client uses the
+  // build-time-inlined NEXT_PUBLIC_* and these just match; it only matters in local dev,
+  // where the wizard writes those vars at runtime and the loaded bundle would otherwise
+  // hold stale empties until a dev-server restart. Read from server process.env (fresh).
+  const publicSupabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
+  const publicSupabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
 
   return (
     <html lang={serverDeterminedLocale} suppressHydrationWarning>
@@ -470,14 +463,13 @@ export default async function RootLayout({
         {globalCss && <style dangerouslySetInnerHTML={{ __html: globalCss }} />}
       </head>
       <body className="min-h-screen">
-        {publicEnvBootstrap && (
-          <Script
-            id="nextblock-public-env"
-            strategy={TRUSTED_TYPES_SCRIPT_STRATEGY}
-            nonce={nonce}
-            dangerouslySetInnerHTML={{ __html: publicEnvBootstrap }}
-          />
-        )}
+        {/* Sets window.__NEXTBLOCK_PUBLIC_ENV__ synchronously during render, before any
+            descendant calls the browser Supabase client — the local-dev runtime fallback. */}
+        <PublicEnvBootstrap
+          url={publicSupabaseUrl}
+          anonKey={publicSupabaseAnonKey}
+          r2Base={process.env.NEXT_PUBLIC_R2_BASE_URL || ''}
+        />
         {/* In development this loads after hydration to avoid browser-hidden nonce comparisons. */}
         <Script
           id="trusted-types-bootstrap"

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

@@ -65,7 +65,7 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
             <TranslationBridge translations={translations}>
               <ThemeProvider
                 attribute="class"
-                defaultTheme="system"
+                defaultTheme="light"
                 enableSystem
                 disableTransitionOnChange
                 nonce={nonce}

package/templates/nextblock-template/app/setup/SetupWizard.tsx

@@ -182,8 +182,12 @@ export default function SetupWizard({
       put('R2_BUCKET_NAME', storage.bucket);
       put('R2_ACCESS_KEY_ID', storage.accessKeyId);
       put('R2_SECRET_ACCESS_KEY', storage.secretAccessKey);
+      // Both must hold the bucket's public read URL: image src is built from
+      // NEXT_PUBLIC_R2_BASE_URL, while next.config remotePatterns + CSP read
+      // NEXT_PUBLIC_R2_PUBLIC_URL. The wizard collects one URL and writes it to both
+      // (baseUrl only differs if a channel prefilled a separate custom domain).
       put('NEXT_PUBLIC_R2_PUBLIC_URL', storage.publicUrl);
-      put('NEXT_PUBLIC_R2_BASE_URL', storage.baseUrl);
+      put('NEXT_PUBLIC_R2_BASE_URL', storage.baseUrl || storage.publicUrl);
       put('SMTP_HOST', smtp.host);
       put('SMTP_PORT', smtp.port);
       put('SMTP_USER', smtp.user);
@@ -734,21 +738,19 @@ function StorageStep({
             onChange={(e) => setStorage({ ...storage, secretAccessKey: e.target.value })}
           />
         </Field>
-        <Field label="Public URL" htmlFor="r2Public">
-          <Input
-            id="r2Public"
-            value={storage.publicUrl}
-            onChange={(e) => setStorage({ ...storage, publicUrl: e.target.value })}
-          />
-        </Field>
-        <Field label="Custom domain (optional)" htmlFor="r2Base">
-          <Input
-            id="r2Base"
-            value={storage.baseUrl}
-            onChange={(e) => setStorage({ ...storage, baseUrl: e.target.value })}
-          />
-        </Field>
       </div>
+      <Field label="Public bucket URL" htmlFor="r2Public">
+        <Input
+          id="r2Public"
+          placeholder="https://pub-xxxx.r2.dev"
+          value={storage.publicUrl}
+          onChange={(e) => setStorage({ ...storage, publicUrl: e.target.value })}
+        />
+        <p className="mt-1 text-xs text-muted-foreground">
+          Your bucket&apos;s public URL (Cloudflare R2 → your bucket → Public Development URL)
+          or a custom domain. Used to serve all media on your site.
+        </p>
+      </Field>
     </div>
   );
 }

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

@@ -0,0 +1,30 @@
+'use client';
+
+// Makes the PUBLIC Supabase values available to the browser at runtime via a global,
+// set SYNCHRONOUSLY during render (before any descendant calls the browser createClient).
+//
+// Why: NEXT_PUBLIC_* are inlined into the client bundle at build time. On a fresh local
+// dev setup the dev server starts with no env, so the loaded bundle holds empties; the
+// /setup wizard then writes the env at runtime. Browser-side readers (the Supabase client,
+// env checks, and resolveMediaUrl's R2 base) read `process.env.NEXT_PUBLIC_* ||
+// window.__NEXTBLOCK_PUBLIC_ENV__`, so this fills the gap without a dev-server restart. In
+// production the inlined values win and these props just match them (a harmless no-op). All
+// of these (Supabase url + anon key, R2 public base) are public values (safe to ship).
+//
+// This runs at render time (not in an effect, and not via a nonce'd <script> that could
+// be deferred/blocked in dev), so the global is set before sibling/descendant components
+// render. It's mounted in the root layout, so the value persists across client navigations.
+type PublicEnv = { url: string; anonKey: string; r2Base?: string };
+
+declare global {
+  interface Window {
+    __NEXTBLOCK_PUBLIC_ENV__?: PublicEnv;
+  }
+}
+
+export function PublicEnvBootstrap({ url, anonKey, r2Base }: PublicEnv) {
+  if (typeof window !== 'undefined' && url && anonKey) {
+    window.__NEXTBLOCK_PUBLIC_ENV__ = { url, anonKey, r2Base };
+  }
+  return null;
+}

package/templates/nextblock-template/lib/media/resolveMediaUrl.ts

@@ -20,7 +20,15 @@ const BUNDLED_PUBLIC_MEDIA_KEYS = new Set([
 
 export function resolveMediaUrl(
   objectKey?: string | null,
-  baseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL || ''
+  // On the client, NEXT_PUBLIC_R2_BASE_URL is inlined at build time, so a fresh-clone
+  // dev bundle built with no env holds an empty string; fall back to the runtime value
+  // injected by <PublicEnvBootstrap> (window.__NEXTBLOCK_PUBLIC_ENV__.r2Base). On the
+  // server, process.env is always current and the window branch is skipped.
+  baseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL ||
+    (typeof window !== 'undefined'
+      ? (window as { __NEXTBLOCK_PUBLIC_ENV__?: { r2Base?: string } })
+          .__NEXTBLOCK_PUBLIC_ENV__?.r2Base || ''
+      : '')
 ) {
   if (!objectKey) return null;
 

package/templates/nextblock-template/lib/setup/schema-apply.ts

@@ -141,6 +141,19 @@ const TRACKING_DDL =
   'create table if not exists supabase_migrations.schema_migrations ' +
   '(version text primary key, name text, statements text[]);';
 
+// Re-grant the Supabase API roles on everything in `public` after all migrations run.
+// Migration 06 grants ON ALL TABLES, but only covers tables that exist at that point;
+// later migrations (e.g. content_drafts in 14) rely on the schema's DEFAULT PRIVILEGES,
+// which a `DROP SCHEMA public CASCADE` reset wipes. This final, idempotent pass mirrors
+// migration 06's grants over the FINAL table set, so no table is left ungranted
+// ("permission denied"). RLS still governs row access on top of these base grants.
+const GRANTS_SQL =
+  'grant usage on schema public to anon, authenticated, service_role;' +
+  'grant select on all tables in schema public to anon;' +
+  'grant all on all tables in schema public to authenticated, service_role;' +
+  'grant all on all sequences in schema public to anon, authenticated, service_role;' +
+  'grant execute on all functions in schema public to anon, authenticated, service_role;';
+
 function recordSql(version: string, file: string): string {
   return (
     `insert into supabase_migrations.schema_migrations (version, name) ` +
@@ -300,6 +313,7 @@ async function applyViaManagementApi(
       applied += 1;
     }
 
+    await run(GRANTS_SQL);
     await run("notify pgrst, 'reload schema';");
     return { ok: true, applied };
   } catch (caught) {
@@ -349,9 +363,8 @@ async function applyViaPostgres(
       applied += 1;
     }
 
-    if (applied > 0) {
-      await db.unsafe("notify pgrst, 'reload schema';");
-    }
+    await db.unsafe(GRANTS_SQL);
+    await db.unsafe("notify pgrst, 'reload schema';");
     return { ok: true, applied };
   } catch (caught) {
     const message =

package/templates/nextblock-template/next.config.js

@@ -151,6 +151,19 @@ function getRemotePatterns() {
   /** @type {RemotePattern[]} */
   const patterns = [];
 
+  // Well-known media/storage providers, allowlisted by wildcard. next.config.js is
+  // evaluated once at server start and is NOT re-read when .env.local changes, so on a
+  // fresh install (the /setup wizard writes the R2/storage env at runtime) the exact
+  // env-derived hosts below would be missing until a dev-server restart — which made
+  // next/image hard-crash with "hostname ... is not configured". These static patterns
+  // cover the common buckets (Cloudflare R2 public + S3 endpoints, Supabase Storage)
+  // regardless of env timing. Custom domains are still picked up from env below.
+  patterns.push(
+    { protocol: 'https', hostname: '**.r2.dev', pathname: '/**' },
+    { protocol: 'https', hostname: '**.r2.cloudflarestorage.com', pathname: '/**' },
+    { protocol: 'https', hostname: '**.supabase.co', pathname: '/**' },
+  );
+
   // Add R2 Bucket URL if authenticated
   if (process.env.NEXT_PUBLIC_R2_PUBLIC_URL) {
     try {

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "private": true,
   "scripts": {
     "dev": "next dev",