Documentação Técnica

Como o Router enxerga

As rotas existentes continuam apontando para AdminController. Ele atua como façade, validando permissões e repassando a chamada para o módulo correto. Assim não foi necessário alterar routes/web.php ou o JavaScript do dashboard.

Quando útil, podemos expor rotas diretas (ex: 'handler' => 'Admin\\PostsAdminController@postsStore') sem quebrar nada.

Antes (9 scripts inline):

<script>
  var dashboardConfig = { ... };
</script>
<script src="/js/dashboard/sidebar.js"></script>
<script src="/js/dashboard/tables.js"></script>
<script src="/js/dashboard/theme.js"></script>
<script src="/js/dashboard/posts.js"></script>
<script src="/js/dashboard/notifications.js"></script>
<script src="/js/dashboard/notifications-center.js"></script>
<script src="/js/dashboard/account.js"></script>
<script src="/js/dashboard/modals.js"></script>
<script src="/js/dashboard/main.js"></script>

Depois (2 scripts otimizados):

<script>
  // Injeção server-side de configuração
  window.dashboardConfig = {
    isAdmin: false,
    canManagePosts: false,
    isEditor: false,
    currentUserId: null,
    csrfToken: 'a818bc1a1b4e78dd9cabd972ee276dc13c11e463f01c0e78e4bdee6ca3f881bf'
  };
</script>
<script src="/js/dashboard/bundle.js" defer></script>
<script src="/js/dashboard/dogs-modals.js" defer></script>

1. Usuário acessa: GET /dashboard → servidor renderiza dashboard.twig completo (overview visível, demais seções com display:none)
2. Clique na sidebar: Link "👥 Usuários" tem href="#users" + onclick="showSection('users', this)"
3. JavaScript executa: showSection('users') esconde todas as divs e exibe apenas #users-section
4. Hash muda: URL vira /dashboard#usuarios (mas sem requisição HTTP ao servidor)
5. Estado preservado: Filtros de tabela, busca, scroll permanecem na memória enquanto você navega
6. Ações POST: Criar/editar usuário → POST /admin/users/create → redireciona para /dashboard#users (compatível legado) → JS detecta a seção e normaliza URL para /dashboard#usuarios

// Verificar roles
User::isAdmin($user)     // Apenas admin
User::isEditor($user)    // Editor ou Admin
User::isAuthor($user)    // Author, Editor ou Admin

// Verificar permissões específicas
User::canPublish($user)  // Pode publicar diretamente
User::canEditPost($user, $post)   // Pode editar post específico
User::canDeletePost($user, $post) // Pode deletar post específico

{% if isAdmin(me) %}
  <!-- Conteúdo apenas para admins -->
{% endif %}

{% if isEditor(me) %}
  <!-- Conteúdo para editors e admins -->
{% endif %}

{% if isAuthor(me) %}
  <!-- Conteúdo para authors, editors e admins -->
{% endif %}

{% if canPublish(me) %}
  <option value="published">Publicado</option>
{% else %}
  <option value="pending_review">Enviar para Revisão</option>
{% endif %}

Shape da matriz

'dashboard_capabilities' => [
  'sections' => ['overview', 'users', 'dogs', 'account'],
  'actions' => [
    'manage_users' => false,
    'view_users_list' => true,
    'manage_dogs' => false,
    'view_dogs_list' => true,
  ],
]

• ✅ Use draft enquanto estiver escrevendo e revisando
• ✅ Só mude para pending_review quando o post estiver 100% pronto
• ✅ Revise ortografia, gramática e formatação antes de enviar
• ✅ Adicione categoria e tags relevantes
• ✅ Inclua uma imagem de capa atraente
• ❌ Não edite posts em pending_review - aguarde feedback
• ❌ Não envie posts incompletos para revisão

• ✅ Revise a fila de posts pendentes pelo menos 1x por dia
• ✅ Dê feedback construtivo quando recusar um post
• ✅ Respeite o estilo do Author, faça apenas ajustes necessários
• ✅ Verifique SEO (título, excerpt, tags) antes de publicar
• ✅ Se recusar um post, explique o motivo ao Author
• ❌ Não edite posts em draft sem avisar o Author
• ❌ Não publique posts com erros ou conteúdo inadequado

-- Tabela notifications
CREATE TABLE IF NOT EXISTS notifications (
  id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  user_id INT UNSIGNED NOT NULL,
  type VARCHAR(50) NOT NULL,
  title VARCHAR(255) NOT NULL,
  message TEXT,
  link VARCHAR(255),
  is_read TINYINT(1) DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
  INDEX idx_user_read (user_id, is_read),
  INDEX idx_created (created_at DESC)
);

Índices otimizados: (user_id, is_read) para buscar não lidas rapidamente, created_at DESC para ordenação temporal eficiente.

Métodos principais:

• create($userId, $type, $title, $message, $link) - Cria nova notificação
• getUnreadCount($userId) - Retorna quantidade de não lidas
• getRecent($userId, $limit) - Busca últimas N notificações
• markAsRead($id, $userId) - Marca individual como lida
• markAllAsRead($userId) - Marca todas como lidas
• notifyEditors($title, $message, $link) - Notifica todos Editors/Admins
• notifyUser($userId, $type, $title, $message, $link) - Notifica usuário específico

• GET /notifications - Retorna JSON com notificações + contador de não lidas
• POST /notifications/mark-read/{id} - Marca notificação específica como lida
• POST /notifications/mark-all-read - Marca todas como lidas em batch

Todas as rotas protegidas com middleware 'auth' - apenas usuários logados.

Gatilhos automáticos no método postsUpdate():

// Quando status muda de draft → pending_review
if ($oldStatus === 'draft' && $newStatus === 'pending_review') {
    Notification::notifyEditors(
        'Novo post aguardando revisão',
        "{$author['name']} enviou um post para revisão",
        '/dashboard#posts'
    );
}

// Quando post é publicado por Editor/Admin
if ($newStatus === 'published' && $oldStatus !== 'published') {
    Notification::notifyUser(
        $authorId,
        'post_published',
        'Post publicado com sucesso!',
        "Seu post '{$title}' está no ar!",
        "/blog/{$slug}"
    );
}

// Quando post é rejeitado (volta para draft)
if ($oldStatus === 'pending_review' && $newStatus === 'draft') {
    Notification::notifyUser(
        $authorId,
        'post_returned',
        'Post devolvido para revisão',
        "Seu post '{$title}' precisa de ajustes",
        '/dashboard#posts-edit-' . $postId
    );
}

Os links acima usam hashes legados internos (#posts, #posts-edit-*). No frontend atual, o dashboard aceita esses hashes e normaliza para os aliases visíveis na URL (ex.: #blog-posts).

Componentes visuais:

• Sino animado: Ícone Bootstrap bi-bell-fill com efeito hover
• Badge dinâmico: Contador vermelho sobreposto (oculto quando 0)
• Dropdown responsivo: 350px de largura em desktop, 100vw em mobile
• Altura máxima: 500px com scroll automático
• Header fixo: "Notificações" + botão "Marcar todas como lidas"
• Lista scrollável: Container #notificationsList com itens dinâmicos

Ajustes para mobile: Dropdown ocupa largura total da tela (min-width: 100vw), alinhado à direita para facilitar acesso com polegar.

Funções implementadas:

• loadNotifications() - Carrega via AJAX (GET /notifications)
  • Chama renderNotifications() e updateBadge()
• renderNotifications(notifications) - Renderiza lista HTML dinâmica
  • Mostra ícones coloridos por tipo (getNotificationIcon())
  • Formata timestamp relativo (formatTimeAgo())
  • Destaca não lidas com fundo claro e dot azul
  • Adiciona links clicáveis quando disponíveis
• getNotificationIcon(type) - Retorna ícone Bootstrap específico
  • post_pending → bi-clock-history (amarelo)
  • post_published → bi-check-circle (verde)
  • post_returned → bi-arrow-return-left (azul)
  • user_* → ícones de usuário (criação, aprovação, atualização, remoção)
  • dog_* → ícones de gestão de cães (cadastro, atualização, remoção)
• formatTimeAgo(timestamp) - Formata em português
  • "Agora mesmo" (< 1min) → "5 min atrás" → "2h atrás" → "3d atrás"
• updateBadge(count) - Atualiza contador dinâmico
  • Mostra número exato até 99, depois "99+"
  • Oculta badge quando count = 0
• markNotificationRead(id) - Marca individual via POST
  • Recarrega lista após 300ms para feedback visual
• markAllNotificationsRead() - Marca todas via POST
  • Atualiza badge e lista imediatamente

Carregamento inteligente:

• Na inicialização: loadNotifications() ao carregar página
• Ao abrir dropdown: Recarrega automaticamente (evento click)
• Auto-refresh: Atualiza a cada 30 segundos (setInterval(loadNotifications, 30000))
• Após marcar lida: Recarrega com delay de 300ms para animação suave

Ajustes para telas pequenas:

@media (max-width: 576px) {
  .dropdown-menu.notification-dropdown {
    min-width: 100vw !important;
    max-width: 100vw !important;
    left: auto !important;
    right: 0 !important;
    margin-right: -1rem;
  }
  
  .dropdown-menu.notification-dropdown .notification-item {
    padding: 1rem 0.75rem !important;
  }
  
  .notification-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.35rem !important;
  }
}

Otimizações mobile:

• Dropdown ocupa largura total (100vw) para facilitar leitura
• Padding reduzido nos itens para mais conteúdo visível
• Badge menor para não obstruir ícone do sino
• Touch-friendly: áreas clicáveis amplas (min 44x44px)

// 1. Busca via mb_stripos (case-insensitive, multibyte-safe)
$searchTerm = $_GET['q'] ?? '';
if ($searchTerm) {
    $posts = array_filter($posts, function($post) use ($searchTerm) {
        return mb_stripos($post['title'], $searchTerm) !== false
            || mb_stripos($post['excerpt'], $searchTerm) !== false
            || mb_stripos($post['content'], $searchTerm) !== false
            || mb_stripos($post['category_name'], $searchTerm) !== false;
    });
}

// 2. Ordenação via usort
$filter = $_GET['filter'] ?? '';
switch ($filter) {
    case 'oldest':
        usort($posts, fn($a, $b) => 
            strtotime($a['published_at']) <=> strtotime($b['published_at'])
        );
        break;
    case 'az':
        usort($posts, fn($a, $b) => strcasecmp($a['title'], $b['title']));
        break;
    case 'za':
        usort($posts, fn($a, $b) => strcasecmp($b['title'], $a['title']));
        break;
    default: // 'recent'
        usort($posts, fn($a, $b) => 
            strtotime($b['published_at']) <=> strtotime($a['published_at'])
        );
}

// 3. Paginação (10 posts/página)
$perPage = 10;
$totalPosts = count($posts);
$totalPages = ceil($totalPosts / $perPage);
$currentPage = max(1, min($totalPages ?: 1, $_GET['page'] ?? 1));
$posts = array_slice($posts, ($currentPage - 1) * $perPage, $perPage);

• SEO-friendly: URLs compartilháveis e indexáveis (/blog?q=php&filter=az)
• Performance: Carrega apenas 10 posts por vez (não todo o dataset)
• Segurança: Validação server-side, sem manipulação DOM no cliente
• Compatibilidade: Funciona sem JavaScript habilitado
• Estado preservado: Parâmetros mantidos na paginação

<article class="card sys-surface shadow-sm mb-4">
  <div class="row g-0">
    <!-- Imagem à esquerda (col-md-4) -->
    <div class="col-md-4">
      <div class="blog-card-cover-wrapper h-100">
        <img src="" class="blog-card-cover h-100 w-100">
      </div>
    </div>
    
    <!-- Conteúdo à direita (col-md-8) -->
    <div class="col-md-8">
      <div class="card-body d-flex flex-column h-100">
        <!-- Metadados: categoria, data, tempo leitura, autor -->
        <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
          <a href="/blog/category/" 
             class="badge" 
             style="background-color: ">
            
          </a>
          <small>📅 09/04/2026</small>
          <small>⏱️  min</small>
          <small>👤 <a href="/blog/author/">
            
          </a></small>
        </div>
        
        <!-- Título -->
        <h3 class="h4 mb-2">
          <a href="/blog/"></a>
        </h3>
        
        <!-- Resumo truncado (200 chars) -->
        <p class="text-muted mb-3">
          
        </p>
        
        <!-- Botões (alinhados ao fim com mt-auto) -->
        <div class="mt-auto d-flex flex-wrap gap-2">
          <a href="/blog/" class="btn btn-sm btn-primary">
            📖 Ler post completo
          </a>
          <a href="/api/posts/" 
             class="btn btn-sm btn-outline-secondary" 
             target="_blank">
            {} JSON
          </a>
        </div>
      </div>
    </div>
  </div>
</article>

• Escaneabilidade: Padrão F-pattern facilita leitura rápida de títulos e resumos
• Densidade de informação: Mais metadados visíveis sem scroll
• Responsivo: Colapsa para vertical (col-12) em mobile
• Acessibilidade: Estrutura semântica com <article> e headings adequados
• Consistência: Imagens sempre proporcionais (object-fit: cover)

Casos de uso principais:

1. Consumo por APIs externas:
   • Aplicativos móveis podem buscar posts via GET /api/posts/{slug}
   • Integrações com plataformas de terceiros (Medium, Dev.to, etc.)
   • Agregadores de conteúdo RSS/JSON
2. Depuração e desenvolvimento:
   • Desenvolvedores visualizam estrutura completa dos dados
   • Teste rápido de campos, tipos e relacionamentos
   • Validação de dados antes de renderizar templates
3. Integrações headless CMS:
   • Frontend React/Vue/Angular pode consumir JSON puro
   • SSG (Static Site Generators) como Next.js, Gatsby
   • Implementação de PWA com cache offline
4. SEO e dados estruturados:
   • Base para implementar JSON-LD (Schema.org)
   • Rich snippets para Google Search
   • Open Graph tags dinâmicas
5. Exportação e backup:
   • Usuários avançados podem copiar/exportar dados brutos
   • Migração de conteúdo para outras plataformas
   • Arquivamento em formato estruturado

{
  "id": 1,
  "title": "Arquitetura MVC em PHP Moderno",
  "slug": "arquitetura-mvc-php-moderno",
  "excerpt": "Entenda o padrão Model-View-Controller...",
  "content": "<p>Conteúdo HTML completo do post...</p>",
  "cover": "/uploads/posts/mvc-cover.jpg",
  "status": "published",
  "published_at": "2025-11-15T10:30:00Z",
  "created_at": "2025-11-10T14:20:00Z",
  "updated_at": "2025-11-15T10:30:00Z",
  "reading_time": 8,
  "views": 1547,
  "category": {
    "id": 3,
    "name": "PHP",
    "slug": "php",
    "color": "#777bb4",
    "description": "Artigos sobre PHP e frameworks"
  },
  "author": {
    "id": 5,
    "name": "João Silva",
    "email": "joao@example.com",
    "role": "author",
    "avatar": "/uploads/avatars/joao.jpg"
  },
  "tags": ["php", "mvc", "arquitetura", "boas-praticas"],
  "meta": {
    "seo_title": "MVC em PHP: Guia Completo",
    "seo_description": "Aprenda MVC com exemplos práticos",
    "og_image": "/uploads/posts/mvc-og.jpg"
  }
}

Nota: A estrutura exata depende da implementação do endpoint /api/posts/{slug} no HomeController ou ApiController.

• CORS: Configurar headers adequados se permitir consumo cross-origin
• Rate limiting: Limitar requisições por IP para evitar abuso
• Filtro de status: API deve retornar apenas posts published para público
• Sanitização: Remover dados sensíveis (IPs, drafts, emails privados)
• Cache: Implementar cache HTTP (ETag, Last-Modified) para performance

<form class="row g-3 mb-4" method="get" action="/blog">
  <!-- Campo de busca (col-md-8) -->
  <div class="col-md-8">
    <label for="blogSearch" class="form-label small text-uppercase">
      Buscar posts
    </label>
    <div class="input-group">
      <span class="input-group-text">🔍</span>
      <input type="text" 
             class="form-control" 
             id="blogSearch" 
             name="q" 
             placeholder="Título, conteúdo, categoria..." 
             value="">
      
          </div>
  </div>
  
  <!-- Select de ordenação (col-md-4) -->
  <div class="col-md-4">
    <label for="blogFilter" class="form-label small text-uppercase">
      Ordenar
    </label>
    <select class="form-select" 
            id="blogFilter" 
            name="filter" 
            onchange="this.form.submit()">
      <option value="" selected>
        Mais recentes
      </option>
      <option value="oldest" >
        Mais antigos
      </option>
      <option value="az" >
        A-Z (título)
      </option>
      <option value="za" >
        Z-A (título)
      </option>
    </select>
  </div>
</form>

<!-- Alert de resultados -->

• Botão "Limpar": Aparece apenas quando há busca ativa, reseta filtros
• Auto-submit: Select de ordenação submete form automaticamente (onchange)
• Preservação de estado: Valores preenchidos mantidos após submit
• Feedback visual: Alert mostra termo buscado e quantidade de resultados
• Placeholder descritivo: "Título, conteúdo, categoria..." orienta usuário
• Responsivo: col-md-8/4 em desktop, col-12 em mobile

<!-- Exemplo de uso na paginação -->
<a class="page-link" href="/blog?page=">
  
</a>

<!-- URL gerada: /blog?page=2&q=php&filter=az -->

• Experiência fluida: Usuário não perde filtros ao navegar páginas
• Bookmarkable: URLs completas podem ser salvas/compartilhadas
• Navegação do browser: Botões voltar/avançar funcionam corretamente
• Analytics: Google Analytics rastreia busca + paginação juntos

• Apenas na página 1: Não aparece em páginas 2, 3, etc.
• Sem busca ativa: Se houver termo de busca, featured é ocultado
• Post mais recente: Primeiro item do array ordenado por published_at DESC
• Removido da lista normal: Usa array_shift() para evitar duplicação

public function blog()
{
    $postModel = new Post($this->config);
    $allPosts = $postModel->allPublished();
    
    // Extrai post em destaque (primeiro) apenas na página 1 e sem busca
    $featuredPost = null;
    $searchTerm = trim($_GET['q'] ?? '');
    $page = max(1, (int)($_GET['page'] ?? 1));
    
    if ($page === 1 && $searchTerm === '' && !empty($allPosts)) {
        $featuredPost = array_shift($allPosts); // Remove primeiro post
    }
    
    // ... restante da lógica de busca e paginação
    
    // Paginação ajustada: 9 posts normais + 1 featured = 10 total
    $perPage = 9;
    
    $this->render('blog.twig', [
        'featured_post' => $featuredPost,
        'posts' => $posts,
        // ...
    ]);
}

Componentes:

• Badge "Artigo em Destaque": bg-warning text-dark com ícone bi-star-fill
• Card grande: shadow-lg (vs shadow-sm dos normais)
• Layout 50/50: col-lg-6 imagem + col-lg-6 conteúdo
• Imagem ampliada: min-height: 400px (vs 250px dos cards normais)
• Título maior: h2 (vs h4 nos posts normais)
• Excerpt expandido: 300 caracteres (vs 200 dos normais)
• Badge de categoria maior: fs-6 para destaque
• Botões padrão: btn (vs btn-sm nos cards pequenos)

<section class="featured-post mb-5">
  <div class="badge bg-warning text-dark mb-3">
    ⭐ Artigo em Destaque
  </div>
  
  <article class="card sys-surface shadow-lg border-0">
    <div class="row g-0">
      <!-- Imagem (col-lg-6) -->
      <div class="col-lg-6">
        <div class="featured-cover-wrapper h-100">
          <img src="" 
               class="featured-cover h-100 w-100">
        </div>
      </div>
      
      <!-- Conteúdo (col-lg-6) -->
      <div class="col-lg-6">
        <div class="card-body d-flex flex-column h-100 p-4">
          <!-- Metadados -->
          <div class="d-flex gap-2 mb-3">
            <a class="badge fs-6" 
               style="background-color: ">
              
            </a>
            <small>📅 09/04/2026</small>
            <small>⏱️  min</small>
          </div>
          
          <!-- Título H2 -->
          <h2 class="h2 mb-3">
            <a href="/blog/"></a>
          </h2>
          
          <!-- Excerpt expandido (300 chars) -->
          <p class="lead text-muted mb-4">
            ...
          </p>
          
          <!-- Autor -->
          <div class="d-flex align-items-center gap-2 mb-4">
            👤 Por <a href="/blog/author/">
              
            </a>
          </div>
          
          <!-- Botões -->
          <div class="mt-auto d-flex gap-2">
            <a href="/blog/" class="btn btn-primary">
              📖 Ler artigo completo
            </a>
            <a href="/api/posts/" 
               class="btn btn-outline-secondary">
              {} JSON
            </a>
          </div>
        </div>
      </div>
    </div>
  </article>
</section>

<hr class="my-5">

<h3 class="h5 text-muted text-uppercase fw-semibold mb-4">
  📋 Outros Artigos
</h3>

/* Card hover effect */
.featured-post .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-post .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Image zoom on hover */
.featured-cover {
  object-fit: cover;
  transition: transform 0.5s ease;
}

.featured-post .card:hover .featured-cover {
  transform: scale(1.05);
}

/* Gradient placeholder when no cover */
.featured-cover-wrapper {
  min-height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.featured-cover-wrapper.blog-card-cover-placeholder {
  background: linear-gradient(135deg, 
    rgba(var(--bs-primary-rgb), 0.1) 0%, 
    rgba(var(--bs-secondary-rgb), 0.1) 100%);
}

• Desktop (≥992px): Layout horizontal 50/50 (col-lg-6 + col-lg-6)
• Tablet (768-991px): Imagem no topo, conteúdo embaixo (altura 300px)
• Mobile (≤767px): Stack vertical completo (altura 250px), título h2 → 1.5rem

@media (max-width: 991px) {
  .featured-cover-wrapper {
    min-height: 300px;
  }
  .featured-post .card-body {
    padding: 2rem !important;
  }
}

@media (max-width: 576px) {
  .featured-cover-wrapper {
    min-height: 250px;
  }
  .featured-post h2 {
    font-size: 1.5rem;
  }
}

[data-theme='dark'] .featured-post .card {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme='dark'] .featured-post .card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

O card em destaque recebe fundo semi-transparente no tema escuro, ficando mais brilhante no hover para feedback visual.

Cenário: Visitante acessa o blog

1. Landing inicial: Visitante acessa /blog (página 1, sem busca)
   Sistema exibe badge "Artigo em Destaque" + card grande do post mais recente
2. Scroll down: Após o featured, vê separador HR + heading "Outros Artigos"
   Lista horizontal mostra 9 posts seguintes (total 10 com o featured)
3. Busca ativa: Visitante digita termo no campo "Buscar posts"
   Featured desaparece, mostra apenas resultados filtrados (evita confusão)
4. Ordenação diferente: Visitante seleciona "Mais antigos" ou "A-Z"
   Featured continua visível (ainda página 1), mas mostra o primeiro após ordenação
5. Página 2+: Visitante clica em paginação
   Featured desaparece, mostra apenas os 9 posts da página atual

• Mesma estrutura do Blog: Classe .blog-page para largura consistente
• Header padronizado: Título + subtítulo + botões (Blog, Docs)
• Grid responsivo: 3 colunas (desktop) → 2 (tablet) → 1 (mobile)
• 8 imagens curadas: Alta resolução do Unsplash (1200px thumbs, 1920px lightbox)
• Footer callout: CTA para Documentação e Blog

Estrutura de cada card:

<article class="card sys-surface shadow-sm h-100 gallery-card">
  <!-- Imagem com overlay -->
  <div class="gallery-image-wrapper" 
       style="background-image:url(...)"
       onclick="openLightbox(...)">
    <div class="gallery-overlay">
      <i class="bi bi-zoom-in"></i>
    </div>
  </div>
  
  <!-- Conteúdo -->
  <div class="card-body">
    <span class="badge bg-primary mb-2">Categoria</span>
    <h3 class="h5 mb-2">Título da Imagem</h3>
    <p class="text-muted small mb-0">Descrição breve</p>
  </div>
</article>

Filtros implementados:

• Todas - Mostra todas as 8 imagens (padrão)
• Infraestrutura - Clusters, cloud, servidores
• Backend - Code review, colaboração
• UI & Dashboard - Interfaces, painéis, dark mode
• Dev Experience - Setups, workstations, quadros
• Segurança - Monitoramento, observabilidade

Funcionamento: JavaScript client-side filtra via data-category sem reload da página.

// Filtros de categoria
document.querySelectorAll('[data-filter]').forEach(btn => {
  btn.addEventListener('click', function() {
    const filter = this.dataset.filter;
    
    // Atualiza botões ativos
    document.querySelectorAll('[data-filter]').forEach(b => 
      b.classList.remove('active')
    );
    this.classList.add('active');
    
    // Filtra items
    document.querySelectorAll('.gallery-item').forEach(item => {
      if (filter === 'all' || item.dataset.category === filter) {
        item.classList.remove('hidden');
      } else {
        item.classList.add('hidden');
      }
    });
  });
});

Performance: Filtro instant (sem AJAX), transições CSS suaves (opacity + scale).

Visualização ampliada:

<!-- Modal Bootstrap -->
<div class="modal fade" id="lightboxModal">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content bg-dark">
      <div class="modal-header border-0">
        <h5 class="modal-title text-white" id="lightboxTitle"></h5>
        <button class="btn-close btn-close-white" 
                data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <img id="lightboxImage" src="" class="w-100">
      </div>
    </div>
  </div>
</div>

<!-- Função JavaScript -->
<script>
function openLightbox(imageUrl, title) {
  document.getElementById('lightboxImage').src = imageUrl;
  document.getElementById('lightboxTitle').textContent = title;
  const modal = new bootstrap.Modal(
    document.getElementById('lightboxModal')
  );
  modal.show();
}
</script>

Hover effects:

/* Overlay escuro com ícone zoom */
.gallery-overlay {
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-image-wrapper:hover .gallery-overlay {
  opacity: 1;
}

.gallery-image-wrapper:hover {
  transform: scale(1.02);
}

/* Card hover */
.gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Animação de filtro */
.gallery-item.hidden {
  opacity: 0;
  transform: scale(0.9);
  position: absolute;
  pointer-events: none;
}

Todas as imagens via Unsplash API:

• Thumbs: ?auto=format&fit=crop&w=1200&q=80
• Lightbox: ?auto=format&fit=crop&w=1920&q=90
• Lazy loading: Atributo loading="lazy" (quando via <img>)
• Background images: Via style="background-image:url(...)" nos cards

Script dedicado: scripts/seed_gallery_dogs.php

• Usa a API pública Dog CEO para buscar 30 URLs aleatórias de cães
• Baixa cada imagem via cURL e salva em public/uploads/gallery/
• Insere registros em gallery_images com títulos e descrições em PT-BR
• Última execução inseriu os IDs 61–90 com sucesso

Execução recomendada:

sudo -u www-data php scripts/seed_gallery_dogs.php

O diretório public/uploads/gallery pertence ao usuário www-data. Para rodar sem sudo -u www-data, ajuste o owner/permissões do diretório ou mantenha a execução como o mesmo usuário do servidor web.