create-nextblock 0.2.78 → 0.8.1

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

@@ -0,0 +1,279 @@
+import type { Metadata } from 'next';
+
+export const DEFAULT_SITE_TITLE = 'NextBlock™ CMS';
+
+export const DEFAULT_SITE_DESCRIPTION =
+  'NextBlock is an open-source CMS on Next.js + Supabase — a visual block editor, blazing-fast multilingual pages, and built-in e-commerce.';
+
+export const DEFAULT_SITE_KEYWORDS =
+  'NextBlock, CMS, Next.js, Supabase, headless CMS, block editor, visual page builder, multilingual, e-commerce, open source';
+
+/** Bundled fallback Open Graph image (resolved to absolute via metadataBase). */
+export const DEFAULT_OG_IMAGE = '/images/metadata_image.webp';
+
+const DEFAULT_META_DESCRIPTION_LENGTH = 160;
+
+function normalizeWhitespace(value: string) {
+  return value.replace(/\s+/g, ' ').trim();
+}
+
+function decodeHtmlEntities(value: string) {
+  const entities: Record<string, string> = {
+    amp: '&',
+    apos: "'",
+    gt: '>',
+    lt: '<',
+    nbsp: ' ',
+    quot: '"',
+  };
+
+  return value.replace(/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/g, (match, entity) => {
+    const key = String(entity);
+    if (key[0] === '#') {
+      const isHex = key[1]?.toLowerCase() === 'x';
+      const codePoint = Number.parseInt(key.slice(isHex ? 2 : 1), isHex ? 16 : 10);
+      return Number.isFinite(codePoint) ? String.fromCodePoint(codePoint) : match;
+    }
+
+    return entities[key] ?? match;
+  });
+}
+
+export function stripHtmlToText(value: string) {
+  return normalizeWhitespace(
+    decodeHtmlEntities(
+      value
+        .replace(/<script[\s\S]*?<\/script>/gi, ' ')
+        .replace(/<style[\s\S]*?<\/style>/gi, ' ')
+        .replace(/<[^>]+>/g, ' ')
+    )
+  );
+}
+
+function extractParagraphTextFromHtml(value: string) {
+  const paragraphs = Array.from(value.matchAll(/<p\b[^>]*>([\s\S]*?)<\/p>/gi))
+    .map((match) => stripHtmlToText(match[1] ?? ''))
+    .filter(Boolean);
+
+  if (paragraphs.length > 0) {
+    return paragraphs[0];
+  }
+
+  return stripHtmlToText(value.replace(/<h[1-6]\b[\s\S]*?<\/h[1-6]>/gi, ' '));
+}
+
+function truncateMetaDescription(value: string, maxLength = DEFAULT_META_DESCRIPTION_LENGTH) {
+  const normalized = normalizeWhitespace(value);
+  if (normalized.length <= maxLength) {
+    return normalized;
+  }
+
+  const truncated = normalized.slice(0, maxLength + 1);
+  const lastSpace = truncated.lastIndexOf(' ');
+  const candidate = lastSpace > 80 ? truncated.slice(0, lastSpace) : normalized.slice(0, maxLength);
+
+  return candidate.replace(/[.,;:!?-]+$/, '').trim();
+}
+
+function normalizeMetaCandidate(value: string | null | undefined) {
+  if (!value) {
+    return null;
+  }
+
+  const normalized = stripHtmlToText(value);
+  return normalized || null;
+}
+
+function collectIntroTextCandidates(value: unknown, candidates: string[]) {
+  if (!value) {
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item) => collectIntroTextCandidates(item, candidates));
+    return;
+  }
+
+  if (typeof value !== 'object') {
+    return;
+  }
+
+  const block = value as {
+    block_type?: string;
+    content?: Record<string, unknown>;
+  };
+
+  if (block.block_type === 'section' || block.block_type === 'hero') {
+    collectIntroTextCandidates(block.content?.column_blocks, candidates);
+    collectIntroTextCandidates(block.content?.slides, candidates);
+    return;
+  }
+
+  if (block.block_type === 'text') {
+    const htmlContent = block.content?.html_content;
+    const textContent = block.content?.text_content;
+    const candidate =
+      typeof htmlContent === 'string'
+        ? extractParagraphTextFromHtml(htmlContent)
+        : typeof textContent === 'string'
+          ? normalizeWhitespace(textContent)
+          : '';
+
+    if (candidate) {
+      candidates.push(candidate);
+    }
+  }
+}
+
+export function extractIntroExcerptFromBlocks(blocks: unknown) {
+  const candidates: string[] = [];
+  collectIntroTextCandidates(blocks, candidates);
+
+  return (
+    candidates.find((candidate) => candidate.length >= 80) ??
+    candidates[0] ??
+    null
+  );
+}
+
+export function resolveMetaTitle(
+  manualTitle: string | null | undefined,
+  fallbackTitle: string | null | undefined
+) {
+  return (
+    normalizeMetaCandidate(manualTitle) ??
+    normalizeMetaCandidate(fallbackTitle) ??
+    DEFAULT_SITE_TITLE
+  );
+}
+
+export function resolveMetaDescription(...candidates: Array<string | null | undefined>) {
+  for (const candidate of candidates) {
+    const description = normalizeMetaCandidate(candidate);
+    if (description) {
+      return truncateMetaDescription(description);
+    }
+  }
+
+  return DEFAULT_SITE_DESCRIPTION;
+}
+
+export function resolvePageMetaDescription(
+  manualDescription: string | null | undefined,
+  blocks: unknown
+) {
+  return resolveMetaDescription(manualDescription, extractIntroExcerptFromBlocks(blocks));
+}
+
+export function resolvePostMetaDescription(
+  manualDescription: string | null | undefined,
+  subtitle: string | null | undefined
+) {
+  return resolveMetaDescription(manualDescription, subtitle);
+}
+
+export function resolveProductMetaDescription(
+  manualDescription: string | null | undefined,
+  shortDescription: string | null | undefined
+) {
+  return resolveMetaDescription(manualDescription, shortDescription);
+}
+
+export function stringifyJsonLd(value: unknown) {
+  return JSON.stringify(value).replace(/</g, '\\u003c');
+}
+
+/**
+ * Appends the site title to a page title for social cards, e.g.
+ * `composeTitleWithSite('Home', 'NextBlock™ CMS') === 'Home | NextBlock™ CMS'`.
+ * Unlike Next.js' `title.template` (which only affects the `<title>` tag), this
+ * lets us produce a complete `og:title` / `twitter:title`.
+ */
+export function composeTitleWithSite(
+  pageTitle: string | null | undefined,
+  siteTitle: string | null | undefined
+): string {
+  const cleanTitle = (pageTitle ?? '').trim();
+  const cleanSite = (siteTitle ?? '').trim();
+
+  if (!cleanSite) return cleanTitle;
+  if (!cleanTitle) return cleanSite;
+
+  const suffix = ` | ${cleanSite}`;
+  return cleanTitle === cleanSite || cleanTitle.endsWith(suffix)
+    ? cleanTitle
+    : `${cleanTitle}${suffix}`;
+}
+
+/** 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];
+  const map: Record<string, string> = {
+    en: 'en_US',
+    fr: 'fr_FR',
+    es: 'es_ES',
+    de: 'de_DE',
+    pt: 'pt_PT',
+    it: 'it_IT',
+    nl: 'nl_NL',
+  };
+  return map[code] ?? 'en_US';
+}
+
+export interface SocialMetadataInput {
+  /** Bare page title (without the site-title suffix). */
+  title: string;
+  description: string;
+  /** Canonical URL of the page (absolute, or path resolved via metadataBase). */
+  url: string;
+  siteTitle: string;
+  /** Resolved feature-image URL; falls back to the default OG image when empty. */
+  imageUrl?: string | null;
+  type?: 'website' | 'article';
+  publishedTime?: string | null;
+  locale?: string | null;
+}
+
+/**
+ * Builds the `openGraph` + `twitter` metadata for a public page so that every
+ * page emits a complete, suffixed social title and always has an OG image
+ * (the feature image when present, otherwise the bundled default).
+ */
+export function buildSocialMetadata(
+  input: SocialMetadataInput
+): Pick<Metadata, 'openGraph' | 'twitter'> {
+  const usingDefaultImage = !input.imageUrl;
+  const imageUrl = input.imageUrl || DEFAULT_OG_IMAGE;
+  const socialTitle = composeTitleWithSite(input.title, input.siteTitle);
+  const image = usingDefaultImage
+    ? { url: imageUrl, width: 1200, height: 630, alt: socialTitle }
+    : { url: imageUrl, alt: socialTitle };
+
+  const openGraphBase = {
+    title: socialTitle,
+    description: input.description,
+    url: input.url,
+    siteName: input.siteTitle,
+    images: [image],
+    ...(input.locale ? { locale: input.locale } : {}),
+  };
+
+  const openGraph =
+    input.type === 'article'
+      ? {
+          ...openGraphBase,
+          type: 'article' as const,
+          ...(input.publishedTime ? { publishedTime: input.publishedTime } : {}),
+        }
+      : { ...openGraphBase, type: 'website' as const };
+
+  return {
+    openGraph,
+    twitter: {
+      card: 'summary_large_image',
+      title: socialTitle,
+      description: input.description,
+      images: [imageUrl],
+    },
+  };
+}

package/templates/nextblock-template/app/lib/site-settings.ts

@@ -0,0 +1,87 @@
+import 'server-only';
+import { unstable_cache } from 'next/cache';
+import { createClient as createSupabaseJsClient } from '@supabase/supabase-js';
+import type { Database } from '@nextblock-cms/db';
+import {
+  DEFAULT_SITE_TITLE,
+  DEFAULT_SITE_DESCRIPTION,
+  DEFAULT_SITE_KEYWORDS,
+} from './seo';
+
+export const SITE_SETTINGS_CACHE_TAG = 'public-site-settings';
+const SITE_SETTINGS_REVALIDATE_SECONDS = 60;
+
+export interface SiteSettings {
+  siteTitle: string;
+  siteDescription: string;
+  siteKeywords: string;
+}
+
+/**
+ * Service-role (or anon) Supabase client used for cached, request-agnostic
+ * reads of public layout/SEO data. Shared by the root layout and the public
+ * route `generateMetadata` functions.
+ */
+export function createStaticSupabaseClient() {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const supabaseKey =
+    process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+  if (!supabaseUrl || !supabaseKey) {
+    throw new Error('Missing Supabase environment variables for public layout data');
+  }
+
+  return createSupabaseJsClient<Database>(supabaseUrl, supabaseKey, {
+    auth: {
+      persistSession: false,
+      autoRefreshToken: false,
+      detectSessionInUrl: false,
+    },
+  });
+}
+
+/**
+ * Cached read of the site-wide SEO identity (title / description / keywords)
+ * from the `site_settings` key-value store. This is the single source of truth
+ * used for both `<title>`/OpenGraph metadata and the header brand.
+ */
+export const getSiteSettings = unstable_cache(
+  async (): Promise<SiteSettings> => {
+    const fallback: SiteSettings = {
+      siteTitle: DEFAULT_SITE_TITLE,
+      siteDescription: DEFAULT_SITE_DESCRIPTION,
+      siteKeywords: DEFAULT_SITE_KEYWORDS,
+    };
+
+    try {
+      const supabase = createStaticSupabaseClient();
+      const { data, error } = await supabase
+        .from('site_settings')
+        .select('key, value')
+        .in('key', ['site_title', 'site_description', 'site_keywords']);
+
+      if (error || !data) {
+        console.error('Error fetching cached site settings:', error);
+        return fallback;
+      }
+
+      const settings: Record<string, string> = {};
+      data.forEach((item) => {
+        if (typeof item.value === 'string') {
+          settings[item.key] = item.value;
+        }
+      });
+
+      return {
+        siteTitle: settings.site_title?.trim() || fallback.siteTitle,
+        siteDescription: settings.site_description?.trim() || fallback.siteDescription,
+        siteKeywords: settings.site_keywords?.trim() || fallback.siteKeywords,
+      };
+    } catch (caught) {
+      console.error('Unexpected error fetching site settings:', caught);
+      return fallback;
+    }
+  },
+  ['public-site-settings'],
+  { revalidate: SITE_SETTINGS_REVALIDATE_SECONDS, tags: [SITE_SETTINGS_CACHE_TAG] }
+);

package/templates/nextblock-template/app/lib/sitemap-utils.ts

@@ -1,68 +1,253 @@
-import { createClient } from '@nextblock-cms/db/server';
-
-interface SitemapEntry {
-  path: string;
-  lastModified: string;
-}
-
-/**
- * Fetches all published pages from Supabase and formats them for the sitemap.
- * @returns {Promise<Array<SitemapEntry>>} A promise that resolves to an array of sitemap entries for pages.
- */
+import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+
+/**
+ * A single, language-aware entry destined for the XML sitemap.
+ *
+ * Paths are kept site-root-relative (e.g. "/about", "/article/my-post"); the
+ * `app/sitemap.ts` route prefixes the absolute origin so the base URL lives in
+ * exactly one place.
+ */
+export interface SitemapEntry {
+  /** Root-relative path for this row, e.g. "/about" or "/article/hello". */
+  path: string;
+  /** ISO-8601 timestamp mapped from the row's `updated_at`. */
+  lastModified: string;
+  /**
+   * hreflang map of `languageCode -> root-relative path` covering every
+   * published translation that shares this row's `translation_group_id`, plus
+   * an `x-default` key pointing at the default-language version. Left
+   * `undefined` for content that only exists in a single language.
+   *
+   * NextBlock's i18n model gives each language its own slug (there is no
+   * `/en` `/fr` path prefix), so alternates are resolved by grouping sibling
+   * rows on `translation_group_id` rather than by swapping a locale segment.
+   */
+  alternates?: Record<string, string>;
+}
+
+/**
+ * Page slugs that are rendered by their own canonical route and must not be
+ * re-advertised under the generic `/{slug}` catch-all:
+ *  - `product-template` backs the product layout (app/product/[slug]); it is
+ *    not a public page.
+ *  - `home` / `accueil` back the locale-resolved homepage served at "/"
+ *    (see getHomepageSlugForLocale in app/page.tsx); listing them as `/home`
+ *    and `/accueil` would duplicate the canonical "/" entry.
+ */
+const EXCLUDED_PAGE_SLUGS = new Set(['product-template', 'home', 'accueil']);
+
+type SupabaseLikeClient = ReturnType<typeof getSsgSupabaseClient>;
+
+/** Minimal shape every content table exposes for sitemap purposes. */
+interface ContentRow {
+  slug: string | null;
+  updated_at: string | null;
+  created_at?: string | null;
+  language_id: number | null;
+  translation_group_id: string | null;
+}
+
+function toIsoDate(value: string | null | undefined): string {
+  if (value) {
+    const parsed = new Date(value);
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed.toISOString();
+    }
+  }
+  return new Date().toISOString();
+}
+
+/**
+ * Loads the language set once so callers can resolve a row's `language_id` to
+ * its BCP-47 `code` and identify the default language used for `x-default`.
+ */
+async function fetchLanguageMap(
+  supabase: SupabaseLikeClient,
+): Promise<{ codeById: Map<number, string>; defaultCode: string | null }> {
+  const codeById = new Map<number, string>();
+  let defaultCode: string | null = null;
+
+  const { data, error } = await supabase
+    .from('languages')
+    .select('id, code, is_default');
+
+  if (error) {
+    console.error('Error fetching languages for sitemap alternates:', error);
+    return { codeById, defaultCode };
+  }
+
+  for (const lang of data ?? []) {
+    if (lang.code) {
+      codeById.set(lang.id, lang.code);
+      if (lang.is_default) {
+        defaultCode = lang.code;
+      }
+    }
+  }
+
+  return { codeById, defaultCode };
+}
+
+/**
+ * Turns raw content rows into language-aware sitemap entries. Rows that share a
+ * `translation_group_id` are emitted as sibling URLs that cross-link to one
+ * another via `alternates`.
+ */
+function rowsToEntries(
+  rows: ContentRow[],
+  pathForSlug: (slug: string) => string,
+  codeById: Map<number, string>,
+  defaultCode: string | null,
+): SitemapEntry[] {
+  // Bucket rows by their translation group so each URL can advertise its siblings.
+  const groups = new Map<string, ContentRow[]>();
+  for (const row of rows) {
+    if (!row.slug) continue;
+    const key = row.translation_group_id ?? `solo:${row.slug}`;
+    const bucket = groups.get(key);
+    if (bucket) {
+      bucket.push(row);
+    } else {
+      groups.set(key, [row]);
+    }
+  }
+
+  const entries: SitemapEntry[] = [];
+  for (const group of groups.values()) {
+    // languageCode -> path for every translated sibling in this group.
+    const byCode: Record<string, string> = {};
+    let defaultPath: string | undefined;
+    for (const sibling of group) {
+      if (!sibling.slug || sibling.language_id == null) continue;
+      const code = codeById.get(sibling.language_id);
+      if (!code) continue;
+      const path = pathForSlug(sibling.slug);
+      byCode[code] = path;
+      if (code === defaultCode) {
+        defaultPath = path;
+      }
+    }
+
+    // hreflang is only meaningful when 2+ *distinct* URLs exist. NextBlock has no
+    // locale path prefix, so two translations can share a slug (e.g. `/articles`
+    // is the slug in both en and fr); that collapses to a single URL with nothing
+    // to cross-link, so no alternates are emitted.
+    const hasAlternates = new Set(Object.values(byCode)).size > 1;
+    const alternates = hasAlternates
+      ? { ...byCode, 'x-default': defaultPath ?? Object.values(byCode)[0] }
+      : undefined;
+
+    for (const row of group) {
+      if (!row.slug) continue;
+      entries.push({
+        path: pathForSlug(row.slug),
+        lastModified: toIsoDate(row.updated_at ?? row.created_at),
+        alternates,
+      });
+    }
+  }
+
+  return entries;
+}
+
+/**
+ * Fetches all published pages from Supabase and formats them, with language
+ * alternates, for the sitemap.
+ */
 export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
-  const supabase = createClient();
+  const supabase = getSsgSupabaseClient();
   try {
-    const { data: pages, error } = await supabase
-      .from('pages')
-      .select('slug, updated_at')
-      .eq('status', 'published');
+    const [{ data: pages, error }, languageMap] = await Promise.all([
+      supabase
+        .from('pages')
+        .select('slug, updated_at, language_id, translation_group_id')
+        .eq('status', 'published'),
+      fetchLanguageMap(supabase),
+    ]);
 
     if (error) {
       console.error('Error fetching published pages:', error);
       return [];
     }
 
-    if (!pages) {
-      return [];
-    }
+    const rows = (pages ?? []).filter(
+      (page) => page.slug && !EXCLUDED_PAGE_SLUGS.has(page.slug),
+    );
 
-    return pages.map((page) => ({
-      path: `/${page.slug}`,
-      lastModified: new Date(page.updated_at).toISOString(),
-    }));
+    return rowsToEntries(
+      rows,
+      (slug) => `/${slug}`,
+      languageMap.codeById,
+      languageMap.defaultCode,
+    );
   } catch (err) {
     console.error('An unexpected error occurred while fetching pages:', err);
     return [];
   }
 }
-
-/**
- * Fetches all published posts from Supabase and formats them for the sitemap.
- * @returns {Promise<Array<SitemapEntry>>} A promise that resolves to an array of sitemap entries for posts.
- */
+
+/**
+ * Fetches all published posts (respecting scheduled `published_at`) from
+ * Supabase and formats them, with language alternates, for the sitemap.
+ */
 export async function fetchAllPublishedPosts(): Promise<SitemapEntry[]> {
-  const supabase = createClient();
+  const supabase = getSsgSupabaseClient();
   try {
-    const { data: posts, error } = await supabase
-      .from('posts')
-      .select('slug, updated_at')
-      .eq('status', 'published');
+    const nowIso = new Date().toISOString();
+    const [{ data: posts, error }, languageMap] = await Promise.all([
+      supabase
+        .from('posts')
+        .select('slug, updated_at, language_id, translation_group_id')
+        .eq('status', 'published')
+        .or(`published_at.is.null,published_at.lte.${nowIso}`),
+      fetchLanguageMap(supabase),
+    ]);
 
     if (error) {
       console.error('Error fetching published posts:', error);
       return [];
     }
 
-    if (!posts) {
+    return rowsToEntries(
+      posts ?? [],
+      (slug) => `/article/${slug}`,
+      languageMap.codeById,
+      languageMap.defaultCode,
+    );
+  } catch (err) {
+    console.error('An unexpected error occurred while fetching posts:', err);
+    return [];
+  }
+}
+
+/**
+ * Fetches all active storefront products from Supabase and formats them, with
+ * language alternates, for the sitemap.
+ */
+export async function fetchAllActiveProducts(): Promise<SitemapEntry[]> {
+  const supabase = getSsgSupabaseClient();
+  try {
+    const [{ data: products, error }, languageMap] = await Promise.all([
+      supabase
+        .from('products')
+        .select('slug, updated_at, created_at, language_id, translation_group_id')
+        .eq('status', 'active'),
+      fetchLanguageMap(supabase),
+    ]);
+
+    if (error) {
+      console.error('Error fetching active products:', error);
       return [];
     }
 
-    return posts.map((post) => ({
-      path: `/article/${post.slug}`,
-      lastModified: new Date(post.updated_at).toISOString(),
-    }));
+    return rowsToEntries(
+      products ?? [],
+      (slug) => `/product/${slug}`,
+      languageMap.codeById,
+      languageMap.defaultCode,
+    );
   } catch (err) {
-    console.error('An unexpected error occurred while fetching posts:', err);
+    console.error('An unexpected error occurred while fetching products:', err);
     return [];
   }
 }