create-nextblock 0.16.4 → 0.17.0

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

@@ -1,10 +1,10 @@
 // components/Header.tsx
-import type { Database } from '@nextblock-cms/db';
-import HeaderAuth from './header-auth';
-import LanguageSwitcher from './LanguageSwitcher';
-import ResponsiveNav from './ResponsiveNav';
-import { CartIcon } from '@nextblock-cms/ecommerce/components/CartIcon';
-import { CurrencySwitcher } from '@nextblock-cms/ecommerce/components/CurrencySwitcher';
+import type { Database } from '@nextblock-cms/db';
+import HeaderAuth from './header-auth';
+import LanguageSwitcher from './LanguageSwitcher';
+import ResponsiveNav from './ResponsiveNav';
+import { CartIcon } from '@nextblock-cms/ecommerce/components/CartIcon';
+import { CurrencySwitcher } from '@nextblock-cms/ecommerce/components/CurrencySwitcher';
 
 type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
 type Logo =
@@ -12,39 +12,39 @@ type Logo =
     media: (Database['public']['Tables']['media']['Row'] & { alt_text: string | null }) | null;
   };
 
-interface HeaderProps {
-  navItems: NavigationItem[];
-  canAccessCms: boolean;
-  isDraftModeEnabled: boolean;
-  logo: Logo | null;
-  currentPageData?: { slug: string; translation_group_id: string | null };
-  siteTitle: string;
-  isEcommerceActive?: boolean;
-}
+interface HeaderProps {
+  navItems: NavigationItem[];
+  canAccessCms: boolean;
+  isDraftModeEnabled: boolean;
+  logo: Logo | null;
+  currentPageData?: { slug: string; translation_group_id: string | null };
+  siteTitle: string;
+  isEcommerceActive?: boolean;
+}
 
 export default function Header({
-  navItems,
-  canAccessCms,
-  isDraftModeEnabled,
-  logo,
-  currentPageData,
-  siteTitle,
-  isEcommerceActive = false,
-}: HeaderProps) {
+  navItems,
+  canAccessCms,
+  isDraftModeEnabled,
+  logo,
+  currentPageData,
+  siteTitle,
+  isEcommerceActive = false,
+}: HeaderProps) {
   return (
     <ResponsiveNav
-      homeLinkHref="/"
-      navItems={navItems}
-      canAccessCms={canAccessCms}
-      cmsDashboardLinkHref="/cms/dashboard"
-      isDraftModeEnabled={isDraftModeEnabled}
-      renderHeaderAuth={() => <HeaderAuth />}
-      renderLanguageSwitcher={() => <LanguageSwitcher currentPageData={currentPageData} />}
-      renderCurrencySwitcher={isEcommerceActive ? () => <CurrencySwitcher /> : undefined}
-      logo={logo}
-      siteTitle={siteTitle}
-      renderCartIcon={isEcommerceActive ? () => <CartIcon /> : undefined}
-      isEcommerceActive={isEcommerceActive}
-    />
-  );
-}
+      homeLinkHref="/"
+      navItems={navItems}
+      canAccessCms={canAccessCms}
+      cmsDashboardLinkHref="/cms/dashboard"
+      isDraftModeEnabled={isDraftModeEnabled}
+      renderHeaderAuth={() => <HeaderAuth />}
+      renderLanguageSwitcher={() => <LanguageSwitcher currentPageData={currentPageData} />}
+      renderCurrencySwitcher={isEcommerceActive ? () => <CurrencySwitcher /> : undefined}
+      logo={logo}
+      siteTitle={siteTitle}
+      renderCartIcon={isEcommerceActive ? () => <CartIcon /> : undefined}
+      isEcommerceActive={isEcommerceActive}
+    />
+  );
+}

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

@@ -1,30 +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;
-}
+'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/components/ResponsiveNav.tsx

@@ -4,17 +4,17 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import React, { useState, useEffect, useMemo, useRef } from 'react'
 import type { Database } from '@nextblock-cms/db' // Relative path from components/
-import { useCurrentContent } from '../context/CurrentContentContext';
-import { useTranslations } from '@nextblock-cms/utils';
-import { DeferredGlobalSearch } from './DeferredGlobalSearch';
-import { resolveMediaUrl } from '../lib/media/resolveMediaUrl';
+import { useCurrentContent } from '../context/CurrentContentContext';
+import { useTranslations } from '@nextblock-cms/utils';
+import { DeferredGlobalSearch } from './DeferredGlobalSearch';
+import { resolveMediaUrl } from '../lib/media/resolveMediaUrl';
 
 type Logo = Database['public']['Tables']['logos']['Row'] & { media: (Database['public']['Tables']['media']['Row'] & { alt_text: string | null }) | null };
 type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
-import Image from 'next/image'
-import { EyeOff, FilePenLine, Pencil } from 'lucide-react';
-
-const FALLBACK_LOGO_PATH = '/images/nextblock-logo-small.webp';
+import Image from 'next/image'
+import { EyeOff, FilePenLine, Pencil } from 'lucide-react';
+
+const FALLBACK_LOGO_PATH = '/images/nextblock-logo-small.webp';
 
 // Define a type for hierarchical navigation items
 interface HierarchicalNavigationItem extends NavigationItem {
@@ -317,12 +317,12 @@ export default function ResponsiveNav({
             href={homeLinkHref}
             className="flex items-center space-x-2 rtl:space-x-reverse"
           >
-            {logo && logo.media ? (
-              <Image
-                src={resolveMediaUrl(logo.media.object_key) || FALLBACK_LOGO_PATH}
-                alt={logo.media.alt_text || siteTitle || 'Nextblock'}
-                width={logo.media.width || 100}
-                height={logo.media.height || 32}
+            {logo && logo.media ? (
+              <Image
+                src={resolveMediaUrl(logo.media.object_key) || FALLBACK_LOGO_PATH}
+                alt={logo.media.alt_text || siteTitle || 'Nextblock'}
+                width={logo.media.width || 100}
+                height={logo.media.height || 32}
                 className="h-14 w-auto object-contain" style={{ width: 'auto', height: '56px' }}
                 priority
               />

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

@@ -1,182 +1,182 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from 'react';
-import Script from 'next/script';
-
-// Field names must match the server verifier in lib/botProtection/verify.ts.
-const HONEYPOT_FIELD = 'verification_secondary_email';
-const TURNSTILE_TOKEN_FIELD = 'cf-turnstile-response';
-const RECAPTCHA_TOKEN_FIELD = 'g-recaptcha-response';
-
-type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
-
-interface AuthBotProtectionProps {
-  provider: BotProtectionProvider;
-  siteKey: string;
-  scriptNonce?: string;
-}
-
-/**
- * Drop-in bot protection for auth forms. Renders inside a <form> and contributes:
- *  - an always-on honeypot field (catches naive bots with zero UX cost), and
- *  - the site-configured Turnstile / reCAPTCHA widget, writing its token into a
- *    hidden input so it submits with the surrounding form.
- *
- * It never intercepts submit: auth actions redirect on every outcome, so a failed
- * attempt reloads the page and remounts a fresh widget — no stale single-use tokens.
- */
-export function AuthBotProtection({ provider, siteKey, scriptNonce }: AuthBotProtectionProps) {
-  const turnstileRef = useRef<HTMLDivElement>(null);
-  const turnstileWidgetIdRef = useRef<string | null>(null);
-  const [turnstileToken, setTurnstileToken] = useState('');
-  const [recaptchaToken, setRecaptchaToken] = useState('');
-
-  const showTurnstile = provider === 'turnstile' && !!siteKey;
-  const showRecaptcha = provider === 'recaptcha' && !!siteKey;
-
-  // Turnstile: explicit managed render. The callback fires once the challenge is
-  // solved (usually automatically) and we stash the token in a hidden input.
-  useEffect(() => {
-    if (!showTurnstile || typeof window === 'undefined') return;
-
-    let widgetId: string | null = null;
-
-    const renderWidget = () => {
-      const turnstile = (window as any).turnstile;
-      if (!turnstile || !turnstileRef.current) return;
-      turnstileRef.current.innerHTML = '';
-      try {
-        widgetId = turnstile.render(turnstileRef.current, {
-          sitekey: siteKey,
-          theme: 'auto',
-          'response-field': false,
-          callback: (token: string) => setTurnstileToken(token),
-          'expired-callback': () => setTurnstileToken(''),
-          'error-callback': () => setTurnstileToken(''),
-          'timeout-callback': () => setTurnstileToken(''),
-        });
-        turnstileWidgetIdRef.current = widgetId;
-      } catch (err) {
-        console.error('Turnstile render error:', err);
-      }
-    };
-
-    if ((window as any).turnstile) {
-      renderWidget();
-    } else {
-      const interval = setInterval(() => {
-        if ((window as any).turnstile) {
-          clearInterval(interval);
-          renderWidget();
-        }
-      }, 100);
-      return () => clearInterval(interval);
-    }
-
-    return () => {
-      const turnstile = (window as any).turnstile;
-      if (widgetId && turnstile) {
-        try {
-          turnstile.remove(widgetId);
-        } catch {
-          // ignore
-        }
-      }
-      turnstileWidgetIdRef.current = null;
-    };
-  }, [showTurnstile, siteKey]);
-
-  // reCAPTCHA v3: invisible + score-based. Fetch a token on load and refresh it
-  // before the ~2min expiry so a token is always waiting when the user submits.
-  useEffect(() => {
-    if (!showRecaptcha || typeof window === 'undefined') return;
-
-    let cancelled = false;
-
-    const execute = () => {
-      const grecaptcha = (window as any).grecaptcha;
-      if (!grecaptcha?.execute) return;
-      grecaptcha.ready(() => {
-        grecaptcha
-          .execute(siteKey, { action: 'signup' })
-          .then((token: string) => {
-            if (!cancelled) setRecaptchaToken(token);
-          })
-          .catch(() => {
-            /* transient; the next refresh retries */
-          });
-      });
-    };
-
-    let readyPoll: ReturnType<typeof setInterval> | null = null;
-    if ((window as any).grecaptcha?.execute) {
-      execute();
-    } else {
-      readyPoll = setInterval(() => {
-        if ((window as any).grecaptcha?.execute) {
-          if (readyPoll) clearInterval(readyPoll);
-          readyPoll = null;
-          execute();
-        }
-      }, 200);
-    }
-
-    const refresh = setInterval(execute, 100_000);
-
-    return () => {
-      cancelled = true;
-      if (readyPoll) clearInterval(readyPoll);
-      clearInterval(refresh);
-    };
-  }, [showRecaptcha, siteKey]);
-
-  return (
-    <>
-      {showRecaptcha && (
-        <Script
-          strategy="lazyOnload"
-          src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
-          nonce={scriptNonce}
-        />
-      )}
-      {showTurnstile && (
-        <Script
-          strategy="afterInteractive"
-          src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
-          nonce={scriptNonce}
-        />
-      )}
-
-      {/* Invisible honeypot: a real user never sees or fills this; bots do. */}
-      <div
-        aria-hidden="true"
-        className="absolute w-0 h-0 overflow-hidden"
-        style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, zIndex: -1 }}
-      >
-        <label htmlFor={HONEYPOT_FIELD} className="sr-only">
-          Do not fill this field
-        </label>
-        <input
-          id={HONEYPOT_FIELD}
-          type="text"
-          name={HONEYPOT_FIELD}
-          tabIndex={-1}
-          autoComplete="off"
-        />
-      </div>
-
-      {showTurnstile && (
-        <div className="my-2 flex justify-start">
-          <input type="hidden" name={TURNSTILE_TOKEN_FIELD} value={turnstileToken} readOnly />
-          <div ref={turnstileRef} />
-        </div>
-      )}
-
-      {showRecaptcha && (
-        <input type="hidden" name={RECAPTCHA_TOKEN_FIELD} value={recaptchaToken} readOnly />
-      )}
-    </>
-  );
-}
-
-export default AuthBotProtection;
+"use client";
+
+import React, { useEffect, useRef, useState } from 'react';
+import Script from 'next/script';
+
+// Field names must match the server verifier in lib/botProtection/verify.ts.
+const HONEYPOT_FIELD = 'verification_secondary_email';
+const TURNSTILE_TOKEN_FIELD = 'cf-turnstile-response';
+const RECAPTCHA_TOKEN_FIELD = 'g-recaptcha-response';
+
+type BotProtectionProvider = 'none' | 'turnstile' | 'recaptcha';
+
+interface AuthBotProtectionProps {
+  provider: BotProtectionProvider;
+  siteKey: string;
+  scriptNonce?: string;
+}
+
+/**
+ * Drop-in bot protection for auth forms. Renders inside a <form> and contributes:
+ *  - an always-on honeypot field (catches naive bots with zero UX cost), and
+ *  - the site-configured Turnstile / reCAPTCHA widget, writing its token into a
+ *    hidden input so it submits with the surrounding form.
+ *
+ * It never intercepts submit: auth actions redirect on every outcome, so a failed
+ * attempt reloads the page and remounts a fresh widget — no stale single-use tokens.
+ */
+export function AuthBotProtection({ provider, siteKey, scriptNonce }: AuthBotProtectionProps) {
+  const turnstileRef = useRef<HTMLDivElement>(null);
+  const turnstileWidgetIdRef = useRef<string | null>(null);
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [recaptchaToken, setRecaptchaToken] = useState('');
+
+  const showTurnstile = provider === 'turnstile' && !!siteKey;
+  const showRecaptcha = provider === 'recaptcha' && !!siteKey;
+
+  // Turnstile: explicit managed render. The callback fires once the challenge is
+  // solved (usually automatically) and we stash the token in a hidden input.
+  useEffect(() => {
+    if (!showTurnstile || typeof window === 'undefined') return;
+
+    let widgetId: string | null = null;
+
+    const renderWidget = () => {
+      const turnstile = (window as any).turnstile;
+      if (!turnstile || !turnstileRef.current) return;
+      turnstileRef.current.innerHTML = '';
+      try {
+        widgetId = turnstile.render(turnstileRef.current, {
+          sitekey: siteKey,
+          theme: 'auto',
+          'response-field': false,
+          callback: (token: string) => setTurnstileToken(token),
+          'expired-callback': () => setTurnstileToken(''),
+          'error-callback': () => setTurnstileToken(''),
+          'timeout-callback': () => setTurnstileToken(''),
+        });
+        turnstileWidgetIdRef.current = widgetId;
+      } catch (err) {
+        console.error('Turnstile render error:', err);
+      }
+    };
+
+    if ((window as any).turnstile) {
+      renderWidget();
+    } else {
+      const interval = setInterval(() => {
+        if ((window as any).turnstile) {
+          clearInterval(interval);
+          renderWidget();
+        }
+      }, 100);
+      return () => clearInterval(interval);
+    }
+
+    return () => {
+      const turnstile = (window as any).turnstile;
+      if (widgetId && turnstile) {
+        try {
+          turnstile.remove(widgetId);
+        } catch {
+          // ignore
+        }
+      }
+      turnstileWidgetIdRef.current = null;
+    };
+  }, [showTurnstile, siteKey]);
+
+  // reCAPTCHA v3: invisible + score-based. Fetch a token on load and refresh it
+  // before the ~2min expiry so a token is always waiting when the user submits.
+  useEffect(() => {
+    if (!showRecaptcha || typeof window === 'undefined') return;
+
+    let cancelled = false;
+
+    const execute = () => {
+      const grecaptcha = (window as any).grecaptcha;
+      if (!grecaptcha?.execute) return;
+      grecaptcha.ready(() => {
+        grecaptcha
+          .execute(siteKey, { action: 'signup' })
+          .then((token: string) => {
+            if (!cancelled) setRecaptchaToken(token);
+          })
+          .catch(() => {
+            /* transient; the next refresh retries */
+          });
+      });
+    };
+
+    let readyPoll: ReturnType<typeof setInterval> | null = null;
+    if ((window as any).grecaptcha?.execute) {
+      execute();
+    } else {
+      readyPoll = setInterval(() => {
+        if ((window as any).grecaptcha?.execute) {
+          if (readyPoll) clearInterval(readyPoll);
+          readyPoll = null;
+          execute();
+        }
+      }, 200);
+    }
+
+    const refresh = setInterval(execute, 100_000);
+
+    return () => {
+      cancelled = true;
+      if (readyPoll) clearInterval(readyPoll);
+      clearInterval(refresh);
+    };
+  }, [showRecaptcha, siteKey]);
+
+  return (
+    <>
+      {showRecaptcha && (
+        <Script
+          strategy="lazyOnload"
+          src={`https://www.google.com/recaptcha/api.js?render=${siteKey}`}
+          nonce={scriptNonce}
+        />
+      )}
+      {showTurnstile && (
+        <Script
+          strategy="afterInteractive"
+          src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+          nonce={scriptNonce}
+        />
+      )}
+
+      {/* Invisible honeypot: a real user never sees or fills this; bots do. */}
+      <div
+        aria-hidden="true"
+        className="absolute w-0 h-0 overflow-hidden"
+        style={{ position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, zIndex: -1 }}
+      >
+        <label htmlFor={HONEYPOT_FIELD} className="sr-only">
+          Do not fill this field
+        </label>
+        <input
+          id={HONEYPOT_FIELD}
+          type="text"
+          name={HONEYPOT_FIELD}
+          tabIndex={-1}
+          autoComplete="off"
+        />
+      </div>
+
+      {showTurnstile && (
+        <div className="my-2 flex justify-start">
+          <input type="hidden" name={TURNSTILE_TOKEN_FIELD} value={turnstileToken} readOnly />
+          <div ref={turnstileRef} />
+        </div>
+      )}
+
+      {showRecaptcha && (
+        <input type="hidden" name={RECAPTCHA_TOKEN_FIELD} value={recaptchaToken} readOnly />
+      )}
+    </>
+  );
+}
+
+export default AuthBotProtection;