From 9319fa0c8685ce4db85ec1af4d0419b263e2ec92 Mon Sep 17 00:00:00 2001 From: Paul Scanlon Date: Fri, 3 Dec 2021 09:32:37 -0500 Subject: [PATCH] feat: season-plugin-option, solves #2 (#11) * feat: add season start and end * feat: add pluginOptionsSchema for season * chore: update README with time included in date string * chore: blast - add seconds to end time string * chore: test max time in seconds * chore: add date-fns package * docs: update readme * fix: better defaults * feat: only do snow when in season * chore: full config of plugin in demo * chore: only rely on schema defaults * fix: catch all possible season errors Co-authored-by: Benedicte Raae --- README.md | 25 ++++++++++++++++++++-- demo/gatsby-config.js | 13 +++++++++++- plugin/gatsby-browser.js | 45 +++++++++++++++++++++++++++++++++++++--- plugin/gatsby-node.js | 14 ++++++++++++- plugin/package.json | 5 +++-- yarn.lock | 5 +++++ 6 files changed, 98 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 213ccbc..f11da98 100755 --- a/README.md +++ b/README.md @@ -26,9 +26,11 @@ module.exports = { } ``` -## Options +## Plugin Options -You can pass an array of colors to use via the plugin options +### Colors + +You can pass an array of colors to use via the plugin options. ``` { @@ -39,6 +41,8 @@ You can pass an array of colors to use via the plugin options }, ``` +### Intensity + You can choose the intensity of the snow. Accepted values in increasing intensity: "light", "regular" and "blizzard". Default value if non given: "regular" @@ -52,6 +56,23 @@ Default value if non given: "regular" }, ``` +### Season + +You can pass a `start` and `end` date to determine when the snow will start and end. +Note: Year will be ignored, and snow will fall each year within the configured season. + +``` + { + resolve: "@raae/gatsby-plugin-let-it-snow", + options: { + season: { + start: new Date("December 1, 2021 00:00:10"), + end: new Date("December 31, 2021 23:59:50"), + }, + }, + }, +``` + ## Powered by Canvas Confetti 🎉 Under the hood this plugin uses the amazing [Canvas Confetti](https://github.com/catdad/canvas-confetti) by [@kirilv](https://twitter.com/kirilv). diff --git a/demo/gatsby-config.js b/demo/gatsby-config.js index 151b2b3..bbc25d8 100755 --- a/demo/gatsby-config.js +++ b/demo/gatsby-config.js @@ -1,3 +1,14 @@ module.exports = { - plugins: ["@raae/gatsby-plugin-let-it-snow"], + plugins: [ + { + resolve: "@raae/gatsby-plugin-let-it-snow", + options: { + colors: ["#fff", "#ffb6c1"], + season: { + start: new Date("December 2, 2023"), + end: new Date("January 11, 2024"), + }, + }, + }, + ], }; diff --git a/plugin/gatsby-browser.js b/plugin/gatsby-browser.js index b3a5723..5692c6c 100644 --- a/plugin/gatsby-browser.js +++ b/plugin/gatsby-browser.js @@ -1,12 +1,51 @@ // https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/ import confetti from "canvas-confetti"; +import { + addYears, + getYear, + setYear, + isBefore, + isWithinInterval, + parseISO, +} from "date-fns"; + +const isSeason = ({ start, end }) => { + try { + const currentDate = new Date(); + const currentYear = getYear(currentDate); + + // Ignore year from config dates + const startDate = setYear(parseISO(start), currentYear); + let endDate = setYear(parseISO(end), currentYear); + + if (isBefore(endDate, startDate)) { + endDate = addYears(endDate, 1); + } + + return isWithinInterval(currentDate, { + start: startDate, + end: endDate, + }); + } catch (error) { + console.warn( + "Problem with @raae/gatsby-plugin-let-it-snow season configuration:", + error.message + ); + return false; + } +}; export const onInitialClientRender = (_, options) => { - const { colors = ["#ffffff"], intensity } = options; + const { colors, intensity, season } = options; + + if (!isSeason(season)) { + return; + } + const now = Date.now(); const duration = 15 * 1000; - const animationEnd = Date.now() + duration; + const animationEnd = now + duration; let skew = 1; function randomInRange(min, max) { @@ -14,7 +53,7 @@ export const onInitialClientRender = (_, options) => { } const frame = () => { - const timeLeft = animationEnd - Date.now(); + const timeLeft = animationEnd - now; const ticks = Math.max(200, 500 * (timeLeft / duration)); skew = Math.max(0.8, skew - 0.001); diff --git a/plugin/gatsby-node.js b/plugin/gatsby-node.js index 020c6a7..708196d 100644 --- a/plugin/gatsby-node.js +++ b/plugin/gatsby-node.js @@ -2,10 +2,22 @@ exports.pluginOptionsSchema = ({ Joi }) => { return Joi.object({ colors: Joi.array() - .items(Joi.string().default("#ffffff")) + .items(Joi.string()) + .min(1) + .default(["#fff"]) .description("Array of hex color values"), intensity: Joi.string() .valid("regular", "light", "blizzard") .default("regular"), + season: Joi.object() + .keys({ + start: Joi.date().required(), + end: Joi.date().required(), + }) + .default({ + start: new Date("December 1"), + end: new Date("January 4"), + }) + .description("Start and end date for when snow should be activated"), }); }; diff --git a/plugin/package.json b/plugin/package.json index f3d967a..e3aad24 100755 --- a/plugin/package.json +++ b/plugin/package.json @@ -21,9 +21,10 @@ "gatsby-plugin" ], "dependencies": { - "canvas-confetti": "1.4.0" + "canvas-confetti": "1.4.0", + "date-fns": "2.27.0" }, "peerDependencies": { - "gatsby": "^3.0.0 || ^4.0.0" + "gatsby": "^2.4.0 || ^3.0.0 || ^4.0.0" } } diff --git a/yarn.lock b/yarn.lock index 265a146..9570067 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4086,6 +4086,11 @@ dataloader@2.0.0: resolved "https://registry.yarnpkg.com/dataloader/-/dataloader-2.0.0.tgz#41eaf123db115987e21ca93c005cd7753c55fe6f" integrity sha512-YzhyDAwA4TaQIhM5go+vCLmU0UikghC/t9DTQYZR2M/UvZ1MdOhPezSDZcjj9uqQJOMqjLcpWtyW2iNINdlatQ== +date-fns@2.27.0: + version "2.27.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b" + integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q== + date-fns@^2.25.0: version "2.25.0" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"