create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/components/blocks/renderers/TestimonialBlockRenderer.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui";
+import { Card, CardContent } from "@nextblock-cms/ui";
+import { MessageSquareQuote } from "lucide-react";
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
+
+type TestimonialBlockContent = {
+  quote?: string;
+  author_name?: string;
+  author_title?: string;
+  image_url?: string;
+};
+
+interface TestimonialBlockRendererProps {
+  content: TestimonialBlockContent;
+  visualEditAttributes?: VisualEditAttributes;
+}
+
+const TestimonialBlockRenderer: React.FC<TestimonialBlockRendererProps> = ({
+  content,
+  visualEditAttributes,
+}) => {
+  const authorName = content.author_name || "Customer";
+
+  return (
+    <div className="container m-8" {...visualEditAttributes}>
+      <Card className="h-full">
+        <CardContent className="pt-6 flex flex-col gap-4 h-full">
+          <MessageSquareQuote className="w-8 h-8 text-primary/40" />
+          {content.quote && (
+            <blockquote className="flex-grow text-lg italic text-muted-foreground">
+              &quot;{content.quote}&quot;
+            </blockquote>
+          )}
+          <div className="flex items-center gap-3 mt-4">
+            <Avatar>
+              {content.image_url && (
+                <AvatarImage src={content.image_url} alt={authorName} />
+              )}
+              <AvatarFallback>{authorName.slice(0, 2).toUpperCase()}</AvatarFallback>
+            </Avatar>
+            <div>
+              <div className="font-semibold">{authorName}</div>
+              {content.author_title && (
+                <div className="text-sm text-muted-foreground">
+                  {content.author_title}
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default TestimonialBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/TextBlockRenderer.tsx

@@ -1,31 +1,46 @@
-import React from "react";
-import { headers } from 'next/headers';
-import ClientTextBlockRenderer from "./ClientTextBlockRenderer";
+import React from "react";
+import { headers } from 'next/headers';
+import ClientTextBlockRenderer from "./ClientTextBlockRenderer";
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 
 export type TextBlockContent = {
     html_content?: string;
 };
 
-interface TextBlockRendererProps {
-  content: TextBlockContent;
-  languageId: number;
+interface TextBlockRendererProps {
+  content: TextBlockContent;
+  languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
+  renderContext?: 'prose' | 'section';
+}
+
+function addNonceToInlineScripts(html: string, nonce: string): string {
+  if (!html || !nonce) return html || '';
+  // Add nonce to <script> tags that do not already have a nonce
+  // and do not have a src attribute (inline scripts)
+  return html.replace(/<script(?![^>]*\bsrc=)([^>]*)(?<!nonce=["'][^"']*["'])>/gi, (_m, attrs) => {
+    return `<script nonce="${nonce}"${attrs}>`;
+  });
 }
 
-function addNonceToInlineScripts(html: string, nonce: string): string {
-  if (!html || !nonce) return html || '';
-  // Add nonce to <script> tags that do not already have a nonce
-  // and do not have a src attribute (inline scripts)
-  return html.replace(/<script(?![^>]*\bsrc=)([^>]*)(?<!nonce=["'][^"']*["'])>/gi, (_m, attrs) => {
-    return `<script nonce="${nonce}"${attrs}>`;
-  });
-}
-
-const TextBlockRenderer: React.FC<TextBlockRendererProps> = async ({ content, languageId }) => {
-  const hdrs = await headers();
-  const nonce = hdrs.get('x-nonce') || '';
-  const htmlWithNonce = content.html_content ? addNonceToInlineScripts(content.html_content, nonce) : '';
-  const patchedContent = { ...content, html_content: htmlWithNonce };
-  return <ClientTextBlockRenderer content={patchedContent} languageId={languageId} />;
+const TextBlockRenderer: React.FC<TextBlockRendererProps> = async ({
+  content,
+  languageId,
+  visualEditAttributes,
+  renderContext = 'prose',
+}) => {
+  const hdrs = await headers();
+  const nonce = hdrs.get('x-nonce') || '';
+  const htmlWithNonce = content.html_content ? addNonceToInlineScripts(content.html_content, nonce) : '';
+  const patchedContent = { ...content, html_content: htmlWithNonce };
+  return (
+    <ClientTextBlockRenderer
+      content={patchedContent}
+      languageId={languageId}
+      visualEditAttributes={visualEditAttributes}
+      renderContext={renderContext}
+    />
+  );
 };
 
-export default TextBlockRenderer;
+export default TextBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/VideoEmbedBlockRenderer.tsx

@@ -1,24 +1,32 @@
 import React from "react";
-import { validateBlockContent, VideoEmbedBlockContent } from "@/lib/blocks/blockRegistry";
+import type { VideoEmbedBlockContent } from '../../../lib/blocks/blockRegistry';
+import type { VisualEditAttributes } from "../../../lib/visual-editing/types";
 
 interface VideoEmbedBlockRendererProps {
   content: VideoEmbedBlockContent;
   languageId: number;
+  visualEditAttributes?: VisualEditAttributes;
 }
 
-const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
-  content,
-  languageId,
-}) => {
-  void languageId;
-  // Optional: Validate content against registry schema
-  const validation = validateBlockContent("video_embed", content);
-  if (!validation.isValid) {
-    console.warn("Invalid video embed content:", validation.errors);
-  }
-
+const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
+  content,
+  languageId,
+  visualEditAttributes,
+}) => {
+  void languageId;
   if (!content.url) {
-    return null;
+    if (!visualEditAttributes) {
+      return null;
+    }
+
+    return (
+      <div
+        className="my-4 p-4 border rounded text-center text-muted-foreground italic"
+        {...visualEditAttributes}
+      >
+        (Video block: URL missing)
+      </div>
+    );
   }
 
   // Convert YouTube URLs to embed format
@@ -39,7 +47,7 @@ const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
   };
 
   return (
-    <div className="my-4">
+    <div className="my-4" {...visualEditAttributes}>
       {content.title && (
         <h3 className="text-lg font-semibold mb-2">{content.title}</h3>
       )}
@@ -56,4 +64,4 @@ const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
   );
 };
 
-export default VideoEmbedBlockRenderer;
+export default VideoEmbedBlockRenderer;

package/templates/nextblock-template/components/blocks/renderers/inline/AlertWidgetRenderer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 interface AlertWidgetRendererProps {
   type: 'info' | 'warning' | 'notification' | 'danger';
   title: string;
@@ -48,4 +46,4 @@ const AlertWidgetRenderer = ({ type, title, message, align, size, textAlign }: A
   );
 };
 
-export default AlertWidgetRenderer;
+export default AlertWidgetRenderer;

package/templates/nextblock-template/components/blocks/renderers/inline/CtaWidgetRenderer.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import Link from 'next/link';
 
 interface CtaWidgetRendererProps {
@@ -37,4 +35,4 @@ const CtaWidgetRenderer = ({ text, url, style, size, textAlign }: CtaWidgetRende
   );
 };
 
-export default CtaWidgetRenderer;
+export default CtaWidgetRenderer;

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

@@ -1,8 +1,9 @@
 import type { Database } from '@nextblock-cms/db';
 
-export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
-    feature_image_url: string | null;
-    feature_image_width: number | null;
-    feature_image_height: number | null;
-    blur_data_url: string | null;
-};
+export type PostWithMediaDimensions = Database['public']['Tables']['posts']['Row'] & {
+    feature_image_url: string | null;
+    feature_image_width: number | null;
+    feature_image_height: number | null;
+    blur_data_url: string | null;
+    estimated_read_time_minutes: number;
+};

package/templates/nextblock-template/components/env-var-warning.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
-import { Badge } from "@nextblock-cms/ui";
-import { Button } from "@nextblock-cms/ui";
+import Link from "next/link";
+import { Badge } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
 
 export function EnvVarWarning() {
   return (

package/templates/nextblock-template/components/form-message.tsx

@@ -1,26 +1,32 @@
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export function FormMessage({ message }: { message?: Message }) {
-  if (!message) return null;
-
-  return (
-    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
-      {"success" in message && message.success && (
-        <div className="text-foreground border-l-2 border-foreground px-4">
-          {message.success}
-        </div>
-      )}
-      {"error" in message && message.error && (
-        <div className="text-destructive-foreground border-l-2 border-destructive-foreground px-4">
-          {message.error}
-        </div>
-      )}
-      {"message" in message && message.message && (
-        <div className="text-foreground border-l-2 px-4">{message.message}</div>
-      )}
-    </div>
-  );
-}
+ 'use client';
+
+import { useTranslations } from "@nextblock-cms/utils";
+
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export function FormMessage({ message }: { message?: Message }) {
+  const { t } = useTranslations();
+
+  if (!message) return null;
+
+  return (
+    <div className="flex flex-col gap-2 w-full max-w-md text-sm">
+      {"success" in message && message.success && (
+        <div className="text-foreground border-l-2 border-foreground px-4">
+          {t(message.success)}
+        </div>
+      )}
+      {"error" in message && message.error && (
+        <div className="text-destructive border-l-2 border-destructive px-4">
+          {t(message.error)}
+        </div>
+      )}
+      {"message" in message && message.message && (
+        <div className="text-foreground border-l-2 px-4">{t(message.message)}</div>
+      )}
+    </div>
+  );
+}

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

@@ -1,17 +1,33 @@
 'use client';
 
-import { signOutAction } from "@/app/actions";
-import { hasPublicEnvVars } from "@nextblock-cms/utils";
-import Link from "next/link";
-import { Badge } from "@nextblock-cms/ui";
-import { Button } from "@nextblock-cms/ui";
-import { useAuth } from "@/context/AuthContext";
-import { useTranslations } from "@nextblock-cms/utils";
+import { hasPublicEnvVars } from "@nextblock-cms/utils";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui";
+import { Badge } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
+import { signOutAction } from "../app/actions";
+import { useAuth } from "../context/AuthContext";
+import { useTranslations } from "@nextblock-cms/utils";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@nextblock-cms/ui";
+import { User, LogOut, LayoutDashboard } from "lucide-react";
 
-export default function AuthButton() {
-  const { user, profile } = useAuth();
-  const { t } = useTranslations();
-  const username = profile?.username || null;
+export default function AuthButton() {
+  const { user, profile, isAdmin, isWriter } = useAuth();
+  const { t } = useTranslations();
+  const displayName = profile?.full_name || profile?.github_username || user?.email || null;
+  const showAdminLink = isAdmin || isWriter;
+
+  const handleSignOut = async () => {
+    await signOutAction();
+  };
 
   if (!hasPublicEnvVars) {
     return (
@@ -51,12 +67,48 @@ export default function AuthButton() {
   }
   return user ? (
     <div className="flex items-center gap-4">
-      {t('greeting', { username: username || user.email || 'User' })}
-      <form action={signOutAction}>
-        <Button type="submit" variant={"outline"}>
-          {t('sign_out')}
-        </Button>
-      </form>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="relative h-8 w-8 rounded-full p-0">
+            <Avatar className="h-8 w-8 transition-all hover:ring-1 hover:ring-primary">
+              <AvatarImage src={profile?.avatar_url || undefined} alt={displayName || 'User'} />
+              <AvatarFallback className="bg-muted">
+                {displayName ? displayName.charAt(0).toUpperCase() : <User className="h-4 w-4" />}
+              </AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="end" forceMount>
+          <DropdownMenuLabel className="font-normal">
+            <div className="flex flex-col space-y-1">
+              <p className="text-sm font-medium leading-none">{displayName || 'User'}</p>
+              <p className="text-xs leading-none text-muted-foreground">
+                {user.email}
+              </p>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/profile" className="cursor-pointer">
+              <User className="mr-2 h-4 w-4" />
+              <span>{t('profile') || 'Profile'}</span>
+            </Link>
+          </DropdownMenuItem>
+          {showAdminLink && (
+             <DropdownMenuItem asChild>
+              <Link href="/cms/dashboard" className="cursor-pointer">
+                <LayoutDashboard className="mr-2 h-4 w-4" />
+                <span>{t('cms_dashboard')}</span>
+              </Link>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer">
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>{t('sign_out')}</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
   ) : (
     <div className="flex gap-2">

package/templates/nextblock-template/components/privacy/ConsentBanner.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { logConsentDecision } from '../../app/actions/consent';
+import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
+
+/**
+ * Minimal floating consent pill, bottom-right. Renders nothing once a decision
+ * exists (the nb_consent_preference cookie). Decisions persist client-side and
+ * are mirrored to privacy_consent_logs for accountability.
+ */
+export function ConsentBanner() {
+  const [visible, setVisible] = useState(false);
+  const [managing, setManaging] = useState(false);
+  const [analytics, setAnalytics] = useState(true);
+  const [marketing, setMarketing] = useState(false);
+
+  useEffect(() => {
+    if (!readConsent()) setVisible(true);
+  }, []);
+
+  const decide = (choice: { analytics: boolean; marketing: boolean }) => {
+    const pref = writeConsent(choice);
+    void logConsentDecision({
+      token: pref.token,
+      analytics: choice.analytics,
+      marketing: choice.marketing,
+    });
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Privacy consent"
+      className="fixed bottom-4 right-4 z-[70] w-[min(92vw,360px)] animate-in fade-in slide-in-from-bottom-2 duration-300"
+    >
+      <div className="rounded-2xl border border-slate-200/70 bg-white/95 p-4 shadow-[0_8px_30px_rgba(15,23,42,0.12)] backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/95 dark:shadow-[0_8px_30px_rgba(0,0,0,0.5)]">
+        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+          We value your privacy
+        </p>
+        <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
+          We use only essential cookies by default. With your consent we also use
+          analytics to improve the site. See our{' '}
+          <Link href="/privacy-policy" className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200">
+            Privacy Policy
+          </Link>
+          .
+        </p>
+
+        {managing && (
+          <div className="mt-3 space-y-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
+            <label className="flex items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">Necessary</span>
+                <span className="block text-[11px] text-slate-400">Always on</span>
+              </span>
+              <input type="checkbox" checked disabled className="h-4 w-4 accent-slate-400" />
+            </label>
+            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">Analytics</span>
+                <span className="block text-[11px] text-slate-400">Usage insights</span>
+              </span>
+              <input
+                type="checkbox"
+                checked={analytics}
+                onChange={(e) => setAnalytics(e.target.checked)}
+                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
+              />
+            </label>
+            <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
+              <span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">Marketing</span>
+                <span className="block text-[11px] text-slate-400">Personalized content</span>
+              </span>
+              <input
+                type="checkbox"
+                checked={marketing}
+                onChange={(e) => setMarketing(e.target.checked)}
+                className="h-4 w-4 accent-slate-900 dark:accent-slate-100"
+              />
+            </label>
+          </div>
+        )}
+
+        <div className="mt-3 flex items-center gap-2">
+          {managing ? (
+            <button
+              type="button"
+              onClick={() => decide({ analytics, marketing })}
+              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            >
+              Save choices
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => decide({ analytics: true, marketing: true })}
+              className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
+            >
+              Accept all
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => decide({ analytics: false, marketing: false })}
+            className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+          >
+            Reject all
+          </button>
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setManaging((prev) => !prev)}
+          className="mt-2 w-full text-center text-[11px] text-slate-400 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
+        >
+          {managing ? 'Hide options' : 'Manage options'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/components/privacy/ConsentGatedAnalytics.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+// Gates third-party analytics behind explicit consent. Until the visitor opts
+// in, this renders null -> the GTM chunk is never imported and the network tab
+// shows zero analytics bytes, preserving the Lighthouse budget.
+import { useEffect, useRef, useState } from 'react';
+import { DeferredGoogleTagManager } from '../DeferredGoogleTagManager';
+import { CONSENT_CHANGE_EVENT, readConsent } from '../../lib/privacy/consent-client';
+
+interface ConsentGatedAnalyticsProps {
+  gtmId?: string;
+  customScripts?: string;
+  nonce?: string;
+}
+
+/** Recreate <script> elements from admin-provided markup so they actually run. */
+function injectCustomScripts(markup: string, nonce?: string) {
+  const parsed = new DOMParser().parseFromString(markup, 'text/html');
+  parsed.querySelectorAll('script').forEach((source) => {
+    const script = document.createElement('script');
+    for (const attr of Array.from(source.attributes)) {
+      script.setAttribute(attr.name, attr.value);
+    }
+    if (nonce) script.setAttribute('nonce', nonce);
+    if (source.textContent) script.textContent = source.textContent;
+    document.head.appendChild(script);
+  });
+}
+
+export function ConsentGatedAnalytics({
+  gtmId,
+  customScripts,
+  nonce,
+}: ConsentGatedAnalyticsProps) {
+  const [analyticsAllowed, setAnalyticsAllowed] = useState(false);
+  const injectedRef = useRef(false);
+
+  useEffect(() => {
+    const sync = () => setAnalyticsAllowed(Boolean(readConsent()?.analytics));
+    sync();
+    window.addEventListener(CONSENT_CHANGE_EVENT, sync);
+    return () => window.removeEventListener(CONSENT_CHANGE_EVENT, sync);
+  }, []);
+
+  useEffect(() => {
+    if (!analyticsAllowed || injectedRef.current) return;
+    const markup = customScripts?.trim();
+    if (!markup) return;
+    injectedRef.current = true;
+    try {
+      injectCustomScripts(markup, nonce);
+    } catch (error) {
+      console.error('Failed to inject consented custom scripts:', error);
+    }
+  }, [analyticsAllowed, customScripts, nonce]);
+
+  if (!analyticsAllowed || !gtmId) return null;
+  return <DeferredGoogleTagManager gtmId={gtmId} nonce={nonce} />;
+}

package/templates/nextblock-template/components/renderers/CachedDynamicLayoutEngine.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { cacheLife, cacheTag } from 'next/cache';
+import {
+  DynamicLayoutEngine,
+  type DynamicLayoutEngineProps,
+  DYNAMIC_LAYOUT_ENGINE_CACHE_TAG,
+  getDynamicLayoutDefinitionCacheTag,
+} from './DynamicLayoutEngine';
+
+export async function CachedDynamicLayoutEngine(props: DynamicLayoutEngineProps) {
+  // 'use cache';
+  // cacheLife('minutes');
+  // cacheTag(DYNAMIC_LAYOUT_ENGINE_CACHE_TAG);
+
+  // for (const tag of props.cacheTags ?? []) {
+  //   cacheTag(tag);
+  // }
+
+  // if (props.definition?.id) {
+  //   cacheTag(getDynamicLayoutDefinitionCacheTag(props.definition.id));
+  // }
+
+  // if (props.definition?.slug) {
+  //   cacheTag(getDynamicLayoutDefinitionCacheTag(props.definition.slug));
+  // }
+
+  return <DynamicLayoutEngine {...props} />;
+}