Osprey Delight v5

Launching v5 - Modular Manta

v5 of the theme goes by the nickname 'Modular Manta', since it packs many improvements that might not be that obvious on first sight by integrating Hugo Mods. I've started this project a few months ago to make website building with Hugo even more easy and modular. The goal is to have a high-quality selection of community-maintained Hugo modules for popular use-cases such as icon embedding, lazy image loading, static on-page discussions and more.

Behind the scenes: To create the modules, many parts of the theme's v4 version have been extracted and generalized, tested and then embedded into the theme again. This way everyone can profit even from a subset of the theme's functionality, with a great support for customization. 🚀

Changelog in commits: v4..v5
Changelog in plain english ⬇️

Improvements

• Hugo Modules:
  • Switch from Fontello icon font to SVG icon system using hugo-mods/icons
  • Use hugo-mods/lazyimg for improved imaging support
  • Add hugo-mods/release-notify module to get a notification for every minor/major version
• Visual:
  • Improve various screen size support for background image
  • Make button icons color transition compatible and ease the transition
• Improve theming capabilities:
  • Use dedicated bundle folder for each theme, allowing to supply colors, fontface, fontsizing and custom SCSS for each theme
  • Fallback to default if respective theme-specific file is not found
  • Theme-specific _custom.scss (under sass/themes) is loaded before more generic _custom.scss (under sass)
  • Add new dedark theme which is a word-playing ancestor of the default delight theme
  • Add new origin theme which is a revival of the original Osprey theme - with the same colors, text alignment and fonts
• Improve termynal integration and usage, extract to shortcode
• Docs:
  • Explain additional customization possibilities such as custom section, theming and advanced module configuration
  • Extend exampleSite to reflect all new configuration options and features
  • Improve image sizing recommendations
  • Add and explain new config options in example config.yaml
  • Improve consistency
• Add Oxanium and Rubik fonts locally in static folder

Bugs fixed

• Visual:
  • Remove distortion when image exceeds container width
  • Make images in regular content files responsive by changing default height to auto
  • When using the GitHub project gallery entry feature: Emojify GitHub project descriptions
• Remove obsolete visit GitHub link shortcode
• Fix nil pointer when no social icons are configured
• Remove old formspree URL from contact form
• Cleanup, remove unused files and fix some typos
• Repair custom section rendering

Breaking changes

• The theme should now be installed as a Hugo module, please follow the Quickstart instructions
• New icon mechanism potentially requires user intervention, see here
• Images that are referenced by the theme must be moved from static to assets for the lazyimg module to resolve them correctly
• Theming and color maps have been changed

See migration steps for more information.

Special thanks

This release has been sponsored by @gutzbenj who runs earthobservations with his friends, a GitHub organization dedicated to ease access to open weather data. Thanks! ❤️

Become a sponsor too - and support my open source projects!

Osprey Delight v4

Launching Osprey Delight v4. 🚀

I'm proud to announce v4, Osprey Delight's largest update to date. It's huge.

First of all, I've made the theme asset-driven. Well, what does asset-driven mean at all?
Instead of using the static/ directory, you simply use the assets/ directory. Therewith, the theme is able to use Hugo Pipes to process the images accordingly to create a best fitting version including responsive sizes if enabled, render a Low Quality Image Placeholder (LQIP) and retrieve width and height to prevent any content layout shifts. All in for the smoothest user experience! This is an awesome user-friendly approach to enable high-quality images without manually resizing them, and I've not seen it to this extinct in any other theme.

Next up is background image support. You can now use the background Param to reference a background image in the asset folder that is displayed in near-instant time due to some clever tricks with a low-quality placeholder that is placed underneath the actual high-quality image that is still loading.

That's not all. Under the hood, I set the course for theming support by extracting the relevant parts and refactored the colors to a color-scheme instead of hardwired color name variables and making it fun to exchange fonts. I rewrote nearly every template, JS and SCSS, optimized every bit and made tests; be it UX tests, performance tests or PageSpeed Insight tests for SEO lessons.

Finally, I even teamed up with the great Indie Musician Protonaut (@protonautmusic), who now has an awesome homepage powered by Osprey Delight v4. Go check it out!

Below is a more or less complete changelog derived from commit history. ⬇️
Please note the breaking changes if you upgrade. It's a bit of work to migrate, but can be done in less than 5 minutes, and it's totally worth it!

Improvements

• Now featuring an asset-driven approach via Hugo pipes
  • Auto-resize any image on page
  • Gets height and width of images to prevent CLS for smooth UX
  • Renders LQIPs automatically, inline them if appropriate
  • Add animations to blur-up LQIP
  • All these options are configurable with sensible defaults
• Rewrite and refactor all templates
• Add lazy background option to allow optional background on homescreen
• Completely rewrite JS with more than 40% size reduction, ensure ES2015 compatibility
  • Use rAF for DOM changes in scroll event for improved smoothness
  • Refactor and clean up, improve consistency
  • UX: use history API for proper gallery history support
  • Enhance minification via js.Build (ESBuild) instead of plain minify
• Clean-up and improve SCSS
  • Remove redundant rules
  • Strip flexbox grid for used classes only, resulting in more than 30% SCSS size reduction
  • Add color scheming and custom fontstack support
  • Add 3 color-scheme options
• Enable custom buttons config in gallery items
• Add extensible, order-independent and dynamic section loading
• Add spotify and img shortcodes to utilize lazySizes if enabled
• Improved tagline customizability: New option mdTagline introduced
• Add config option for gallery item hoverColor
• Improve structured data generation build process and added Unmarshal-validation
• Add warning if Basin URL is missing and contact form is enabled
• Implement NoScript friendly behavior: Sane fallback in case of disabled JS
• Add common SCSS tricks and adaptions in _custom.scss
• Update exampleSite, add customization doc, adapt existing docs

Bugs fixed

• Fix mobile viewport bug caused by 100vh due to browser address bar height calculations
• Fix failing Contact form in case of missing select options
• Fix missing termynal defaults
• Social links in footer can now be ordered
• Fix HTML-redirects to proper gallery (item) anchor link
• Removed not needed tags
• Fixed invalid icon usages
• Fix typos and sync i18n texts
• Update lazySizes to v5.3.2 (fixes iframe CVE and improves performance)
• Use only minimal JS needed for blog
• Remove falsely tracked _gen files
• Fix exampleSite due to deprecated IG API access by Hugo built-in shortcode

Breaking changes

⚠️ ATTENTION: Every big upgrade breaks something. Please ensure to check the exampleSite to see what has changed, below is only a very small list of config breaking changes!

• Change GitHub type handling, removed explicit gallery type github: Assume type if repo is set
• Remove .Site.Params.accentColor (use new color scheming options instead)
• Change referrer to stricter policy
• Remove useBlog, theme uses auto-detection to determine if blog is used instead
• ... many others!

Osprey Delight v3 Beta

This is the first proper release of Osprey Delight.
Additionally to all the goodies mentioned in the motivation of forking from Osprey, it delivers:

• Optional Blog feature
• Automatic image normalization/resizing when in image is found under assets/
• Better performance: Inlined JS when appropriate
• Improved documentation
• Improved footer
• Restructured source code
• Raised needed Hugo version to v0.65.0
• Stability fixes