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 <raae@raae.codes>

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).

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"),
+        },
+      },
+    },
+  ],
 };

plugin/gatsby-browser.js

@@ -1,20 +1,59 @@
 // 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) {
     return Math.random() * (max - min) + min;
   }
 
   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);
 

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"),
   });
 };

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"
   }
 }

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"