If you like my work, please consider supporting its development.

Time for a new release of BluestNight! Things are a little different this time around because this is the theme’s first versioned release. A number of large changes have happened in the theme as well.

A New Development Setup

Previously, the theme only had a master branch, which I would do development on locally and then push changes to when I thought the changes were stable enough. That works when it’s a personal project and any bugs I didn’t check for only affected me. That’s not the case, though, so I need to be able to push development changes that may break things while making it easy for users to download a working, stable version.

The first step in this process is to have a development branch that I work on by default. This leave potentially buggy code out of master, which will serve for now as a way to easily download a working copy of the theme. New changes may find their way into master prior to a release, but they will have been tested for any breakage I know how to test for.

Then, when release announcements like this one are made, I will tag a new release through Git, which will serve as a way to find code that is not only stable, but also well-documented on this site - the documentation here will always reflect the most recent version of BluestNight. Tagging releases will also force me to not go so long without making a new release.

Server Changes

Some of the backend development setup has changed as well. BluestNight, along with my other projects, are hosted on Phabricator Gitea at https://git.shadow53.com. This includes code as well as issue tracking. Open issues have been migrated over, but closed issues remain only on GitLab. The code on Phabricator is automatically mirrored to GitLab, so you will not need to change anything in your Git repositories to receive updates.

Highlighted Changes

Below you can find a list of the large-ticket changes in BluestNight.

Inlined/Asynchronous CSS

Web browsers have only recently gained the ability to asynchronously load CSS files like they can JavaScript files. BluestNight leverages loadCSS by Filament Group, Inc. to ensure this behavior works in all major browsers to help the page load quicker through the combination of inlining important CSS styles and putting the rest in an asynchronously loaded CSS file, loaded with the help of the aforementioned polyfill.

Favicons are something that most people don’t really pay attention to, yet lend an edge of professionalism and recognizability over sites that don’t have them. BluestNight now supports all kinds of favicons, including icons specifically for mobile users to pin pages to their home screens. You can find more in the favicon documentation.

Multilingual Support

BluestNight has finally implemented basic multilingual support, but only for the English language. If you can help translate BluestNight to other languages, please let me know. You can find internationalized strings in themes/BluestNight/i18n/en.toml. Also, if you find any strings that haven’t been internationalized in the theme, let me know about that too.

Development Mode

Hugo 0.38 added a .Site.IsServer flag to detect when the site has been built with hugo server for testing purposes. BluestNight uses this flag to disable certain features you only want enabled on the released website. Currently, this only includes analytics by Matomo.

Different Handwriting Fonts

A longstanding problem in web development is that certain fonts will look wildly different in size across browsers - a size 12pt font in Firefox may look more like size 20pt in Chrome, for instance. Some of the handwriting fonts included in the theme had this problem, so they have been removed and new, more consistent fonts have taken their place. You can find them with demos on the handwriting shortcode docs

These fonts still have some size difference between browsers, but stayed within what I thought to be an acceptable range. Still, keep in mind that font sizes may change slightly between browsers.

Generate Netlify _headers files

Hugo 0.38 also added the ability for themes to define default configurations that can be overwritten by the site. One of the uses for this is to define custom output formats, such as “NetlifyHeaders” to generate a _headers file for Netlify.

This generated file is only really good for setting up a Content Security Policy for your site, but will dynamically determine which built-in components are being used by your site and will enable script and style sources for those only, while blocking other sources.

Modularized Sidebar Widgets

If you are updating from a previous version of BluestNight, your sidebar configuration will no longer work. You will need to update your configuration for the new sidebar.

The sidebar in BluestNight has been completely overhauled. Sidebar widgets are now enabled and put in order at the same time, by putting their names into an array in your site’s configuration file, in the order you want them to appear in.

All extra parameters for sidebar widgets are now found nested within the general sidebar configuration, rather than elsewhere. This helps keep configuration options in the same area.

This modularization makes it possible for site owners and developers to create custom sidebar widgets for their sites that integrate nicely with the overall theme. Each sidebar widget can specify partials containing code for loading CSS and/or JavaScript necessary for its use. It can also specify whether it is safe to cache the widget’s partial itself, i.e. if the generated code ever changes between pages.

Documentation for creating sidebar widgets that fit with the rest of the theme has not been created yet but will come later. For now, site developers can reference the widgets built into the theme for how to create their own.

Modularized Shortcodes

This same modularization has been applied to shortcodes as well, so if custom shortcodes require a special script or CSS to be applied, they can be applied with the rest of the scripts and styles in the theme instead of being added in the middle of your content.

A Mistake And A New Sidebar Widget

During the course of developing this release, I tested an opt-in cryptocurrency miner as a sidebar widget. Specifically, it was the authenticated CoinHive miner found here, which would not run without users allowing it. The miner was intended as a method for users to passively support websites without advertisements that track their activity across the internet.

The feedback I received from this testing was less than I had hoped, with users complaining about being prompted, blocking the miner with their adblocker, and even one user concerned that my site had been hacked.

This response, combined with the slow hash rates in general - hashing was disabled on mobile devices to prevent battery drain and was kept low on desktop devices to prevent CPU lag - made the inclusion of the widget not worth the effort, so it was removed.

In its place is a new, more generic “Support” widget, which has buttons that users can click or tap to find ways to support a site. This includes links to Patreon and Liberapay, as well as the ability to copy a Monero wallet address and upcoming support for credit card donations via Stripe. Stripe integration will require a backend api server as well, which is yet to be written.

New Shortcode

As part of updating the documentation with the latest changes, as well as including configuration examples for the different configuration formats, a new set of shortcodes had to be created: the tabgroup.

The tabgroup is exactly what it sounds like: a set of buttons, each with related content, that can be switched between by clicking the buttons. You can find examples on nearly any page in the documentation.

Upcoming Plans

Following this release will be work on other, related projects. The first will be a basic form handling server, with multiple handlers and multiple configurations based on which “path” the form gets submitted to. The first handler to be implemented will be emails, followed by Phabricator support (for submitting issues), as those are the two main features I need. Then will come database support with a login system for viewing submissions on the different forms and removing them from the database.

Each handler will have templates that can be specified to organize the information submitted in the form or specify options for a particular API.

After the first release of that will come the Stripe integration server. That will be more work because it will require an API that can be called from the web page as well as a way to be notified about payments, give refunds, and allow users to modify their subscriptions if they chose a recurring amount.

Changelog

  • 7145e6db - Load the “light” syntax highlighting theme on pages with light background
  • dcbb2d5d - Fix centering on mobile
  • 6d8955b9 - Fix issue where a paragraph inside a list had a newline between number/bullet and paragraph
  • 98f04a96 - Disable unused font files
  • ccc413e6 - Inline important CSS
  • bf217a7e - Make main CSS file load asynchronously
  • a61f8ffb - Add better favicon support
  • cac0cd4a - Update to Font Awesome 5 and improve accessibility (most accessibility had to do with Font Awesome anyways)
  • f33dfdbf - Social icon improvements and more icons
  • aad3a013 - Remove transition animations
  • f40c09cb - Improved footer centering
  • 57122d7a - Make post metadata icons line up better
  • a7df658d - Add inlined CSS partial
  • 12de3cd5 - Fix site title not centering without a thumbnail image
  • 29f81681 - Add attribution and shuffle footer contents to accomodate
  • f6e27e96 - Add option for reCaptcha on Netlify forms
  • 8549718d - Support internationalization/multilingual sites
  • 0213825e - Fix Safari styling of search bar
  • 32a87b7a - Check if in “development mode” before enabling analytics; also separated code from _default/baseof.html to partials for easier organization
  • cdbe66c6 - Generate Netlify _headers file
  • b8e82d51 - Add theme default configuration options
  • 8cdf2dc7 - Manually namespaced sidebar configuration in theme’s config.toml
  • f6d12108 - Fixed setting transparency values with partial
  • 3b819190 - Added CoinHive support (removed)
  • b35815c3 - Fix Netlify headers not allowing Iubenda through
  • 84e71645 - Refactor sidebar handling and enable widget js/css
  • 77455ac3 - Fix nil panic when processing member social icons
  • c45c7c0c - CSS improvements, merged similar CSS partials
  • c26bd2d5 - Update CoinHive widget for users blocking CoinHive (removed)
  • c77bb939 - Update files with new domains: bluestnight.shadow53.com -> bluestnight.com
  • 5cf4fc55 - Update remind shortcode to include file name
  • b73e4a61 - Remove CoinHive
  • d6a2a49e - Social icons: Use empty attrs if none provided
  • 6226d7b2 - Remove last traces of CoinHive
  • 8a1a7cdc - Detect empty sidebar, prompt user to disable
  • a3d4557a - Make social buttons look like social links
  • 46bec2e7 - Add a general support widget for the sidebar
  • b130ab99 - Separate widget’s inlined CSS and CSS in files
  • 5c6e1ea7 - Fix searching with new sidebar
  • fe09d111 - Finish removing references to Params.widgets
  • d662de1c - Fix sidebar position and show/hide
  • 4e465857 - Modularize shortcodes for better integration
  • 22fd6fa4 - Add tabgroup shortcode
  • 219b0192 - Fix alert border being colored on print preview
  • 872755c9 - Bump minimum required Hugo version
  • ab381e2e - Switch out handwriting fonts for more consistent ones
  • b16b267a - Update CSS reset
  • 47993a97 - Fix spacing under figures
  • fbe2c95d - Fix navigation spacing after changing CSS reset
  • fe2c65e1 - Tweak sizing of Over The Rainbow handwriting font
  • 5827558e - Fix extra margin in alert boxes
  • 5ba9947a - Fix page-specific sidebar alignment
  • eba95da2 - Update theme.toml with new tags
  • 30b408b1 - Update README so theme site has updated info
  • 04d60f71 - Don’t wrap alert contents in paragraphs
  • 4e3cd44c - Don’t stretch background unless specified