Test Dev.to

Adjunto screen de instalacion de template blog astro

npm create astro@latest -- --template blog

Levantamos la app

npm run dev

A partir de Astro 5, se ha introducido la Content Layer API, una herramienta que permite cargar datos desde cualquier fuente durante la construcción de tu sitio y acceder a ellos mediante una API sencilla y con tipado seguro.

Esta API ofrece flexibilidad para manejar contenido de diversas fuentes, como archivos locales en Markdown, APIs remotas o sistemas de gestión de contenido (CMS). Al definir "colecciones" de contenido con esquemas específicos, puedes estructurar y validar tus datos de manera eficiente. Además, la Content Layer API mejora el rendimiento en sitios con gran cantidad de contenido, acelerando los tiempos de construcción y reduciendo el uso de memoria.

https://astro.build/blog/astro-5/

Content Layer API de Astro para integrar publicaciones de dev.to en tu sitio

Puedes utilizar la Content Layer API de Astro para integrar publicaciones de dev.to en tu sitio. Aunque no existe un cargador (loader) específico para dev.to, puedes crear uno personalizado que consuma su API y almacene las publicaciones en una colección de contenido en Astro.

Para lograr esto, sigue estos pasos:

1. Configura el acceso a la API de dev.to

DEV_TO_API_URL=https://dev.to/api/
DEV_API_KEY=tu_clave_de_api

2. Crea una función para obtener las publicaciones

En la carpeta src/lib/ de tu proyecto, crea un archivo getArticles.js con la siguiente función para obtener las publicaciones:

const { DEV_API_KEY, DEV_TO_API_URL } = import.meta.env;

export async function fetchArticles() {
  const res = await fetch(`${DEV_TO_API_URL}articles/me/published`, {
    headers: {
      "api-key": DEV_API_KEY,
    },
  });
  const data = await res.json();
  return data;
}

3. Define una colección en Astro

En src/content.config.ts, define una colección para las publicaciones de dev.to utilizando la Content Layer API:

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';
import { fetchArticles } from "../lib/getArticles";

const blog = defineCollection({
    // Load Markdown and MDX files in the `src/content/blog/` directory.
    loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
    // Type-check frontmatter using a schema
    schema: z.object({
        title: z.string(),
        description: z.string(),
        // Transform string to Date object
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().optional(),
    }),
});

const devTo = defineCollection({
  loader: async () => {
    const articles = await fetchArticles();
    return articles.map((article) => ({
      id: article.id.toString(),
      slug: article.slug,
      body: article.body_markdown,
      data: {
        title: article.title,
        date: new Date(article.published_at),
        tags: article.tag_list,
        summary: article.description,
        image: article.social_image,
      },
    }));
  },
});

export const collections = { blog, devto };