create-nextblock 0.15.10 → 0.16.2

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

@@ -1,57 +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;
+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/inline/AlertWidgetRenderer.tsx

@@ -1,4 +1,4 @@
-interface AlertWidgetRendererProps {
+interface AlertWidgetRendererProps {
   type: 'info' | 'warning' | 'notification' | 'danger';
   title: string;
   message: string;
@@ -46,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,4 +1,4 @@
-import Link from 'next/link';
+import Link from 'next/link';
 
 interface CtaWidgetRendererProps {
   text: string;
@@ -35,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,9 +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;
-    estimated_read_time_minutes: number;
-};
+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/commerce/PaymentReadinessBoundary.tsx

@@ -1,32 +1,32 @@
-import { getStoreReadiness } from '@nextblock-cms/ecommerce/server';
-import { PaymentReadinessProvider } from '@nextblock-cms/ecommerce/PaymentReadinessProvider';
-
-/**
- * Supplies payment readiness to the buy controls beneath it.
- *
- * Deliberately NOT mounted in the root layout: readiness is only consulted by buy CTAs
- * and the checkout, so a blog post or a landing page should not pay for the lookup. Each
- * commerce block renderer wraps itself in this instead, which also means nested cases
- * (a product grid inside a section) are covered without anyone having to walk the block
- * tree looking for them.
- *
- * getStoreReadiness() is request-cached, so several of these on one page cost one read.
- * Any failure yields no readiness at all, and the context default ("everything ready")
- * keeps a working store working.
- */
-export default async function PaymentReadinessBoundary({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  let readiness: { stripe: boolean; freemius: boolean } | null = null;
-
-  try {
-    const store = await getStoreReadiness();
-    readiness = { stripe: store.stripe.ready, freemius: store.freemius.ready };
-  } catch (error) {
-    console.error('[PaymentReadinessBoundary] Could not resolve payment readiness:', error);
-  }
-
-  return <PaymentReadinessProvider readiness={readiness}>{children}</PaymentReadinessProvider>;
-}
+import { getStoreReadiness } from '@nextblock-cms/ecommerce/server';
+import { PaymentReadinessProvider } from '@nextblock-cms/ecommerce/PaymentReadinessProvider';
+
+/**
+ * Supplies payment readiness to the buy controls beneath it.
+ *
+ * Deliberately NOT mounted in the root layout: readiness is only consulted by buy CTAs
+ * and the checkout, so a blog post or a landing page should not pay for the lookup. Each
+ * commerce block renderer wraps itself in this instead, which also means nested cases
+ * (a product grid inside a section) are covered without anyone having to walk the block
+ * tree looking for them.
+ *
+ * getStoreReadiness() is request-cached, so several of these on one page cost one read.
+ * Any failure yields no readiness at all, and the context default ("everything ready")
+ * keeps a working store working.
+ */
+export default async function PaymentReadinessBoundary({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  let readiness: { stripe: boolean; freemius: boolean } | null = null;
+
+  try {
+    const store = await getStoreReadiness();
+    readiness = { stripe: store.stripe.ready, freemius: store.freemius.ready };
+  } catch (error) {
+    console.error('[PaymentReadinessBoundary] Could not resolve payment readiness:', error);
+  }
+
+  return <PaymentReadinessProvider readiness={readiness}>{children}</PaymentReadinessProvider>;
+}

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,32 +1,32 @@
- '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>
-  );
-}
+ '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/seo/GenerateMetaButton.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+import { Loader2, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@nextblock-cms/ui';
+
+import { buildCortexAiRequestHeaders } from '../../lib/cortex-ai/sandbox-headers';
+
+/**
+ * The four strings `/api/ai/seo/metadata` writes back.
+ *
+ * Note what is NOT here: an image. The Open Graph image on a page or post is derived from
+ * `feature_image_id`, and nothing in this flow changes that. The model writes copy; the
+ * operator picks the picture.
+ */
+export interface GeneratedSeoMetadata {
+  metaDescription: string;
+  metaTitle: string;
+  ogDescription: string;
+  ogTitle: string;
+}
+
+interface GenerateMetaButtonProps {
+  /**
+   * Body prose the model reads in order to write about the page. The caller flattens its
+   * blocks; an empty string disables the button, because a model asked to summarize
+   * nothing invents something, and invented metadata is worse than none.
+   */
+  content: string;
+  /** Optional term the copy should be built around, when the caller knows one. */
+  focusKeyword?: string | null;
+  /** Language code (`en`, `fr`, …) so the copy comes back in the content's language. */
+  locale?: string | null;
+  onGenerated: (result: GeneratedSeoMetadata) => void;
+  /** Site title, when cheaply available, so the model can shape a title that suffixes well. */
+  siteTitle?: string | null;
+  /** The page's own title — the strongest single hint about what the page is. */
+  title?: string | null;
+}
+
+/**
+ * Guard against a mistake that would otherwise be silent: if the route ever answers 200
+ * with a partial body, writing `undefined` into a controlled input flips it to
+ * uncontrolled and React warns once, at runtime, in a place far from the cause. Coercing
+ * here means a malformed response degrades to empty strings the operator can see.
+ */
+function readString(payload: Record<string, unknown>, key: string): string {
+  const value = payload[key];
+  return typeof value === 'string' ? value : '';
+}
+
+export default function GenerateMetaButton({
+  content,
+  focusKeyword,
+  locale,
+  onGenerated,
+  siteTitle,
+  title,
+}: GenerateMetaButtonProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const trimmedContent = content.trim();
+  const canGenerate = trimmedContent.length > 0 && !isGenerating;
+
+  const handleGenerate = async () => {
+    if (!canGenerate) {
+      return;
+    }
+
+    setIsGenerating(true);
+
+    try {
+      const response = await fetch('/api/ai/seo/metadata', {
+        // Optional fields are omitted rather than sent as null: the contract types them
+        // as `string | undefined`, and a null would be a different, likely rejected, value.
+        body: JSON.stringify({
+          content: trimmedContent,
+          ...(focusKeyword?.trim() ? { focusKeyword: focusKeyword.trim() } : {}),
+          ...(locale?.trim() ? { locale: locale.trim() } : {}),
+          ...(siteTitle?.trim() ? { siteTitle: siteTitle.trim() } : {}),
+          ...(title?.trim() ? { title: title.trim() } : {}),
+        }),
+        headers: buildCortexAiRequestHeaders(),
+        method: 'POST',
+      });
+
+      const payload = (await response.json().catch(() => null)) as Record<string, unknown> | null;
+
+      if (!response.ok || !payload) {
+        // Every error shape from these routes is `{ error: string }` at 400/403/500, so a
+        // missing `error` means something upstream of the route failed (a proxy, a crash
+        // before the handler) and a generic message is the honest thing to show.
+        const message =
+          payload && typeof payload['error'] === 'string'
+            ? (payload['error'] as string)
+            : 'Cortex AI could not generate metadata.';
+        throw new Error(message);
+      }
+
+      onGenerated({
+        metaDescription: readString(payload, 'metaDescription'),
+        metaTitle: readString(payload, 'metaTitle'),
+        ogDescription: readString(payload, 'ogDescription'),
+        ogTitle: readString(payload, 'ogTitle'),
+      });
+      toast.success('Cortex AI drafted your SEO metadata.');
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Cortex AI could not generate metadata.');
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <Button
+      className="h-7 gap-1.5 px-2 text-[11px]"
+      disabled={!canGenerate}
+      onClick={handleGenerate}
+      size="sm"
+      title={
+        trimmedContent
+          ? 'Draft the meta title and description from this page’s content'
+          : 'Add some content to this page first — Cortex AI needs something to summarize'
+      }
+      type="button"
+      variant="outline"
+    >
+      {isGenerating ? (
+        <Loader2 aria-hidden="true" className="h-3.5 w-3.5 animate-spin" />
+      ) : (
+        <Sparkles aria-hidden="true" className="h-3.5 w-3.5 text-amber-500" />
+      )}
+      {isGenerating ? 'Generating…' : 'Generate Meta Data with AI'}
+    </Button>
+  );
+}