create-nextblock 0.11.2 → 0.12.0

package/templates/nextblock-template/app/article/[slug]/page.tsx

@@ -14,6 +14,7 @@ import {
   resolvePostMetaDescription,
   stringifyJsonLd,
   buildSocialMetadata,
+  buildCanonicalUrl,
   toOpenGraphLocale,
 } from '../../lib/seo';
 import { getSiteSettings } from '../../lib/site-settings';
@@ -110,6 +111,8 @@ export async function generateMetadata(
   const title = resolveMetaTitle(postData.meta_title, postData.title);
   const description = resolvePostMetaDescription(postData.meta_description, postData.subtitle);
   const { siteTitle } = await getSiteSettings();
+  // Self-referencing `<siteUrl>/article/<slug>` unless the post sets a manual custom_canonical override.
+  const canonicalUrl = buildCanonicalUrl(postData.custom_canonical, siteUrl, `/article/${params.slug}`);
 
   return {
     title,
@@ -117,7 +120,7 @@ export async function generateMetadata(
     ...buildSocialMetadata({
       title,
       description,
-      url: `${siteUrl}/article/${params.slug}`,
+      url: canonicalUrl,
       siteTitle,
       imageUrl: postData.feature_image_url,
       type: 'article',
@@ -125,7 +128,7 @@ export async function generateMetadata(
       locale: toOpenGraphLocale(postData.language_code),
     }),
     alternates: {
-      canonical: `${siteUrl}/article/${params.slug}`,
+      canonical: canonicalUrl,
       languages: Object.keys(alternates).length > 0 ? alternates : undefined,
     },
   };

package/templates/nextblock-template/app/article/[slug]/page.utils.ts

@@ -87,6 +87,7 @@ function applyDraftToPost(post: any, draft: ContentDraftRow) {
     status: draftString(draft, "status", post.status) as PostType["status"],
     meta_title: draftNullableString(draft, "meta_title", post.meta_title),
     meta_description: draftNullableString(draft, "meta_description", post.meta_description),
+    custom_canonical: draftNullableString(draft, "custom_canonical", post.custom_canonical),
     label: draftNullableString(draft, "label", post.label),
     excerpt: draftNullableString(draft, "excerpt", post.excerpt),
     subtitle: draftNullableString(draft, "subtitle", post.subtitle),

package/templates/nextblock-template/app/cms/pages/actions.ts

@@ -40,6 +40,7 @@ export async function createPage(formData: FormData) {
     status: formData.get("status") as PageStatus,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
+    custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: getOptionalFeatureImageId(formData),
   };
 
@@ -123,6 +124,7 @@ export async function updatePage(pageId: number, formData: FormData) {
     status: formData.get("status") as PageStatus,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
+    custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: getOptionalFeatureImageId(formData),
   };
 
@@ -137,6 +139,7 @@ export async function updatePage(pageId: number, formData: FormData) {
     status: rawFormData.status,
     meta_title: rawFormData.meta_title,
     meta_description: rawFormData.meta_description,
+    custom_canonical: rawFormData.custom_canonical,
     feature_image_id: rawFormData.feature_image_id,
   };
 
@@ -147,24 +150,24 @@ export async function updatePage(pageId: number, formData: FormData) {
       ...pageUpdateData,
     };
 
-    const { error: updateError } = await supabase
-      .from("content_drafts")
-      .update({ meta: updatedMeta as any })
-      .eq("id", draft.id);
-
-    if (updateError) {
-      console.error("Error updating page draft:", updateError);
-      if (updateError.code === '23505' && updateError.message.includes('pages_language_id_slug_key')) {
-        return { error: `The slug "${pageUpdateData.slug}" already exists for the selected language. Please use a unique slug.` };
-      }
-      return { error: `Failed to update draft: ${updateError.message}` };
-    }
-  } catch (err: any) {
-    console.error("Error loading/creating draft for page metadata update:", err);
-    return { error: `Failed to load draft: ${err.message || err}` };
-  }
-
-  revalidatePath("/cms/pages");
+    const { error: updateError } = await supabase
+      .from("content_drafts")
+      .update({ meta: updatedMeta as any })
+      .eq("id", draft.id);
+
+    if (updateError) {
+      console.error("Error updating page draft:", updateError);
+      if (updateError.code === '23505' && updateError.message.includes('pages_language_id_slug_key')) {
+        return { error: `The slug "${pageUpdateData.slug}" already exists for the selected language. Please use a unique slug.` };
+      }
+      return { error: `Failed to update draft: ${updateError.message}` };
+    }
+  } catch (err: any) {
+    console.error("Error loading/creating draft for page metadata update:", err);
+    return { error: `Failed to load draft: ${err.message || err}` };
+  }
+
+  revalidatePath("/cms/pages");
   revalidatePublicPageSlug(existingPage.slug);
   if (rawFormData.slug && rawFormData.slug !== existingPage.slug) {
       revalidatePublicPageSlug(rawFormData.slug);
@@ -252,6 +255,7 @@ type UpsertPagePayload = {
   status: PageStatus;
   meta_title?: string | null;
   meta_description?: string | null;
+  custom_canonical?: string | null;
   feature_image_id?: string | null;
   translation_group_id: string; // UUID
 };

package/templates/nextblock-template/app/cms/pages/components/PageForm.tsx

@@ -81,6 +81,7 @@ export default function PageForm({
   const [metaDescription, setMetaDescription] = useState(
     page?.meta_description || ""
   );
+  const [customCanonical, setCustomCanonical] = useState(page?.custom_canonical || "");
   const [featureImageId, setFeatureImageId] = useState<string | null>(
     initialFeatureImageId || page?.feature_image_id || null
   );
@@ -120,10 +121,12 @@ export default function PageForm({
     setStatus(page.status || "draft");
     setMetaTitle(page.meta_title || "");
     setMetaDescription(page.meta_description || "");
+    setCustomCanonical(page.custom_canonical || "");
     setFeatureImageId(initialFeatureImageId || page.feature_image_id || null);
   }, [
     initialFeatureImageId,
     page?.id,
+    page?.custom_canonical,
     page?.language_id,
     page?.meta_description,
     page?.meta_title,
@@ -156,6 +159,7 @@ export default function PageForm({
       formData.append("status", status);
       formData.append("meta_title", metaTitle);
       formData.append("meta_description", metaDescription);
+      formData.append("custom_canonical", customCanonical);
       formData.append("feature_image_id", featureImageId || "");
       if (translationGroupId) {
         formData.append("translation_group_id", translationGroupId);
@@ -213,6 +217,7 @@ export default function PageForm({
       status !== (page?.status || "draft") ||
       metaTitle !== (page?.meta_title || "") ||
       metaDescription !== (page?.meta_description || "") ||
+      customCanonical !== (page?.custom_canonical || "") ||
       featureImageId !== (page?.feature_image_id || null);
 
     if (!hasChanges) return;
@@ -347,7 +352,7 @@ export default function PageForm({
         </div>
       </div>
 
-      {/* Row 2: SEO Settings */}
+      {/* Row 2: SEO Settings. Canonical override (optional): blank = self-referencing canonical. */}
       <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">
@@ -362,7 +367,7 @@ export default function PageForm({
         </div>
 
         {/* Meta Description */}
-        <div className="md:col-span-8 flex flex-col gap-1">
+        <div className="md:col-span-4 flex flex-col gap-1">
           <Label htmlFor="meta_description" className="text-xs font-medium">Meta Description (SEO)</Label>
           <Textarea
             id="meta_description"
@@ -374,6 +379,19 @@ export default function PageForm({
             placeholder="Meta description for search engines..."
           />
         </div>
+
+        {/* Canonical URL */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="custom_canonical" className="text-xs font-medium">Canonical URL (SEO, optional)</Label>
+          <Input
+            id="custom_canonical"
+            name="custom_canonical"
+            value={customCanonical}
+            onChange={(e) => setCustomCanonical(e.target.value)}
+            className="h-9"
+            placeholder="Blank = self-referencing. Absolute https://… URL or /relative path to override."
+          />
+        </div>
       </div>
 
       <FeatureImageField

package/templates/nextblock-template/app/cms/posts/actions.ts

@@ -36,6 +36,7 @@ export async function createPost(formData: FormData) {
     published_at: formData.get("published_at") as string || null,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
+    custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: featureImageId_create,
   };
 
@@ -99,6 +100,7 @@ export async function createPost(formData: FormData) {
           subtitle: `Placeholder for ${lang.code.toUpperCase()} translation. Original subtitle: ${newPost.subtitle || ''}`.substring(0, 500),
           meta_title: null,
           meta_description: null,
+          custom_canonical: null,
           translation_group_id: newPost.translation_group_id,
           author_id: user.id,
         };
@@ -160,6 +162,7 @@ export async function updatePost(postId: number, formData: FormData) {
     published_at: formData.get("published_at") as string || null,
     meta_title: formData.get("meta_title") as string || null,
     meta_description: formData.get("meta_description") as string || null,
+    custom_canonical: formData.get("custom_canonical") as string || null,
     feature_image_id: featureImageId_update,
   };
 
@@ -188,6 +191,7 @@ export async function updatePost(postId: number, formData: FormData) {
     published_at: publishedAtISO,
     meta_title: rawFormData.meta_title,
     meta_description: rawFormData.meta_description,
+    custom_canonical: rawFormData.custom_canonical,
     feature_image_id: rawFormData.feature_image_id,
   };
 
@@ -306,6 +310,7 @@ type UpsertPostPayload = {
   published_at?: string | null;
   meta_title?: string | null;
   meta_description?: string | null;
+  custom_canonical?: string | null;
   translation_group_id: string;
   feature_image_id?: string | null;
 };

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

@@ -84,12 +84,13 @@ export default function PostForm({
     formatDateTimeLocal(post?.published_at)
   );
   const [metaTitle, setMetaTitle] = useState(post?.meta_title || "");
-  const [metaDescription, setMetaDescription] = useState(
-    post?.meta_description || ""
-  );
-  const [featureImageId, setFeatureImageId] = useState<string | null>(
-    initialFeatureImageId || post?.feature_image_id || null
-  );
+  const [metaDescription, setMetaDescription] = useState(
+    post?.meta_description || ""
+  );
+  const [customCanonical, setCustomCanonical] = useState(post?.custom_canonical || "");
+  const [featureImageId, setFeatureImageId] = useState<string | null>(
+    initialFeatureImageId || post?.feature_image_id || null
+  );
 
   // Use the passed-in languages directly
   const [availableLanguages] = useState<Language[]>(availableLanguagesProp);
@@ -126,14 +127,16 @@ export default function PostForm({
     setStatus(post.status || "draft");
     setExcerpt(post.excerpt || "");
     setSubtitle(post.subtitle || "");
-    setPublishedAt(formatDateTimeLocal(post.published_at));
-    setMetaTitle(post.meta_title || "");
-    setMetaDescription(post.meta_description || "");
-    setFeatureImageId(initialFeatureImageId || post.feature_image_id || null);
-  }, [
-    initialFeatureImageId,
-    post?.excerpt,
-    post?.id,
+    setPublishedAt(formatDateTimeLocal(post.published_at));
+    setMetaTitle(post.meta_title || "");
+    setMetaDescription(post.meta_description || "");
+    setCustomCanonical(post.custom_canonical || "");
+    setFeatureImageId(initialFeatureImageId || post.feature_image_id || null);
+  }, [
+    initialFeatureImageId,
+    post?.custom_canonical,
+    post?.excerpt,
+    post?.id,
     post?.label,
     post?.language_id,
     post?.meta_description,
@@ -142,9 +145,9 @@ export default function PostForm({
     post?.slug,
     post?.status,
     post?.subtitle,
-    post?.title,
-    post?.updated_at,
-  ]);
+    post?.title,
+    post?.updated_at,
+  ]);
 
   // Initialize languageId if creating new post and languages are available
   useEffect(() => {
@@ -172,20 +175,21 @@ export default function PostForm({
     setIsSaving(true);
     setSaveError(null);
 
-    const formData = customFormData || (formRef.current ? new FormData(formRef.current) : new FormData());
-    if (!customFormData && !formRef.current) {
-      formData.append("title", title);
-      formData.append("slug", slug);
-      formData.append("language_id", languageId);
+    const formData = customFormData || (formRef.current ? new FormData(formRef.current) : new FormData());
+    if (!customFormData && !formRef.current) {
+      formData.append("title", title);
+      formData.append("slug", slug);
+      formData.append("language_id", languageId);
       formData.append("label", label);
       formData.append("status", status);
       formData.append("excerpt", excerpt);
       formData.append("subtitle", subtitle);
-      formData.append("published_at", publishedAt);
-      formData.append("meta_title", metaTitle);
-      formData.append("meta_description", metaDescription);
-      formData.append("feature_image_id", featureImageId || "");
-    }
+      formData.append("published_at", publishedAt);
+      formData.append("meta_title", metaTitle);
+      formData.append("meta_description", metaDescription);
+      formData.append("custom_canonical", customCanonical);
+      formData.append("feature_image_id", featureImageId || "");
+    }
 
     try {
       const result = await formAction(formData);
@@ -241,10 +245,11 @@ export default function PostForm({
       status !== (post?.status || "draft") ||
       excerpt !== (post?.excerpt || "") ||
       subtitle !== (post?.subtitle || "") ||
-      publishedAt !== dbPublishedAt ||
-      metaTitle !== (post?.meta_title || "") ||
-      metaDescription !== (post?.meta_description || "") ||
-      featureImageId !== (post?.feature_image_id || null);
+      publishedAt !== dbPublishedAt ||
+      metaTitle !== (post?.meta_title || "") ||
+      metaDescription !== (post?.meta_description || "") ||
+      customCanonical !== (post?.custom_canonical || "") ||
+      featureImageId !== (post?.feature_image_id || null);
 
     if (!hasChanges) return;
 
@@ -261,12 +266,13 @@ export default function PostForm({
     status,
     excerpt,
     subtitle,
-    publishedAt,
-    metaTitle,
-    metaDescription,
-    featureImageId,
-    post,
-    isEditing,
+    publishedAt,
+    metaTitle,
+    metaDescription,
+    customCanonical,
+    featureImageId,
+    post,
+    isEditing,
   ]);
 
   // Remove languagesLoading from this condition
@@ -278,7 +284,7 @@ export default function PostForm({
   }
 
   return (
-    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6 w-full mx-auto px-6">
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-4 w-full mx-auto px-6">
       {isEditing && (
         <div className="flex items-center justify-between text-xs text-muted-foreground pb-2 border-b border-border/40 mb-2">
           <span className="font-semibold text-[11px] uppercase tracking-wider text-muted-foreground/80">Post Settings</span>
@@ -308,114 +314,112 @@ export default function PostForm({
            <AlertDescription>{formMessage.text}</AlertDescription>
         </Alert>
       )}
-      <div>
-        <Label htmlFor="title">Title</Label>
-        <Input id="title" name="title" value={title} onChange={handleTitleChange} required className="mt-1" />
-      </div>
+      {/* Row 1: Basic Post Information */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Title */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="title" className="text-xs font-medium">Title</Label>
+          <Input id="title" name="title" value={title} onChange={handleTitleChange} required className="h-9" />
+        </div>
 
-      <div>
-        <Label htmlFor="slug">Slug</Label>
-        <Input id="slug" name="slug" value={slug} onChange={(e) => setSlug(e.target.value)} required className="mt-1" />
-      </div>
+        {/* Slug */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="slug" className="text-xs font-medium">Slug</Label>
+          <Input id="slug" name="slug" value={slug} onChange={(e) => setSlug(e.target.value)} required className="h-9" />
+        </div>
 
-      <div>
-        <Label htmlFor="language_id">Language</Label>
-        {availableLanguages.length > 0 ? (
-        <Select name="language_id" value={languageId} onValueChange={setLanguageId} required disabled={isEditing}>
-          <SelectTrigger className="mt-1"><SelectValue placeholder="Select language" /></SelectTrigger>
-          <SelectContent>
-            {availableLanguages.map((lang) => (
-              <SelectItem key={lang.id} value={lang.id.toString()}>{lang.name} ({lang.code})</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        ) : (
-           <p className="text-sm text-muted-foreground mt-1">No languages available. Please add languages in CMS settings.</p>
-        )}
-      </div>
+        {/* Language */}
+        <div className="md:col-span-2 flex flex-col gap-1">
+          <Label htmlFor="language_id" className="text-xs font-medium">Language</Label>
+          {availableLanguages.length > 0 ? (
+            <Select name="language_id" value={languageId} onValueChange={setLanguageId} required disabled={isEditing}>
+              <SelectTrigger className="h-9"><SelectValue placeholder="Select language" /></SelectTrigger>
+              <SelectContent>
+                {availableLanguages.map((lang) => (
+                  <SelectItem key={lang.id} value={lang.id.toString()}>{lang.name} ({lang.code})</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <p className="text-[10px] text-muted-foreground leading-tight py-2">No languages available. Add languages in CMS settings.</p>
+          )}
+        </div>
 
-      <div>
-        <Label htmlFor="label">Label</Label>
-        <Input
-          id="label"
-          name="label"
-          value={label}
-          onChange={(e) => setLabel(e.target.value)}
-          className="mt-1"
-          placeholder="e.g. Architecture"
-        />
-        <p className="text-xs text-muted-foreground mt-1">Short pill text shown on the article hero and post cards.</p>
+        {/* Status */}
+        <div className="md:col-span-2 flex flex-col gap-1">
+          <Label htmlFor="status" className="text-xs font-medium">Status</Label>
+          <Select name="status" value={status} onValueChange={(value) => setStatus(value as PageStatus)} required>
+            <SelectTrigger className="h-9"><SelectValue placeholder="Select status" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="draft">Draft</SelectItem>
+              <SelectItem value="published">Published</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
 
-      <div>
-        <Label htmlFor="excerpt">Excerpt</Label>
-        <Textarea
-          id="excerpt"
-          name="excerpt"
-          value={excerpt}
-          onChange={(e) => setExcerpt(e.target.value)}
-          className="mt-1"
-          rows={3}
-          placeholder="Short editorial summary for the hero metadata row and article cards"
-        />
-        <p className="text-xs text-muted-foreground mt-1">Used as the short summary above the hero and on public post cards.</p>
-      </div>
+      {/* Row 2: Label + Published At */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Label */}
+        <div className="md:col-span-6 flex flex-col gap-1">
+          <Label htmlFor="label" className="text-xs font-medium">Label</Label>
+          <Input id="label" name="label" value={label} onChange={(e) => setLabel(e.target.value)} className="h-9" placeholder="e.g. Architecture" />
+          <p className="text-[10px] text-muted-foreground leading-tight">Short pill text shown on the article hero and post cards.</p>
+        </div>
 
-      <div>
-        <Label htmlFor="subtitle">Subtitle</Label>
-        <Textarea
-          id="subtitle"
-          name="subtitle"
-          value={subtitle}
-          onChange={(e) => setSubtitle(e.target.value)}
-          className="mt-1"
-          rows={4}
-          placeholder="Longer deck shown under the article title"
-        />
-        <p className="text-xs text-muted-foreground mt-1">Displayed as the larger deck under the article title.</p>
+        {/* Published At */}
+        <div className="md:col-span-6 flex flex-col gap-1">
+          <Label htmlFor="published_at" className="text-xs font-medium">Published At (Optional)</Label>
+          <Input id="published_at" name="published_at" type="datetime-local" value={publishedAt} onChange={(e) => setPublishedAt(e.target.value)} className="h-9" />
+          <p className="text-[10px] text-muted-foreground leading-tight">Leave blank to publish immediately when status is &apos;Published&apos;.</p>
+        </div>
       </div>
 
-      <div>
-        <Label htmlFor="status">Status</Label>
-        <Select name="status" value={status} onValueChange={(value) => setStatus(value as PageStatus)} required>
-          <SelectTrigger className="mt-1"><SelectValue placeholder="Select status" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="draft">Draft</SelectItem>
-            <SelectItem value="published">Published</SelectItem>
-            <SelectItem value="archived">Archived</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      {/* Row 3: Excerpt + Subtitle */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Excerpt */}
+        <div className="md:col-span-6 flex flex-col gap-1">
+          <Label htmlFor="excerpt" className="text-xs font-medium">Excerpt</Label>
+          <Textarea id="excerpt" name="excerpt" value={excerpt} onChange={(e) => setExcerpt(e.target.value)} className="resize-y text-sm leading-normal" rows={3} placeholder="Short editorial summary for the hero metadata row and article cards" />
+          <p className="text-[10px] text-muted-foreground leading-tight">Used as the short summary above the hero and on public post cards.</p>
+        </div>
 
-      <div>
-        <Label htmlFor="published_at">Published At (Optional)</Label>
-        <Input
-          id="published_at"
-          name="published_at"
-          type="datetime-local"
-          value={publishedAt}
-          onChange={(e) => setPublishedAt(e.target.value)}
-          className="mt-1"
-        />
-         <p className="text-xs text-muted-foreground mt-1">Leave blank to publish immediately when status is &apos;Published&apos;.</p>
+        {/* Subtitle */}
+        <div className="md:col-span-6 flex flex-col gap-1">
+          <Label htmlFor="subtitle" className="text-xs font-medium">Subtitle</Label>
+          <Textarea id="subtitle" name="subtitle" value={subtitle} onChange={(e) => setSubtitle(e.target.value)} className="resize-y text-sm leading-normal" rows={3} placeholder="Longer deck shown under the article title" />
+          <p className="text-[10px] text-muted-foreground leading-tight">Displayed as the larger deck under the article title.</p>
+        </div>
       </div>
 
-      <div>
-        <Label htmlFor="meta_title">Meta Title (SEO)</Label>
-        <Input id="meta_title" name="meta_title" value={metaTitle} onChange={(e) => setMetaTitle(e.target.value)} className="mt-1" />
-      </div>
+      {/* Row 4: SEO Settings. Canonical override (optional): blank = self-referencing canonical. */}
+      <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>
+          <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>
+          <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>
 
-      <div>
-        <Label htmlFor="meta_description">Meta Description (SEO)</Label>
-        <Textarea id="meta_description" name="meta_description" value={metaDescription} onChange={(e) => setMetaDescription(e.target.value)} className="mt-1" rows={3} />
+        {/* Canonical URL */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="custom_canonical" className="text-xs font-medium">Canonical URL (SEO, optional)</Label>
+          <Input id="custom_canonical" name="custom_canonical" value={customCanonical} onChange={(e) => setCustomCanonical(e.target.value)} className="h-9" placeholder="Blank = self-referencing. Absolute https://… URL or /relative path to override." />
+        </div>
       </div>
-    
-      <FeatureImageField
-        initialImageId={initialFeatureImageId || post?.feature_image_id || null}
-        initialImageUrl={initialFeatureImageUrl || null}
-        onImageIdChange={setFeatureImageId}
-        uploadFolder={`posts/${(slug || 'untitled').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '')}/`}
-      />
+
+      <FeatureImageField
+        initialImageId={initialFeatureImageId || post?.feature_image_id || null}
+        initialImageUrl={initialFeatureImageUrl || null}
+        onImageIdChange={setFeatureImageId}
+        uploadFolder={`posts/${(slug || 'untitled').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '')}/`}
+      />
     
       {!isEditing && (
         <div className="flex justify-end space-x-3 pt-6"> {/* Increased pt for spacing */}

package/templates/nextblock-template/app/cms/settings/copyright/actions.ts

@@ -8,6 +8,30 @@ export type CopyrightSettings = {
   [key: string]: string;
 };
 
+// site_settings key holding the "Published with NextBlock™ CMS" footer attribution
+// toggle. Absent row = enabled (the default), so fresh installs show the backlink.
+const FOOTER_ATTRIBUTION_KEY = 'footer_show_attribution';
+
+/**
+ * Whether the "Published with NextBlock™ CMS" backlink shows in the public footer.
+ * Defaults to ON when the setting has never been saved.
+ */
+export async function getFooterAttributionEnabled(): Promise<boolean> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from('site_settings')
+    .select('value')
+    .eq('key', FOOTER_ATTRIBUTION_KEY)
+    .maybeSingle();
+
+  if (error || !data) {
+    return true;
+  }
+
+  // Stored as a JSON boolean; only an explicit `false` disables it.
+  return data.value !== false;
+}
+
 export async function getCopyrightSettings(): Promise<CopyrightSettings> {
   const supabase = createClient();
   const { data, error } = await supabase
@@ -61,6 +85,18 @@ export async function updateCopyrightSettings(formData: FormData) {
     throw new Error('Failed to update copyright settings.');
   }
 
+  // Persist the footer attribution toggle. The client always submits an explicit
+  // 'true'/'false' so an unchecked box is captured (not just omitted).
+  const attributionEnabled = formData.get('footer_show_attribution') !== 'false';
+  const { error: attributionError } = await supabase
+    .from('site_settings')
+    .upsert({ key: FOOTER_ATTRIBUTION_KEY, value: attributionEnabled });
+
+  if (attributionError) {
+    console.error('Error updating footer attribution setting:', attributionError);
+    throw new Error('Failed to update footer attribution setting.');
+  }
+
   // Revalidate the root layout to reflect changes immediately across the site.
   revalidatePath('/', 'layout');