News

The contrast values of the theme are WCGA-compliant in both color modes, light & dark.

There are many tools to evaluate the color contrast of websites, the Web Accessiblity Initiative (WAI) offers a very popular one: Wave. I’m using this tool myself to check for violations of the recommended contrast ratios.

At the moment, the website interface doesn’t load the CSS file and can’t check this site. In case you want to use it, you need to install one of their browser extensions.

The theme has been officially released to the public.

The theme offers an outstanding typographic layout for Markdown content and many options to fit resources like images into its coherent grid.

The following new features since the last beta release are notable:

• Dark mode (follows OS settings)

• Author pages and linked portraits referring to them

• Fast and efficient full-text search with Pagefind

• The layout is rich in detail and the pages are still very fast.

The theme offers a new possibility to store local parameters for resources. Data files allow to associate local meta-data with global or remote resources.

Hugo offers to process arbitrary meta-data parameters associated with page resources. We can add a parameter list to local resources in the frontmatter of page bundles under params:

resources:
  - src: hebert-kostan-y6UEUCq2RHw-unsplash.jpg
    name: tiger
    params: 
      caption: Local image resource
      width: small
      posh: left

Depending on the content structure of your project, you may want to store some resources in the global assets folder or on a remote server. Hugo also can retrieve these resources, but there is (currently) no native mechanism to associate them with meta-data parameters.

And this is where this module comes in handy. The tiger here is stored in the assets folder and gets referenced in a local data file. This way, we can re-use global assets repeatedly and store meta-data in a local file like global.yaml:

src: img/tiger/hebert-kostan-y6UEUCq2RHw-unsplash.jpg
caption: Image file from assets
width: small
posh: left

The extra parameter keys are the same as the ones above. There is no new name for the resource, we use the data file inside the usual Markdown image syntax like ![global tiger](global.yaml).

We can also use TOML or JSON files, enter a remote URL as source, and call every image service with an HTTP API. The second image here is generated with this data file for example:

{
    "src": "https://picsum.photos/300/300",
    "caption": "Random image",
    "posh": "right",
    "width": "tiny"
}

The module is available on GitHub.

The theme is now prepared for Pagefind, a fast open-source full-text search engine for self-hosting.

The Pagefind project is under active development, heading towards its first major version. Its capabilities are impressive, already. Indexing this site takes only a fraction of a second.

To offer the search, we need to install the node package pagefind and let it process our HTML after every generation. For a short tutorial see Search with pagefind.

The theme offers a dark mode now. The colors follow the setting of the browser or operating system.

The dark mode includes a dark page background and light text colors as usual. It also reduces the overall brightness and changes the color theme of the code highlighting.