Sites & Landing Pages
Claude 3.5 Sonnet
Layout de Blog com Sumário, Tempo de Leitura e Modo Escuro
Template de artigo de blog em HTML/CSS/JS puro: sumário gerado dos H2/H3, tempo de leitura automático, progresso de scroll e tipografia confortável.
0cópias
0joinhas
0favoritos
O prompt
Crie um template de página de artigo de blog em HTML, CSS e JavaScript puro (arquivo único) para o blog {{nome_blog}}.
Parâmetros:
- Nome do Blog: {{nome_blog}}
- Fonte de Título: {{fonte_titulo}} (ex.: 'serifada clássica' ou nome de fonte do Google Fonts)
- Largura Máxima da Coluna de Texto: {{largura_coluna}}px (recomendado 680-720)
Requisitos:
1. Cabeçalho do artigo: categoria em eyebrow, título H1 na fonte {{fonte_titulo}}, data de publicação + tempo de leitura calculado automaticamente (palavras ÷ 200 wpm), autor com avatar circular de iniciais.
2. Sumário (TOC) gerado dinamicamente dos H2/H3 do artigo: lista colapsável no topo (desktop: sidebar fixa à esquerda; mobile: acordeão acima do texto), com scroll suave e destaque da seção ativa conforme o leitor desce (IntersectionObserver).
3. Barra fina de progresso de leitura no topo da página (largura proporcional ao scroll).
4. Tipografia confortável: coluna de {{largura_coluna}}px, linha-alta 1.7, parágrafos com espaçamento generoso; blocos de código com fundo próprio e botão 'copiar'; imagens com figcaption.
5. Modo escuro via toggle + prefers-color-scheme persistido em localStorage (variáveis CSS).
6. Rodapé do artigo: tags clicáveis (âncoras #), seção 'Sobre o autor' curta e CTA de newsletter simples (input + botão, sem backend — placeholder).
Como usar
- Substitua {{nome_blog}}, {{fonte_titulo}} e {{largura_coluna}} (ex.: 700).
- Cole no Claude; o template vem com um artigo de exemplo completo — troque o conteúdo mantendo a estrutura H2/H3 para o TOC continuar funcionando.
- Salve como post.html (ou use como base por artigo) e abra no navegador: o sumário, tempo de leitura e progresso nascem sozinhos do HTML.
- Para SEO, cada artigo real deve ser um arquivo próprio com <title> único — peça à IA: 'gere a versão final deste artigo com meta tags'.
Exemplo de saída
post.html (~350 linhas): TOC gerado dos H2/H3 (sidebar fixa no desktop, acordeão no mobile) com seção ativa destacada via IntersectionObserver, tempo de leitura automático (÷200 wpm), barra de progresso de scroll, coluna de 700px com linha-alta 1.7, blocos de código com botão copiar, modo escuro persistente e rodapé com tags + CTA de newsletter.