Version 5.0 (WIP)

This version is currently in development! We anticipate releasing the finalised v5 by the end of September.

In the meantime, you can update to the latest master version on GitHub to check out some new features and improvements. Remember to check back here for the final notes once it is released.

What’s new?

Welcome to the ⭐ EPIC ⭐ v5 release of Wowchemy. There are a number of exciting updates in this version that we hope you will like, including:

  • New book layout for multi-page content - easily create online courses, notebooks, knowledge bases, project documentation, or - you guessed it - books
    • Similar to the docs layout, but more intuitive to use
    • No need to manually define all the book menu links!
    • New shortcode for listing child pages {{< list_children >}}
    • We’ve already converted this Wowchemy Docs site to the books layout to make managing content even simpler
  • Add podcasts and music to your pages with the new Audio shortcode
    • {{< audio src="markvard.mp3" >}}
  • Cite pages and publications with the new Cite shortcode
    • {{< cite page="/publication/preprint" view="4" >}}
  • Significant performance increase such as by preloading pages
  • Now also edit authors, talks, publications, and projects online in the admin panel
  • Use emojis and custom SVG images as icons in the Featurette (skills) widget
  • Option to highlight the site author (superuser) in author lists
  • Add author notes such as for clarifying affiliations or contributions
  • Add spoilers such as to reveal answers to questions
  • Ability to add a Creative Commons copyright license on either a site wide or per page basis
  • Ability to write the names of authors, tags, and categories in Unicode (e.g. Chinese)
  • More intuitive approach for users to choose a light, dark, or automatic (system default) appearance
  • Screen reader support added for featured images
  • Initial support for Right to Left (RTL) languages
  • Create buttons and call-to-actions with new shortcodes
  • Enable non-rectangular widget styles and shaped background reveals with the experimental clip_path option under a widget’s [design] section
    • Refer to CSS clip-path docs and generators for inspiration - draw a heart, a circular reveal of an underlying photographic background, or even a bear :D

Carry on reading to learn how to use these exciting new features on your site 🚀

How do I upgrade my site?

Want to update to this version? Refer to the update guide in conjunction with the changes mentioned below.

Note that if you are running the master (development) version rather than an official tagged release, some of these changes may already have been applied.

Supported Hugo Versions

This release is compatible with Hugo Extended v0.73-0.74

  • If you deploy your site with Netlify, update HUGO_VERSION in your netlify.toml to "0.74.3".
  • If you run Hugo on your computer, update the Hugo Extended app to a compatible version

Site Changes

  1. Add the following lines to your config/_default/params.toml - view example:
    # PLACE THESE PARAMS IN THE MAIN CONFIG SECTION (NOT UNDER ANY [SUBSECTION])
       
    # Show related content at the bottom of pages?
    show_related = {docs = true, page = false, post = true, project = true, publication = true, talk = true}
       
    # Show a copyright license from creativecommons.org in the site footer?
    # Page specific copyright licenses are also possible by adding this option to a page's front matter.
    copyright_license = {enable = false, allow_derivatives = false, share_alike = true, allow_commercial = false, notice = "This work is licensed under {license}"}
       
    # Highlight the site author (superuser) in author lists? (true/false)
    highlight_superuser = false
       
    # PLACE THIS NEW [CMS] CONFIG SECTION AT THE END OF THE FILE
      
    ############################
    ## Content Management System
    ############################
    [cms]
     # See https://sourcethemes.com/academic/docs/install/
     netlify_cms = true
      
    ############################
    ## Icon Pack Extensions
    ############################
    [icon.pack]
     ai = false  # Academicons icon pack https://jpswalsh.github.io/academicons/
    
  2. Customize the new options above to your liking
    • Set ai = true above if your site uses the academic (ai) icon pack
  3. The media library folder is now configurable, with the default changing from static/img/ to static/media/ as it can now contain any kind of media. Either:
    • Rename your site’s static/img/ folder to static/media/ (and update any references to the img/ folder in your Markdown files);
    • OR, add media_dir = "img" to params.toml to continue using the legacy location
  4. To align better with the Hugo framework, rename the name field to title in author profiles within the author/ folder and ensure each author profile is within its own folder - view example
    • E.g. name: Nelson Bighetti is renamed to title: Nelson Bighetti in content/authors/admin/_index.md
  5. If you use the Netlify CMS admin panel, update your static/admin/config.yml file from https://github.com/gcushen/hugo-academic/blob/master/exampleSite/static/admin/config.yml
    • This change adds support for editing talks, publications, and projects in Netlify CMS in addition to fixing TypeError: e.replace is not a function error when using Netlify CMS (#1593)
  6. Make taxonomy URLs singular, consistent with other Wowchemy pages by adding the following to your config/_default/config.toml file:
    # Workaround Hugo publishing taxonomy URLs as plurals - consistently use singular across Wowchemy.
    [permalinks]
      authors = "/author/:slug/"
      tags = "/tag/:slug/"
      categories = "/category/:slug/"
      publication_types = "/publication-type/:slug/"
    

Optional Changes

  • Update your data/page_sharer.toml (if exists) to open WhatsApp sharing links in the WhatsApp mobile app rather than the web app
  • For non-English sites, add language pack options for translating Light (theme_light), Dark (theme_dark), and Automatic (theme_auto). Refer to the docs on customising the interface language for more info.
  • Convert any pages using the docs type to use the more intuitive books type
    • docs type is still available to use, but may be deprecated at some stage
    • the books type doesn’t require any menu items to be created

New features for authors

Highlight yourself in author lists

To highlight the site author (superuser) in author lists, set the following in params.toml:

highlight_superuser = true

Remember to check that superuser: true in the user account for the site author, where the default user account can be found at content/authors/admin/_index.md, and that your pages reference the username of the author rather than the display name of the author. The username is defined as the name of the folder containing the user account and may or may not be the same as the display name in the title field of the user account.

For example, in the front matter of a page, we can specify the username of the site author, and it will then be formatted in bold:

authors:
- admin

Add author notes for affiliations and contributions

Author notes can be added to a page’s front matter in the form:

authors:
- "Someone"
- "Someone else"
author_notes:
- "Equal contribution"
- "Equal contribution"

where the index of each author note corresponds with an author in the authors list.

An author note is rendered as a tooltip next to an author’s name.

Emojis and custom SVG images as icons

Use emojis and custom SVG images as icons in the Featurette (skills) widget.

In the future, we plan to extend support for emojis and custom SVG icons to other Wowchemy components.

Icon pack “emoji” gives you the ability to use emojis as icons

  • See all icons
  • Enter the emoji shortcode, such as :heart:, in Wowchemy’s icon field

Icon pack “custom” gives you the ability to use custom SVG icons

  • Create an SVG icon in your favorite image editor or download one from a site such as Flat Icon
  • Place the custom SVG icon in assets/images/icon-pack/, creating the folders if necessary
  • Reference the SVG icon name (without .svg extension) in the icon field

Examples for use in Featurette (skills) widget:

# Uncomment to use emoji icons.
# [[feature]]
#  icon = ": heart :"  # Remember to remove the spaces around the colons.
#  icon_pack = "emoji"
#  name = "Emojiness"
#  description = "100%"  

# Uncomment to use custom SVG icons.
# Place custom SVG icon in `assets/images/icon-pack/`, creating folders if necessary.
# Reference the SVG icon name (without `.svg` extension) in the `icon` field.
# [[feature]]
#  icon = "your-custom-icon-name"
#  icon_pack = "custom"
#  name = "Surfing"
#  description = "90%"

Create spoilers

To create a spoiler:

{{< spoiler text="Click to view the spoiler" >}} You found me! {{< /spoiler >}}

View the spoiler demo

Enables adding Creative Commons copyright licenses on both site wide and per page basis with the new params.toml and front matter option:

copyright_license = {enable = false, allow_derivatives = false, share_alike = true, allow_commercial = false, notice = "This work is licensed under {license}"}

Create buttons and call-to-actions

Create buttons and call-to-actions with new shortcodes.

Examples coming soon.

More intuitive appearance selector

Version 4.9 makes choosing a site appearance even more intuitive with textual labels rather than icons for the light, dark, and auto (system default) modes.

Rather than a 3-way icon-based toggle through light, dark, and automatic modes, present the user with a dropdown list of modes displayed in full textual representation. See #1596.

Adds language pack options for translating Light (theme_light), Dark (theme_dark), and Automatic (theme_auto).

Integration with Netlify Identity for Netlify CMS

Adds a [cms] section in params.toml to configure CMS integration.

An optional alt_text parameter can be added when specifying a featured image in a page’s front matter. Alt text is used to describe the image when the page is read aloud by a screen reader. See #1592.

Additionally, the profile photo alt text has been improved from “avatar” to the person’s name, in alignment with major CMS and social sites.

Fixes

  • Fix social sharing image for author pages
    • The social sharing logic was attempting to use the legacy system of defining the avatar image name in site.Params.avatar, however since the author system was added to Wowchemy, site.Params.avatar is now a group of params and the avatar itself is stored in the author’s page bundle.
    • Hence, use the avatar in the author’s page bundle (if it exists) to represent an author page
    • This bug could affect the image used to represent a page in social sharing and RSS

Language Packs

  • Initial support added for Right To Left (RTL) languages
  • Add Arabic (ar) language pack (#1642, #1654)
  • Add Somali language pack (#1607)
  • Add Lithuanian language pack (#1617)
  • Fix Czech translation (#1597)
  • Update NL translation (#1622)

Thank you

Last but certainly not least, a big Thank You to all the folks that helped to make Wowchemy even better.

Has Wowchemy helped you? Please consider supporting Wowchemy.

As always, we welcome your feedback. You can also file a bug report.