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

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

??? ?? ?????

cd [???? ??] && npm run dev

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

???? ??? .env ??? ?????
.env

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

2. Astro?? ??? ??

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

Astro ????? ????? ???? ???? ???? ???? ?????

srccontent.config.ts

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

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(),
    }),
});

export const collections = { blog };

?? Dev.to ??? ?? ???? ????

const devTo = defineCollection({
    loader: async () => {
        const headers = new Headers({
            "api-key": DEV_API_KEY,
        });
        const posts = await fetch(`${DEV_TO_API_URL}articles?username=jmr85`, {
            headers: headers
        }).then(res => res.json());

        return posts.map((post: any) => ({
        id: post.slug,
            title: post.title,
            description: post.description,
            pubDate: new Date(post.published_at),
            updatedDate: post.edited_at ? new Date(post.edited_at) : null,
            heroImage: post.cover_image || post.social_image,
        url: post.url,
        }));
    },
    schema: z.object({
        title: z.string(),
        description: z.string(),
        pubDate: z.coerce.date(),
        updatedDate: z.coerce.date().optional(),
        heroImage: z.string().nullable(),
    url: z.string(),
    }),
  });

export const collections = { blog, devTo };

? ?? ?????. srccontent.config.ts

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

???? ?? ??? ?? ????? ?????. ??? Astro ???? ??? ???? ???? ?? ?? ?? Dev.to ??? ???? ?? ??? ???? ???. ??? ??? ??? ??? ??? ???. ?? Astro ???? ???? ???? ??? ??? Dev.to? ???? "??"? ? ??? ?? ?? ????.

3. ????? ???? ?????.

?? getCollection? ???? Astro ???? ?? ???? dev.to ???? ???? ? ????.

??:

srcpagesblogindex.astro

import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

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(),
    }),
});

export const collections = { blog };

?? devto? ?? https://dev.to/{username}/{slug-article ???? ?? URL? ?????? ??? ??? ???? ???? ???????. }

 {
                        post.map((???) => (
                            

???: https://github.com/jmr85/astro-devto

? ??? AstroJS: Dev.to ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!