create-nextblock 0.15.10 → 0.16.2

package/templates/nextblock-template/app/cms/posts/[id]/edit/page.tsx

@@ -21,6 +21,8 @@ import { CortexAiPageContextRegistrar } from "../../../components/CortexAiPageCo
 import DraftStatusActions from "../../../components/DraftStatusActions";
 import VisibilityControl from "../../../components/VisibilityControl";
 import { buildViewUrl } from "../../../../../lib/publishing/viewUrl";
+import { PageSeoAuditSection } from "../../../../../components/seo/PageSeoAuditSection";
+import { PageSeoProvider } from "../../../../../lib/seo/page-audit-context";
 
 type PostType = Database['public']['Tables']['posts']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row'];
@@ -172,6 +174,25 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
           translationGroupId: postWithBlocks.translation_group_id,
         }}
       />
+      {/*
+        A server component may render a client provider around client children,
+        which is the whole reason this file does not need converting: everything
+        inside the provider that touches the context — the form, the block editor
+        and the audit section — is already a client component, and this file
+        stays an RSC that can keep awaiting Supabase above them.
+
+        The provider must enclose both `PostForm` and `BlockEditorArea` because
+        the audit is assembled from halves they each own: the form publishes the
+        meta title and description, the block editor publishes the live blocks.
+        Seeding it from the row (draft overlay included, since `postWithBlocks`
+        already carries it) means the panel grades the real article on first
+        paint instead of an empty document.
+      */}
+      <PageSeoProvider
+        initialBlocks={postWithBlocks.blocks}
+        initialMetaDescription={postWithBlocks.meta_description}
+        initialMetaTitle={postWithBlocks.meta_title}
+      >
       <div className="space-y-8 w-full mx-auto px-6">
         <div className="flex justify-between items-center flex-wrap gap-4 w-full">
           <div className="flex items-center gap-3">
@@ -235,6 +256,9 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
         <PostForm
           post={postWithBlocks as PostType & { feature_image_id?: string | null }}
           formAction={updatePostWithId}
+          // Read-only: the form never writes blocks, it only lets Cortex AI read them so it
+          // can summarize the article when drafting meta title and description.
+          contentBlocks={postWithBlocks.blocks}
           actionButtonText="Update Post Metadata"
           isEditing={true}
           availableLanguagesProp={allSiteLanguages}
@@ -242,6 +266,14 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
           initialFeatureImageId={initialFeatureImageIdProp}
         />
 
+        {/*
+          Between the metadata form and the blocks because that is exactly what
+          it grades: everything above it and everything below it, together. It
+          collapses to a single summary row so the block editor keeps its place
+          on the screen.
+        */}
+        <PageSeoAuditSection />
+
         <Separator className="my-8" />
 
         <div className="w-full mx-auto px-6">
@@ -254,6 +286,7 @@ export default async function EditPostPage(props: { params: Promise<{ id: string
           />
         </div>
       </div>
+      </PageSeoProvider>
     </UploadFolderProvider>
   );
 }

package/templates/nextblock-template/app/cms/posts/components/PostForm.tsx

@@ -1,7 +1,7 @@
 // app/cms/posts/components/PostForm.tsx
 "use client";
 
-import { useEffect, useRef, useState, useTransition } from "react";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
@@ -18,11 +18,25 @@ import { Textarea } from "@nextblock-cms/ui";
 import type { Database } from "@nextblock-cms/db";
 import { useAuth } from '../../../../context/AuthContext';
 import FeatureImageField from "../../components/FeatureImageField";
+import { useCortexAiActive } from "../../components/CortexAiActiveContext";
+import GenerateMetaButton, {
+  type GeneratedSeoMetadata,
+} from "../../../../components/seo/GenerateMetaButton";
+import SocialPreviewDialog from "../../../../components/seo/SocialPreviewDialog";
+import { buildSeoContentForGeneration } from "../../../../lib/seo/block-content";
+import { usePageSeo } from "../../../../lib/seo/page-audit-context";
+import { resolveSiteUrl } from "../../../../lib/site-url";
 
 type Post = Database['public']['Tables']['posts']['Row'];
 type Language = Database['public']['Tables']['languages']['Row'];
 import { useHotkeys } from '../../../../hooks/use-hotkeys';
 
+/**
+ * The same soft limits `SiteSeoSettingsForm` and `PageForm` show, with the same
+ * amber-past-the-limit treatment, so a counter means one thing everywhere in the CMS.
+ */
+const META_TITLE_RECOMMENDED_MAX = 60;
+const META_DESCRIPTION_RECOMMENDED_MAX = 160;
 
 interface PostFormProps {
   post?: Post & { feature_image_id?: string | null };
@@ -32,6 +46,16 @@ interface PostFormProps {
   availableLanguagesProp?: Language[]; // Make optional
   initialFeatureImageUrl?: string | null;
   initialFeatureImageId?: string | null;
+  /**
+   * The post's block rows, read-only, so Cortex AI can be asked to summarize the article
+   * it is writing metadata for.
+   *
+   * Deliberately NOT a form field and NOT persisted: it is absent from the FormData, from
+   * `hasChanges`, and from the autosave dependency list. Blocks are owned by
+   * `BlockEditorArea` and have their own save path; this form must never become a second
+   * writer of them.
+   */
+  contentBlocks?: unknown;
 }
 
 export default function PostForm({
@@ -42,6 +66,7 @@ export default function PostForm({
   availableLanguagesProp = [], // Default to empty array
   initialFeatureImageUrl,
   initialFeatureImageId,
+  contentBlocks,
 }: PostFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -64,6 +89,55 @@ export default function PostForm({
   const [featureImageId, setFeatureImageId] = useState<string | null>(
     initialFeatureImageId || post?.feature_image_id || null
   );
+  /**
+   * The resolved URL of the feature image, for the share preview only.
+   *
+   * Exempt from the whole autosave path on purpose, not by omission: it is absent from the
+   * FormData, from `hasChanges`, and from the autosave effect's dependency array.
+   * `feature_image_id` is the field that persists — `FeatureImageField` renders it as the
+   * hidden input and the diff below already watches it — and this URL is only that id
+   * resolved against the `media` row, which the server redoes on every render. Storing it
+   * would store a duplicate that can go stale, and putting it in the autosave deps would
+   * schedule a second save for a change `featureImageId` already covers.
+   *
+   * It exists because the preview used to read `initialFeatureImageUrl`, which is fixed for
+   * the life of the render, so picking an image left the share card showing the previous one
+   * (or a placeholder) until a reload — which is the opposite of a live preview.
+   */
+  const [featureImageUrl, setFeatureImageUrl] = useState<string | null>(
+    initialFeatureImageUrl || null
+  );
+
+  const isCortexAiActive = useCortexAiActive();
+  /**
+   * Social-specific copy from Cortex AI, held in state and never stored.
+   *
+   * `posts` has no `og_title` / `og_description` columns, and adding one is not a one-line
+   * change — a new persisted field needs the useState, the sync-from-prop effect AND its
+   * dependency array, `hasChanges`, the autosave deps, the FormData fallback list, the JSX
+   * `name`, the server action's rawFormData/updateData/payload type, and the draft overlay
+   * in the edit RSC; miss one and the field silently never saves. So the OG copy informs
+   * the meta fields, which do persist, and the share card is built from those plus the
+   * feature image.
+   */
+  const [socialSuggestion, setSocialSuggestion] = useState<{
+    ogDescription: string;
+    ogTitle: string;
+  } | null>(null);
+
+  /**
+   * Prose for the metadata call: the article body first, then the editorial summaries the
+   * author has already written, so a post that is still an outline can still be described.
+   *
+   * Memoized because this form re-renders on every keystroke (each one re-arms the autosave
+   * timer), and re-flattening the whole article on each of those would be real, pointless
+   * work — the blocks cannot change while this form is mounted, since `BlockEditorArea`
+   * below owns them.
+   */
+  const seoContent = useMemo(
+    () => buildSeoContentForGeneration(contentBlocks, excerpt, subtitle, title),
+    [contentBlocks, excerpt, subtitle, title]
+  );
 
   // Use the passed-in languages directly
   const [availableLanguages] = useState<Language[]>(availableLanguagesProp);
@@ -103,8 +177,13 @@ export default function PostForm({
     setMetaDescription(post.meta_description || "");
     setCustomCanonical(post.custom_canonical || "");
     setFeatureImageId(initialFeatureImageId || post.feature_image_id || null);
+    // Re-seeded in lockstep with the id above: both are derived from the same
+    // server-resolved media row, so snapping the id back to the props while the URL kept a
+    // newer value would leave the preview describing an image the field no longer holds.
+    setFeatureImageUrl(initialFeatureImageUrl || null);
   }, [
     initialFeatureImageId,
+    initialFeatureImageUrl,
     post?.custom_canonical,
     post?.excerpt,
     post?.id,
@@ -236,6 +315,32 @@ export default function PostForm({
     isEditing,
   ]);
 
+  /**
+   * Hand the live meta fields to the page-level SEO audit.
+   *
+   * The panel that grades an article renders as a sibling of this form, not a child, so it
+   * cannot read this state directly — the values have to be published outward. This is a
+   * one-way broadcast of fields this form ALREADY owns and already persists: it adds no
+   * field, changes nothing about what `hasChanges` above compares, and puts nothing in the
+   * FormData. Leaving the autosave diff alone is the point, because publishing a value is a
+   * different event from changing one — wiring `setMeta` into that diff would make merely
+   * mounting the audit panel look like an edit and schedule a draft write.
+   *
+   * `usePageSeo()` returns null when no provider sits above this form. That is a supported
+   * arrangement rather than a bug — these fields are reachable from surfaces with no
+   * page-level panel — so the call stays optional the whole way through.
+   *
+   * The dependency is `setPageSeoMeta` rather than the context value: the setter is a stable
+   * `useCallback`, while the context object is rebuilt whenever the blocks array changes,
+   * which would re-run this effect on every keystroke elsewhere in the editor. The setter
+   * also bails when the values are unchanged, so nothing here can loop back into a render of
+   * this form.
+   */
+  const setPageSeoMeta = usePageSeo()?.setMeta;
+  useEffect(() => {
+    setPageSeoMeta?.({ metaDescription, metaTitle });
+  }, [metaDescription, metaTitle, setPageSeoMeta]);
+
   // Remove languagesLoading from this condition
   if (authLoading) {
     return <div>Loading form...</div>;
@@ -244,6 +349,44 @@ export default function PostForm({
     return <div>Please log in to manage posts.</div>;
   }
 
+  const selectedLanguageCode =
+    availableLanguages.find((lang) => lang.id.toString() === languageId)?.code ?? null;
+  const previewTitle = metaTitle.trim() || title.trim();
+  const previewUrl = `${resolveSiteUrl()}/article/${(slug || "").replace(/^\/+/, "")}`;
+
+  /**
+   * Fold a generation into the form.
+   *
+   * Setting state is the entire persistence story: the autosave effect diffs this state
+   * against the `post` prop and calls `formAction` a second later, writing into
+   * `content_drafts`. A direct row UPDATE here would bypass the draft and mutate the live
+   * post — exactly what draft mode exists to prevent.
+   */
+  /**
+   * Track the picked image for the preview as well as for the save.
+   *
+   * The id half feeds `hasChanges` and therefore the autosave; the URL half is purely
+   * presentational (see the state declaration above) and goes no further than the card.
+   */
+  const handleFeatureImageChange = (imageId: string | null, imageUrl: string | null) => {
+    setFeatureImageId(imageId);
+    setFeatureImageUrl(imageUrl);
+  };
+
+  const handleGeneratedMetadata = (result: GeneratedSeoMetadata) => {
+    if (result.metaTitle) {
+      setMetaTitle(result.metaTitle);
+    }
+    if (result.metaDescription) {
+      setMetaDescription(result.metaDescription);
+    }
+    setSocialSuggestion(
+      result.ogTitle || result.ogDescription
+        ? { ogDescription: result.ogDescription, ogTitle: result.ogTitle }
+        : null
+    );
+  };
+
   return (
     <form ref={formRef} onSubmit={handleSubmit} className="space-y-4 w-full mx-auto px-6">
       {isEditing && (
@@ -336,17 +479,69 @@ export default function PostForm({
         </div>
       </div>
 
-      {/* Row 4: SEO Settings. Canonical override (optional): blank = self-referencing canonical. */}
+      {/* Row 4: SEO Settings. Canonical override (optional): blank = self-referencing canonical.
+
+          This header is no longer gated on `isCortexAiActive`. It now carries the share-card
+          trigger, which has nothing to do with the AI package and must be reachable on every
+          install; only the generate button stays premium-gated, inside the row. */}
+      <div className="flex flex-wrap items-center justify-between gap-2 pt-1">
+        <span className="text-[11px] uppercase tracking-wider text-muted-foreground/80 font-semibold">
+          Search &amp; social
+        </span>
+        <div className="flex flex-wrap items-center gap-2">
+          {isCortexAiActive && (
+            <GenerateMetaButton
+              content={seoContent}
+              locale={selectedLanguageCode}
+              onGenerated={handleGeneratedMetadata}
+              title={title}
+            />
+          )}
+          {/* The share-card rehearsal moved into a modal: it is a glance, not a field, and
+              inline it added roughly four hundred pixels to a form that already scrolls.
+              Here it sits beside the two inputs it previews. Every prop is live form state,
+              so the card repaints while the dialog is open, and none of it is written
+              anywhere — see `SocialPreviewDialog`. */}
+          <SocialPreviewDialog
+            description={metaDescription}
+            imageUrl={featureImageUrl}
+            title={previewTitle}
+            url={previewUrl}
+          />
+        </div>
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
         {/* Meta Title */}
         <div className="md:col-span-4 flex flex-col gap-1">
-          <Label htmlFor="meta_title" className="text-xs font-medium">Meta Title (SEO)</Label>
+          <div className="flex items-center justify-between gap-2">
+            <Label htmlFor="meta_title" className="text-xs font-medium">Meta Title (SEO)</Label>
+            <span
+              className={`text-[10px] ${
+                metaTitle.length > META_TITLE_RECOMMENDED_MAX
+                  ? 'text-amber-600'
+                  : 'text-muted-foreground'
+              }`}
+            >
+              {metaTitle.length}/{META_TITLE_RECOMMENDED_MAX}
+            </span>
+          </div>
           <Input id="meta_title" name="meta_title" value={metaTitle} onChange={(e) => setMetaTitle(e.target.value)} className="h-9" />
         </div>
 
         {/* Meta Description */}
         <div className="md:col-span-4 flex flex-col gap-1">
-          <Label htmlFor="meta_description" className="text-xs font-medium">Meta Description (SEO)</Label>
+          <div className="flex items-center justify-between gap-2">
+            <Label htmlFor="meta_description" className="text-xs font-medium">Meta Description (SEO)</Label>
+            <span
+              className={`text-[10px] ${
+                metaDescription.length > META_DESCRIPTION_RECOMMENDED_MAX
+                  ? 'text-amber-600'
+                  : 'text-muted-foreground'
+              }`}
+            >
+              {metaDescription.length}/{META_DESCRIPTION_RECOMMENDED_MAX}
+            </span>
+          </div>
           <Textarea id="meta_description" name="meta_description" value={metaDescription} onChange={(e) => setMetaDescription(e.target.value)} className="min-h-[36px] h-9 py-1.5 resize-y text-sm leading-normal" rows={1} placeholder="Meta description for search engines..." />
         </div>
 
@@ -357,10 +552,50 @@ export default function PostForm({
         </div>
       </div>
 
+      {/* Suggested social copy. Shown, not stored: posts have no Open Graph columns, so the
+          only way this survives is by being folded into the meta fields — hence apply. */}
+      {socialSuggestion && (
+        <div className="rounded-md border border-border bg-muted/30 p-3 space-y-2">
+          <p className="text-[11px] font-medium text-muted-foreground">
+            Cortex AI also drafted social-specific copy. Posts have no separate Open Graph
+            fields, so this is only a suggestion for the meta fields above.
+          </p>
+          {socialSuggestion.ogTitle && (
+            <p className="text-xs text-foreground"><strong>Social title:</strong> {socialSuggestion.ogTitle}</p>
+          )}
+          {socialSuggestion.ogDescription && (
+            <p className="text-xs text-foreground"><strong>Social description:</strong> {socialSuggestion.ogDescription}</p>
+          )}
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              onClick={() => {
+                if (socialSuggestion.ogTitle) setMetaTitle(socialSuggestion.ogTitle);
+                if (socialSuggestion.ogDescription) setMetaDescription(socialSuggestion.ogDescription);
+              }}
+            >
+              Use for meta fields
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              onClick={() => setSocialSuggestion(null)}
+            >
+              Dismiss
+            </Button>
+          </div>
+        </div>
+      )}
+
       <FeatureImageField
         initialImageId={initialFeatureImageId || post?.feature_image_id || null}
         initialImageUrl={initialFeatureImageUrl || null}
-        onImageIdChange={setFeatureImageId}
+        onImageIdChange={handleFeatureImageChange}
         uploadFolder={`posts/${(slug || 'untitled').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '')}/`}
       />