I'd like to populate my Docusaurus project with documentation using the "docs" plugin and a custom (JavaScript) plugin to connect it to a headless CMS. Currently, I'm using the loadContent Lifecycle API event to call my Headless CMS API and then using fs.writeFileSync to create physical markdown files in '/docs' and overwriting the ./sidebars.js file so the 'docs' plugin that comes with the classic preset works.
./my-plugin/index.js:
module.exports = function (context, options) {
return {
name: 'my-docusaurus-plugin',
async loadContent() {
//calls to Headless CMS API for documentation content
let response = await fetchArticles('documentation');
// Adds the markdown files for 'docs' plugin using fs.writeFileSync
await buildArticles(response)
//fetch homepage and navigation sections from CMS API
let homepage = await fetchPages('homepage');
let sidebarSection = await fetchPages('page');
//overwrite ./sidebars.js with API navigation data using fs.writeFileSync
await buildSidebar(homepage, sidebarSection);
}
};
};
This works in that I get content from my CMS and the Documentation renders, but it seems more like a workaround than an elegant solution for connecting a headless CMS with Docusaurus. Am I missing some best practices or is there a better approach using other lifecycle events?
