*

Base/Article/Newsletter/NewsletterAlert.tsx

@@ -0,0 +1,139 @@
+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: #e85c57;
+  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;
+      console.log({
+        height,
+        percentPageToShow,
+        currentPosition,
+      });
+
+      if (currentPosition > percentPageToHide) {
+        setAnimated(false);
+      } else if (currentPosition > percentPageToShow) {
+        setAnimated(true);
+      }
+    });
+
+    window.addEventListener('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>
+  );
+};

Base/components/MDX/MDX.tsx

@@ -3,6 +3,7 @@ import { serialize } from 'next-mdx-remote/serialize';
 import TweetEmbed from 'react-tweet-embed';
 import rehypeHighlight from 'rehype-highlight';
 
+import { NewsletterAlert } from 'Base/Article/Newsletter/NewsletterAlert';
 import { PostAndDate } from 'Base/components/PostAndDate';
 import { SideBySideImages } from 'Base/components/SideBySideImages';
 import { SideBySideVideos } from 'Base/components/SideBySideVideos';
@@ -28,6 +29,7 @@ const components = {
   TweetEmbed,
   SmoothRender,
   SideBySideVideos,
+  NewsletterAlert,
 };
 
 export const MDX = ({ content }: MDXPropTypes) => (

Base/components/SmoothRender/SmoothRender.tsx

@@ -29,6 +29,12 @@ const SmoothRenderElement = ({ children }: SmoothRenderElementPropTypes) => {
 };
 
 export const SmoothRender = ({ children }: SmoothRenderPropTypes) =>
-  children.map((child, id) => (
-    <SmoothRenderElement key={id}>{child}</SmoothRenderElement>
-  ));
+  children.map((child, id) => {
+    return child.type.name === 'NewsletterAlert' ? (
+      child
+    ) : (
+      <SmoothRenderElement key={id}>{child}</SmoothRenderElement>
+    );
+    // console.log({ type: child.type.name, id });
+    // return <SmoothRenderElement key={id}>{child}</SmoothRenderElement>;
+  });

content/leveraging-the-idle-until-urgent-technique-to-improve-performance/en/index.mdx

@@ -322,6 +322,8 @@ The code is a TypeScript version of the [idlize](https://github.com/GoogleChrome
 
 I have some resources I used along the way while doing this project. I hope it can be helpful to you too: [Web Performance Research](https://github.com/imteekay/web-performance-research).
 
+<NewsletterAlert />
+
 ---
 
 </SmoothRender>

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"