diff --git a/build.washingtonpost.com/package.json b/build.washingtonpost.com/package.json index 14ed34535..414195de1 100644 --- a/build.washingtonpost.com/package.json +++ b/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", diff --git a/build.washingtonpost.com/pages/_app.js b/build.washingtonpost.com/pages/_app.js index 034564bbd..e5d45cd87 100644 --- a/build.washingtonpost.com/pages/_app.js +++ b/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 ( + + ); +}; + const globalTextStyles = globalCss({ body: { color: "$accessible", @@ -87,6 +130,7 @@ function App({ Component, pageProps }) { return ( <> + { .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)) diff --git a/package-lock.json b/package-lock.json index 8f145f9ef..cbe719d92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -712,6 +712,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", @@ -42600,6 +42601,18 @@ "throttle-debounce": "^3.0.1" } }, + "node_modules/react-snowfall": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-1.2.1.tgz", + "integrity": "sha512-d2UR3nDq3F0DJGaTfJ0QNbBo76UZHtT9wHFj+ePxAl4FgSxWBhxB/Bjn06f5iDBwhgwiZ7CZmv3lwfNvjo6a+w==", + "dependencies": { + "react-fast-compare": "^3.2.0" + }, + "peerDependencies": { + "react": "^16.8 || 17.x || 18.x", + "react-dom": "^16.8 || 17.x || 18.x" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "license": "MIT",