This version was released on February 28, 2022
This new version brings tons of changes to improve your experience, especially in terms of documentation! Best of all, all the features released today are available for free, to all plans. We believe that everyone should have the opportunity to build as amazing a design system as possible, no matter the size. Now, let's get to it!
Tab Blocks
We have added a new documentation block type — Tabs! Each of its tabs can contain other blocks as content, like a mini page, however you can have tabs as part of your regular content. A convenient way to add richer structure to your pages beyond page-level tabs - see it in action!
Tab Example - Variant "Tabs"
Description
Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
Accessibility
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)
- All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element.
- When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) via the inputProps prop.
Alternate Block Rendering
We have added a new technology today that allows you to create alternate rendering for blocks when published. We are also today announcing the first block with built-in support for this technology - tab blocks.
As you can see above, tab blocks by default render as a horizontal menu with content underneath. However, using rendering variants, you can change how this block is rendered - sometimes quite drastically! Here is the same block, but with applied variant "Pills".
Tab Example - Variant "Pills"
Description
Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
Accessibility
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)
- All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element.
- When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (e.g. aria-label, aria-labelledby, title) via the inputProps prop.
Customization and providing your own rendering modes
The most powerful part of rendering variants is the ability to define your own - for every single block there is. Rendering variants are fully driven by the exporter technology. To add rendering variant:
- Add new variant declaration to your exporter package (example here)
- Add custom html for how the variant should be rendered (example here)
- Upload updated exporter to your workspace and profit!
This is only a beginning of what we will be doing with this technology soon, and we can't wait to see what you do with it in a meantime!
Block Duplication
We have added a new option to duplicate all documentation blocks by right-clicking on them and selecting Duplicate. You can also duplicate documentation blocks by copying and pasting them.
Block duplication showing block duplication showing duplication menu. Let's go!
SEO
All documentation sites are now heavily optimized for search engines. We have significantly improved the way site code is generated and added automatic generation of all necessary meta tags. In addition to this, we have added the following features, many of which greatly increase your change of landing a great spot in search engines:
- Documentation will automatically generate sitemap.xml
- Documentation will automatically navigate robots to index your site properly
- Titles and descriptions will now be properly generated
- Titles and descriptions can be overriden as needed
- Additional metadata for services like Twitter and Facebook are also generated
- You can set all metadata yourself, and provide additional ones, like main site image
You can find all search engine options under your Documentation Site > Settings > Search Engine
Next / Previous navigation
We are not stopping here! We have additionally added option to show next/previous navigation inside the documentation pages. This greatly increases usability of the site for regular readers. This feature is enabled by default, but can be disabled inside the documentation settings at any moment.
With next/previous option enabled, your readers will have easier time navigating the site
Custom Footers
Not only you can add next/previous navigation, but you can also add custom footers now!
Because we wanted to prepare something really special, the footer can be fully customized using HTML templates right from the configuration interface. This way, you can add any footer content you want - from legal notices to logos to social media to even things like feedback questions - you are only limited by your imagination.
Even by default, footer looks great - but you can change absolutely every aspect of it to your liking
New Release Notes!
From now on, all release notes going forward will be created using Supernova documentation engine. Over time, we will also be back-porting the old release notes into this site for historical purposes. This way, we can show you all that we add to the platform live!
Improvements
We have additionally improved behaviors of the following features:
- Updated the context menu items for documentation blocks to describe their function more accurately.
- Documentation block search now uses fuzzy search as well.
- It is now possible to hide the title and the description of Figma frame tiles.
- Updated the delete workspace message when the workspace still has an active subscription.
- Team plan can now use up to five automation hooks.
- Added the option to select blocks by right-clicking them, which also immediately opens their context menu.
- Updated the order of blocks in docs block menu to make sure the most-used ones are higher up.
- If your import fails or succeeds with warnings, we show a button that navigates you to the user documentation for further info.
- Billing details are now properly propagated into Stripe.
- Importing a frame source file now uses the current state without Figma versioning.
- Adding a Figma file as a frame source through frame blocks now opens the frame picker immediately after import is finished.
Bugfixes
We have also fixed the following bugs:
- Search in published documentation now searches through strings more accurately.
- Fixed an issue that caused the VS Code extension to not work on Windows 11.
- VS Code extension uses proper button colors on light themes now.
- Going back from changing plan no longer causes settings to be unresponsive.
- Settings docs header to Center with Auto height no longer causes header to not render properly in published docs.
- Searching through tokens takes group names into consideration now as well.
- Quote block in published docs no longer shows an extra space at the beginning.
- Fixed a typo in the invitation dialog.
- Paragraphs in the documentation description are properly rendered in published docs now.
- Callout blocks with soft line breaks render properly in published docs now.
- Component assets render with a proper name and description in published docs even after changing them in Supernova.
- Clicking on anchor in published docs scrolls the content properly and no longer causes the title to be obfuscated.
- Copying and pasting multiple blocks which are selected in ascending order pastes them in proper order now.
- Fixed an issue where adding Shortcut block in docs caused undo/redo to not work properly.
- Pressing Shift + Tab in a docs block no longer leaves you in a state with both selected blocks and text caret blinking.
As always, if you would like see something new, fixed or improved, join our Discord community - we are always there. Thank you for your support!