feat: add snowfall to website for fun (#550)

build.washingtonpost.com/package.json

@@ -43,6 +43,7 @@
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.41.0",
     "react-phone-number-input": "^3.2.13",
+    "react-snowfall": "^1.2.1",
     "react-svg": "^15.0.4",
     "react-toastify": "^8.2.0",
     "remark-gfm": "^3.0.1",

build.washingtonpost.com/pages/_app.js

@@ -17,6 +17,49 @@ import SEO from "../next-seo.config";
 import "@washingtonpost/wpds-tokens/dist/styles.css";
 import "../public/global.css";
 
+import Snowfall from "react-snowfall";
+
+const WinterWonderland = () => {
+  // client side check for christmas, off by default
+  const [showSnow, setShowSnow] = React.useState(false);
+
+  React.useEffect(() => {
+    // only run on client
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    // check if it's after christmas
+    const today = new Date();
+    const christmas = new Date(today.getFullYear(), 11, 25);
+    if (today.getMonth() === 11 && today.getDate() > 25) {
+      christmas.setFullYear(christmas.getFullYear() + 1);
+    }
+
+    // if it's after christmas, don't show snow
+    if (today > christmas) {
+      return;
+    }
+
+    // if it's before christmas, show snow
+    setShowSnow(true);
+  }, []);
+
+  if (!showSnow) {
+    return null;
+  }
+
+  return (
+    <Snowfall
+      style={{
+        position: "fixed",
+        width: "100vw",
+        height: "100vh",
+      }}
+    />
+  );
+};
+
 const globalTextStyles = globalCss({
   body: {
     color: "$accessible",
@@ -87,6 +130,7 @@ function App({ Component, pageProps }) {
 
   return (
     <>
+      <WinterWonderland />
       <DefaultSeo {...SEO} />
       <ThemeProvider
         attribute="class"

build.washingtonpost.com/services/getContributors.js

@@ -55,12 +55,12 @@ export const getContributors = async () => {
       .concat({
         name: "baconjulie",
         avatar: "https://avatars.githubusercontent.com/u/5865863?v=4",
-        url: "https://github.com/baconjulie"
+        url: "https://github.com/baconjulie",
       })
       .concat({
         name: "erikreyna",
         avatar: "https://avatars.githubusercontent.com/u/2431045?v=4",
-        url: "https://github.com/erikreyna"
+        url: "https://github.com/erikreyna",
       })
       // sort alphabetically
       .sort((a, b) => (a.name > b.name ? 1 : -1))