Amplience

To customize Docusaurus we've built React components based on the designs and prepared interactive graphics that emphasize the dynamic environment of the CMS.

To create the documentation even more effectively, Docusaurus provides a wide library of React Components that can be tailor-made by swizzling, and a convenient interactive CLI enables this process.

Here you can see how we "swizzled" the header, left and right menu to match the brand design:

Swizzling process enables us to fully customize the whole documentation accordingly to customer’s requirements.

Integrating Docusaurus with Amplience CMS

Amplience wanted to manage large parts of the portal using their Headless CMS and have full flexibility in creating interactive, dynamic elements across the documentation.

Docusaurus is based on markdown files that are saved as plain text. Markdown files are a dedicated solution for creating documentation because they declutter the writing environment.

We created a design system and corresponding content model that allowed Amplience authors to create rich documentation pages using a set of atomic building blocks.

To allow the Amplience creators even easier React components management, we've integrated Docusaurus with their CMS, using the plugin prepared by themselves. Thanks to this integration, the pages could use two data sources: the Docusaurus repository and Amplience CMS.

And the pages can be generated in two ways:

• The whole page is generated by CMS from sections that we've created
• The page is generated from a .md file, with built-in custom React components manageable from CMS

Page generated by CMS (dark mode):

Page generated from .md files with React components manageable from CMS (dark mode) :

Why connect Amplience CMS to Docusaurus?

Connecting Amplience CMS to Docusaurus brings many benefits for the project and users:

• Enables non-technical users to edit the content without modifying markdown files
• Provides live previews that allow for more time-efficient content editing
• Displays the content for the editor as graphic components instead of the plain text
• Eliminates devs involvement from the basic content updates
• Provides full flexibility in content management and easy scalability in the future
• Enables to build interactive graphics
• Enables changes in the documentation structure from the CMS level