Margem Viva

Colophon

Ferramentas, tecnologias e decisões usadas neste site.

Este site foi construído a partir do 11ty Indie Web Blog Starter, de Brennan Brown. O starter foi escolhido por duas razões principais: já vem integrado com os protocolos IndieWeb (webmentions, microformatos h-card e h-entry, feed Atom) e tem acessibilidade como premissa — HTML semântico, navegação por teclado e compatibilidade com leitores de tela desde o início. A partir daí, o design e as funcionalidades foram completamente reescritos.

11ty Indie Web
Blog Starter

Base do projeto. IndieWeb + acessibilidade como premissa. Por Brennan Brown.

github.com/brennanbrown

Margem Viva
no GitHub

Repositório público do site. Código-fonte aberto.

github.com/wagnerbeethoven

O site é gerado com Eleventy 3.0+, um gerador de sites estáticos minimalista em Node.js. A escolha foi deliberada: sem framework de frontend, sem hidratação, sem bundle pesado — apenas HTML gerado no build e servido direto. Os templates são escritos em Nunjucks, que oferece lógica suficiente para layouts, coleções e partials sem virar um projeto separado.

Eleventy 3.0+

Gerador estático em Node.js. Zero JavaScript enviado ao cliente por padrão.

11ty.dev

Nunjucks

Engine de templates para layouts, partials e coleções.

mozilla.github.io/nunjucks

O design system é construído sobre CSS custom properties nativas — sem CSS-in-JS, sem Sass, sem variáveis compiladas. O Tailwind CSS entra apenas como utilitário de layout pontual; todo o visual do site (cores, tipografia, temas claro/escuro, componentes) vive em tailwind.css, o arquivo fonte que o Tailwind CLI processa. A tipografia usa Inter via Google Fonts, e a iconografia é toda do Font Awesome 7.0 via CDN.

Tailwind CSS

Utilitários de layout. O design system usa custom properties nativas.

tailwindcss.com

Inter

Tipografia principal via Google Fonts.

fonts.google.com/Inter

Font Awesome 7.0

Iconografia Solid e Brands em todo o site, via CDN.

fontawesome.com

O código-fonte fica no GitHub em repositório público. A cada push na branch main, o Netlify detecta a mudança, roda o build (npm run build) e publica automaticamente — sem passo manual. O processo leva menos de dois minutos do commit ao ar.

GitHub

Versionamento e repositório público do código-fonte.

github.com

Netlify

Deploy contínuo a cada push na branch main.

netlify.com

Este site segue princípios IndieWeb: o conteúdo vive aqui, não em plataformas de terceiros. Todas as páginas relevantes marcam microformatos h-card e h-entry para interoperabilidade com agregadores e leitores. As webmentions são processadas via webmention.io. O site publica quatro formatos de feed cobrindo posts, notas, poesias e receitas — compatíveis com a maioria dos leitores RSS.

Atom Feed

Posts, notas, poesias e receitas em ordem cronológica.

/feed.xml

RSS 2.0

Compatível com a maioria dos leitores.

/rss.xml

JSON Feed

Formato moderno para leitores compatíveis.

/feed.json

Webmentions

Recebidas e processadas via webmention.io. h-card e h-entry nas páginas.

webmention.io

Parte do conteúdo é importado automaticamente de redes sociais via GitHub Actions — sem intervenção manual. Os scripts buscam os dados nas APIs, criam os arquivos .md com frontmatter correto e fazem commit direto no repositório. O Netlify detecta o push e publica.

Bluesky
Notas

Posts do Bluesky são importados como notas em /notes/ a cada 4 horas.

@wagnerbeethoven.com.br

Pixelfed
Fotos

Fotos publicadas no Pixelfed são sincronizadas diariamente em /photos/.

pixelfed.com/wagnerbeethoven

O site usa GoatCounter para análise de tráfego — sem cookies, sem rastreamento de dados pessoais, sem fingerprinting. Os dados são agregados e anônimos. As estatísticas são públicas.

GoatCounter

Analytics sem cookies.
Dados públicos e agregados.

wagnerbeethoven.goatcounter.com

Os textos, fotos e conteúdos editoriais deste site são licenciados sob Creative Commons BY-NC-SA 4.0 — você pode compartilhar e adaptar o conteúdo, desde que dê crédito, não use para fins comerciais e distribua sob a mesma licença. O site foi desenvolvido com assistência do Claude Code (Anthropic).

CC BY-NC-SA 4.0

Atribuição · Não comercial · Compartilha igual.

creativecommons.org

Última atualização: