Branding workspace

Przegląd

cmssy jest headless - Twoja aplikacja Next.js posiada całe stylowanie wizualne (kolory, typografia, dark mode) jako zwykły Tailwind/CSS w Twoim repozytorium. To, co cmssy przechowuje per workspace, to branding: nazwa marki i współdzielone assety, które pobierasz i aplikujesz w swojej stronie.

Branding workspace

Branding żyje w site config workspace. Pobierz go przez gateway własnym zapytaniem GraphQL - createCmssyClient(cmssy).query(...). Site config jest wystawiony pod public.siteConfig, a assety siedzą na jego pod-obiekcie 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)

Pole	Co to	Gdzie użyć
`brandName`	Wyświetlana nazwa strony / marki.	Tytuł strony, metadata, header
`logoUrl`	URL assetu logo.	Renderuj w headerze lub stopce
`faviconUrl`	URL assetu favicon.	Podłącz do icons w metadata
`ogImageUrl`	Domyślny obraz Open Graph / do social share.	Domyślny obraz OG dla stron bez własnego obrazu

Każde pole jest nullable - renderuj tylko to, co ustawione.

Używanie brandingu w Twojej aplikacji

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 w headerze:

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