@veletech/react

Pacote público, server-first, compatível com API SeuCMS/Vele v1.3+.

Instalação e ambiente

npm install @veletech/react

Configure somente no servidor:

SEUCMS_API_URL=https://cms.exemplo.com
SEUCMS_API_KEY=chave-do-site
SEUCMS_REVALIDATE_SECRET=segredo-unico-do-site

Importe uma vez no layout:

import '@veletech/react/styles.css'

Next.js App Router

Em app/blog/page.tsx, leia page e category de searchParams e renderize:

<ArticleList page={page} category={category} routePrefix="/blog" pathname="/blog" />

Em app/blog/[slug]/page.tsx:

export const generateMetadata = ({ params }) => getArticleMetadata(params.slug)
export default ({ params }) => <Article slug={params.slug} />

ArticleList e Article são Server Components. getArticles e getArticle leem a API key no servidor. Nunca os invoque em Client Components. Pagination usa links com query string e funciona sem JavaScript.

Customização

:root {
  --seucms-primary: #1a1a2e;
  --seucms-text: #111;
  --seucms-text-secondary: #666;
  --seucms-font-heading: Georgia, serif;
  --seucms-font-body: system-ui, sans-serif;
  --seucms-radius: 8px;
  --seucms-spacing-unit: 8px;
}

Todas as classes públicas começam com seucms-. O CSS é importado explicitamente e nunca injetado por JavaScript.

Fase 4

A rota deve validar os cabeçalhos X-Vele-Timestamp e X-Vele-Signature. Recalcule HMAC-SHA256 sobre timestamp + . + corpo bruto usando o segredo, compare em tempo constante e rejeite timestamps com mais de cinco minutos. Depois execute revalidateTag('articles') e, quando houver slug, revalidateTag('article:' + slug).

O sitemap deve percorrer getArticles com perPage 50 e gerar URLs absolutas. O RSS pode usar a mesma consulta. getArticleMetadata normaliza og:image como URL absoluta; valide OG e Twitter antes de produção.

Versionamento

Semver rigoroso. Mudança visual que invalide customizações é major. Pacote 1.x requer API v1.3+.