create-nextblock 0.14.1 → 0.14.4

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

@@ -1,8 +1,8 @@
 // components/LanguageSwitcher.tsx
 'use client';
 
-import { useLanguage } from '../context/LanguageContext';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
+import { useLanguage } from '../context/LanguageContext';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nextblock-cms/ui';
 import { useRouter, usePathname } from 'next/navigation';
 import { getContentTranslations, getContentMetadataBySlugAndLocale } from '../app/actions/languageActions';
 import { Language } from '../app/actions/languageActions';

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;

package/templates/nextblock-template/components/blocks/PostCardSkeleton.tsx

@@ -1,21 +1,21 @@
-import { Skeleton } from '@nextblock-cms/ui';
+import { Skeleton } from '@nextblock-cms/ui';
 
 const PostCardSkeleton = () => {
   return (
-    <div className="border rounded-lg overflow-hidden shadow-sm bg-card text-card-foreground">
-      <Skeleton className="h-48 w-full" />
-      <div className="p-4 space-y-3">
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-6 w-20 rounded-full" />
-          <Skeleton className="h-4 w-16" />
-        </div>
-        <Skeleton className="h-5 w-3/4" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-5/6" />
+    <div className="border rounded-lg overflow-hidden shadow-sm bg-card text-card-foreground">
+      <Skeleton className="h-48 w-full" />
+      <div className="p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-20 rounded-full" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <Skeleton className="h-5 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6" />
         <Skeleton className="h-4 w-1/4 mt-2" />
       </div>
     </div>
   );
 };
 
-export default PostCardSkeleton;
+export default PostCardSkeleton;

package/templates/nextblock-template/components/blocks/PostsGridBlock.tsx

@@ -1,11 +1,11 @@
 // components/blocks/PostsGridBlock.tsx
-import React from 'react';
-import type { Database } from '@nextblock-cms/db';
-
-type Block = Database['public']['Tables']['blocks']['Row'];
-// import Link from 'next/link'; // Unused, PostsGridClient handles links
-import PostsGridClient from './PostsGridClient';
-import { fetchInitialPublishedPosts, fetchPaginatedPublishedPosts } from '../../app/actions/postActions';
+import React from 'react';
+import type { Database } from '@nextblock-cms/db';
+
+type Block = Database['public']['Tables']['blocks']['Row'];
+// import Link from 'next/link'; // Unused, PostsGridClient handles links
+import PostsGridClient from './PostsGridClient';
+import { fetchInitialPublishedPosts, fetchPaginatedPublishedPosts } from '../../app/actions/postActions';
 
 interface PostsGridBlockProps {
   block: Block;
@@ -20,11 +20,11 @@ const PostsGridBlock: React.FC<PostsGridBlockProps> = async ({ block, languageId
     showPagination = true,
   } = block.content as { title?: string, postsPerPage?: number, columns?: number, showPagination?: boolean };
 
-  const { posts: initialPosts, totalCount, error: postsError } = await fetchInitialPublishedPosts(languageId, postsPerPage);
-
-  if (postsError) {
-    return <div className="text-red-500">Error loading posts: {postsError}</div>;
-  }
+  const { posts: initialPosts, totalCount, error: postsError } = await fetchInitialPublishedPosts(languageId, postsPerPage);
+
+  if (postsError) {
+    return <div className="text-red-500">Error loading posts: {postsError}</div>;
+  }
 
   if (!initialPosts || initialPosts.length === 0) {
     return (

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

@@ -1,23 +1,23 @@
-import type { ComponentType } from "react";
-
-type PublicBlockRendererLoader = () => Promise<{
-  default: ComponentType<any>;
-}>;
-
-const ecommerceBlockRendererLoaders: Record<string, PublicBlockRendererLoader> = {
-  product_grid: () => import("./renderers/ProductGridBlockRenderer"),
-  featured_product: () => import("./renderers/FeaturedProductBlockRenderer"),
-  cart: () => import("./renderers/CartBlockRenderer"),
-  checkout: () => import("./renderers/CheckoutBlockRenderer"),
-  product_details: () => import("./renderers/ProductDetailsBlockRenderer"),
-};
-
-export function loadEcommerceBlockRenderer(blockType: string) {
-  const loader = ecommerceBlockRendererLoaders[blockType];
-
-  if (!loader) {
-    return Promise.reject(new Error(`Unsupported ecommerce block type: ${blockType}`));
-  }
-
-  return loader();
-}
+import type { ComponentType } from "react";
+
+type PublicBlockRendererLoader = () => Promise<{
+  default: ComponentType<any>;
+}>;
+
+const ecommerceBlockRendererLoaders: Record<string, PublicBlockRendererLoader> = {
+  product_grid: () => import("./renderers/ProductGridBlockRenderer"),
+  featured_product: () => import("./renderers/FeaturedProductBlockRenderer"),
+  cart: () => import("./renderers/CartBlockRenderer"),
+  checkout: () => import("./renderers/CheckoutBlockRenderer"),
+  product_details: () => import("./renderers/ProductDetailsBlockRenderer"),
+};
+
+export function loadEcommerceBlockRenderer(blockType: string) {
+  const loader = ecommerceBlockRendererLoaders[blockType];
+
+  if (!loader) {
+    return Promise.reject(new Error(`Unsupported ecommerce block type: ${blockType}`));
+  }
+
+  return loader();
+}