create-nextblock 0.14.1 → 0.14.4

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

@@ -1,70 +1,70 @@
-"use client";
-
-import { useEffect, useState, type ComponentType } from "react";
-
-interface DeferredGoogleAnalyticsProps {
-  gaId?: string;
-  nonce?: string;
-}
-
-const interactionEvents: Array<keyof WindowEventMap> = [
-  "pointerdown",
-  "keydown",
-  "scroll",
-  "touchstart",
-];
-
-type GoogleAnalyticsComponent = ComponentType<{
-  gaId: string;
-  nonce?: string;
-}>;
-
-export function DeferredGoogleAnalytics({
-  gaId,
-  nonce,
-}: DeferredGoogleAnalyticsProps) {
-  const [GoogleAnalytics, setGoogleAnalytics] =
-    useState<GoogleAnalyticsComponent | null>(null);
-
-  useEffect(() => {
-    if (!gaId) {
-      return;
-    }
-
-    let isMounted = true;
-
-    function removeListeners() {
-      interactionEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, enableGa);
-      });
-    }
-
-    function enableGa() {
-      removeListeners();
-
-      void import("@next/third-parties/google").then(({ GoogleAnalytics }) => {
-        if (isMounted) {
-          setGoogleAnalytics(() => GoogleAnalytics as GoogleAnalyticsComponent);
-        }
-      });
-    }
-
-    interactionEvents.forEach((eventName) => {
-      window.addEventListener(eventName, enableGa, {
-        once: true,
-        passive: true,
-      });
-    });
-
-    return () => {
-      isMounted = false;
-      removeListeners();
-    };
-  }, [gaId]);
-
-  if (!gaId || !GoogleAnalytics) {
-    return null;
-  }
-
-  return <GoogleAnalytics gaId={gaId} nonce={nonce} />;
-}
+"use client";
+
+import { useEffect, useState, type ComponentType } from "react";
+
+interface DeferredGoogleAnalyticsProps {
+  gaId?: string;
+  nonce?: string;
+}
+
+const interactionEvents: Array<keyof WindowEventMap> = [
+  "pointerdown",
+  "keydown",
+  "scroll",
+  "touchstart",
+];
+
+type GoogleAnalyticsComponent = ComponentType<{
+  gaId: string;
+  nonce?: string;
+}>;
+
+export function DeferredGoogleAnalytics({
+  gaId,
+  nonce,
+}: DeferredGoogleAnalyticsProps) {
+  const [GoogleAnalytics, setGoogleAnalytics] =
+    useState<GoogleAnalyticsComponent | null>(null);
+
+  useEffect(() => {
+    if (!gaId) {
+      return;
+    }
+
+    let isMounted = true;
+
+    function removeListeners() {
+      interactionEvents.forEach((eventName) => {
+        window.removeEventListener(eventName, enableGa);
+      });
+    }
+
+    function enableGa() {
+      removeListeners();
+
+      void import("@next/third-parties/google").then(({ GoogleAnalytics }) => {
+        if (isMounted) {
+          setGoogleAnalytics(() => GoogleAnalytics as GoogleAnalyticsComponent);
+        }
+      });
+    }
+
+    interactionEvents.forEach((eventName) => {
+      window.addEventListener(eventName, enableGa, {
+        once: true,
+        passive: true,
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      removeListeners();
+    };
+  }, [gaId]);
+
+  if (!gaId || !GoogleAnalytics) {
+    return null;
+  }
+
+  return <GoogleAnalytics gaId={gaId} nonce={nonce} />;
+}

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

@@ -1,70 +1,70 @@
-"use client";
-
-import { useEffect, useState, type ComponentType } from "react";
-
-interface DeferredGoogleTagManagerProps {
-  gtmId?: string;
-  nonce?: string;
-}
-
-const interactionEvents: Array<keyof WindowEventMap> = [
-  "pointerdown",
-  "keydown",
-  "scroll",
-  "touchstart",
-];
-
-type GoogleTagManagerComponent = ComponentType<{
-  gtmId: string;
-  nonce?: string;
-}>;
-
-export function DeferredGoogleTagManager({
-  gtmId,
-  nonce,
-}: DeferredGoogleTagManagerProps) {
-  const [GoogleTagManager, setGoogleTagManager] =
-    useState<GoogleTagManagerComponent | null>(null);
-
-  useEffect(() => {
-    if (!gtmId) {
-      return;
-    }
-
-    let isMounted = true;
-
-    function removeListeners() {
-      interactionEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, enableGtm);
-      });
-    }
-
-    function enableGtm() {
-      removeListeners();
-
-      void import("@next/third-parties/google").then(({ GoogleTagManager }) => {
-        if (isMounted) {
-          setGoogleTagManager(() => GoogleTagManager as GoogleTagManagerComponent);
-        }
-      });
-    }
-
-    interactionEvents.forEach((eventName) => {
-      window.addEventListener(eventName, enableGtm, {
-        once: true,
-        passive: true,
-      });
-    });
-
-    return () => {
-      isMounted = false;
-      removeListeners();
-    };
-  }, [gtmId]);
-
-  if (!gtmId || !GoogleTagManager) {
-    return null;
-  }
-
-  return <GoogleTagManager gtmId={gtmId} nonce={nonce} />;
-}
+"use client";
+
+import { useEffect, useState, type ComponentType } from "react";
+
+interface DeferredGoogleTagManagerProps {
+  gtmId?: string;
+  nonce?: string;
+}
+
+const interactionEvents: Array<keyof WindowEventMap> = [
+  "pointerdown",
+  "keydown",
+  "scroll",
+  "touchstart",
+];
+
+type GoogleTagManagerComponent = ComponentType<{
+  gtmId: string;
+  nonce?: string;
+}>;
+
+export function DeferredGoogleTagManager({
+  gtmId,
+  nonce,
+}: DeferredGoogleTagManagerProps) {
+  const [GoogleTagManager, setGoogleTagManager] =
+    useState<GoogleTagManagerComponent | null>(null);
+
+  useEffect(() => {
+    if (!gtmId) {
+      return;
+    }
+
+    let isMounted = true;
+
+    function removeListeners() {
+      interactionEvents.forEach((eventName) => {
+        window.removeEventListener(eventName, enableGtm);
+      });
+    }
+
+    function enableGtm() {
+      removeListeners();
+
+      void import("@next/third-parties/google").then(({ GoogleTagManager }) => {
+        if (isMounted) {
+          setGoogleTagManager(() => GoogleTagManager as GoogleTagManagerComponent);
+        }
+      });
+    }
+
+    interactionEvents.forEach((eventName) => {
+      window.addEventListener(eventName, enableGtm, {
+        once: true,
+        passive: true,
+      });
+    });
+
+    return () => {
+      isMounted = false;
+      removeListeners();
+    };
+  }, [gtmId]);
+
+  if (!gtmId || !GoogleTagManager) {
+    return null;
+  }
+
+  return <GoogleTagManager gtmId={gtmId} nonce={nonce} />;
+}

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

@@ -1,69 +1,69 @@
-"use client";
-
-import { useEffect, useState, type ComponentType } from "react";
-
-type SpeedInsightsComponent = ComponentType<Record<string, never>>;
-type IdleCallbackHandle = number;
-type IdleCapableWindow = Window &
-  typeof globalThis & {
-    requestIdleCallback?: (
-      callback: IdleRequestCallback,
-      options?: IdleRequestOptions
-    ) => IdleCallbackHandle;
-    cancelIdleCallback?: (handle: IdleCallbackHandle) => void;
-  };
-
-export function DeferredSpeedInsights() {
-  const [SpeedInsights, setSpeedInsights] =
-    useState<SpeedInsightsComponent | null>(null);
-
-  useEffect(() => {
-    const browserWindow = window as IdleCapableWindow;
-    let isMounted = true;
-    let idleCallbackId: IdleCallbackHandle | null = null;
-    let timeoutId: ReturnType<typeof globalThis.setTimeout> | null = null;
-
-    function loadSpeedInsights() {
-      void import("@vercel/speed-insights/next").then(({ SpeedInsights }) => {
-        if (isMounted) {
-          setSpeedInsights(() => SpeedInsights as SpeedInsightsComponent);
-        }
-      });
-    }
-
-    function scheduleLoad() {
-      if (typeof browserWindow.requestIdleCallback === "function") {
-        idleCallbackId = browserWindow.requestIdleCallback(loadSpeedInsights, {
-          timeout: 3_000,
-        });
-        return;
-      }
-
-      timeoutId = globalThis.setTimeout(loadSpeedInsights, 1_500);
-    }
-
-    if (document.readyState === "complete") {
-      scheduleLoad();
-    } else {
-      window.addEventListener("load", scheduleLoad, { once: true });
-    }
-
-    return () => {
-      isMounted = false;
-      window.removeEventListener("load", scheduleLoad);
-
-      if (
-        idleCallbackId !== null &&
-        typeof browserWindow.cancelIdleCallback === "function"
-      ) {
-        browserWindow.cancelIdleCallback(idleCallbackId);
-      }
-
-      if (timeoutId !== null) {
-        globalThis.clearTimeout(timeoutId);
-      }
-    };
-  }, []);
-
-  return SpeedInsights ? <SpeedInsights /> : null;
-}
+"use client";
+
+import { useEffect, useState, type ComponentType } from "react";
+
+type SpeedInsightsComponent = ComponentType<Record<string, never>>;
+type IdleCallbackHandle = number;
+type IdleCapableWindow = Window &
+  typeof globalThis & {
+    requestIdleCallback?: (
+      callback: IdleRequestCallback,
+      options?: IdleRequestOptions
+    ) => IdleCallbackHandle;
+    cancelIdleCallback?: (handle: IdleCallbackHandle) => void;
+  };
+
+export function DeferredSpeedInsights() {
+  const [SpeedInsights, setSpeedInsights] =
+    useState<SpeedInsightsComponent | null>(null);
+
+  useEffect(() => {
+    const browserWindow = window as IdleCapableWindow;
+    let isMounted = true;
+    let idleCallbackId: IdleCallbackHandle | null = null;
+    let timeoutId: ReturnType<typeof globalThis.setTimeout> | null = null;
+
+    function loadSpeedInsights() {
+      void import("@vercel/speed-insights/next").then(({ SpeedInsights }) => {
+        if (isMounted) {
+          setSpeedInsights(() => SpeedInsights as SpeedInsightsComponent);
+        }
+      });
+    }
+
+    function scheduleLoad() {
+      if (typeof browserWindow.requestIdleCallback === "function") {
+        idleCallbackId = browserWindow.requestIdleCallback(loadSpeedInsights, {
+          timeout: 3_000,
+        });
+        return;
+      }
+
+      timeoutId = globalThis.setTimeout(loadSpeedInsights, 1_500);
+    }
+
+    if (document.readyState === "complete") {
+      scheduleLoad();
+    } else {
+      window.addEventListener("load", scheduleLoad, { once: true });
+    }
+
+    return () => {
+      isMounted = false;
+      window.removeEventListener("load", scheduleLoad);
+
+      if (
+        idleCallbackId !== null &&
+        typeof browserWindow.cancelIdleCallback === "function"
+      ) {
+        browserWindow.cancelIdleCallback(idleCallbackId);
+      }
+
+      if (timeoutId !== null) {
+        globalThis.clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+
+  return SpeedInsights ? <SpeedInsights /> : null;
+}

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

@@ -1,47 +1,47 @@
-import Image from "next/image";
-
-const DEFAULT_FRAME_CLASS_NAME =
-  "bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.18),_transparent_45%),linear-gradient(135deg,#020617,#111827_55%,#1f2937)]";
-
-interface FeatureImageHeroProps {
-  alt: string;
-  blurDataURL?: string | null;
-  frameClassName?: string;
-  height?: number | null;
-  imageClassName?: string;
-  imageUrl: string;
-  priority?: boolean;
-  width?: number | null;
-}
-
-export default function FeatureImageHero({
-  alt,
-  blurDataURL,
-  frameClassName = DEFAULT_FRAME_CLASS_NAME,
-  height,
-  imageClassName = "h-full w-full object-cover",
-  imageUrl,
-  priority = false,
-  width,
-}: FeatureImageHeroProps) {
-  return (
-    <div
-      className={`overflow-hidden rounded-[2rem] border border-slate-200/80 shadow-[0_28px_80px_-32px_rgba(15,23,42,0.45)] dark:border-white/10 ${frameClassName}`}
-    >
-      <div className="relative aspect-[16/10] md:aspect-[2.35/1]">
-        <Image
-          src={imageUrl}
-          alt={alt}
-          width={width && width > 0 ? width : 1600}
-          height={height && height > 0 ? height : 900}
-          placeholder={blurDataURL ? "blur" : "empty"}
-          blurDataURL={blurDataURL ?? undefined}
-          sizes="(max-width: 768px) 100vw, 1200px"
-          className={imageClassName}
-          priority={priority}
-        />
-        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent" />
-      </div>
-    </div>
-  );
-}
+import Image from "next/image";
+
+const DEFAULT_FRAME_CLASS_NAME =
+  "bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.18),_transparent_45%),linear-gradient(135deg,#020617,#111827_55%,#1f2937)]";
+
+interface FeatureImageHeroProps {
+  alt: string;
+  blurDataURL?: string | null;
+  frameClassName?: string;
+  height?: number | null;
+  imageClassName?: string;
+  imageUrl: string;
+  priority?: boolean;
+  width?: number | null;
+}
+
+export default function FeatureImageHero({
+  alt,
+  blurDataURL,
+  frameClassName = DEFAULT_FRAME_CLASS_NAME,
+  height,
+  imageClassName = "h-full w-full object-cover",
+  imageUrl,
+  priority = false,
+  width,
+}: FeatureImageHeroProps) {
+  return (
+    <div
+      className={`overflow-hidden rounded-[2rem] border border-slate-200/80 shadow-[0_28px_80px_-32px_rgba(15,23,42,0.45)] dark:border-white/10 ${frameClassName}`}
+    >
+      <div className="relative aspect-[16/10] md:aspect-[2.35/1]">
+        <Image
+          src={imageUrl}
+          alt={alt}
+          width={width && width > 0 ? width : 1600}
+          height={height && height > 0 ? height : 900}
+          placeholder={blurDataURL ? "blur" : "empty"}
+          blurDataURL={blurDataURL ?? undefined}
+          sizes="(max-width: 768px) 100vw, 1200px"
+          className={imageClassName}
+          priority={priority}
+        />
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent" />
+      </div>
+    </div>
+  );
+}

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

@@ -1,33 +1,33 @@
-import Link from 'next/link';
-import type { Database } from '@nextblock-cms/db';
-
-type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
-
-interface FooterNavigationProps {
-  navItems: NavigationItem[];
-}
-
-export default function FooterNavigation({ navItems }: FooterNavigationProps) {
-  if (navItems.length === 0) {
-    return null;
-  }
-
-  const renderNavItems = (items: NavigationItem[]) =>
-    items
-      .filter((item) => !item.parent_id)
-      .map((item) => (
-        <Link
-          key={item.id}
-          href={item.url}
-          className="text-sm text-muted-foreground hover:text-foreground hover:underline px-2 py-1"
-        >
-          {item.label}
-        </Link>
-      ));
-
-  return (
-    <nav className="flex flex-wrap justify-center items-center gap-x-4 gap-y-2" aria-label="Footer navigation">
-      {renderNavItems(navItems)}
-    </nav>
-  );
+import Link from 'next/link';
+import type { Database } from '@nextblock-cms/db';
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+
+interface FooterNavigationProps {
+  navItems: NavigationItem[];
+}
+
+export default function FooterNavigation({ navItems }: FooterNavigationProps) {
+  if (navItems.length === 0) {
+    return null;
+  }
+
+  const renderNavItems = (items: NavigationItem[]) =>
+    items
+      .filter((item) => !item.parent_id)
+      .map((item) => (
+        <Link
+          key={item.id}
+          href={item.url}
+          className="text-sm text-muted-foreground hover:text-foreground hover:underline px-2 py-1"
+        >
+          {item.label}
+        </Link>
+      ));
+
+  return (
+    <nav className="flex flex-wrap justify-center items-center gap-x-4 gap-y-2" aria-label="Footer navigation">
+      {renderNavItems(navItems)}
+    </nav>
+  );
 }

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

@@ -1,47 +1,47 @@
-"use client";
-
-import React, { useEffect, useRef } from "react";
-
-interface HtmlScriptExecutorProps {
-  html: string; // should contain one or more <script> tags
-}
-
-// Executes inline scripts in a string by converting them to blob URLs
-// Requires CSP: script-src includes blob:
-export const HtmlScriptExecutor: React.FC<HtmlScriptExecutorProps> = ({ html }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const root = ref.current;
-    if (!root) return;
-    root.innerHTML = html;
-
-    const created: string[] = [];
-    const scripts = Array.from(root.querySelectorAll("script"));
-
-    scripts.forEach((old) => {
-      const s = document.createElement("script");
-      for (const attr of Array.from(old.attributes)) s.setAttribute(attr.name, attr.value);
-      if (old.src) {
-        s.src = old.src;
-      } else {
-        const blob = new Blob([old.textContent || ""], { type: old.type || "text/javascript" });
-        const url = URL.createObjectURL(blob);
-        s.src = url;
-        s.async = false;
-        created.push(url);
-      }
-      old.parentNode?.insertBefore(s, old);
-      old.remove();
-    });
-
-    return () => {
-      created.forEach((u) => { try { URL.revokeObjectURL(u); } catch (error) { console.error('Failed to revoke blob URL:', error); } });
-    };
-  }, [html]);
-
-  return <div ref={ref} style={{ display: 'none' }} />;
-};
-
-export default HtmlScriptExecutor;
-
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+interface HtmlScriptExecutorProps {
+  html: string; // should contain one or more <script> tags
+}
+
+// Executes inline scripts in a string by converting them to blob URLs
+// Requires CSP: script-src includes blob:
+export const HtmlScriptExecutor: React.FC<HtmlScriptExecutorProps> = ({ html }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    root.innerHTML = html;
+
+    const created: string[] = [];
+    const scripts = Array.from(root.querySelectorAll("script"));
+
+    scripts.forEach((old) => {
+      const s = document.createElement("script");
+      for (const attr of Array.from(old.attributes)) s.setAttribute(attr.name, attr.value);
+      if (old.src) {
+        s.src = old.src;
+      } else {
+        const blob = new Blob([old.textContent || ""], { type: old.type || "text/javascript" });
+        const url = URL.createObjectURL(blob);
+        s.src = url;
+        s.async = false;
+        created.push(url);
+      }
+      old.parentNode?.insertBefore(s, old);
+      old.remove();
+    });
+
+    return () => {
+      created.forEach((u) => { try { URL.revokeObjectURL(u); } catch (error) { console.error('Failed to revoke blob URL:', error); } });
+    };
+  }, [html]);
+
+  return <div ref={ref} style={{ display: 'none' }} />;
+};
+
+export default HtmlScriptExecutor;
+