Voltar

Page Builder — prova de mecanismo

Etapa 6: 7 tipos de bloco + PageRenderer público (SSR-safe) com sanitização sintática para rich_text.

7 blocos
Hero

Construa páginas em blocos

Um editor agnóstico de tema, plugável em qualquer app do ecossistema Uttara.

Texto rico

Bloco rich_text

Este é um bloco usando TipTap. Arraste pelo punho à esquerda para reordenar.

Galeria de imagens
CircuitoCódigo em monitorMacBook
Acordeão

Vídeo
Vídeo de exemplo (YouTube)
Call to Action

Pronto para começar?

Plugue o editor na sua app, monte seu registry e renderize do jeito que preferir.

Documentação
HTML bruto
Bloco html_content — útil para embeds de terceiros (formulários RD Station, scripts de chat, etc).

Saída pública (PageRenderer)

Mesma estrutura, sem chrome de edição. Este é o componente que a rota pública (ex: /quem-somos) usaria.

Construa páginas em blocos

Um editor agnóstico de tema, plugável em qualquer app do ecossistema Uttara.

Bloco rich_text

Este é um bloco usando TipTap. Arraste pelo punho à esquerda para reordenar.

CircuitoCódigo em monitorMacBook

Vídeo de exemplo (YouTube)

Pronto para começar?

Plugue o editor na sua app, monte seu registry e renderize do jeito que preferir.

Documentação
Bloco html_content — útil para embeds de terceiros (formulários RD Station, scripts de chat, etc).
Estado atual (7 blocos)
[
  {
    "id": "seed-hero",
    "blockType": "hero",
    "sortOrder": 0,
    "visible": true,
    "contentJson": {
      "heading": "Construa páginas em blocos",
      "subheading": "Um editor agnóstico de tema, plugável em qualquer app do ecossistema Uttara.",
      "imageUrl": "https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?auto=format&fit=crop&w=1600&q=70"
    }
  },
  {
    "id": "seed-rt",
    "blockType": "rich_text",
    "sortOrder": 1,
    "visible": true,
    "contentJson": {
      "html": "<h2>Bloco rich_text</h2><p>Este é um bloco usando <strong>TipTap</strong>. Arraste pelo punho à esquerda para reordenar.</p>"
    }
  },
  {
    "id": "seed-grid",
    "blockType": "image_grid",
    "sortOrder": 2,
    "visible": true,
    "contentJson": {
      "displayMode": "grid",
      "columns": 3,
      "images": [
        {
          "id": "g1",
          "url": "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=600&q=70",
          "alt": "Circuito"
        },
        {
          "id": "g2",
          "url": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=600&q=70",
          "alt": "Código em monitor"
        },
        {
          "id": "g3",
          "url": "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=600&q=70",
          "alt": "MacBook"
        }
      ]
    }
  },
  {
    "id": "seed-acc",
    "blockType": "accordion",
    "sortOrder": 3,
    "visible": true,
    "contentJson": {
      "multiple": false,
      "items": [
        {
          "id": "a1",
          "title": "O que é o uttara-page-builder?",
          "content": "Um construtor de páginas em blocos, agnóstico de tema, plugável em qualquer app do ecossistema."
        },
        {
          "id": "a2",
          "title": "Como adiciono novos tipos de bloco?",
          "content": "Implemente uma BlockDefinition (schema, defaults, Edit, Preview) e registre via createBlockRegistry."
        },
        {
          "id": "a3",
          "title": "Posso plugar conteúdo de módulos do sistema?",
          "content": "No momento o accordion só suporta itens digitados aqui. Suporte a fontes externas voltará quando o desenho de materialização estiver pronto."
        }
      ]
    }
  },
  {
    "id": "seed-video",
    "blockType": "video_embed",
    "sortOrder": 4,
    "visible": true,
    "contentJson": {
      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
      "title": "Vídeo de exemplo (YouTube)",
      "aspectRatio": "16:9"
    }
  },
  {
    "id": "seed-cta",
    "blockType": "cta",
    "sortOrder": 5,
    "visible": true,
    "contentJson": {
      "heading": "Pronto para começar?",
      "description": "Plugue o editor na sua app, monte seu registry e renderize do jeito que preferir.",
      "buttonText": "Documentação",
      "buttonUrl": "https://github.com/uttara-dev"
    }
  },
  {
    "id": "seed-html",
    "blockType": "html_content",
    "sortOrder": 6,
    "visible": true,
    "contentJson": {
      "html": "<div style=\"padding:1rem;border:1px dashed currentColor;border-radius:0.5rem;font-size:0.875rem;opacity:0.8\">Bloco <code>html_content</code> — útil para embeds de terceiros (formulários RD Station, scripts de chat, etc).</div>"
    }
  }
]