I’ve been wanting to make my site a bit more ‘fun’ for a while now, and thought i’d add snowfall as a starting point.
Examples used
Zach (11ty creator and so much more!) wrote a quick guide on using Snowfall.js, and I’ve adapted from that mainly., and https://nathanupchurch.com/blog/let-it-snow/ for initial inspiration (before I forgot I did most of it and Zach’s post reminded me) and the heavy lifting with the Settings check.
Added the ability to select emoji icons in metadata.json, along with spares (because the emoji keyboard in Windows’ search has been broken since 2023!)
Additions
I added the script into my assets/js folder (previously set it to passthrough the entire assets folder), and called it via weather.njk (with a include to call it in base.njk)
<!-- weather -->
<script type="module" src="/assets/js/snow-fall.js"></script>
<!-- Add snow to the page -->
<snow-fall text="{{ metadata.weatherSymbol }}"></snow-fall>
I added metadata.weatherSymbol as the object to display falling. and added
"weatherSymbol": "❄️",
"spareSymbols": "💧🐈🐩☀️☁️🍁"to metadata.json
To add
A working controller module to globally turn it off.- Automated weather detection and select the correct icon, based off season, location or in case of satire: events.
- Randomize if its more than 1 emoji listed, so we can have raining Cats and Dogs, for a laugh.
I’ll probably disable it server side end of February and forget about it again if I don’t find a way to automate it, and add client side controls.