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!