@bygghammar/cms-platform 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -89,7 +89,8 @@
     "./backoffice/media/FocusPicker": "./src/backoffice/media/FocusPicker.tsx",
     "./backoffice/media/MediaMetaDialog": "./src/backoffice/media/MediaMetaDialog.tsx",
     "./backoffice/SectionThumb": "./src/backoffice/SectionThumb.tsx",
-    "./backoffice/PageImagePicker": "./src/backoffice/PageImagePicker.tsx"
+    "./backoffice/PageImagePicker": "./src/backoffice/PageImagePicker.tsx",
+    "./backoffice/seo/page-seo-form": "./src/backoffice/seo/page-seo-form.ts"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/seo/page-seo-form.ts

@@ -0,0 +1,216 @@
+/**
+ * Host-agnostic form logic for the page SEO editor.
+ *
+ * Pure functions only — no React, no data access. A host wires these to its
+ * own page registry, CMS overrides and save/reset server functions so the SEO
+ * screen behaves identically on every site.
+ */
+
+export type LocalizedField = Record<string, string>;
+
+export type PageSeoFormShape = {
+  slugs: LocalizedField;
+  seo: {
+    title: LocalizedField;
+    description: LocalizedField;
+    ogTitle: LocalizedField;
+    ogDescription: LocalizedField;
+    keywords: LocalizedField;
+    ogImageSrc: string;
+    ogImageAlt: LocalizedField;
+    robots: string;
+  };
+};
+
+/** Shape shared by a registry page definition and a CMS override row. */
+export type PageSeoSource = {
+  slug?: Partial<LocalizedField> | null;
+  seo?: {
+    title?: Partial<LocalizedField> | null;
+    description?: Partial<LocalizedField> | null;
+    ogTitle?: Partial<LocalizedField> | null;
+    ogDescription?: Partial<LocalizedField> | null;
+    keywords?: Partial<LocalizedField> | null;
+    ogImage?: { src?: string | null; alt?: Partial<LocalizedField> | null } | null;
+    robots?: string | null;
+  } | null;
+};
+
+/** Override rows store slugs under `slugs` rather than `slug`. */
+export type PageSeoOverrideSource = Omit<PageSeoSource, "slug"> & {
+  slugs?: Partial<LocalizedField> | null;
+};
+
+export type PageSeoSavePayload = {
+  pageKey: string;
+  slugs: LocalizedField;
+  seo: {
+    title?: LocalizedField;
+    description?: LocalizedField;
+    ogTitle?: LocalizedField;
+    ogDescription?: LocalizedField;
+    keywords?: LocalizedField;
+    ogImage?: { src: string; alt: LocalizedField };
+    robots?: string;
+  };
+};
+
+export function emptyLocalized(locales: readonly string[]): LocalizedField {
+  const out: LocalizedField = {};
+  for (const l of locales) out[l] = "";
+  return out;
+}
+
+/** Drop empty strings; returns undefined when nothing is left. */
+export function stripEmptyLocalized(obj: LocalizedField): LocalizedField | undefined {
+  const out: LocalizedField = {};
+  for (const [k, v] of Object.entries(obj)) {
+    if (v !== "" && v != null) out[k] = v;
+  }
+  return Object.keys(out).length ? out : undefined;
+}
+
+/**
+ * Build the initial form state: registry defaults first, then any CMS override
+ * value that is explicitly present (including a deliberate empty string).
+ */
+export function buildPageSeoForm(args: {
+  locales: readonly string[];
+  def?: PageSeoSource | null;
+  override?: PageSeoOverrideSource | null;
+}): PageSeoFormShape {
+  const { locales, def, override } = args;
+  const form: PageSeoFormShape = {
+    slugs: emptyLocalized(locales),
+    seo: {
+      title: emptyLocalized(locales),
+      description: emptyLocalized(locales),
+      ogTitle: emptyLocalized(locales),
+      ogDescription: emptyLocalized(locales),
+      keywords: emptyLocalized(locales),
+      ogImageSrc: "",
+      ogImageAlt: emptyLocalized(locales),
+      robots: "",
+    },
+  };
+
+  if (def) {
+    for (const l of locales) {
+      form.slugs[l] = def.slug?.[l] ?? "";
+      form.seo.title[l] = def.seo?.title?.[l] ?? "";
+      form.seo.description[l] = def.seo?.description?.[l] ?? "";
+      form.seo.ogTitle[l] = def.seo?.ogTitle?.[l] ?? "";
+      form.seo.ogDescription[l] = def.seo?.ogDescription?.[l] ?? "";
+      form.seo.keywords[l] = def.seo?.keywords?.[l] ?? "";
+      form.seo.ogImageAlt[l] = def.seo?.ogImage?.alt?.[l] ?? "";
+    }
+    form.seo.ogImageSrc = def.seo?.ogImage?.src ?? "";
+    form.seo.robots = def.seo?.robots ?? "";
+  }
+
+  if (override) {
+    for (const l of locales) {
+      if (override.slugs?.[l] !== undefined) form.slugs[l] = override.slugs[l] ?? "";
+      if (override.seo?.title?.[l] !== undefined) form.seo.title[l] = override.seo.title[l] ?? "";
+      if (override.seo?.description?.[l] !== undefined)
+        form.seo.description[l] = override.seo.description[l] ?? "";
+      if (override.seo?.ogTitle?.[l] !== undefined)
+        form.seo.ogTitle[l] = override.seo.ogTitle[l] ?? "";
+      if (override.seo?.ogDescription?.[l] !== undefined)
+        form.seo.ogDescription[l] = override.seo.ogDescription[l] ?? "";
+      if (override.seo?.keywords?.[l] !== undefined)
+        form.seo.keywords[l] = override.seo.keywords[l] ?? "";
+      if (override.seo?.ogImage?.alt?.[l] !== undefined)
+        form.seo.ogImageAlt[l] = override.seo.ogImage.alt[l] ?? "";
+    }
+    if (override.seo?.ogImage?.src) form.seo.ogImageSrc = override.seo.ogImage.src;
+    if (override.seo?.robots !== undefined) form.seo.robots = override.seo.robots ?? "";
+  }
+
+  return form;
+}
+
+/** Build the save payload, omitting fields the editor left empty. */
+export function buildPageSeoSavePayload(args: {
+  pageKey: string;
+  locales: readonly string[];
+  form: PageSeoFormShape;
+}): PageSeoSavePayload {
+  const { pageKey, locales, form } = args;
+  const payload: PageSeoSavePayload = { pageKey, slugs: {}, seo: {} };
+
+  for (const l of locales) {
+    if (form.slugs[l] !== undefined) payload.slugs[l] = form.slugs[l];
+  }
+
+  const title = stripEmptyLocalized(form.seo.title);
+  const description = stripEmptyLocalized(form.seo.description);
+  const ogTitle = stripEmptyLocalized(form.seo.ogTitle);
+  const ogDescription = stripEmptyLocalized(form.seo.ogDescription);
+  const keywords = stripEmptyLocalized(form.seo.keywords);
+  const ogImageAlt = stripEmptyLocalized(form.seo.ogImageAlt);
+
+  if (title) payload.seo.title = title;
+  if (description) payload.seo.description = description;
+  if (ogTitle) payload.seo.ogTitle = ogTitle;
+  if (ogDescription) payload.seo.ogDescription = ogDescription;
+  if (keywords) payload.seo.keywords = keywords;
+  if (form.seo.robots) payload.seo.robots = form.seo.robots;
+  if (form.seo.ogImageSrc && ogImageAlt) {
+    payload.seo.ogImage = { src: form.seo.ogImageSrc, alt: ogImageAlt };
+  }
+
+  return payload;
+}
+
+/**
+ * Merge media-library metadata (alt / OG title / description) into the form.
+ * `overwrite` replaces values the editor already typed.
+ */
+export function mergeMediaMetaIntoForm(args: {
+  form: PageSeoFormShape;
+  locales: readonly string[];
+  meta: {
+    alt?: Partial<LocalizedField> | null;
+    title?: Partial<LocalizedField> | null;
+    description?: Partial<LocalizedField> | null;
+  };
+  overwrite: boolean;
+}): PageSeoFormShape {
+  const { form, locales, meta, overwrite } = args;
+  const merge = (current: LocalizedField, incoming?: Partial<LocalizedField> | null) => {
+    const next = { ...current };
+    if (!incoming) return next;
+    for (const l of locales) {
+      const value = incoming[l];
+      if (!value) continue;
+      if (overwrite || !next[l]) next[l] = value;
+    }
+    return next;
+  };
+  return {
+    ...form,
+    seo: {
+      ...form.seo,
+      ogImageAlt: merge(form.seo.ogImageAlt, meta.alt),
+      ogTitle: merge(form.seo.ogTitle, meta.title),
+      ogDescription: merge(form.seo.ogDescription, meta.description),
+    },
+  };
+}
+
+/** Locale-aware preview path: default locale has no prefix, empty slug = root. */
+export function pageSeoPreviewPath(args: {
+  slug: string;
+  locale: string;
+  defaultLocale: string;
+}): string {
+  const slug = args.slug ?? "";
+  if (args.locale === args.defaultLocale) return slug === "" ? "/" : `/${slug}`;
+  return slug === "" ? `/${args.locale}` : `/${args.locale}/${slug}`;
+}
+
+/** Absolute canonical preview URL; falls back to the path when no domain is known. */
+export function pageSeoPreviewCanonical(args: { path: string; origin?: string | null }): string {
+  return args.origin ? `https://${args.origin}${args.path}` : args.path;
+}