@bygghammar/cms-platform 0.30.1 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.31.0
+
+- Added `backoffice/SharedContentListView` — the shared-content library screen
+  with host-supplied section registry, override chips and preview thumbnails.
+- Added `backoffice/seo/SeoListView` — the SEO index (`SeoListView`) and page
+  shell (`SeoDetailView`) around the host's page SEO panel.
+
 ## 0.30.0
 
 - Added `backoffice/PagesListView` — the page-builder index with public URLs per

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.30.1",
+  "version": "0.31.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,
@@ -135,7 +135,9 @@
     "./backoffice/GlobalSectionBuilderView": "./src/backoffice/GlobalSectionBuilderView.tsx",
     "./backoffice/ReviewsView": "./src/backoffice/ReviewsView.tsx",
     "./backoffice/PagesListView": "./src/backoffice/PagesListView.tsx",
-    "./backoffice/BlocksLibraryView": "./src/backoffice/BlocksLibraryView.tsx"
+    "./backoffice/BlocksLibraryView": "./src/backoffice/BlocksLibraryView.tsx",
+    "./backoffice/SharedContentListView": "./src/backoffice/SharedContentListView.tsx",
+    "./backoffice/seo/SeoListView": "./src/backoffice/seo/SeoListView.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/SharedContentListView.tsx

@@ -0,0 +1,103 @@
+/**
+ * Host-agnostic "Shared content" library screen.
+ *
+ * Lists the site-wide content records (one per section key). The host supplies
+ * the section registry, override state, thumbnails and navigation, so every
+ * site gets the same screen without the package knowing its content model.
+ */
+import { useState, type ReactNode } from "react";
+import { Check, ChevronRight, Eye } from "lucide-react";
+
+import { PreviewLightbox } from "./PreviewLightbox";
+
+export type SharedContentSection = {
+  key: string;
+  label: string;
+  description?: string;
+};
+
+export type SharedContentListDeps = {
+  sections: readonly SharedContentSection[];
+  /** True when this key has a database override (shows the "edited" chip). */
+  hasOverride: (key: string) => boolean;
+  /** Navigate to the editor for one section key. */
+  openEditor: (key: string) => void;
+  /** Preview URL for one section key, e.g. `/preview/section/${key}`. */
+  previewSrc: (key: string) => string;
+  /** Thumbnail for one section key; host-rendered so it can read its own data. */
+  renderThumb: (key: string) => ReactNode;
+};
+
+export function SharedContentListView({ deps }: { deps: SharedContentListDeps }): ReactNode {
+  const { sections, hasOverride, openEditor, previewSrc, renderThumb } = deps;
+  const [preview, setPreview] = useState<{ key: string; label: string } | null>(null);
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Shared content</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Shared content</h1>
+      <p className="mt-4 text-ink/65 max-w-2xl">
+        Site-wide content records — one per key. Any page using the matching block reads this
+        content, so editing here updates every page at once. For global blocks (reusable groups of
+        blocks) with their own layout, use Global blocks instead. Thumbnails refresh when you save.
+      </p>
+
+      <ul className="mt-10 divide-y divide-ink/10 border-y border-ink/10">
+        {sections.map((section) => (
+          <li key={section.key}>
+            <button
+              type="button"
+              onClick={() => openEditor(section.key)}
+              className="flex w-full items-center gap-4 py-5 hover:bg-white transition-colors px-4 -mx-4 text-left"
+            >
+              <span
+                role="button"
+                tabIndex={0}
+                title="Preview section"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setPreview({ key: section.key, label: section.label });
+                }}
+                onKeyDown={(e) => {
+                  if (e.key !== "Enter" && e.key !== " ") return;
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setPreview({ key: section.key, label: section.label });
+                }}
+                className="group relative shrink-0"
+              >
+                {renderThumb(section.key)}
+                <span className="absolute inset-0 hidden items-center justify-center bg-ink/50 text-white group-hover:flex">
+                  <Eye className="size-4" />
+                </span>
+              </span>
+              <span className="flex-1 min-w-0">
+                <span className="flex items-center gap-3">
+                  <span className="font-serif text-lg text-ink">{section.label}</span>
+                  {hasOverride(section.key) && (
+                    <span className="inline-flex items-center gap-1 text-[0.65rem] uppercase tracking-[0.18em] text-sea">
+                      <Check className="size-3" />
+                      edited
+                    </span>
+                  )}
+                </span>
+                {section.description && (
+                  <span className="mt-1 block text-sm text-ink/60">{section.description}</span>
+                )}
+              </span>
+              <ChevronRight className="size-5 text-ink/40" />
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      <PreviewLightbox
+        open={preview != null}
+        onClose={() => setPreview(null)}
+        src={preview ? previewSrc(preview.key) : ""}
+        title={preview?.label ?? ""}
+      />
+    </div>
+  );
+}

package/src/backoffice/seo/SeoListView.tsx

@@ -0,0 +1,104 @@
+/**
+ * Host-agnostic SEO index and page shell.
+ *
+ * The host resolves titles, slugs and override state from its own page registry
+ * plus CMS overrides; these components own only presentation and navigation.
+ */
+import type { ReactNode } from "react";
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+
+export type SeoListRow = {
+  /** Page key, e.g. `index` or a CMS-only page key. */
+  key: string;
+  /** Title shown in the default locale. */
+  title: string;
+  /** Public path in the default locale, e.g. `/` or `/kontakt`. */
+  path: string;
+  hasOverride: boolean;
+};
+
+export type SeoListDeps = {
+  rows: readonly SeoListRow[];
+  /** Navigate to the SEO editor for one page key. */
+  openEditor: (key: string) => void;
+};
+
+export function SeoListView({ deps }: { deps: SeoListDeps }): ReactNode {
+  const { rows, openEditor } = deps;
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">SEO</div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">SEO &amp; slugs</h1>
+
+      <p className="mt-4 text-ink/65 max-w-xl">
+        Edit title, description, social previews and URL slug per language. Changes override the
+        defaults from the codebase and are used directly by canonical, hreflang and sitemap.
+      </p>
+
+      <ul className="mt-10 divide-y divide-ink/10 border-y border-ink/10">
+        {rows.map((row) => (
+          <li key={row.key}>
+            <button
+              type="button"
+              onClick={() => openEditor(row.key)}
+              className="flex w-full items-center gap-4 py-5 hover:bg-white transition-colors px-4 -mx-4 text-left"
+            >
+              <span className="flex-1 min-w-0">
+                <span className="flex items-center gap-3">
+                  <span className="font-serif text-lg text-ink">{row.title}</span>
+                  {row.hasOverride && (
+                    <span className="inline-flex items-center gap-1 text-[0.65rem] uppercase tracking-[0.18em] text-sea">
+                      <Check className="size-3" />
+                      edited
+                    </span>
+                  )}
+                </span>
+                <span className="mt-1 block text-sm text-ink/60">
+                  <span className="font-mono">{row.key}</span> · {row.path}
+                </span>
+              </span>
+              <ChevronRight className="size-5 text-ink/40" />
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export type SeoDetailDeps = {
+  pageKey: string;
+  /** Navigate back to the SEO index. */
+  onBack: () => void;
+  /** The host's page SEO panel for this page key. */
+  children: ReactNode;
+};
+
+export function SeoDetailView({ deps }: { deps: SeoDetailDeps }): ReactNode {
+  const { pageKey, onBack, children } = deps;
+
+  return (
+    <div className="p-8 md:p-12 w-full">
+      <button
+        type="button"
+        onClick={onBack}
+        className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink"
+      >
+        <ChevronLeft className="size-4" />
+        All SEO pages
+      </button>
+
+      <div className="mt-6 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+        Page · {pageKey}
+      </div>
+      <h1 className="mt-2 font-serif text-3xl md:text-4xl text-ink">Page SEO</h1>
+      <p className="mt-3 text-ink/65 max-w-xl">
+        Defaults come from the codebase. Changes are saved per language and used by canonical,
+        hreflang, Open Graph and Twitter cards.
+      </p>
+
+      <div className="mt-8">{children}</div>
+    </div>
+  );
+}