Test Dev.to

Attached astro blog template installation screen

npm create astro@latest -- --template blog

We launch the app

npm run dev

Starting with Astro 5, the Content Layer API has been introduced, a tool that allows you to load data from any source during the construction of your site and access it through a simple, securely typed API.

This API offers flexibility to handle content from various sources, such as local Markdown files, remote APIs, or content management systems (CMS). By defining “collections” of content with specific schemas, you can structure and validate your data efficiently. Additionally, the Content Layer API improves performance on content-heavy sites, speeding up build times and reducing memory usage.

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

Astro's Content Layer API to integrate dev.to posts into your site

You can use Astro's Content Layer API to integrate dev.to posts into your site. Although there is no specific loader for dev.to, you can create a custom one that consumes its API and stores posts in a content collection in Astro.

To achieve this, follow these steps:

1. Configure access to the dev.to API

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

2. Create a function to get the posts

In the src/lib/ folder of your project, create a getArticles.js file with the following function to get the posts:

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 a collection in Astro

In src/content.config.ts, define a collection for dev.to posts using the 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 };

The above is the detailed content of Test Dev.to. For more information, please follow other related articles on the PHP Chinese website!