???? ??? ??? ???? ??

npm create astro@latest ---??? ???

??? ?? ?????

npm ?? ??

Astro 5??? ??? ?? ? ?? ???? ???? ???? ???? ??? ??? API? ?? ???? ? ?? ??? Content Layer API? ???????.

? API? ?? ???? ??, ?? API, ??? ?? ???(CMS) ? ??? ??? ???? ??? ? ?? ???? ?????. ?? ???? ???? ???? "???"? ???? ???? ????? ???? ??? ? ????. ?? Content Layer API? ???? ?? ???? ??? ???? ?? ??? ???? ??? ???? ????.

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

dev.to ???? ???? ???? Astro? Content Layer API

Astro? Content Layer API? ???? dev.to ???? ???? ??? ? ????. dev.to? ?? ?? ??? ??? ?? API? ???? Astro? ??? ???? ???? ???? ??? ?? ??? ?? ? ????.

?? ????? ?? ??? ????.

1. dev.to API? ?? ??? ??

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

2. ???? ???? ??? ????.

????? src/lib/ ???? ?? ??? ???? getArticles.js ??? ???? ???? ?????.

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. Astro?? ??? ??

src/content.config.ts?? Content Layer API? ???? dev.to ???? ?? ???? ?????.

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 };

? ??? ??? ??.to? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!