Dublin Library

The Publishing Project

Baseline Web Components

  • 1 min. read

 

Baseline is an interesting initiative The Web Platform Developer Experience group created the [baseline-status](https://github.com/web-platform-dx/baseline-status) web component to display data regarding the baseline status of a given feature. This could be useful when discussing a feature in a post since it provides a visual cue as to what major browsers supports the feature. The structure of the component is simple. It has one parameter, the feature ID for the desired feature as it's found in the [web features explorer](https://web-platform-dx.github.io/web-features-explorer/) site. The component requires one attribute, the name of the feature in the `featureId` attribute. The following examples show how the component works. This is what it looks like when the feature is not widely available: This feature is newly available on baseline: And this feature is widely available: ## Adding the component In our root template we add the following block to load the script conditionally if the feature is enabled in the post's frontmatter. {% raw %} ```handlebars {% if baseline %} {% endif %} ``` {% endraw %} Then, for every post that we want to use the component in, we add the following snipet to the front matter section. ```yaml baseline: true ```

Edit on Github