Komponenten und die Registry

Atlas liefert nie Komponenten an Ihre Website aus. Ihre Komponenten bleiben in Ihrem Repository. Der Site-Contract teilt Atlas mit, welche Komponenten es gibt und welche Felder Redakteure ausfüllen dürfen.

Wie eine Komponente deklariert wird

Jede Komponente im Contract hat:

• eine qualifizierte ID, etwa acme.home.hero, und eine Version;
• eine Art: section, block oder layout;
• typisierte Felder, zum Beispiel ein heading (Text, Pflicht, bis zu 80 Zeichen), ein image (Asset) und ein cta (Link).

Redakteure sehen ein Formular, das aus diesen Feldern gebaut ist. Sie können keine Felder hinzufügen, kein HTML einfügen und Ihr Markup nicht ändern.

Wie Ihre Website sie rendert

Halten Sie in Ihrem Code eine kleine Registry vor, die jede Komponenten-ID der React-Komponente zuordnet, die sie rendert:

atlas/sections.tsx

import { Hero } from '@/components/hero';
import { FeatureGrid } from '@/components/feature-grid';
import type { AtlasSection } from '@/lib/atlas';

const registry = {
  'acme.home.hero': Hero,
  'acme.home.features': FeatureGrid,
} as const;

export function renderSection(
  section: AtlasSection,
  assets: Record<string, { url: string; alt?: string }>,
) {
  const Component = registry[section.component.id as keyof typeof registry];
  if (!Component) return null; // unknown component: skip it, never guess
  return <Component key={section.id} {...section.props} assets={assets} />;
}

Validieren Sie die Props, die Ihre Komponente erhält, so, wie Sie jede externe Eingabe validieren würden.

Code und Inhalt synchron halten

Ihre Website meldet beim Start die Komponenten, mit denen sie gebaut wurde (POST /deployments). Studio vergleicht das mit dem aktiven Contract und zeigt einen der folgenden Zustände:

Zustand	Bedeutung
In sync	Der deployte Build rendert den aktiven Contract
Missing components	Der Contract nutzt Komponenten, die dieser Build nicht hat. Deployen Sie zuerst den Code
Different contract	Der Build wurde für eine andere Version des Contracts erstellt
Unknown contract	Atlas hat den Contract, den dieser Build meldet, nie gesehen
No contract	Es ist noch kein Contract aktiv

Ein Production-Release kann nicht freigegeben werden, solange die Website nicht synchron ist. Das verhindert, dass Redakteure eine Komponente nutzen, die es auf der Live-Site noch nicht gibt.

Eine neue Komponente hinzufügen

1. Bauen und testen Sie die Komponente im Code Ihrer Website.
2. Fügen Sie sie mit ihren Feldern zum Contract-Bundle hinzu, und zu den Seitentypen, in die Redakteure sie einfügen dürfen.
3. Validieren und schlagen Sie den Contract vor. Ein Site-Admin aktiviert ihn.
4. Deployen Sie die Website. Studio zeigt In sync.
5. Redakteure können sie nun nutzen.