# Blog

> Componentes / Institucional · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seção "Revista Phorte" da página inicial: título, o link "Ver todo o blog" (com `hrefDoBlog`) e três publicações em grade, cada uma um BlogCard (E77) — capa, categoria, data, título, resumo e autoria. As publicações vêm por `publicacoes` (E74), no formato do BlogCard; sem `href`, o cartão não é link.

- Função: Institucional
- Também chamado de: blog, revista, últimas publicações, notícias
- Mora em: `app/components/organisms/Blog.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Blog](https://phorte-design-system.vercel.app/styleguide/peca/Blog)
- Ficha no Storybook: [components-complex-blog](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-blog--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Blog/0](https://phorte-design-system.vercel.app/previa/Blog/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import Blog from '@/app/components/organisms/Blog';

<Blog />
```

## Uso

### Variantes na ficha

1. [Padrao](https://phorte-design-system.vercel.app/previa/Blog/0)
2. [Sem destino](https://phorte-design-system.vercel.app/previa/Blog/1)

Na página inicial, como vitrine dos posts recentes.

### Quando não usar

Para listar posts de verdade, com os dados do blog, use o BlogCard. Para eventos, o EventCard.

### Faça

- Passe `publicacoes`, cada uma com o `href` do post, e `hrefDoBlog`.
- Para uma listagem maior, monte a grade com o BlogCard direto.

### Evite

- Publicar com as publicações de exemplo (as que vêm sem prop).

### Anatomia

1. **Título** — Um SectionTitle com o chapéu "Revista Phorte".
2. **Ver todo o blog** — Só com `hrefDoBlog`: link vermelho à direita, com 44px e a seta fora do nome (E74).
3. **Publicação** — Um BlogCard `md` (E77): capa (`alt=""`), Tag da categoria, data em `<time>`, título (`h3`, o link, quando há `href`), resumo e autoria.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Três posts em uma coluna no celular e três a partir de 768px. |
| Hover no post | A imagem aproxima e o título fica vermelho. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Clique num post | Leva ao `href` dele — cada post ao seu (E74; antes os três iam para `/blog`). Sem `href`, não é link. |

### Relacionados

- [BlogCard](https://phorte-design-system.vercel.app/styleguide/md/BlogCard.md) — O cartão de cada publicação (E77).
- [SectionTitle](https://phorte-design-system.vercel.app/styleguide/md/SectionTitle.md) — O título da seção.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `publicacoes` | `PublicacaoDoBlog[]` | `PUBLICACOES_PADRAO` | não | As publicações por prop (E74), no formato do BlogCard (E77). |
| `hrefDoBlog` | `string` | — | não | Destino de "Ver todo o blog". Sem ele, o link não aparece. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--background` | #FAFAFA | `bg-background` |
| `--primary` | #D42B2B | `text-primary` |
| `--primary-dark` | #A81E1E | `text-primary-dark` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | "Ver todo o blog" e os posts com `href`, com anel de foco (E74) — medido. |
| Enter | Segue o link em foco. |

### Leitor de tela

- O nome do link de cada publicação é só o título (o link do BlogCard está no título, estendido sobre o cartão) — antes era o texto inteiro do cartão.
- A seta de "Ver todo o blog" é `aria-hidden`: o leitor não diz "seta para a direita".

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/Blog.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-blog--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/Blog.tsx