En parallèle du déploiement de sites sur GitLab, je teste aussi la création d'un blog et d'une page de profil sur GitHub Pages.
La documentation de Docusaurus contient des exemples pour Netlify, Vercel ou GitHub Pages, à retrouver ici : https://docusaurus.io/docs/deployment, mais j'ai tout de même eu besoin de faire quelques ajustements.

Je vais donc détailler un petit peu les actions nécessaires pour un déploiement sur GitHub Pages de votre site Docusaurus.

L'obejctif premier d'un site créé avec Docusaurus est d'être déployé.
Pour mes premiers tests, j'ai hébergé mes repositories sur GitLab, mais malheureusement la documentation de Docusaurus ne contient pas encore d'exemple de pipeline pour GitLab Pages.
La documentation contient des exemples pour Netlify, Vercel ou GitHub Pages, à retrouver ici : https://docusaurus.io/docs/deployment

Je vais donc détailler un petit peu les actions nécessaires pour un déploiement sur GitLab Pages de votre site Docusaurus.

Mermaid.js est une bibliothèque open-source JavaScript qui permet de générer des diagrammes et des graphiques à partir de textes simples. En l'utilisant directement avec Docusaurus, cela permet de mettre au même endroit tous mes schémas as code, et donc de ne pas avoir à gérer différents outils pour générer mes images ou à importer des images stockées ailleurs.

Plus d'exemples dans la documentation de Mermaid.
Quelques types de graphiques intéressants :

• Gitgraph Diagrams
• Flowcharts
• Pie charts
• Timelines

Un exemple de GitGraph :

Pour générer des graphs en live : https://mermaid.live

Installer et utiliser le plugin Mermaid pour Docusaurus​

Commencer par importer le plugin @docusaurus/theme-mermaid

npm install --save @docusaurus/theme-mermaid

Dans le fichier /docusaurus.config.js activer le mode Mermaid :

module.exports = {
  markdown: {
    mermaid: true,
  },
  themes: ['@docusaurus/theme-mermaid'],
};

Puis dans une page ajouter les balises Mermaid, et mettre le code de votre graphique. Ici pour l'image en début d'article.

    ```mermaid
        %%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
        gitGraph
          commit id: "feat(api): ..."
          commit id: "a"
          commit id: "b"
          commit id: "fix(client): .extra long label.."
          branch c2
          commit id: "feat(modules): ..."
          commit id: "test(client): ..."
          checkout main
          commit id: "fix(api): ..."
          commit id: "ci: ..."
          branch b1
          commit
          branch b2
          commit
    ```