Por dentro da Sala de Leitura Dark Construída com Next.js 14 e Bun
Desenvolvedores adoram reescrever blogs. Já virou meme: em vez de escrever posts, derrubamos a stack antiga e reconstruímos a interface do zero a cada seis meses. O processo quase sempre resulta em um template genérico. Mas às vezes você encontra código-fonte onde o autor prestou um pouco mais de atenção aos detalhes.
Outro dia eu estava explorando o repositório woosal13/37/blog — é o site pessoal do desenvolvedor Ege Celebi. O projeto acumulou pouco mais de 300 estrelas no GitHub. Escondidos在里面 há várias soluções interessantes para geração de gráficos, tipografia e trabalho com MDX.
Sob o Capô
Não há nenhum CMS pesado como Ghost ou Strapi aqui. O autor escolheu geração estática e alta velocidade de carregamento.
O build é baseado em três coisas:
- Next.js 14 com App Router e React 18.
- Bun como gerenciador de pacotes e runtime.
- Biome para linting e formatação de código.
Bun economiza tempo na instalação de dependências, e o Biome substitui a combinação clássica do ESLint e Prettier. Para rodar o linter com auto-fix, o projeto usa o comando bun run check.
Tailwind CSS é usado para estilização. As configurações de cores e tokens são extraídas para app/globals.css. Geist Sans cuida da leitura de artigos, e Geist Mono é usado para blocos de código.
Capas Sem Designers ou Midjourney
O principal destaque do repositório é a geração de banners para os artigos. Normalmente os autores ou buscam uma imagem adequada no Unsplash, geram imagens com redes neurais, ou criam cards no Figma.
Ege resolveu o problema de forma diferente. No arquivo lib/contour.ts, há um algoritmo que recebe o título de um post e o transforma em um padrão de contorno. Você obtém um banner SVG determinístico. Cada título corresponde ao seu próprio desenho único, e não há necessidade de chamar serviços externos para isso.
A mesma marca de contorno é usada como logo e favicon, mantendo uma identidade unificada.
Vidro Líquido e Animações ASCII
Visualmente, o site parece uma página editorial dark. O design usa bordas ultrafinas (hairline borders) e uma curva de animação unificada para transições.
A interface contém várias descobertas visuais:
- Controles redondos com efeito de vidro líquido.
- Tags com efeito frost para categorias e labels.
- Índice de artigos no lado esquerdo com um marcador de navegação que rola suavemente. O comportamento do marcador é baseado no componente LineNav.
- Superfícies ASCII ao vivo. Na pasta
components/blocks/ascii/, você encontrará um torus animado (o famoso ascii donut), chuva digital, plasma e efeitos de túnel. O autor portou do repositório soft-club-ui e recoloriu para combinar com a paleta monocromática do site.
Estrutura do Projeto e MDX
Todos os artigos são armazenados diretamente na árvore de páginas do App Router: app/(website)/blog/(post)/[slug]/page.mdx.
Essa abordagem combina lógica de roteamento e conteúdo em si. Os componentes de UI são claramente separados:
components/ds/contém elementos básicos reutilizáveis do sistema de design.components/blocks/armazena lógica de domínio complexa e animações.
Como Rodar Localmente
Você vai precisar do Node.js versão 20 ou superior e do Bun instalado. Não é necessário configurar variáveis de ambiente.
Clone o repositório e inicie o servidor local:
bun install
bun dev
Para verificar com o linter e formatar o código:
bun run check
Por Que Ver Esses Fontes
O repositório vale a pena abrir se você está planejando construir seu próprio site ou procurando exemplos limpos de arquitetura frontend. No código, você pode pegar:
- Configuração do Biome em um projeto Next.js.
- Implementação de geração de cards vetoriais baseados em texto.
- Integração de efeitos Canvas e ASCII em componentes React.
- Organização de tokens do Tailwind em um único arquivo CSS.
O código é licenciado sob MIT, mas o conteúdo textual e as imagens são protegidos por direitos autorais. Copiar artigos não é uma boa ideia, mas estudar a arquitetura e aplicar as ideias no seu próprio projeto é um ótimo plano.
Projetos relacionados