create-nextblock 0.11.3 → 0.12.0

package/templates/nextblock-template/app/cms/settings/copyright/components/CopyrightForm.tsx

@@ -16,12 +16,14 @@ import { useHotkeys } from '../../../../../hooks/use-hotkeys';
 interface CopyrightFormProps {
   languages: Language[];
   initialSettings: CopyrightSettings;
+  initialAttributionEnabled: boolean;
 }
 
-export default function CopyrightForm({ languages, initialSettings }: CopyrightFormProps) {
+export default function CopyrightForm({ languages, initialSettings, initialAttributionEnabled }: CopyrightFormProps) {
   const [isPending, startTransition] = useTransition();
   const [message, setMessage] = useState<Message | null>(null);
   const [settings, setSettings] = useState<CopyrightSettings>(initialSettings);
+  const [attributionEnabled, setAttributionEnabled] = useState(initialAttributionEnabled);
 
   const handleInputChange = (langCode: string, value: string) => {
     setSettings(prev => ({ ...prev, [langCode]: value }));
@@ -36,6 +38,8 @@ export default function CopyrightForm({ languages, initialSettings }: CopyrightF
         const value = settings[lang.code] || '';
         formData.append(`copyright_${lang.code}`, value);
     }
+    // Always submit an explicit value so unchecking is captured (not just omitted).
+    formData.append('footer_show_attribution', attributionEnabled ? 'true' : 'false');
 
     startTransition(async () => {
       try {
@@ -73,6 +77,27 @@ export default function CopyrightForm({ languages, initialSettings }: CopyrightF
         ))}
       </div>
 
+      <div className="space-y-2 border-t pt-4">
+        <div className="flex items-start gap-3">
+          <input
+            id="footer_show_attribution"
+            name="footer_show_attribution"
+            type="checkbox"
+            checked={attributionEnabled}
+            onChange={(e) => setAttributionEnabled(e.target.checked)}
+            className="mt-0.5 h-4 w-4 rounded border-input"
+          />
+          <div className="space-y-1">
+            <Label htmlFor="footer_show_attribution" className="cursor-pointer">
+              Show &ldquo;Published with NextBlock&trade; CMS&rdquo; link in the footer
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              Adds a small credit link to nextblock.dev next to the copyright. Enabled by default.
+            </p>
+          </div>
+        </div>
+      </div>
+
       <div className="flex items-center gap-4">
         <Button type="submit" disabled={isPending}>
           {isPending ? (

package/templates/nextblock-template/app/cms/settings/copyright/page.tsx

@@ -1,12 +1,15 @@
 // app/cms/settings/copyright/page.tsx
 import { getActiveLanguagesServerSide } from '../languages/actions';
-import { getCopyrightSettings } from './actions';
+import { getCopyrightSettings, getFooterAttributionEnabled } from './actions';
 import CopyrightForm from './components/CopyrightForm';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
 
 export default async function CopyrightSettingsPage() {
   const languages = await getActiveLanguagesServerSide();
-  const copyrightSettings = await getCopyrightSettings();
+  const [copyrightSettings, footerAttributionEnabled] = await Promise.all([
+    getCopyrightSettings(),
+    getFooterAttributionEnabled(),
+  ]);
 
   const year = new Date().getFullYear();
 
@@ -24,6 +27,7 @@ export default async function CopyrightSettingsPage() {
                 <CopyrightForm
                     languages={languages}
                     initialSettings={copyrightSettings}
+                    initialAttributionEnabled={footerAttributionEnabled}
                 />
             </CardContent>
         </Card>

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

@@ -51,9 +51,13 @@ export async function sendTestEmail(formData: FormData) {
 
   await sendEmail({
     to,
-    subject: 'NextBlock test email',
-    text: 'This is a test email from your NextBlock CMS. SMTP is configured correctly.',
-    html: '<p>This is a test email from your NextBlock CMS. SMTP is configured correctly. 🎉</p>',
+    subject: 'Test email',
+    text: 'This is a test email from your CMS. SMTP is configured correctly.',
+    html:
+      '<div style="font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;max-width:480px;margin:0 auto;padding:24px;">' +
+      '{{brand_header}}' +
+      '<p>This is a test email from your CMS. SMTP is configured correctly. 🎉</p>' +
+      '</div>',
   });
 
   return { success: true as const, message: `Test email sent to ${to}.` };

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

@@ -6,6 +6,11 @@ import { revalidatePath, updateTag } from 'next/cache'
 import { redirect } from 'next/navigation'
 import type { Logo } from './types'
 import { SITE_SETTINGS_CACHE_TAG } from '../../../lib/site-settings'
+import {
+  ACTIVE_LOGO_SETTING_KEY,
+  resolveActiveLogo,
+  resolveActiveLogoId,
+} from '../../../../lib/logos/active-logo'
 
 const PUBLIC_LAYOUT_LOGO_CACHE_TAG = 'public-layout-logo'
 
@@ -100,25 +105,35 @@ export async function getLogoById(id: string) {
 
 export async function getActiveLogo(): Promise<Logo | null> {
   const supabase = createClient()
+  return (await resolveActiveLogo(supabase)) as Logo | null
+}
 
-  const { data, error } = await supabase
-    .from('logos')
-    .select(
-      `
-      *,
-      media:media_id (*)
-    `
-    )
-    .order('created_at', { ascending: false })
-    .limit(1)
-    .maybeSingle()
+/** The admin-pinned active logo id (site_settings.active_logo_id), or null when unset. */
+export async function getActiveLogoId(): Promise<string | null> {
+  const supabase = createClient()
+  return resolveActiveLogoId(supabase)
+}
+
+/**
+ * Pin which logo is active across the storefront, invoices, and transactional emails.
+ * Persists the choice as site_settings.active_logo_id (RLS restricts writes to ADMIN/WRITER)
+ * and busts the public header + CMS caches so the change shows immediately.
+ */
+export async function setActiveLogo(
+  logoId: string
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = createClient()
+  const { error } = await supabase
+    .from('site_settings')
+    .upsert({ key: ACTIVE_LOGO_SETTING_KEY, value: logoId })
 
   if (error) {
-    console.error('Error fetching active logo:', error.message)
-    throw new Error(`Failed to fetch active logo: ${error.message}`)
+    console.error('Error setting active logo:', error.message)
+    return { success: false, error: error.message }
   }
 
-  return data as Logo | null
+  revalidateLogoViews()
+  return { success: true }
 }
 
 export async function saveInvoiceSettings(payload: InvoiceSettings) {

package/templates/nextblock-template/app/cms/settings/logos/components/SetActiveLogoButton.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { CheckCircle2 } from "lucide-react";
+import { setActiveLogo } from "../actions";
+import { useTransition } from "react";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/navigation";
+
+interface SetActiveLogoButtonProps {
+  logoId: string;
+}
+
+export default function SetActiveLogoButton({ logoId }: SetActiveLogoButtonProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  const handleSetActive = () => {
+    startTransition(async () => {
+      const result = await setActiveLogo(logoId);
+      if (result?.error) {
+        toast.error(`Error: ${result.error}`);
+      } else {
+        toast.success("Active logo updated");
+        router.refresh();
+      }
+    });
+  };
+
+  return (
+    <DropdownMenuItem
+      className="cursor-pointer"
+      // Keep the menu from closing before the transition starts.
+      onSelect={(e) => e.preventDefault()}
+      onClick={() => !isPending && handleSetActive()}
+      disabled={isPending}
+    >
+      <CheckCircle2 className="mr-2 h-4 w-4" />
+      {isPending ? "Setting active..." : "Set as active"}
+    </DropdownMenuItem>
+  );
+}

package/templates/nextblock-template/app/cms/settings/logos/page.tsx

@@ -17,11 +17,12 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from '@nextblock-cms/ui'
-import { getLogos, getSiteSeoSettings } from './actions'
+import { getActiveLogoId, getLogos, getSiteSeoSettings } from './actions'
 import BrandingSettingsForm from './components/BrandingSettingsForm'
 import SiteSeoSettingsForm from './components/SiteSeoSettingsForm'
 import MediaImage from '../../media/components/MediaImage'
 import DeleteLogoButton from './components/DeleteLogoButton'
+import SetActiveLogoButton from './components/SetActiveLogoButton'
 import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl'
 
 function resolveLogoSrc(objectKey?: string | null) {
@@ -29,12 +30,17 @@ function resolveLogoSrc(objectKey?: string | null) {
 }
 
 export default async function CmsLogosListPage() {
-  const [logos, branding, seoSettings] = await Promise.all([
+  const [logos, branding, seoSettings, pinnedActiveLogoId] = await Promise.all([
     getLogos(),
     getInvoiceBrandingData(),
     getSiteSeoSettings(),
+    getActiveLogoId(),
   ])
 
+  // The effective active logo: the admin-pinned one, else the most recent (logos come back
+  // newest-first). This is what the storefront, invoices, and emails resolve to.
+  const activeLogoId = pinnedActiveLogoId ?? logos[0]?.id ?? null
+
   return (
     <div className="w-full space-y-8">
       <div className="mb-6">
@@ -55,7 +61,8 @@ export default async function CmsLogosListPage() {
           <div>
             <h2 className="text-xl font-semibold">Logos</h2>
             <p className="text-sm text-muted-foreground">
-              The most recently created logo is used on the storefront and invoices.
+              Choose which logo is active on the storefront, invoices, and emails. New logos
+              become active automatically until you pick one.
             </p>
           </div>
           <Button variant="default" asChild>
@@ -92,7 +99,7 @@ export default async function CmsLogosListPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {logos.map((logo, index) => (
+                {logos.map((logo) => (
                   <TableRow key={logo.id}>
                     <TableCell>
                     {logo.media ? (
@@ -112,7 +119,7 @@ export default async function CmsLogosListPage() {
                     <TableCell className="font-medium">
                       <div className="flex items-center gap-2">
                         <span>{logo.name}</span>
-                        {index === 0 ? (
+                        {logo.id === activeLogoId ? (
                           <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
                             Active
                           </span>
@@ -130,6 +137,12 @@ export default async function CmsLogosListPage() {
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
+                          {logo.id !== activeLogoId ? (
+                            <>
+                              <SetActiveLogoButton logoId={logo.id} />
+                              <DropdownMenuSeparator />
+                            </>
+                          ) : null}
                           <DropdownMenuItem asChild>
                             <Link href={`/cms/settings/logos/${logo.id}/edit`}>
                               <Edit3 className="mr-2 h-4 w-4" />

package/templates/nextblock-template/app/layout.tsx

@@ -26,6 +26,7 @@ import { verifyPackageOnline } from '@nextblock-cms/db/server';
 import { unstable_cache } from 'next/cache';
 import { createStaticSupabaseClient, getSiteSettings } from './lib/site-settings';
 import { DEFAULT_OG_IMAGE } from './lib/seo';
+import { resolveActiveLogo } from '../lib/logos/active-logo';
 import {
   isSupabaseConfigured,
   resolveSupabaseAnonKey,
@@ -102,6 +103,22 @@ const getCachedCopyrightSettings = unstable_cache(
   { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS }
 );
 
+const getCachedFooterAttribution = unstable_cache(
+  async (): Promise<boolean> => {
+    const supabase = createStaticSupabaseClient();
+    const { data } = await supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', 'footer_show_attribution')
+      .maybeSingle();
+
+    // Absent row = enabled (default); only an explicit `false` disables it.
+    return data ? data.value !== false : true;
+  },
+  ['public-layout-footer-attribution'],
+  { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS }
+);
+
 const getCachedGlobalCss = unstable_cache(
   async (): Promise<string> => {
     const supabase = createStaticSupabaseClient();
@@ -212,25 +229,15 @@ const getCachedNavigationMenu = unstable_cache(
 
 const getCachedActiveLogo = unstable_cache(
   async (): Promise<HeaderLogo | null> => {
-    const supabase = createStaticSupabaseClient();
-    const { data, error } = await supabase
-      .from('logos')
-      .select(
-        `
-        *,
-        media:media_id (*)
-      `
-      )
-      .order('created_at', { ascending: false })
-      .limit(1)
-      .maybeSingle();
-
-    if (error) {
-      console.error('Error fetching cached active logo:', error.message);
+    try {
+      const supabase = createStaticSupabaseClient();
+      // Honor the admin-pinned active logo (site_settings.active_logo_id), else newest.
+      const logo = await resolveActiveLogo(supabase);
+      return (logo as HeaderLogo | null) ?? null;
+    } catch (error) {
+      console.error('Error fetching cached active logo:', error);
       return null;
     }
-
-    return data as HeaderLogo | null;
   },
   ['public-layout-logo'],
   { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS, tags: [PUBLIC_LAYOUT_LOGO_CACHE_TAG] }
@@ -266,6 +273,7 @@ async function loadLayoutData() {
       isEcommerceActive: false,
       globalCss: '',
       privacySettings: DEFAULT_PRIVACY_SETTINGS,
+      footerAttributionEnabled: true,
     };
   }
 
@@ -337,6 +345,7 @@ async function loadLayoutData() {
   const role = profile?.role ?? null;
   const canAccessCms = role === 'ADMIN' || role === 'WRITER';
   const { siteTitle } = await getSiteSettings();
+  const footerAttributionEnabled = await getCachedFooterAttribution().catch(() => true);
 
   return {
     user,
@@ -358,6 +367,7 @@ async function loadLayoutData() {
     isEcommerceActive,
     globalCss,
     privacySettings,
+    footerAttributionEnabled,
   };
 }
 
@@ -438,6 +448,7 @@ export default async function RootLayout({
     isEcommerceActive,
     globalCss,
     privacySettings,
+    footerAttributionEnabled,
   } = await loadLayoutData();
   const draft = await draftMode();
   // GTM container id comes solely from the privacy settings row (site_settings).
@@ -509,6 +520,7 @@ export default async function RootLayout({
             isDraftModeEnabled={draft.isEnabled}
             isEcommerceActive={isEcommerceActive}
             logo={logo}
+            showFooterAttribution={footerAttributionEnabled}
             siteTitle={siteTitle}
           >
             {children}

package/templates/nextblock-template/app/lib/seo.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  buildCanonicalUrl,
   extractIntroExcerptFromBlocks,
   resolveMetaTitle,
   resolvePageMetaDescription,
@@ -50,3 +51,38 @@ describe("seo helpers", () => {
     expect(stringifyJsonLd({ name: "</script>" })).toContain("\\u003c/script>");
   });
 });
+
+describe("buildCanonicalUrl", () => {
+  const siteUrl = "https://example.com";
+
+  it("self-references when there is no override", () => {
+    expect(buildCanonicalUrl(null, siteUrl, "/about")).toBe("https://example.com/about");
+    expect(buildCanonicalUrl("", siteUrl, "/about")).toBe("https://example.com/about");
+    expect(buildCanonicalUrl("   ", siteUrl, "/about")).toBe("https://example.com/about");
+  });
+
+  it("uses an absolute override verbatim (cross-domain allowed)", () => {
+    expect(buildCanonicalUrl("https://other.com/x", siteUrl, "/about")).toBe("https://other.com/x");
+    expect(buildCanonicalUrl("  http://other.com/y  ", siteUrl, "/about")).toBe("http://other.com/y");
+  });
+
+  it("resolves relative overrides against the site URL", () => {
+    expect(buildCanonicalUrl("/canonical-path", siteUrl, "/about")).toBe(
+      "https://example.com/canonical-path"
+    );
+    expect(buildCanonicalUrl("canonical-path", siteUrl, "/about")).toBe(
+      "https://example.com/canonical-path"
+    );
+  });
+
+  it("normalizes the path and a trailing slash on the site URL", () => {
+    expect(buildCanonicalUrl(null, "https://example.com/", "about")).toBe(
+      "https://example.com/about"
+    );
+  });
+
+  it("returns a relative fallback when the site URL is unset (resolved by metadataBase)", () => {
+    expect(buildCanonicalUrl(null, "", "/about")).toBe("/about");
+    expect(buildCanonicalUrl("/override", "", "/about")).toBe("/override");
+  });
+});

package/templates/nextblock-template/app/lib/seo.ts

@@ -205,6 +205,38 @@ export function composeTitleWithSite(
     : `${cleanTitle}${suffix}`;
 }
 
+/**
+ * Resolves the canonical URL for a public page/post/product.
+ *
+ * By default this is the self-referencing `<siteUrl><path>`. When the content row
+ * sets a manual `custom_canonical` override, that wins:
+ *  - absolute values (`https://…`) are used verbatim,
+ *  - root-relative (`/foo`) and bare (`foo`) values are resolved against `siteUrl`.
+ * A null/blank override falls back to the self-referencing default, so existing
+ * content is unaffected. `siteUrl` may be empty (pre-config / no NEXT_PUBLIC_URL),
+ * in which case a relative path is returned and resolved by `metadataBase`.
+ */
+export function buildCanonicalUrl(
+  customCanonical: string | null | undefined,
+  siteUrl: string,
+  path: string
+): string {
+  const base = (siteUrl || '').replace(/\/+$/, '');
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  const fallback = `${base}${normalizedPath}`;
+
+  const custom = customCanonical?.trim();
+  if (!custom) {
+    return fallback;
+  }
+
+  if (/^https?:\/\//i.test(custom)) {
+    return custom;
+  }
+
+  return custom.startsWith('/') ? `${base}${custom}` : `${base}/${custom}`;
+}
+
 /** Maps a language code (e.g. `fr`, `en-US`) to an Open Graph locale (`fr_FR`). */
 export function toOpenGraphLocale(languageCode?: string | null): string {
   const code = (languageCode ?? '').toLowerCase().split('-')[0];

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

@@ -24,6 +24,7 @@ import {
   resolveProductMetaDescription,
   stringifyJsonLd,
   buildSocialMetadata,
+  buildCanonicalUrl,
   toOpenGraphLocale,
 } from "../../lib/seo";
 import { getSiteSettings } from "../../lib/site-settings";
@@ -163,6 +164,8 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
     productRecord.short_description
   );
   const { siteTitle } = await getSiteSettings();
+  // Self-referencing `<siteUrl>/product/<slug>` unless the product sets a manual custom_canonical override.
+  const canonicalUrl = buildCanonicalUrl(productRecord.custom_canonical, siteUrl, `/product/${slug}`);
 
   return {
     title,
@@ -170,14 +173,14 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
     ...buildSocialMetadata({
       title,
       description,
-      url: `${siteUrl}/product/${slug}`,
+      url: canonicalUrl,
       siteTitle,
       imageUrl,
       type: 'website',
       locale: toOpenGraphLocale(productRecord.language_code),
     }),
     alternates: {
-      canonical: `${siteUrl}/product/${slug}`,
+      canonical: canonicalUrl,
       languages: Object.keys(alternates).length > 0 ? alternates : undefined,
     },
   };

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

@@ -47,6 +47,7 @@ type AppShellProps = {
   isDraftModeEnabled: boolean;
   isEcommerceActive: boolean;
   logo: Logo | null;
+  showFooterAttribution?: boolean;
   siteTitle: string;
 };
 
@@ -61,6 +62,7 @@ export function AppShell({
   isDraftModeEnabled,
   isEcommerceActive,
   logo,
+  showFooterAttribution = true,
   siteTitle,
 }: AppShellProps) {
   const pathname = usePathname() || '';
@@ -145,8 +147,21 @@ export function AppShell({
                       )}
                     </p>
                   )}
-                <div className="flex flex-row items-center gap-4">
+                <div className="flex flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2">
                   <p className="text-muted-foreground">{copyrightText}</p>
+                  {showFooterAttribution && (
+                    <p className="text-muted-foreground">
+                      Published with{' '}
+                      <a
+                        href="https://nextblock.dev"
+                        target="_blank"
+                        rel="noopener"
+                        className="font-medium hover:underline"
+                      >
+                        NextBlock&trade; CMS
+                      </a>
+                    </p>
+                  )}
                   <ThemeSwitcher />
                 </div>
               </div>