Dev.to publier sur le blog Docusaurus (automation nodejs)

Bonjour la communauté des développeurs !
Aujourd'hui, je vais vous fournir un exemple de programmation montrant comment convertir des articles dev.to en blog Docusaurus. Cet exemple utilisera Node.js pour récupérer des articles de l'API dev.to et créer des fichiers Markdown compatibles avec les articles du blog Docusaurus.

Tout d'abord, configurons le projet et installons les dépendances nécessaires :

mkdir devto-to-docusaurus
cd devto-to-docusaurus
npm init -y
npm install axios fs-extra front-matter

Maintenant, créez un fichier nommé convert.js et ajoutez le code suivant :

const axios = require('axios');
const fs = require('fs-extra');
const frontMatter = require('front-matter');
const path = require('path');

const DEV_TO_API_KEY = 'YOUR_DEV_TO_API_KEY';
const DEV_TO_USERNAME = 'YOUR_DEV_TO_USERNAME';
const OUTPUT_DIR = './blog';

async function fetchDevToArticles() {
  const response = await axios.get(`https://dev.to/api/articles/me/published`, {
    headers: { 'api-key': DEV_TO_API_KEY }
  });
  return response.data;
}

function convertToDocusaurusFrontMatter(article) {
  const date = new Date(article.published_at);
  return {
    title: article.title,
    authors: [DEV_TO_USERNAME],
    tags: article.tag_list,
    date: date.toISOString().split('T')[0],
    slug: article.slug,
    description: article.description,
  };
}

async function convertArticleToMarkdown(article) {
  const frontMatterContent = convertToDocusaurusFrontMatter(article);
  const markdown = `---
${Object.entries(frontMatterContent).map(([key, value]) => `${key}: ${Array.isArray(value) ? `[${value.join(', ')}]` : value}`).join('\n')}
---

${article.body_markdown}`;

  const fileName = `${frontMatterContent.date}-${article.slug}.md`;
  const filePath = path.join(OUTPUT_DIR, fileName);
  await fs.outputFile(filePath, markdown);
  console.log(`Created: ${filePath}`);
}

async function main() {
  try {
    const articles = await fetchDevToArticles();
    await fs.ensureDir(OUTPUT_DIR);

    for (const article of articles) {
      await convertArticleToMarkdown(article);
    }

    console.log('Conversion completed successfully!');
  } catch (error) {
    console.error('Error:', error.message);
  }
}

main();

Voici comment fonctionne ce script :

1. Il récupère vos articles publiés depuis dev.to à l'aide de l'API.
2. Pour chaque article, il convertit les métadonnées en présentations compatibles Docusaurus.
3. Il combine la présentation avec le contenu Markdown de l'article.
4. Il enregistre chaque article dans un fichier Markdown distinct dans le répertoire du blog.

Pour utiliser ce script :

1. Remplacez YOUR_DEV_TO_API_KEY par votre clé API dev.to actuelle[1].
2. Remplacez YOUR_DEV_TO_USERNAME par votre nom d'utilisateur dev.to.
3. Exécutez le script à l'aide du nœud convert.js.

Après avoir exécuté le script, vous trouverez vos articles dev.to convertis en articles de blog compatibles Docusaurus dans le répertoire du blog[1][3].

Pour intégrer ces posts dans votre site Docusaurus :

1. Copiez les fichiers Markdown générés du répertoire du blog vers le répertoire du blog de votre projet Docusaurus.
2. Assurez-vous que le plugin de blog de votre fichier docusaurus.config.js est correctement configuré[1][3].

Voici un exemple de ce à quoi pourrait ressembler votre docusaurus.config.js :

module.exports = {
  // ... other config options
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          path: 'blog',
          routeBasePath: 'blog',
          blogTitle: 'My Dev.to Blog',
          blogDescription: 'A collection of my dev.to articles',
          blogSidebarCount: 'ALL',
          blogSidebarTitle: 'All Blog Posts',
          showReadingTime: true,
          editUrl: 'https://github.com/yourusername/your-repo/edit/main/website/',
        },
      },
    ],
  ],
  // ... other config options
};

Cette configuration configure le plugin de blog pour utiliser le répertoire du blog et afficher tous les articles dans la barre latérale[1][3].

N'oubliez pas de personnaliser l'editUrl et les autres options en fonction de la structure et des préférences de votre projet. Avec cette configuration, vos articles dev.to seront parfaitement intégrés à votre blog Docusaurus.

Citations :
[1] https://docusaurus.io/docs/blog
[2] https://dev.to/dreamlogic/how-to-use-the-multi-blog-plugin-for-docusaurus-32a2
[3] https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog
[4] https://dev.to/tuenguyen2911_67/inspired-by-docusaurus-2cm6
[5] https://dev.to/dianaiminza/documentation-using-docusaurus-40g5
[6] https://dev.to/seanyasno/starting-a-new-blogging-journey-with-docusaurus-3aap
[7] https://dev.to/lo_victoria2666/build-beautiful-documentation-websites-with-docusaurus-8o2
[8] https://dev.to/katiel/exploring-the-code-behind-docusaurus-pbk

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!