Dentro de la sala de lectura oscura construida con Next.js 14 y Bun
A los desarrolladores les encanta reescribir blogs. Ya es un meme: en lugar de escribir publicaciones, derribamos la pila anterior y reconstruimos la interfaz desde cero cada seis meses. El proceso casi siempre resulta en una plantilla genérica. Pero a veces te encuentras con código fuente donde el autor prestó un poco más de atención a los detalles.
El otro día estaba explorando el repositorio woosal1337/blog — es el sitio web personal del desarrollador Ege Celebi. El proyecto ha recopilado poco más de 300 estrellas en GitHub. Ocultos en su interior hay varias soluciones interesantes para generación de gráficos, tipografía y trabajo con MDX.
Bajo el capó
No hay un CMS pesado como Ghost o Strapi aquí. El autor eligió la generación estática y la alta velocidad de carga.
La construcción se basa en tres cosas:
- Next.js 14 con App Router y React 18.
- Bun como gestor de paquetes y runtime.
- Biome para linting y formateo de código.
Bun ahorra tiempo en la instalación de dependencias, y Biome reemplaza la combinación clásica de ESLint y Prettier. Para ejecutar el linter con auto-corrección, el proyecto utiliza el comando bun run check.
Tailwind CSS se utiliza para los estilos. La configuración de colores y tokens se extrae en app/globals.css. Geist Sans maneja la lectura de artículos, y Geist Mono se usa para los bloques de código.
Portadas sin diseñadores ni Midjourney
La característica principal del repositorio es la generación de banners para los artículos. Por lo general, los autores buscan una imagen adecuada en Unsplash, generan imágenes con redes neuronales, o crean tarjetas en Figma.
Ege resolvió el problema de manera diferente. En el archivo lib/contour.ts, hay un algoritmo que toma el título de una publicación y lo convierte en un patrón de contornos. Obtienes un banner SVG determinista. Cada título corresponde a su propio dibujo único, y no es necesario llamar a servicios externos para esto.
La misma marca de contorno se utiliza como logo y favicon, manteniendo una identidad unificada.
Vidrio líquido y animaciones ASCII
Visualmente, el sitio parece una página editorial oscura. El diseño utiliza bordes ultrafinos (hairline borders) y una curva de animación unificada para las transiciones.
La interfaz contiene varios descubrimientos visuales:
- Controles redondeados con efecto de vidrio líquido.
- Etiquetas con efecto de cristal esmerilado para categorías y etiquetas.
- Tabla de contenidos del artículo en el lado izquierdo con un marcador de navegación que se desplaza suavemente. El comportamiento del marcador está modelado según el componente LineNav.
- Superficies ASCII en vivo. En la carpeta
components/blocks/ascii/, encontrarás un toro animado (la famosa dona ASCII), lluvia digital, plasma y efectos de túnel. El autor los portó desde la biblioteca soft-club-ui y los recoloreó para que coincidan con la paleta monocromática del sitio.
Estructura del proyecto y MDX
Todos los artículos se almacenan directamente en el árbol de páginas del App Router: app/(website)/blog/(post)/[slug]/page.mdx.
Este enfoque combina la lógica de enrutamiento y el contenido en sí. Los componentes de la interfaz están claramente separados:
components/ds/contiene elementos básicos reutilizables del sistema de diseño.components/blocks/almacena lógica de dominio compleja y animaciones.
Cómo ejecutar localmente
Necesitarás Node.js versión 20 o superior y Bun instalado. No es necesario configurar variables de entorno.
Clona el repositorio e inicia el servidor local:
bun install
bun dev
Para verificar con el linter y formatear el código:
bun run check
Por qué ver estos fuentes
El repositorio vale la pena abrirlo si estás planeando construir tu propio sitio o buscando ejemplos limpios de arquitectura frontend. En el código, puedes encontrar:
- Configuración de Biome en un proyecto Next.js.
- Implementación de generación de tarjetas vectoriales basada en texto.
- Integración de efectos de Canvas y ASCII en componentes React.
- Organización de tokens de Tailwind en un único archivo CSS.
El código tiene licencia MIT, pero el contenido textual y las imágenes están protegidos por derechos de autor. Copiar artículos no es una buena idea, pero estudiar la arquitectura y aplicar las ideas en tu propio proyecto es un gran plan.
Proyectos relacionados