Branding du workspace

Vue d'ensemble

cmssy est headless - votre application Next.js possède tout le style visuel (couleurs, typographie, mode sombre) sous forme de Tailwind/CSS standard dans votre propre dépôt. Ce que cmssy stocke par workspace, c'est le branding : un nom de marque et des assets partagés que vous récupérez et appliquez dans votre site.

Branding du workspace

Le branding vit dans la config de site du workspace. Récupérez-le via la gateway avec votre propre requête GraphQL - createCmssyClient(cmssy).query(...). La config de site est exposée sous public.siteConfig, et les assets se trouvent sur son sous-objet branding :

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)

Champ	Description	Où l'utiliser
`brandName`	Nom affiché du site / de la marque.	Titre de page, metadata, header
`logoUrl`	URL de l'asset du logo.	Affichez dans votre header ou footer
`faviconUrl`	URL de l'asset favicon.	Branchez dans les icônes de vos metadata
`ogImageUrl`	Image Open Graph / de partage social par défaut.	Image OG par défaut pour les pages sans image personnalisée

Chaque champ est nullable - n'affichez que ce qui est défini.

Utiliser le branding dans votre application

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 dans le 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>
  );
}