Building Enterprise JavaScript Applications

Removing the header

Last but not least, we need to remove the header from Swagger UI. The header has a CSS class of topbar. Therefore, to remove the header from our page, we can simply inject the following CSS into the header of our page.

<style>.topbar { display: none; }</style>

To do that, we will search for the </head> closing tag within docs/dist/index.html, and insert a newline above it with our own style tag. These steps can be achieved with one simple sed script. Add it at the end of scripts/swagger-ui/format.sh:

sed -i '/<\/head>/i \<style>.topbar { display: none; }<\/style>' docs/dist/index.html

Run yarn run docs:update && docs:serve once more. Now, our page will not display the header any more!

Once you're happy with the changes, ...