Devlead.Statiq - Part 1 - Tabs

Statiq shortcodes are small but powerful macros that can generate content or add metadata to your documents.

The TabGroup shortcode, is a CSS-only solution to simplify adding tabs in your Statiq input files.

Why add tabs? Well with some content, a good example of that is code samples, tabs make it easier to group content together, keep things more focused and reduce user vertical scrolling.

With the TabGroup shortcode tab content can be defined as either

• Content - markdown defined directly in the shortcode content
• Include - markdown fetched and processed from a external file
• Code - fetch external file into markdown code fence

the shortcode content is defined as YAML, you can within a single tab combine all variants (content, include, and code), and it'll render in the following order

1. content
2. include
3. code

First of all in your Statiq App you need to add the Devlead.Statiq NuGet package to your Statiq web application.

Enabling TabGroup shortcode is done by invoking the AddTabGroupShortCode extension on your Statiq app Bootstrapper which will enable the shortcode and add the needed CSS file to your generation output.

using System;
using Devlead.Statiq.Tabs;
using Statiq.App;
using Statiq.Web;

await Bootstrapper
    .Factory
    .CreateDefault(args)
    .AddWeb()
    .AddTabGroupShortCode()
    .RunAsync();

The CSS file will end up in output/scss/TabGroup.css and you'll need to reference it where you link in your other CSS custom files (i.e. _head.cshtml), but for your convenience, I've created a TabGroupCss shortcode you can use i.e. with this site my _head.cshtml looks like this