Custom plugin - how to handle page-specific meta-data?

[ahtremblay]

Hello, I am designing a custom e-commerce plugin.

The plugin works as follows:

The user of my plugin will create a folder products in the root directory along side docs and blog. Then, my plugin will ensure that each page in this folder will render a product page, and will further glue those pages together nicely with taxonomies and other features, etc. For it to be ergonomic, I want the user to be able to define custom data for each page, and have the rendering use that data to render the page. For instance, I would like the user to be able to set the price, a description, and series of options, a taxonomy, etc directly into the product page.

1. Should all this product description go into the front-matter of each page? If so, how do I make this custom front-matter available to the components I am rendering as part of my plugin? Are there any helper functions exposed by Docusaurus, or do I have to handle it from scratch in index.js? As I create the addRoute, do I read each file for its front matter, then I use createObject over this front-matter so that the rendering component can use it as props or module?

2. What if the user creates a .jsx or .tsx file? If my user prefers to use this file format, how will they define the custom information without a front matter? Is there a convention here in Docusaurus?

[ahtremblay]

Okay, after a bit of investigation, it appears that both docs and blog support only .md and .mdx files which supports front matters. Whereas only page plugin supports all four .md, .mdx, .jsx and .tsx. Since the page plugin does not support custom front matters, it suggests to me I should restrict my users' options to .md and .mdx in line with the docs and blog plugins to benefit from custom meta-data on each page.

In this case, does my index.js (contentLoaded function) loop in the products folder, read each file, call font-matter in https://www.npmjs.com/package/front-matter to read out the .md or .mdx file, use createData on the front-matter, then pass it as a module or prop to the route's component?

[slorber]

@ahtremblay it's hard to answer you. What you have in mind seems right and similar to how core plugins work, please give it a try and let us know if you feel blocked by any specific task. We'll find a way to guide you then but we should be able to inspect (eventually run) your code and see what's wrong to do so.

If you want to support .jsx/.tsx files like the page plugin, it's up to you too. You can use the page plugin for implementation inspiration and nothing prevents you from building a plugin that supports both md(x) + js / tsx (like the page plugin shows)