Hey everyone,
I’ve just redesigned the dash-bootstrap-components documentation app, which is itself a Dash app, and I thought people might be interested in some of the details. Read on if so, check it out here, or take a look at the source code on GitHub.
Structure: The app is actually 27 different Dash apps stitched together with Flask (
). Each example and each of the component pages in the docs is its own Dash app. This is to let me control navigation without having to write callbacks, and to make it easier to avoid component id clashes within each app. I use DispatcherMiddleware to route requests to the relevant apps, as recommended by the Dash docs. These apps are of course generated rather than all instantiated manually.
The HTML pages are generated from jinja2 templates, which I also use to generate custom index_strings for each of the apps so that they match the style and structure of the rest of the app.
Components pages: As mentioned above, each of these is a Dash app with a custom index_string to add the navbar and sidebar etc. Each component page is mostly text content with interspersed code snippets + live examples running those code snippets. To help make this more maintainable they are written as markdown templates. Here’s the template for the Button docs for example. A custom markdown parser reads this, and when it sees something like {{example:components/button/simple.py:buttons}} it loads the Python object buttons from the specified file and drops it into the layout.
Examples: These are running apps from the examples folder in our repo. Code from the examples folder gets copied into the docs folder at deploy time (to make sure the example apps on the site are running the same code that is present in the repo). Rather than just running the app though, we make a new app so we can ensure we have the correct URL prefixes set etc., copy the layout and callbacks across from the original app, and set a custom index_string using jinja2 templates, so that the example app appears to be embedded in the documentation (like this). In actual fact the Dash app that is running is also responsible for the navbar at the top and the source code below the example, but the example code would generate only what’s visible in the window.
Style: All of the styling is done with Bootstrap (would be weird to make a different choice for this particular app 
) and is responsive, almost all of it looks pretty good on mobile and smaller screens! The app also includes some CSS to replace the Loading... in each of the Dash apps with a Bootstrap style loading spinner.
Anyway, hope that was interesting if you read this far. There were definitely some interesting technical challenges to solve making it.