Branding del workspace

Visión general

cmssy es headless - tu aplicación Next.js posee todo el estilo visual (colores, tipografía, modo oscuro) como Tailwind/CSS estándar en tu propio repositorio. Lo que cmssy guarda por workspace es el branding: un nombre de marca y assets compartidos que tú obtienes y aplicas en tu sitio.

Branding del workspace

El branding vive en la config de sitio del workspace. Obténlo a través de la gateway con tu propia consulta GraphQL - createCmssyClient(cmssy).query(...). La config de sitio se expone bajo public.siteConfig, y los assets están en su sub-objeto 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)

Campo	Qué es	Dónde usarlo
`brandName`	Nombre visible del sitio / la marca.	Título de página, metadata, header
`logoUrl`	URL del asset del logo.	Renderiza en tu header o footer
`faviconUrl`	URL del asset favicon.	Conéctalo a los iconos de tus metadata
`ogImageUrl`	Imagen Open Graph / de compartir en redes por defecto.	Imagen OG por defecto para páginas sin imagen personalizada

Todos los campos son anulables - renderiza solo lo que esté definido.

Usar branding en tu aplicación

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 en el 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>
  );
}