Workspace-Branding

Überblick

cmssy ist headless - deine Next.js-App besitzt das gesamte visuelle Styling (Farben, Typografie, Dark Mode) als normales Tailwind/CSS in deinem eigenen Repo. Was cmssy pro Workspace speichert, ist Branding: ein Markenname und gemeinsame Assets, die du abrufst und in deiner Site anwendest.

Workspace-Branding

Das Branding liegt in der Site-Config des Workspace. Rufe es über das Gateway mit deiner eigenen GraphQL-Abfrage ab - createCmssyClient(cmssy).query(...). Die Site-Config wird unter public.siteConfig bereitgestellt, und die Assets liegen in deren branding-Unterobjekt:

import { createCmssyClient, type CmssyBranding } from "@cmssy/core";
import { cmssy } from "@/cmssy.config";

const SITE_CONFIG_QUERY = `query PublicSiteConfig($workspaceSlug: String!) {
  public {
    siteConfig(workspaceSlug: $workspaceSlug) {
      branding {
        brandName
        logoUrl
        faviconUrl
        ogImageUrl
      }
    }
  }
}`;

const data = await createCmssyClient(cmssy).query<{
  public: { siteConfig: { branding: CmssyBranding | null } };
}>(SITE_CONFIG_QUERY, { workspaceSlug: cmssy.workspaceSlug });

const branding = data.public.siteConfig.branding;
// CmssyBranding | null - brandName, logoUrl, faviconUrl, ogImageUrl (each nullable)

Feld	Bedeutung	Verwendung
`brandName`	Anzeigename der Site / Marke.	Seitentitel, Metadata, Header
`logoUrl`	Logo-Asset-URL.	Im Header oder Footer rendern
`faviconUrl`	Favicon-Asset-URL.	In deine Metadata-Icons einbinden
`ogImageUrl`	Standard-Bild für Open Graph / Social Sharing.	Standard-OG-Bild für Seiten ohne eigenes Bild

Jedes Feld ist nullable - rendere nur, was gesetzt ist.

Branding in deiner App nutzen

Favicon:

import { createCmssyClient } from "@cmssy/core";
import { cmssy } from "@/cmssy.config";

const SITE_CONFIG_QUERY = `query PublicSiteConfig($workspaceSlug: String!) {
  public { siteConfig(workspaceSlug: $workspaceSlug) { branding { faviconUrl } } }
}`;

export async function generateMetadata() {
  const data = await createCmssyClient(cmssy).query<{
    public: { siteConfig: { branding: { faviconUrl: string | null } | null } };
  }>(SITE_CONFIG_QUERY, { workspaceSlug: cmssy.workspaceSlug });

  const faviconUrl = data.public.siteConfig.branding?.faviconUrl;
  return faviconUrl ? { icons: { icon: faviconUrl } } : {};
}

Logo im Header:

import { createCmssyClient, type CmssyBranding } from "@cmssy/core";
import { cmssy } from "@/cmssy.config";

const SITE_CONFIG_QUERY = `query PublicSiteConfig($workspaceSlug: String!) {
  public { siteConfig(workspaceSlug: $workspaceSlug) { branding { brandName logoUrl } } }
}`;

export default async function Header() {
  const data = await createCmssyClient(cmssy).query<{
    public: { siteConfig: { branding: CmssyBranding | null } };
  }>(SITE_CONFIG_QUERY, { workspaceSlug: cmssy.workspaceSlug });

  const branding = data.public.siteConfig.branding;
  return (
    <header>
      {branding?.logoUrl && <img src={branding.logoUrl} alt={branding.brandName ?? ""} />}
      {branding?.brandName && <h1>{branding.brandName}</h1>}
    </header>
  );
}