Cmssy

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 fetchSiteConfig z @cmssy/react:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

const { branding } = await fetchSiteConfig(cmssy);
// { brandName, logoUrl, faviconUrl, ogImageUrl } | null

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. buildCmssyMetadata już aplikuje branding pod SEO: brandName jako fallback tytułu i ogImageUrl jako domyślny obraz Open Graph / Twitter.

Używanie brandingu w Twojej aplikacji

Favicon:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

export async function generateMetadata() {
  const { branding } = await fetchSiteConfig(cmssy);
  return branding?.faviconUrl ? { icons: { icon: branding.faviconUrl } } : {};
}

Logo w headerze:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

export default async function Header() {
  const { branding } = await fetchSiteConfig(cmssy);
  return (
    <header>
      {branding?.logoUrl && <img src={branding.logoUrl} alt={branding.brandName} />}
      <h1>{branding?.brandName || 'My Site'}</h1>
    </header>
  );
}