create-nextblock 0.2.78 → 0.8.1

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

@@ -0,0 +1,68 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
+
+type TriggerVariant = "desktop" | "mobile";
+
+interface DeferredGlobalSearchProps {
+  isEcommerceActive: boolean;
+  variant: TriggerVariant;
+}
+
+const GlobalSearch = dynamic(() => import("./GlobalSearch"), {
+  ssr: false,
+  loading: () => null,
+});
+
+export function DeferredGlobalSearch(props: DeferredGlobalSearchProps) {
+  const [shouldLoad, setShouldLoad] = useState(false);
+  const [openOnMount, setOpenOnMount] = useState(false);
+
+  const openSearch = () => {
+    setOpenOnMount(true);
+    setShouldLoad(true);
+  };
+
+  useEffect(() => {
+    if (props.variant !== "desktop") {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        openSearch();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [props.variant]);
+
+  if (shouldLoad) {
+    return <GlobalSearch {...props} openOnMount={openOnMount} />;
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size={props.variant === "mobile" ? "icon" : "default"}
+      className={cn(
+        "shrink-0 border-foreground/15 bg-background/70",
+        props.variant === "desktop" && "h-9 gap-2 px-3 text-sm",
+        props.variant === "mobile" && "h-10 w-10"
+      )}
+      aria-label="Search"
+      aria-keyshortcuts="Control+K Meta+K"
+      onClick={openSearch}
+    >
+      <Search className="h-4 w-4" />
+      {props.variant === "desktop" ? <span>Search</span> : null}
+    </Button>
+  );
+}

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

@@ -0,0 +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} />;
+}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +1,36 @@
+'use client';
+
+import { createClient } from "@nextblock-cms/db";
+import { Button } from "@nextblock-cms/ui";
+
+interface GitHubLoginButtonProps {
+  t: (key: string) => string;
+  redirectTo?: string;
+}
+
+export function GitHubLoginButton({ t, redirectTo }: GitHubLoginButtonProps) {
+  const handleGitHubLogin = async () => {
+    const supabase = createClient();
+    await supabase.auth.signInWithOAuth({
+      provider: 'github',
+      options: {
+        redirectTo: `${window.location.origin}/auth/callback${redirectTo ? `?redirect_to=${encodeURIComponent(redirectTo)}` : ''}`,
+      },
+    });
+  };
+
+  return (
+    <Button 
+      variant="outline" 
+      type="button" 
+      className="w-full" 
+      onClick={handleGitHubLogin}
+    >
+      {/* GitHub Icon */}
+      <svg className="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+      </svg>
+      {t('continue_with_github') || "Continue with GitHub"}
+    </Button>
+  );
+}