Random Thoughts

This blog development process

Séries e um prev/next em page-flip, finalmente

Monday, May 11, 2026

  • ai-assisted
  • #astro
  • #css
  • #ux
  • #information-architecture
  • #navigation
  • #typescript

Vinte e um drafts acumulados antes de eu notar o óbvio.

Eu estava escrevendo um batch de posts sobre desenvolvimento com IA — rules, skills, arquitetura de agents, filosofia de tooling — rascunhando tudo de uma vez antes de publicar qualquer um. (A coisa toda começou com Planejando 22 posts com um agente de IA, se você quiser ler desde o início.) Mas conforme a pilha crescia, percebi que o arquivo em si tinha um problema que não tinha nada a ver com o conteúdo.

Uma ilustração horizontal larga em técnica mista sobre papel creme. No centro, um livro aberto desenhado em lápis suave e tinta, com as duas páginas curvando levemente como se estivessem no meio de uma virada. A borda da página esquerda se afasta da lombada com uma seta chevron desenhada à mão apontando para a esquerda, gravada de leve na margem; a página direita se levanta em direção ao leitor com uma chevron correspondente apontando para a direita na margem. Acima e atrás do livro, uma coluna vertical de quatro pequenos cartões numerados está colada na superfície creme com tiras de washi tape pastel, o segundo cartão destacado com uma fina borda colorida para marcar a posição atual. A imagem inteira tem um ar quieto, feito à mão — rabiscos de lápis como marcas de corte, uma marca de café desbotada num canto, luz natural de leve no plano inclinado, textura de papel forte, nenhum texto legível no livro ou nos cartões.
Uma listinha flutuante na lateral, um pequeno levantar na borda da página. Duas adições pequenas que mudam como o arquivo se lê.

Boa parte desses posts não são isolados. São sequências — rules, depois skills, depois uma taxonomia, depois um deep dive. Se você caísse no terceiro post de um arco de quatro, não teria como saber que os outros três existiam.

E aqueles links de prev/next cronológicos que a maioria dos blogs tem simplesmente não existiam. Cada post era um beco sem saída.

Então sentei pra resolver os dois.

O que é “series” na prática

Adicionei um campo series no schema do post — uma string opcional em kebab-case:

---
title: A taxonomy of AI agent skills
date: 2026-04-26
category: developer-tooling
series: ai-rules-and-skills
---

Se dois ou mais posts compartilham essa string, eles estão numa série. A ordem vem de date. Um post solo pode ter series preenchido, mas nada é renderizado até um irmão existir.

É um campo separado de tags porque séries são ordenadas e só fazem sentido dentro do post ou como pista de ordem de leitura — tags são chips achatados e sem ordem nas listagens.

A listinha flutuante

Dentro de cada post de uma série, um painel pequeno flutua à direita do texto:

┌────────────────────────┐
│ AI RULES AND SKILLS    │
│                        │
│ 1. Rules as…           │
│ 2. AI agent…           │
│ 3. **A taxonomy…**     │
│ 4. Building…           │
└────────────────────────┘

O título é o nome da série formatado a partir do slug. O post que você está lendo aparece em negrito e sem link — a pista de “você está aqui”. No mobile (abaixo de 1024px) o float some e vira um bloco normal acima do texto.

Se houver menos de dois posts na série, o componente não renderiza nada — um id de série pode ficar no frontmatter sem produzir barulho até um irmão aparecer.

A barra de prev/next

Uma barra fixa no rodapé para navegar entre posts cronologicamente. Prev à esquerda, next à direita, cada um com uma label e o título do alvo. Os tap targets têm pelo menos 44px de altura, e o body tem padding suficiente pra barra nunca cobrir o último parágrafo nem o thread do Disqus.

Drafts entram na cronologia localmente mas somem em produção pelo mesmo CSS que esconde drafts nas listagens. Quando o batch publicar, a nav reflete o que o leitor consegue alcançar de verdade.

O que isso muda

Antes, cada post era uma ilha. Você terminava de ler, rolava o Disqus, e a resposta implícita pra “e agora?” era o botão de voltar.

Agora, se o post é parte de uma sequência o box lateral te avisa — nome da série, contagem de posts, onde você está, links pros irmãos. Se você termina e quer seguir, a barra de navegação está ali. E na página de busca, um novo filtro de Séries deixa você clicar num chip de série e ver só os posts daquele arco, combinando com categoria, tag ou texto.

Coisa pequena, levou uma noite. Mas o arquivo parece menos uma lista achatada e mais um livro pelo qual dá pra navegar.