Expose documentation content to a plugin for preprocessing?

[Raul-Karimov]

Hi everyone!

I've been tasked to convert our Jekyll documentation into Docusaurus documentation because lead frontend decided to switch platforms. Problem is, I've coded quite a bunch of Ruby plugins for Jekyll and now I am (not very successfully) trying to reproduce their functionality.

In particular, I can't for the life of mine find in Docusaurus documentation any info on how to expose document content to plugins before static pages are generated. With Jekyll, I used very simple code:

Jekyll::Hooks.register :site, :pre_render do |site|
  pages = site.pages.select { |page| page.path.include?('.md') and page['ID'] } # return only markdown files with IDs in front matter
  pages.each do |page|
    page.content = # tons of modularized logic to pre-process page content
  end
end

I haven't found a Docusaurus API that would provide similar functionality in a similarly simple syntax =( If anyone could point me to one, that would be much appreciated!

[slorber]

Customize Markdown content

For most of the content, we use Markdown through MDX, based on Unified/Remark. MDX compiles Markdown to React components.

You can write plugins for that ecosystem by following their documentation, and alter how a Markdown document gets rendered entirely, or extend the syntax of standard Markdown/MDX

https://mdxjs.com/docs/extending-mdx/

Here's our documentation on how to integrate such plugins.
https://docusaurus.io/docs/markdown-features/plugins

We also have a siteConfig.markdown config that has convenient functions such as preprocess or parseFrontMatter that you can use to further customize things (although it's always preferable to use a remark plugin that preprocess, you might find it easier)

https://docusaurus.io/docs/api/docusaurus-config#markdown

Customize JSX content

For everything else, you can swizzle components and customize how React renders the page. The MDX content is just one component of the whole React app and should be customized through Remark plugins instead.

TLDR

You can customize how Docusaurus renders static pages at multiple levels.

It's not like Jekyll, you can't access the static HTML content as a string and modify it, because Docusaurus needs to hydrate React on top of that static HTML. If you want to customize things, you have to do it in the React way, and you shouldn't attempt to alter what is rendered by React.