Guia de Funcionalidades do Portal
Análise em destaque · portal

Guia de Funcionalidades do Portal.

Demonstração completa: Mermaid, código, tabelas, imagens, PDF e embeds

Roger Maiocchi4 min de leitura

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
  • 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:

Roger.jpg


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é1.


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.

Continue lendo