Creando un feed RSS para tu sitio web con Astro.js

Si eres como yo, te encanta mantener a tus seguidores actualizados con las últimas noticias y contenidos de tu sitio web. Recientemente, me encontré desarrollando un feed RSS para mi sitio web, y quiero compartir contigo mi experiencia y el proceso que seguí para lograrlo. La documentación disponible es limitada, y cumplir con las validaciones de W3 puede ser un desafío, pero estoy aquí para hacer que este proceso sea más fácil para ti.

Fuente de referencia

Antes de sumergirnos en los detalles, quiero compartir contigo la fuente de información principal que utilicé para llevar a cabo este proyecto. Puedes encontrar todos los detalles y conceptos clave en la documentación de Astro.js sobre RSS.

Preparando el terreno

Lo primero que necesitamos hacer es preparar nuestro entorno y configurar algunas dependencias esenciales. Aquí tienes un vistazo a la configuración que utilicé en mi proyecto:

// rss.xml.js

// Importamos las librerías necesarias
import rss from "@astrojs/rss";
import { getCollection } from "astro:content";
import config from "./../config/config.json";
import sanitizeHtml from "sanitize-html";
import MarkdownIt from "markdown-it";

// Otras constantes necesarias
const parser = new MarkdownIt();
const { meta_author, meta_description } = config.metadata;
const { base_url } = config.site;
const RSS_NAMESPACE = "http://www.w3.org/2005/Atom";
const MEDIA_NAMESPACE = "http://search.yahoo.com/mrss/";

// Nuestra función de generación de RSS
export async function get(context) {
  const posts = await getCollection("posts");
  return rss({
    xmlns: {
      media: MEDIA_NAMESPACE,
      atom: RSS_NAMESPACE,
    },
    atom: {
      link: {
        href: base_url + "/feed.rss",
        rel: "self",
        type: "application/rss+xml",
      },
    },
    title: meta_author,
    description: meta_description,
    site: base_url,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.date,
      customData: `
        <media:content
          xmlns:media="${MEDIA_NAMESPACE}"
          type="image/${post.data.image.format === "jpg" ? "jpeg" : "png"}"
          medium="image"
          url="${base_url + post.data.image}" />
      `,
      content: sanitizeHtml(parser.render(post.body)),
      ...post.data,
      link: `/${post.slug}/`,
    })),
  });
}

Explicación del código en rss.xml.js

Importaciones de bibliotecas: Aquí importas las bibliotecas necesarias para tu script, como rss para generar el feed RSS, getCollection para obtener la colección de publicaciones, y otras bibliotecas como sanitize-html y markdown-it para manipular y limpiar contenido HTML y Markdown.

Constantes y configuración: Definas las constantes y configuraciones necesarias para tu feed RSS. Esto incluye la URL base de tu sitio, nombres de espacio para el feed Atom y el espacio de nombres de medios.

Función get: Esta función es la que se exporta y se ejecutará cuando se solicite la generación del feed RSS. Dentro de esta función, primero obtienes la colección de publicaciones utilizando getCollection('posts').

Generación del feed: Utilizas la función rss() para generar el feed RSS. Configuras los elementos esenciales, como el espacio de nombres, el enlace al propio feed, el título, la descripción y la URL de tu sitio.

Mapeo de publicaciones: Utilizas el método map() para recorrer cada una de las publicaciones obtenidas y generar un objeto correspondiente para cada una en el formato del feed RSS. Aquí asignas el título, la fecha de publicación, el contenido, las categorías, las etiquetas y otros detalles.

Contenido personalizado: Además, incluyes una sección para contenido personalizado utilizando el espacio de nombres de medios, que permite agregar contenido multimedia a tus publicaciones.

Limpieza del contenido: Para el contenido del cuerpo de la publicación, utilizas la biblioteca sanitize-html para limpiar cualquier HTML no deseado o potencialmente peligroso, y luego utilizas markdown-it para renderizar el contenido Markdown en HTML.

Retorno del feed: Finalmente, la función get devuelve el feed RSS generado.

Este código se asegura de generar un feed RSS válido y personalizado para tu sitio web, utilizando la información de tus publicaciones y siguiendo las pautas de los estándares. Es una parte fundamental para que los lectores puedan suscribirse y mantenerse al día con tu contenido.

Estructura de contenido

Un aspecto crucial para generar un feed RSS es tener una estructura de contenido coherente. Aquí te presento cómo definí mi colección de publicaciones (posts) en mi archivo config.ts:

// config.ts

import { defineCollection, z } from "astro:content";

// Esquema de la colección de publicaciones
const postsCollection = defineCollection({
  schema: z.object({
    id: z.string().optional(),
    title: z.string(),
    meta_title: z.string().optional(),
    description: z.string().optional(),
    date: z.date().optional(),
    image: z.string().optional(),
    authors: z.array(z.string()).default(["admin"]),
    categories: z.array(z.string()).default(["others"]),
    tags: z.array(z.string()).default(["others"]),
    draft: z.boolean().optional(),
  }),
});

// Exportamos las colecciones
export const collections = {
  posts: postsCollection,
};

Explicación del código en config.ts

Importación de módulos: En esta parte del código, estamos importando los módulos necesarios para definir y configurar nuestras colecciones de contenido en Astro. Utilizamos las funciones defineCollection y z de la biblioteca "astro:content".

Definición del esquema de la colección de publicaciones: Aquí definimos el esquema para nuestra colección de publicaciones utilizando la función defineCollection. El esquema está compuesto por varios campos, como id, title, meta_title, description, date, image, authors, categories, tags y draft. Cada campo tiene un tipo específico según las necesidades, como cadenas de texto (z.string()), fechas (z.date()) y matrices (z.array()). Algunos campos son opcionales (optional()) y otros tienen valores predeterminados (default()).

Exportación de las colecciones: Finalmente, exportamos las colecciones configuradas en un objeto llamado collections. En este caso, estamos exportando una única colección llamada posts que sigue el esquema definido previamente. Esta exportación permitirá que otras partes del código accedan y manipulen las publicaciones de manera coherente.

Este código desempeña un papel fundamental al establecer la estructura y las reglas para la gestión de las publicaciones en tu sitio web, asegurando que los datos estén organizados y validados de acuerdo con el esquema establecido.

Conclusiones

Desarrollar un feed RSS para tu sitio web puede ser una tarea desafiante, especialmente cuando se trata de cumplir con las validaciones de W3. Sin embargo, con las herramientas y enfoques adecuados, es totalmente posible lograrlo. Espero que esta guía te haya dado una idea clara de cómo configurar tu propio feed RSS utilizando Astro.js.

Si estás interesado en aprender más, te recomiendo encarecidamente que consultes la documentación oficial de Astro.js para obtener información más detallada y recursos adicionales.

¡Mantén a tus seguidores actualizados y sigue compartiendo contenido increíble en tu sitio web con un feed RSS completamente funcional!

¡Hasta la próxima publicación! 🚀