Guia de Funcionalidades do Portal.

Este post demonstra todas as funcionalidades de renderização de conteúdo disponíveis no Portal Maiocchi.

---

Diagramas Mermaid

Flowchart — Fluxo de publicação

graph LR
    A([Obsidian]) --> B[Sync Script]
    B --> C[(GitHub)]
    C --> D[VPS Cron]
    D --> E[(PostgreSQL)]
    E --> F([Portal Next.js])

Sequence Diagram — Pipeline RAG

sequenceDiagram
    participant U as Usuário
    participant W as WhatsApp
    participant B as Bridge
    participant R as RAG Engine
    participant O as Ollama

    U ->> W: Envia pergunta
    W ->> B: Webhook
    B ->> R: Query + contexto
    R ->> O: Prompt + documentos
    O -->> R: Resposta gerada
    R -->> B: Resposta final
    B -->> W: Mensagem formatada
    W -->> U: Recebe resposta

Pie Chart — Stack de tecnologia

pie title Stack do Escritório
    "TypeScript" : 35
    "Python" : 25
    "PostgreSQL" : 15
    "Docker" : 15
    "Outros" : 10

State Diagram — Ciclo de vida do conteúdo

stateDiagram-v2
    [*] --> Rascunho
    Rascunho --> Revisão
    Revisão --> Publicado
    Revisão --> Rascunho: Correções
    Publicado --> Arquivado
    Arquivado --> [*]

---

Syntax Highlighting

TypeScript

import { renderMarkdown } from "@/lib/cms/markdown"
import ServerMarkdown from "@/components/cms/ServerMarkdown"

export default async function GenericPage({ params }: PageProps) {
  const { slug } = await params
  const data = await getContent(slug)
  const html = await renderMarkdown(data.content)

  return <ServerMarkdown html={html} className="prose-lg" />
}

Python

from ollama import Client

client = Client(host="http://ollama:11434")

def generate_response(prompt: str, context: list[str]) -> str:
    """Gera resposta via Qwen2.5:7B com contexto RAG."""
    system = "Você é um assistente jurídico especializado."
    messages = [
        {"role": "system", "content": system},
        {"role": "user", "content": f"Contexto: {context}\n\n{prompt}"},
    ]
    response = client.chat(model="qwen2.5:7b", messages=messages)
    return response["message"]["content"]

SQL

SELECT c.title, c.slug, c.status,
       ts_rank(c.search_vector, plainto_tsquery('portuguese', $1)) AS rank
FROM cms.contents c
WHERE c.search_vector @@ plainto_tsquery('portuguese', $1)
  AND c.status = 'published'
ORDER BY rank DESC
LIMIT 10;

Bash

#!/bin/bash
# Deploy do portal no VPS
rsync -avz --delete \
  --exclude node_modules --exclude .next --exclude .git \
  ./src/ root@147.93.68.202:/opt/portal-maiocchi/src/

ssh hostinger-vps 'cd /opt/portal-maiocchi && docker build -t portal-maiocchi . && \
  docker rm -f portal-maiocchi && \
  docker run -d --name portal-maiocchi --network maiocchi-net \
    -p 3000:3000 portal-maiocchi'

---

Tabelas GFM

Containers ativos no VPS

Container	Porta	Função
maiocchi-db	5432	PostgreSQL 16 + pgvector
portal-maiocchi	3000	Portal Next.js
ollama	11434	IA local (Qwen2.5:7B)
evolution-api	8080	WhatsApp API
n8n-n8n-1	5678	Automações
sirg-classifier	8082	SIRG v2 classificador

Comparativo de modelos

Modelo	Parâmetros	RAM	Velocidade
Qwen2.5:7B	7B	~5 GB	13 tok/s
Gemma2:2B	2B	~2 GB	25 tok/s
Gemini Flash	Cloud	—	~50 tok/s

---

Formatação de texto

Demonstração de negrito, itálico, tachado, código inline e links.

Citação em bloco — "A tecnologia é a ferramenta; o Direito é o norte." — Roger Maiocchi

Lista ordenada

1. Diagnóstico do problema
2. Pesquisa de jurisprudência
3. Elaboração da peça
4. Revisão e protocolo

Lista não-ordenada

• Adequação à LGPD
• Contratos de tecnologia
• Assessoria para startups
• Propriedade intelectual digital

Lista de tarefas

• Pipeline de sync Obsidian → Portal
• SSR com ServerMarkdown
• Renderização Mermaid client-side
• Cutover maiocchi.adv.br → Next.js (Traefik → portal-maiocchi:3000)
• UI global — Header, Nav e Footer institucionais
• Editor Tiptap no CMS admin
• Mermaid + Excalidraw no editor e páginas públicas
• Frontmatter canônico nos 10 arquivos publicados
• Busca full-text + semântica (PostgreSQL tsvector + pgvector, Gemini API opcional)
• Fine-tune SIRG com corpus jurídico

---

Embeds — Excalidraw

Diagrama criado no Excalidraw, renderizado como SVG interativo:

---

Embeds — Canvas (Obsidian)

Fluxo de conversação do bot WhatsApp em formato Canvas:

---

Embeds — PDF

Documento completo (todas as páginas)

Documento a partir da página 3

---

Embeds — Imagem

Imagem existente na galeria de media:

---

Wiki Links

Veja também: Nossos Serviços, Sobre o Escritório e Projeto Senhor Capivara.

---

Notas de rodapé e separadores

Este é um texto com nota de rodapé¹.

---

Nota de teste criada em 2026-04-11 para validação das funcionalidades do Portal Maiocchi.

Footnotes

1. As funcionalidades são renderizadas via unified/remark/rehype no servidor. ↩