@bygghammar/cms-platform 0.50.1 → 0.52.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.52.0
+
+- `IndexingStatusCard`: read-only search-engine indexing status (from
+  `site/indexing`), shown on the SEO list and SEO detail views via a new
+  optional `indexing` dep — the same box as Admin → Site settings.
+
+## 0.51.0
+
+- `site/indexing`: environment-derived search-engine policy (`SITE_INDEXING`,
+  falling back to `SITE_ENV`/`NODE_ENV`). Staging is blocked by default.
+- `server/http/robots`: a blocked deployment serves `Disallow: /` with no
+  sitemap line and an `X-Robots-Tag` header.
+- `http/response-headers`: adds `noindex, nofollow, noarchive, nosnippet,
+  noimageindex` to every response of a blocked deployment.
+- `SiteSettingsView`: shows the read-only indexing status, and the company
+  fields are now a read-only summary that points at Settings -> Contact
+  details, which is the single editor for them.
+
+
 ## 0.50.1
 
 - `runtime/server-entry`: the injection adapter is typed against `InjectionBundle`, matching the shared `injections-core` helpers exactly.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.50.1",
+  "version": "0.52.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": [
@@ -196,7 +196,9 @@
     "./runtime/error-page": "./src/runtime/error-page.ts",
     "./runtime/error-reporting": "./src/runtime/error-reporting.ts",
     "./server/media-usage-host": "./src/server/media-usage-host.ts",
-    "./runtime/server-entry": "./src/runtime/server-entry.ts"
+    "./runtime/server-entry": "./src/runtime/server-entry.ts",
+    "./site/indexing": "./src/site/indexing.ts",
+    "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/ContactDetailsView.tsx

@@ -6,12 +6,12 @@ export type ContactField = { key: string; label: string; type?: string };
 
 /** The canonical company detail fields every site shares. */
 export const CONTACT_FIELDS: ContactField[] = [
-  { key: "locationName", label: "Name" },
-  { key: "street", label: "Address" },
+  { key: "locationName", label: "Location name" },
+  { key: "street", label: "Street" },
   { key: "postCode", label: "Post code" },
   { key: "city", label: "City" },
   { key: "country", label: "Country" },
-  { key: "legalName", label: "Company details (legal name)" },
+  { key: "legalName", label: "Legal name" },
   { key: "orgNumber", label: "Org. number" },
   { key: "email", label: "Email", type: "email" },
   { key: "phone", label: "Phone", type: "tel" },
@@ -68,8 +68,9 @@ export function ContactDetailsView({ deps }: { deps: ContactDetailsDeps }) {
       <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Settings</div>
       <h2 className="mt-2 font-serif text-3xl text-ink">Contact details</h2>
       <p className="mt-3 text-sm text-ink/65">
-        These company details are the single source of truth. They are used in the website contact
-        section, the footer and the structured data for search engines.
+        These company details are the single source of truth — site settings only shows them for
+        reference. They are used in the website contact section, the footer and the structured data
+        for search engines.
       </p>
 
       <div className="mt-10 grid gap-5 sm:grid-cols-2">

package/src/backoffice/IndexingStatusCard.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+import type { IndexingPolicy } from "../site/indexing";
+
+/**
+ * Read-only search-engine indexing status, resolved server-side from the
+ * environment (`SITE_INDEXING` / `SITE_ENV` — see `site/indexing`). Shown on
+ * Site settings and the SEO screens so a blocked staging deployment is
+ * visible wherever metadata is edited. Never a database toggle: indexing is
+ * an environment fact so a content restore cannot flip it.
+ */
+export function IndexingStatusCard({
+  indexing,
+}: {
+  indexing?: IndexingPolicy;
+}): ReactNode {
+  const status = indexing
+    ? indexing.mode === "block"
+      ? "Blocked — not indexed"
+      : "Indexed"
+    : "Unknown";
+  const source = indexing
+    ? indexing.source === "SITE_INDEXING"
+      ? `From SITE_INDEXING=${indexing.value}`
+      : indexing.source === "SITE_ENV"
+        ? `From SITE_ENV=${indexing.value}`
+        : "Safe default — SITE_INDEXING unset"
+    : "Set SITE_INDEXING per environment";
+
+  return (
+    <div className="max-w-sm border border-ink/10 bg-white p-4">
+      <div className="text-xs uppercase tracking-wider text-ink/50">Search engines</div>
+      <div className="mt-1 text-sm text-ink">{status}</div>
+      <div className="mt-2 text-[11px] uppercase tracking-wider text-ink/40">{source}</div>
+      <p className="mt-3 text-xs text-ink/50">
+        Indexing is an environment fact, not a setting here: set <code>SITE_INDEXING=off</code> on
+        staging and <code>SITE_INDEXING=on</code> in production. A blocked deployment serves{" "}
+        <code>Disallow: /</code> in robots.txt and a <code>noindex, nofollow</code> header on every
+        response.
+      </p>
+    </div>
+  );
+}

package/src/backoffice/SiteSettingsView.tsx

@@ -9,6 +9,7 @@ import {
   type SiteFeatureFlags,
   type SiteSettingOverrides,
 } from "../config/site-config";
+import type { IndexingPolicy } from "../site/indexing";
 
 export type SiteSettingsDeps = {
   /** Code config with any stored overrides already applied. */
@@ -23,6 +24,19 @@ export type SiteSettingsDeps = {
    * set `SITE_URL` for this deployment; `"code"` means the compiled fallback.
    */
   originSource?: "environment" | "code";
+  /**
+   * Indexing policy for the running deployment, resolved from the environment
+   * server-side (see `site/indexing`). Shown read-only: a staging host must not
+   * be able to open itself to search engines from the backoffice.
+   */
+  indexing?: IndexingPolicy;
+  /**
+   * Live company values as stored by the contact details screen. Falls back to
+   * the config company when omitted.
+   */
+  companyValues?: Record<string, string>;
+  /** Navigate to the contact details screen, where company fields are edited. */
+  onOpenContactDetails?: () => void;
 };
 
 const FEATURE_LABELS: Record<keyof SiteFeatureFlags, string> = {
@@ -58,7 +72,9 @@ const cardClass = "border border-ink/10 bg-white p-6";
  * screen writes only the overridable subset into the database.
  */
 export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
-  const { config, overrides, saveSettings, clearSetting, refresh } = deps;
+  const { config, overrides, saveSettings, clearSetting, refresh, onOpenContactDetails } = deps;
+  const indexing = deps.indexing;
+  const shownCompany = { ...EMPTY_COMPANY, ...config.company, ...(deps.companyValues ?? {}) };
   const originSource = deps.originSource ?? "code";
   const [name, setName] = useState(config.name);
   const [company, setCompany] = useState({ ...EMPTY_COMPANY, ...config.company });
@@ -119,6 +135,17 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
             originSource === "environment" ? "From SITE_URL" : "Code fallback \u2014 SITE_URL unset",
           ],
           ["Locales", config.locales.join(", "), "Set in code"],
+          [
+            "Search engines",
+            indexing ? (indexing.mode === "block" ? "Blocked \u2014 not indexed" : "Indexed") : "Unknown",
+            indexing
+              ? indexing.source === "SITE_INDEXING"
+                ? `From SITE_INDEXING=${indexing.value}`
+                : indexing.source === "SITE_ENV"
+                  ? `From SITE_ENV=${indexing.value}`
+                  : "Safe default \u2014 SITE_INDEXING unset"
+              : "Set SITE_INDEXING per environment",
+          ],
           [
             "Backoffice",
             `${config.backofficePath} (${config.backofficeLocale})`,
@@ -133,9 +160,14 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
         ))}
       </dl>
       <p className="mt-3 max-w-2xl text-xs text-ink/50">
-        These four are structural: the locale set and backoffice path are compiled into the build,
+        These are structural: the locale set and backoffice path are compiled into the build,
         and the public origin differs per environment. They are read from code and environment on
-        purpose, so a deployment can never disagree with what the database says.
+        purpose, so a deployment can never disagree with what the database says. Indexing is the
+        same kind of fact: set <code>SITE_INDEXING=off</code> on staging and{" "}
+        <code>SITE_INDEXING=on</code> in production. A blocked deployment serves{" "}
+        <code>Disallow: /</code> in robots.txt and a <code>noindex, nofollow</code> header on every
+        response, so it can never be indexed even if a link leaks. For truly private staging, add
+        HTTP basic auth in Traefik on top — a password is the only thing that keeps humans out.
       </p>
 
       <section className={`mt-8 ${cardClass}`}>
@@ -155,27 +187,29 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
       </section>
 
       <section className={`mt-6 ${cardClass}`}>
-        <SectionHeader
-          title="Company & contact details"
-          overridden={overridden("company")}
-          onReset={() => reset("company")}
-          busy={busy === "company"}
-        />
-        <div className="mt-4 grid gap-3 md:grid-cols-3">
+        <h2 className="font-serif text-xl text-ink">Company &amp; contact details</h2>
+        <p className="mt-2 max-w-2xl text-sm text-ink/60">
+          These moved to <strong>Settings &rarr; Contact details</strong>, which is the single place
+          they are edited. The values there feed the website contact section, the footer and the
+          structured data for search engines.
+        </p>
+        <dl className="mt-4 grid gap-3 md:grid-cols-3">
           {(Object.keys(COMPANY_LABELS) as (keyof typeof EMPTY_COMPANY)[]).map((key) => (
-            <label key={key} className="block">
-              <span className={labelClass}>{COMPANY_LABELS[key]}</span>
-              <input
-                className={inputClass}
-                value={company[key] ?? ""}
-                onChange={(e) => setCompany({ ...company, [key]: e.target.value })}
-              />
-            </label>
+            <div key={key}>
+              <dt className={labelClass}>{COMPANY_LABELS[key]}</dt>
+              <dd className="text-sm text-ink">{shownCompany[key] || <span className="text-ink/35">Not set</span>}</dd>
+            </div>
           ))}
-        </div>
-        <div className="mt-4">
-          <SaveButton busy={busy === "company"} onClick={() => save("company", { company })} />
-        </div>
+        </dl>
+        {onOpenContactDetails ? (
+          <button
+            type="button"
+            onClick={onOpenContactDetails}
+            className="mt-5 bg-ink px-5 py-2.5 text-xs uppercase tracking-[0.22em] text-paper"
+          >
+            Edit contact details
+          </button>
+        ) : null}
       </section>
 
       <section className={`mt-6 ${cardClass}`}>

package/src/backoffice/routes/index.tsx

@@ -128,11 +128,20 @@ export function VersionRoute() {
 
 /** Site settings screen (code defaults plus database overrides). */
 export function SiteSettingsRoute() {
-  const { fns, siteConfig } = backofficeHost();
+  const host = backofficeHost();
+  const { fns, siteConfig, company } = host;
   const load = useServerFn(fns.getSiteSettings);
   const save = useServerFn(fns.saveSiteSettings);
   const clear = useServerFn(fns.clearSiteSetting);
+  const fetchOverrides = useServerFn(fns.getContentOverrides);
   const q = useQuery({ queryKey: ["admin", "site-settings"], queryFn: () => load() });
+  // Company fields are owned by the contact details screen (a content
+  // override), so read them from the same place for the read-only summary.
+  const contactQ = useQuery({
+    queryKey: ["cms", "content-overrides"],
+    queryFn: () => fetchOverrides(),
+  });
+  const contactPath = backofficePaths(host).contact;
 
   return (
     <SiteSettingsView
@@ -143,6 +152,14 @@ export function SiteSettingsRoute() {
         clearSetting: (input) => clear(input as never),
         refresh: () => q.refetch(),
         originSource: q.data?.originSource ?? "code",
+        indexing: q.data?.indexing,
+        companyValues: {
+          ...company,
+          ...((contactQ.data?.company as Record<string, string> | undefined) ?? {}),
+        },
+        onOpenContactDetails: () => {
+          window.location.href = contactPath;
+        },
       }}
     />
   );

package/src/backoffice/seo/SeoListView.tsx

@@ -7,6 +7,9 @@
 import type { ReactNode } from "react";
 import { Check, ChevronLeft, ChevronRight } from "lucide-react";
 
+import type { IndexingPolicy } from "../../site/indexing";
+import { IndexingStatusCard } from "../IndexingStatusCard";
+
 export type SeoListRow = {
   /** Page key, e.g. `index` or a CMS-only page key. */
   key: string;
@@ -21,10 +24,15 @@ export type SeoListDeps = {
   rows: readonly SeoListRow[];
   /** Navigate to the SEO editor for one page key. */
   openEditor: (key: string) => void;
+  /**
+   * Indexing policy for the running deployment, resolved from the environment
+   * server-side (see `site/indexing`). Shown read-only, same as Site settings.
+   */
+  indexing?: IndexingPolicy;
 };
 
 export function SeoListView({ deps }: { deps: SeoListDeps }): ReactNode {
-  const { rows, openEditor } = deps;
+  const { rows, openEditor, indexing } = deps;
 
   return (
     <div className="p-8 md:p-12 w-full">
@@ -36,6 +44,10 @@ export function SeoListView({ deps }: { deps: SeoListDeps }): ReactNode {
         defaults from the codebase and are used directly by canonical, hreflang and sitemap.
       </p>
 
+      <div className="mt-6">
+        <IndexingStatusCard indexing={indexing} />
+      </div>
+
       <ul className="mt-10 divide-y divide-ink/10 border-y border-ink/10">
         {rows.map((row) => (
           <li key={row.key}>
@@ -73,10 +85,15 @@ export type SeoDetailDeps = {
   onBack: () => void;
   /** The host's page SEO panel for this page key. */
   children: ReactNode;
+  /**
+   * Indexing policy for the running deployment, resolved from the environment
+   * server-side (see `site/indexing`). Shown read-only, same as Site settings.
+   */
+  indexing?: IndexingPolicy;
 };
 
 export function SeoDetailView({ deps }: { deps: SeoDetailDeps }): ReactNode {
-  const { pageKey, onBack, children } = deps;
+  const { pageKey, onBack, children, indexing } = deps;
 
   return (
     <div className="p-8 md:p-12 w-full">
@@ -98,6 +115,10 @@ export function SeoDetailView({ deps }: { deps: SeoDetailDeps }): ReactNode {
         hreflang, Open Graph and Twitter cards.
       </p>
 
+      <div className="mt-6">
+        <IndexingStatusCard indexing={indexing} />
+      </div>
+
       <div className="mt-8">{children}</div>
     </div>
   );

package/src/http/response-headers.ts

@@ -8,6 +8,7 @@
  * `Content-Encoding`) and keeps a bare `docker compose up` correct too.
  */
 
+import { NOINDEX_HEADER, indexingBlocked } from "../site/indexing";
 import { createMiddleware } from "@tanstack/react-start";
 
 import { cachePolicyFor, expiresHeader } from "./cache-policy";
@@ -73,6 +74,13 @@ export async function applyEdgeHeaders(
   }
   dedupeVary(headers);
 
+  // 2b. Indexing policy. Staging deployments must never be indexed, and the
+  //     header covers every response type (HTML, media, JSON) — robots.txt
+  //     alone does not deindex a URL that was already crawled.
+  if (!headers.has("x-robots-tag") && indexingBlocked()) {
+    headers.set("x-robots-tag", NOINDEX_HEADER);
+  }
+
   // 3. Compression.
   if (
     !compress ||

package/src/server/http/robots.ts

@@ -5,6 +5,9 @@
  * own default domain — a static file in `public/` goes stale the moment the
  * domain changes.
  */
+
+import { resolveIndexingPolicy, type IndexingMode } from "../../site/indexing";
+
 export type RobotsOptions = {
   /** The incoming request URL, used as the host fallback. */
   requestUrl: string;
@@ -16,6 +19,11 @@ export type RobotsOptions = {
   allowedAgents?: string[];
   /** `Cache-Control` for the response. */
   cacheControl?: string;
+  /**
+   * Override the environment-derived indexing policy. Leave unset so staging
+   * hosts (`SITE_INDEXING=off`) automatically serve a full disallow.
+   */
+  indexing?: IndexingMode;
 };
 
 export const DEFAULT_ALLOWED_AGENTS = [
@@ -26,6 +34,18 @@ export const DEFAULT_ALLOWED_AGENTS = [
 ];
 
 export async function robotsResponse(options: RobotsOptions): Promise<Response> {
+  const mode = options.indexing ?? resolveIndexingPolicy().mode;
+  if (mode === "block") {
+    // A blocked deployment advertises nothing: no sitemap, no per-agent allows.
+    return new Response(["User-agent: *", "Disallow: /", ""].join("\n"), {
+      headers: {
+        "Content-Type": "text/plain; charset=utf-8",
+        "Cache-Control": "public, max-age=300",
+        "X-Robots-Tag": "noindex, nofollow",
+      },
+    });
+  }
+
   let host = new URL(options.requestUrl).host;
   if (options.resolvePreferredHost) {
     try {

package/src/site/indexing.ts

@@ -0,0 +1,55 @@
+/**
+ * Search-engine indexing policy — an environment fact, never a database value.
+ *
+ * Staging and production run the same build, so whether a deployment may be
+ * indexed cannot live in content or in `site_settings`: a content restore or a
+ * database copy would then silently open staging to Google, or close
+ * production. It is read from `SITE_INDEXING` (or `SITE_ENV`) at request time.
+ *
+ * `SITE_INDEXING`:
+ *   `off` | `block` | `noindex` | `0` | `false` → blocked
+ *   `on`  | `allow` | `index`   | `1` | `true`  → allowed
+ * Unset falls back to `SITE_ENV` / `NODE_ENV`: anything that is not
+ * `production` is blocked, which is the safe default for a fresh staging host.
+ */
+export type IndexingMode = "allow" | "block";
+
+export type IndexingPolicy = {
+  mode: IndexingMode;
+  /** Where the decision came from, for display in the backoffice. */
+  source: "SITE_INDEXING" | "SITE_ENV" | "default";
+  /** The raw value behind the decision, e.g. `off` or `staging`. */
+  value: string;
+};
+
+/** `X-Robots-Tag` sent on every response of a blocked deployment. */
+export const NOINDEX_HEADER = "noindex, nofollow, noarchive, nosnippet, noimageindex";
+
+const BLOCK = new Set(["off", "block", "blocked", "noindex", "no", "0", "false"]);
+const ALLOW = new Set(["on", "allow", "allowed", "index", "yes", "1", "true"]);
+
+type Env = Record<string, string | undefined>;
+
+export function resolveIndexingPolicy(env: Env = process.env): IndexingPolicy {
+  const explicit = (env["SITE_INDEXING"] ?? "").trim().toLowerCase();
+  if (explicit) {
+    if (BLOCK.has(explicit)) return { mode: "block", source: "SITE_INDEXING", value: explicit };
+    if (ALLOW.has(explicit)) return { mode: "allow", source: "SITE_INDEXING", value: explicit };
+  }
+
+  const environment = (env["SITE_ENV"] ?? env["NODE_ENV"] ?? "").trim().toLowerCase();
+  if (environment) {
+    return {
+      mode: environment === "production" ? "allow" : "block",
+      source: "SITE_ENV",
+      value: environment,
+    };
+  }
+
+  return { mode: "block", source: "default", value: "unset" };
+}
+
+/** True when this deployment must not be indexed. */
+export function indexingBlocked(env: Env = process.env): boolean {
+  return resolveIndexingPolicy(env).mode === "block";
+}