Blog
Em andamentoSeçã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
- Última mudança
- 2026-09-30
Prévia
A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.
1280px, em tamanho real
Variantes na ficha
Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.
Quando usar
Na página inicial, como vitrine dos posts recentes.
Faça
- Passe
publicacoes, cada uma com ohrefdo post, ehrefDoBlog. - 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).
Quando não usar. Para listar posts de verdade, com os dados do blog, use o BlogCard. Para eventos, o EventCard.
Anatomia
As partes, na ordem em que o olho — e o teclado — passam.
- Título — Um SectionTitle com o chapéu "Revista Phorte".
- Ver todo o blog — Só com `hrefDoBlog`: link vermelho à direita, com 44px e a seta fora do nome (E74).
- 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
Os estados que a peça tem no código, e o que muda em cada um.
| 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
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import Blog from '@/app/components/organisms/Blog';
<Blog />Propriedades
Lidas do código da peça no build — não escritas à mão.
| 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
Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.
| Token | Valor | Usado como |
|---|---|---|
--background | #FAFAFA | bg-background |
--primary | #D42B2B | text-primary |
--primary-dark | #A81E1E | text-primary-dark |
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 que é anunciado, e por quê.
- 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
Esta peça usa estatico. O estado dela é o de quem já foi ouvido com leitor de tela nesses padrões — e não uma passada sobre esta peça em específico.
Falta ouvir: estatico — ver docs/a11y-screen-reader-checklist.md.
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/Blog.tsx | Disponível |
| Ficha | Storybook (abre em outra aba) | 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
Os últimos commits que tocaram o arquivo, lidos do git no build.
0298af82026-09-30E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
O histórico completo está no GitHub (abre em outra aba).