Community Loaders para Astro Content Layer

Desde que se añadió el soporte experimental para la Astro Content Layer API hemos visto varios loaders siendo construidos para una variedad de tipos de contenido. Ya hemos destacado algunos de los CMSes que han construido loaders. En este post, repasaremos algunos de los otros tipos de loaders para ver los diversos use cases del content layer.

Los loaders que cubriremos aquí son:

• Notion
• Stripe
• Feed loader
• Airtable
• Strapi

Notion

Notion es una plataforma colaborativa para todo tipo de documentos. Aunque no se suele pensar como un CMS, muchas personas lo usan como tal.

Con notion-astro-loader puedes sincronizar documentos de Notion a una de las collections de tu proyecto. El loader infiere automáticamente un schema basándose en el schema de la base de datos de Notion.

Instala notion-astro-loader y configúralo así:

import { defineCollection } from "astro:content";
import { notionLoader } from "notion-astro-loader";

const database = defineCollection({
  loader: notionLoader({
    auth: import.meta.env.NOTION_TOKEN,
    database_id: import.meta.env.NOTION_DATABASE_ID,
    filter: {
      property: "Hidden",
      checkbox: { equals: false },
    },
  }),
});

export const collections = { database };

Feed loader

El Astro feed loader te permite cargar feeds RSS, RDF, y Atom, y usar los datos en tu sitio de Astro. Hay muchos use cases para esto, ya que RSS es un formato de publicación ampliamente usado. Por ejemplo, puedes usar RSS para mostrar releases recientes de proyectos de GitHub en tu sitio.

Para usar el loader, instala el paquete @ascorbic/feed-loader y define una collection apuntando a una feed URL así:

import { defineCollection } from "astro:content";
import { feedLoader } from "@ascorbic/feed-loader";

const releases = defineCollection({
  loader: feedLoader({
    url: "https://github.com/withastro/astro/releases.atom",
  }),
})

const podcasts = defineCollection({
  loader: feedLoader({
    url: "https://feeds.99percentinvisible.org/99percentinvisible",
  }),
})

export const collections = { releases, podcasts }

Stripe

Con el Stripe loader puedes obtener información de productos y precios desde la Stripe API.

Para usarlo, necesitarás los paquetes stripe-astro-loader y stripe. Crea una instancia de Stripe con tu API key, luego pásala a los loaders, y eso es todo lo que necesitas hacer.

import { defineCollection } from "astro:content";
import { stripePriceLoader, stripeProductLoader } from "stripe-astro-loader";
import Stripe from "stripe";

const stripe = new Stripe("<API_KEY>");

const products = defineCollection({
  loader: stripeProductLoader(stripe),
})

const prices = defineCollection({
  loader: stripePriceLoader(stripe),
})

export const collections = { products, prices }

Airtable

Airtable es una forma de organizar datos y construir apps no-code. Con el Airtable loader puedes cargar records de tu Airtable base y usarlos en un proyecto de Astro.

El Airtable loader está disponible desde el paquete @ascorbic/airtable-loader. Proporciona tu API key desde una environment variable y carga una tabla con el loader.

import { defineCollection } from "astro:content";
import { airtableLoader } from "@ascorbic/airtable-loader";

const launches = defineCollection({
  loader: airtableLoader({
    base: import.meta.env.AIRTABLE_BASE,
    table: "Product Launches",
  }),
})

export const collections = { launches }

Strapi

Strapi es un headless CMS open-source que puede ser self-hosted o usado con Strapi Cloud. Con Strapi puedes crear collections y custom content types.

El nuevo Strapi loader desarrollado por la comunidad te permite traer tu contenido a collections locales. Para usarlo, instala strapi-community-astro-loader desde npm. En tu config de Content Collections (src/content/config.ts) crea una collection y llama al loader con el contentType que quieres sincronizar. En este ejemplo estamos tomando todos los remote articles y sincronizándolos en una collection llamada posts.

import { defineCollection } from "astro:content";
import { strapiLoader } from "strapi-community-astro-loader";

const posts = defineCollection({
  loader: strapiLoader({
    contentType: "article"
  }),
})

export const collections = { posts }

También echa un vistazo al artículo del blog de Strapi How To Create a Custom Astro Loader for Strapi Using Content Layer API.