Fern Docs: Custom Headers and Footers

This repo contains a basic react-app example that inserts a custom header and footer into Fern docs using custom JS and CSS.

Custom header

ReactDOM.render(
  React.createElement(NavHeader),
  document.getElementById('fern-header'),
)

Custom footer

ReactDOM.render(
  React.createElement(NavFooter),
  document.getElementById('fern-footer'),
)

Getting started

1. cd custom-app
2. yarn build
3. fern generate --docs

Important notes

1. This approach is subject to change as we make improvements to the plugin architecture
2. ReactDOM.render() may need to be called multiple times to prevent it from unmounting (this side-effect will be removed in the future).
3. yarn build or npm build must output dist files with deterministic names. This example uses this vite config to accomplish it. Then, reference the js/css files in the docs.yml to get picked up by Fern Docs.
4. You may need to update your CD steps to include building the react-app.
5. If you use tailwind, make sure to prefix the tailwind classes and disable preflight to deconflict with the Fern's stylesheet.