Merge pull request #247 from imteekay/newsletter-alert

Newsletter Alert for Articles

Base/Article/Layout/Layout.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import { NewsletterAlert } from '../Newsletter/NewsletterAlert';
+
 import { CoverImage } from 'Base/Article/CoverImage';
 import { HomeLink } from 'Base/Article/HomeLink';
 import { Footer } from 'Base/Article/Layout/Footer';
@@ -67,6 +69,7 @@ export const Layout: FC<LayoutPropTypes> = ({
           )}
 
           {children}
+          <NewsletterAlert />
           {showSocialLinks && <SocialLinks />}
         </article>
         <Footer tags={tags} />

Base/Article/Newsletter/NewsletterAlert.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+
+import styled from '@emotion/styled';
+import debounce from 'debounce';
+
+const NewsletterAlertContainer = styled.div`
+  position: fixed;
+  bottom: 120px;
+  right: 130px;
+  width: 300px;
+  font-size: 12px;
+  line-height: 1.5em;
+  background-color: #40a578;
+  color: white;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  padding: 10px;
+  border-radius: 6px;
+  user-select: none;
+
+  transform: translateX(500px);
+  transition: transform 1.2s;
+  transition-timing-function: linear(
+    0,
+    0.035 2.1%,
+    0.281 6.7%,
+    0.723 12.9%,
+    0.938 16.7%,
+    0.977 51%,
+    0.974 53.8%,
+    0.975 57.1%,
+    0.997 69.8%,
+    1
+  );
+
+  &.animated {
+    transform: translateX(0) rotate(-5deg);
+    transition-timing-function: linear(
+      0,
+      0.009,
+      0.035 2.1%,
+      0.141,
+      0.281 6.7%,
+      0.723 12.9%,
+      0.938 16.7%,
+      1.017,
+      1.077,
+      1.121,
+      1.149 24.3%,
+      1.159,
+      1.163,
+      1.161,
+      1.154 29.9%,
+      1.129 32.8%,
+      1.051 39.6%,
+      1.017 43.1%,
+      0.991,
+      0.977 51%,
+      0.974 53.8%,
+      0.975 57.1%,
+      0.997 69.8%,
+      1.003 76.9%,
+      1.004 83.8%,
+      1
+    );
+  }
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;
+
+const NewsletterAlertBox = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ContentHolder = styled.div`
+  padding-right: 8px;
+`;
+
+const CloseButton = styled.a`
+  padding: 6px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+`;
+
+export const NewsletterAlert = () => {
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    const onScroll = debounce(() => {
+      const currentPosition = document.documentElement.scrollTop;
+      const height = document.body.scrollHeight;
+      const percentPageToShow = height * 0.65;
+      const percentPageToHide = height * 0.85;
+
+      if (currentPosition > percentPageToHide) {
+        setAnimated(false);
+      } else if (
+        !window.localStorage.getItem('newsletterAlertShown') &&
+        currentPosition > percentPageToShow
+      ) {
+        setAnimated(true);
+        window.localStorage.setItem('newsletterAlertShown', 'true');
+      }
+    });
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  const closeAlert = () => {
+    setAnimated(false);
+  };
+
+  return (
+    <NewsletterAlertContainer id="test" className={animated ? 'animated' : ''}>
+      <NewsletterAlertBox>
+        <ContentHolder>
+          Hey! You may like this{' '}
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://teekay.substack.com"
+            onClick={closeAlert}
+          >
+            <b>newsletter</b>
+          </a>{' '}
+          if you&apos;re enjoying this blog. ❤
+        </ContentHolder>
+        <CloseButton role="button" onClick={closeAlert}>
+          ✖
+        </CloseButton>
+      </NewsletterAlertBox>
+    </NewsletterAlertContainer>
+  );
+};

package.json

@@ -26,6 +26,7 @@
     "@loadable/component": "^5.15.2",
     "@mui/material": "^5.3.1",
     "@octokit/core": "^4.0.5",
+    "debounce": "^2.1.0",
     "framer-motion": "^10.12.16",
     "highlight.js": "^11.3.1",
     "kbar": "^0.1.0-beta.23",

yarn.lock

@@ -1967,6 +1967,11 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.6.tgz#2e79a226314ec3ec904e3ee1dd5a4f5e5b1c7afb"
   integrity sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==
 
+debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-2.1.0.tgz#eab25eaf254b848fcfccffbde75bdaa44842caa3"
+  integrity sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"