govukhugo

The govukhugo theme for the Hugo static site builder provides an opinionated interpretation of the GOV.UK design system for “data-heavy websites” (or “dashboards”). It also has an associated R package that allows analysts familiar with R Markdown to easily build websites using the GOV.UK design system.

Background

The inspiration for govukhugo was the popular coronavirus dashboard that provides a public overview of critical metrics about the extent of the coronavirus pandemic in the UK, developed UK Health Security Agency (formerly Public Health England). This dashboard provided a new approach to using the GOV.UK design system, designed specifically for data reporting and visualisation which presents a different set of needs and requirements to the standard approach for GOV.UK websites providing general information or services to the public.

Colleagues at the Government Digital Service had previously developed the {govdown} package to generate GOV.UK style pages from R Markdown documents. This package used the standard design considerations, which had significant limitations for data reporting and visualisation. Notably GOV.UK is optimised for portrait orientated content, largely to ensure good support for those using mobile browsers. Whereas data heavy presentations tend to be in a landscape orientation, as these tend to be more likely to be consumed on traditional desktop/laptop computers. There is also an increased need for navigational controls to switch between a variety of different pages/content that does not necessarily follow a linear flow such as that for policy guidance or transactional services.

By the time of govukhugo’s development the {govdown} package was not actively maintained, and is now archived. The emergence of the coronavirus dashboard meant there was now an alternative interpretation of the GOV.UK design system. The coronavirus dashboard is supported by a large development team including web developers and engineers¹; however, in many other situations where there may be a need for a data heavy website, such as official statistics publications, it is often not possible or practical to have a similarly large development team.

The govukhugo theme was developed to support analysts that want to create data-heavy websites with official statistics and other government data that use the GOV.UK design system but do not have the same access to or need for the web development resources required for an intensive and high volume service such as the coronavirus dashboard.

A theme for Hugo

Hugo is a popular static site generator that allows you to create create websites from simple text-only markdown documents. Hugo does this by using “themes” that include templates to convert Markdown documents into fully functional websites. The govukhugo theme provides an integration of the GOV.UK design system to the Hugo ecosystem. The integration of the design system is provided through a combination of Javascript and Hugo shortcodes:

• JavaScript is used to apply GOV.UK CSS styling classes to standard elements such as headings, lists, blockquotes and tables.
• Hugo shortcodes are used to support the majority of the GOV.UK design system components such as paragraph styling, banners and tabs.

Working with R Markdown to support interactive documents

Alongside the theme for Hugo an associated govukhugo R package was developed to support working with R Markdown documents, a version of Markdown specifically designed for the R ecosystem. The popular {blogdown} package works with Hugo to enable analysts to work with R Markdown documents. However, early investigations identified significant problems trying to use the govukhugo theme with {blogdown}, a separate package was therefore developed to provide a customised approach to rendering R Markdown documents for use with govukhugo as well as providing some additional helper functions to aid those working from within R.

The rendering process “hijacks” the standard rendering of R Markdown documents to HTML to create fragment HTML pages that work with Hugo’s support for HTML as an alternative input document to markdown. It also ensures that only specific HTML widgets that have been tested to work with the govukhugo theme are supported. The rendering process also supports data security protocols for government where things such as code can be stored in cloud code repositories such as GitHub but where source data must remain within the confines of corporate networks.

In addition to an alternative rendering process, the govukhugo R package also provides the following functionality for end users working within R:

• Interactive tables, charts and maps using the {DT}, {plotly} and {leaflet} packages².
• Filtering of interactive content using the {crosstalk} package.
• Rendering of charts made with the {ggplot2} package that supports the web accessibility guidelines.
• Use colours from the GOV.UK design system colour palette, including opinionated colour scale palettes for use in charts.