Trabajar con fechas en un proyecto de Astro puede volverse confuso cuando el formato por defecto muestra demasiada información. Aquí aprenderás a transformar fechas con JavaScript usando toDateString y slice, además de cómo contribuir a un proyecto colaborativo de la comunidad.

Por qué transformar las fechas en tu proyecto Astro

Cuando renderizas una fecha cruda en tu sitio, sueles obtener una cadena larga con día, mes, año, hora y zona horaria. Eso no aporta a quien lee tu blog. Lo que tu lector quiere saber es simple: ¿cuándo se publicó esto?

Por eso vale la pena aplicar una pequeña capa de lógica en JavaScript que convierta esa fecha en algo legible y amigable, sin perder precisión.

¿Qué hace toDateString en JavaScript? Convierte un objeto Date en una cadena con el formato día de la semana, mes, día y año, ignorando la hora y la zona horaria. Es ideal para mostrar fechas de publicación en blogs.

Cómo aplicar toDateString al componente Card

El primer ajuste se hace en el componente card, donde vive la etiqueta time. Ahí defines la lógica que reformatea la fecha antes de inyectarla al HTML.

El flujo es directo:

• Crea una constante event igual a new Date(time) para convertir el valor recibido en un objeto fecha.
• Crea otra constante date igual a event.toDateString() para obtener la versión legible.
• Reemplaza la variable original en la etiqueta time por date.

js const event = new Date(time); const date = event.toDateString();

Al guardar, la tarjeta deja de mostrar la cadena cruda y empieza a mostrar una fecha clara como Mon Oct 14 2024.

Cómo recortar el año con slice en una fecha

Si prefieres ocultar el año porque tu blog es reciente o porque buscas un look más limpio, puedes usar el método slice sobre el string ya transformado. slice acepta valores negativos para cortar desde el final, lo que resulta útil aquí porque el año siempre ocupa los últimos cuatro caracteres.

js const date = event.toDateString().slice(0, -4);

Esa línea conserva el día y el mes, y elimina los cuatro caracteres finales correspondientes al año. Como la longitud del año no cambia, la lógica sigue funcionando con el paso del tiempo.

¿Para qué sirve slice con valor negativo? Permite recortar caracteres desde el final de un string. slice(0, -4) mantiene todo excepto los últimos cuatro caracteres, perfecto para quitar el año de una fecha.

Cómo reutilizar la lógica de fechas en el template de post

La misma transformación se necesita en el template de post, donde aparece otra fecha de publicación. La diferencia es que ahí la variable no se llama time, sino que corresponde a la fecha de publicación del post.

El camino rápido es copiar el bloque de código y ajustar el nombre de la variable. Funciona, pero introduce un problema clásico: estás duplicando lógica en dos lugares. Si mañana decides cambiar el formato, tendrás que tocar dos archivos.

Cómo crear una función reutilizable en una carpeta utils

La solución limpia es extraer esa lógica a una función exportable dentro de una carpeta utils. Así, tanto card como el template de post pueden importarla y llamarla cuando la necesiten.

La idea es construir algo parecido a:

js // utils/formatDate.js export function formatDate(value) { const event = new Date(value); return event.toDateString().slice(0, -4); }

Luego la importas donde la necesites y pasas la fecha como argumento. Una sola fuente de verdad, cero duplicación, mantenimiento sencillo.

Este es justamente el reto que se propone para que practiques: crear la carpeta utils, definir la función, exportarla y usarla en los dos componentes que muestran fechas.

Cómo contribuir al proyecto colaborativo de Astro

El proyecto sobre el que trabajas no es individual, es comunitario. Está pensado para que estudiantes y desarrolladores envíen mejoras, tips y recomendaciones que beneficien a toda la comunidad de Astro.

Las formas de aportar son varias:

• Enviar pull requests al repositorio con mejoras a templates o componentes.
• Sumar contenido nuevo, como tips o recomendaciones de uso.
• Compartir tu propia versión del blog o página construida con Astro.
• Comentar qué funcionalidades crees que deberían implementarse a futuro.

Los pull requests se revisan y aprueban directamente en el repositorio, así que tu contribución puede quedar visible para que otras personas la vean y aprendan de ella.

¿Cómo resolverías tú la función de transformación de fechas? Comparte tu solución y tu proyecto en los comentarios para que la comunidad también pueda revisarlo.