Chulapa v2.2.0 is out.
This release adds a few features that I have wanted to bring to the theme for some time: a light/dark skin selector, Mermaid diagrams, PhotoSwipe galleries and complete starter examples. There are also several smaller changes around navigation, accessibility and the bundled skins.
Here is a quick overview of what is new.
Light and dark skins
Chulapa can now let visitors choose between light, dark and automatic appearances.
You just need to configure a second skin. The theme then adds a selector to the classic, floating and dual navigation bars. The selected appearance is remembered across pages and tabs and, importantly, it is applied before the page is displayed.
This is completely opt-in. If you do not configure a dark skin, your site works as before and no additional styles or scripts for the selector are loaded.
See how to configure light and dark skins.
Mermaid diagrams
Another addition in v2.2.0 is support for Mermaid diagrams.
Mermaid can be enabled per page, so the library is only loaded when it is actually needed. Once enabled, diagrams can be added using fenced blocks directly in your Markdown content.
There is also a fallback: if Mermaid cannot render a diagram, the original source remains available.
The Mermaid guide has all the details.
PhotoSwipe galleries
Masonry galleries and carousels can now use PhotoSwipe to provide a zoomable image viewer.
PhotoSwipe is optional and supports keyboard and touch controls, reduced-motion preferences and the original image link as a fallback.
You can see how to enable PhotoSwipe or check the live demo.
GoatCounter analytics
v2.2.0 also adds support for GoatCounter as a lightweight analytics option.
It is disabled by default and, when configured, the script is loaded asynchronously only in production builds.
See the GoatCounter setup guide for the configuration details.
Navigation and new skins
There are a few other visible changes.
Tables of contents now highlight the section currently being viewed. This is particularly useful on longer documentation pages and posts.
The release also adds three new skins: Cerulean, Litera and Pulse. I have also reviewed text contrast across many components of the bundled skins. Some upstream color combinations still fall below the WCAG 4.5:1 contrast benchmark, so it is worth checking the result if you use one of these skins or custom colors.
You can compare all of them in the skin previews.
Starter examples
One thing that was missing from the documentation was a simple way to see how a complete Chulapa site fits together.
v2.2.0 adds four starter examples:
- personal blog
- technical blog
- portfolio
- project site
Each example includes the configuration and content files needed to reproduce the site, together with a working demo.
See the starter examples or browse the demos.
Updating to v2.2.0
For sites using the remote theme, update _config.yml:
remote_theme: dieghernan/chulapa@v2.2.0
For gem-based installations, update the version in your Gemfile:
gem "chulapa-jekyll", "~> 2.2.0"
and run:
bundle update chulapa-jekyll
The installation guide covers both methods.
If you are upgrading an existing site, especially one with local overrides of layouts or includes, I recommend previewing it locally before publishing.
The full release notes have the complete list of changes.
As always, issues, suggestions and examples of sites built with Chulapa are welcome in GitHub Discussions.