Plus new shortcuts variants, Hotjar integration, better linking to sections, and a design polish. We’ve been busy!
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!
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:
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.
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.
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:
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.
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.
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.
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.
- 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.
- 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!