Build on Draivv.

Your site                              Draivv backend
+---------------------+               +------------------------------+
| Next.js / WordPress |   fetch       | GET  /api/content            |
| Content API v1      | ------------> | GET  /api/content/:slug      |
| @sdcms/cli          |               | GET  /api/content/sitemap    |
|                     |   webhook     | POST webhook (HMAC)          |
|                     | <------------ | revalidateTag / revalidate   |
|                     |               |                              |
| telemetry.js (~3KB) |   sendBeacon  | POST /telemetry/session      |
|                     | ------------> | POST /telemetry/pageview     |
|                     |               | POST /telemetry/click        |
|                     |               |                              |
| widget/lead.js      |   fetch       | GET  /api/lead-magnets/{id}  |
|                     | ------------> | POST /api/lead-magnets/{id}  |
+---------------------+               +------------------------------+

# Scaffold a full integration
npx @sdcms/cli init

# Validate connectivity & generated routes (CI-friendly)
npx @sdcms/cli check

curl -H "x-api-key: $CMS_API_KEY" \
  "https://cms.draivv.com/api/content?limit=5&type=BLOG"

https://cms.draivv.com

curl -H "x-api-key: $CMS_API_KEY" \
  "https://cms.draivv.com/api/content/my-post-slug"

{
  "error": "Esta chave de API não tem a capability \"content:publish\".",
  "code": "missing_capability"
}

{
  "data": [
    {
      "id": "uuid",
      "title": "Post title",
      "slug": "post-title",
      "status": "PUBLISHED",
      "type": "BLOG",
      "excerpt": "Summary…",
      "seoImage": "https://…",
      "tags": ["tag1", "tag2"],
      "publishedAt": "2024-01-01T12:00:00Z",
      "client": { "slug": "client", "name": "Client Name" }
    }
  ],
  "nextCursor": "1704110400000|uuid",
  "hasMore": true,
  "count": 20
}

// src/lib/cms.ts
export async function getPostBySlug(slug: string): Promise<BlogPost | null> {
  const res = await fetch(`${process.env.SDCMS_API_URL}/api/content/${slug}`, {
    headers: { "x-api-key": process.env.CMS_API_KEY! },
    next: { revalidate: 300, tags: ["sdcms:content"] },
  })
  if (res.status === 404) return null
  if (!res.ok) throw new Error(`SDCMS ${res.status}`)
  const { data } = await res.json()
  return data
}

{
  "data": [
    {
      "slug": "post-title",
      "canonicalUrl": "https://your-site.com/blog/post-title",
      "publishedAt": "2024-01-01T12:00:00Z",
      "updatedAt": "2024-01-02T08:30:00Z"
    }
  ],
  "nextCursor": "…",
  "hasMore": false
}

interface BlogPost {
  id: string
  title: string
  slug: string
  status: string
  type: string
  excerpt: string | null
  content: string | null
  seoTitle: string | null
  seoDescription: string | null
  seoImage: string | null
  tags: string[]
  publishedAt: string | null
  jsonLd: Record<string, unknown> | null
  client: { slug: string; name: string }
}

interface ListPostsResponse {
  data: BlogPost[]
  nextCursor: string | null
  hasMore: boolean
  count: number
}

interface SitemapEntry {
  slug: string
  canonicalUrl: string
  publishedAt: string
  updatedAt: string
}

interface WebhookPayload {
  event:
    | "content.published"
    | "content.updated"
    | "content.unpublished"
    | "content.deleted"
  eventId: string
  schemaVersion: number
  emittedAt: string
  clientId: string
  siteId: string
  post: {
    id: string
    slug: string | null
    title: string
    type: string
    publishedAt: string | null
    updatedAt: string | null
    seoTitle: string | null
    seoDescription: string | null
    seoImage: string | null
    canonicalUrl: string | null
  }
  previousSlug?: string | null
}

import crypto from "node:crypto"
import { revalidatePath, revalidateTag } from "next/cache"

export async function POST(request: Request) {
  const rawBody = await request.text()
  const timestamp = request.headers.get("x-sdcms-timestamp")
  const signature = request.headers.get("x-sdcms-signature")

  // 1. Reject stale deliveries (replay protection)
  const age = Math.abs(Date.now() / 1000 - Number(timestamp))
  if (!timestamp || age > 300) return new Response("Stale", { status: 403 })

  // 2. Verify the HMAC over `timestamp.rawBody`
  const expected = crypto
    .createHmac("sha256", process.env.CMS_WEBHOOK_SECRET!)
    .update(`${timestamp}.${rawBody}`)
    .digest("hex")

  const ok =
    signature &&
    crypto.timingSafeEqual(
      Buffer.from(signature, "hex"),
      Buffer.from(expected, "hex"),
    )
  if (!ok) return new Response("Invalid", { status: 403 })

  // 3. Revalidate
  const payload = JSON.parse(rawBody)
  revalidateTag("sdcms:content")
  revalidatePath("/blog")
  revalidatePath("/sitemap.xml")
  if (payload.post?.slug) revalidatePath(`/blog/${payload.post.slug}`)
  if (payload.previousSlug) revalidatePath(`/blog/${payload.previousSlug}`)

  return new Response("OK", { status: 200 })
}

<script>window.__SD_SITE_ID__="PUBLIC_SITE_ID"</script>
<script src="https://cms.draivv.com/telemetry.js" defer></script>

<a href="/quote"
   data-sd-track-click="cta"
   data-sd-track-label="header-quote">
  Request a quote
</a>

<button data-sd-track-click="demo" data-sd-track-label="hero-demo">
  Book a demo
</button>

<script>window.__SD_SITE_ID__="PUBLIC_PROPOSAL_ID"</script>
<script src="https://cms.draivv.com/proposal-telemetry.js" defer></script>

<section data-sd-section="pricing">…</section>
<section data-sd-section="scope">…</section>

{
  "data": { "name": "Ana", "email": "ana@example.com" },
  "hp": "",
  "__sd_session_id__": "telemetry-session-uuid"
}

export async function POST(request: Request) {
  const form = await request.formData()
  // …handle your own logic (save, email)…

  await fetch("https://cms.draivv.com/api/lead-magnets/PUBLIC_ID/capture", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      data: {
        name: form.get("name"),
        email: form.get("email"),
        phone: form.get("phone"),
      },
      hp: "",
      __sd_session_id__: form.get("__sd_session_id__") || undefined,
    }),
  })

  return new Response("OK")
}

<div data-sdcms-lead="PUBLIC_ID"></div>
<script src="https://cms.draivv.com/widget/lead.js" async></script>

.sdcms-lead {
  --sdcms-lead-scheme: dark;              /* native controls (select, autofill) */
  --sdcms-lead-bg: #0f1b21;               /* card background */
  --sdcms-lead-ink: #f4f7fb;              /* primary text */
  --sdcms-lead-muted: #9ca5b4;            /* description, hints, consent */
  --sdcms-lead-line: rgba(255,255,255,.10);
  --sdcms-lead-field-bg: rgba(255,255,255,.04);
  --sdcms-lead-accent: #3fcb9a;           /* button + focus ring */
  --sdcms-lead-accent-ink: #05090b;       /* button label */
}

.sdcms-lead { max-width: 520px; font-family: system-ui, sans-serif; }
.sdcms-lead__card { border: 1px solid rgba(0,0,0,.12); border-radius: 14px; padding: 16px; }
.sdcms-lead__input,
.sdcms-lead__select,
.sdcms-lead__textarea { width: 100%; box-sizing: border-box; }
.sdcms-lead__btn { width: 100%; border: 0; border-radius: 10px; padding: 11px 12px; }

1. POST /api/private/wp/connect-token        → generate a one-time token
2. Plugin → POST /api/public/wp/connect      → exchanges token
3. Draivv returns { api_key, webhook_secret, site_id, client_id }

npx @sdcms/cli init                 # scaffold the project
npx @sdcms/cli check                # validate env, API, routes (CI)
npx @sdcms/cli content list         # list published content
npx @sdcms/cli content get <slug>   # fetch a post (--format json|markdown)
npx @sdcms/cli content publish <id> # publish via the private API (--unpublish)

import { createSDCMSClient } from "@sdcms/nextjs"

export const sdcms = createSDCMSClient({
  apiUrl: "https://cms.draivv.com",
  clientSlug: "your-client-slug",
  // revalidate: 3600,
})

npx @sdcms/cli init
npx @sdcms/cli check