This version was released on August 4, 2022
With this version, we're expanding options for the frontend of the documentation and added the ability to export it to markdown. We've also added new ways how to render shortcuts and Figma frames alongside new ways to know what your users are doing.
We've also polished the look and feel of the docs — preparing for big improvements to theming (hint hint)!
It's also worth noting that all features we're introducing recently are available to everyone, on any plan. Let's get to it!
Markdown exporter
We're introducing a new option to backup your documentation — Markdown export(er)!
Markdown exporter allows you to export all your documentation pages and their content into a nice, clear Markdown definition that can be, for example, committed to your repository. You can find the exporter in the Code Integration section:
Make sure you have installed the exporter so you can use it in your workspace.
After you've installed the exporter, you can now go to Code Integrations / Builds page and request a new build, which will export your entire documentation in Markdown.
Offline documentation backups
We're also introducing automated offline backups for your documentation. The new Markdown exporter is Hooks-enabled, so Supernova allows you to create automation that will — with each new version — push changes to the repository of your choosing and create an offline backup of your documentation.
Setting up automation has never been easier — just create a new hook under code integration tab.
Once done, every time you create a new version, automation will build Markdown representation of your site and open a pull request with changes. Amazing for managing translations, seeing differences between versions, and other similar usecases.
Automatically exported Markdown with all pages and automatically created content page.
New variants for shortcuts block
We've greatly expanded the shortcut block options. You can now link to different places of your design system documentation in style — 3 different styles to be exact — with the possibility to pick a number of columns they should use.
Here's a preview of some of the combinations possible:
Various examples of how new Shortcut variants could be used.
New Hotjar integration
We're expanding on the analytics options with a new Hotjar integration! You can now easily add feedback surveys or leverage Hotjar analytics to collect insights on how users use your documentation.
We support all Hotjar widgets and features: Feedback widgets, Surveys, Heatmaps, and Recordings.
Hotjar Site ID can be added in Analytics section in Documentation settings.
Hotjar Feedback widget makes it easy to collect feedback on your documentation content.
Copy section button
Due to popular demand, we're adding an option to quickly copy the link to any specific section. Just hover over any documentation heading and use the new button on the left.
Preview of how easy is now to copy a link to a section.
New variants for Figma frames block
We've added two variants for Figma frames block — bordered and plain. The plain variant is great if you just want to display the Figma frame as a simple image with a caption, without additional styling. It matches how the image block is displayed visually.
Alternatively, the bordered variant is great when you want to display multiple Figma frames in a grid.
We believe this should make it even easier to display content like component anatomy directly from Figma without a need to upload a static image.
Difference between plain and bordered variants for Figma frame block.
More visual polish added to your documentation
We've additionally fixed various inconsistencies and visual bugs across the whole documentation. We also replaced many unnecessary borders on interactive elements with softer shadows.
In general, default documentation should now feel more visually coherent and polished.
Before/after of our latest design changes in default exporter
Improvements
- It's possible to set the Hotjar Site ID in the Analytics section in Documentation Settings now.
- Tables now use the slightly smaller font size. It’s slightly nicer that way.
- From now on, headings don’t have the unnecessary top margin when they’re the first block inside of a tab.
Bugfixes
- Creating a new tab in Tabs block, autofocuses the newly created tab properly.
- Switching between tabs is no longer registered in the undo stack, which means that pressing Cmd + Z can no longer switch between tabs.
- Fixed unnecessary large bottom margin in Callout blocks.
- Fixed the bug that caused the crash of documentation when there was a radius token referencing another radius token.
- Fixed broken links in Component Checklist All block. They actually work now.
- Fixed previews for radii, typography, measure, transparent colors, and gradients tokens.
- Fixed bug that opened two dialogs when Component Health block was used twice on one page.
- Fixed hover states for Link and Shortcut blocks.
As always, if you'd like to see something new, fixed, or improved, join our Discord community — we're always there. You can also request a feature on our Feature Request Portal. Thank you for your support!