diff --git a/Base/Article/Newsletter/NewsletterAlert.tsx b/Base/Article/Newsletter/NewsletterAlert.tsx
new file mode 100644
index 00000000..fc103d20
--- /dev/null
+++ b/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 (
+
+
+
+ Hey! You may like this{' '}
+
+ newsletter
+ {' '}
+ if you're enjoying this blog. ❤
+
+
+ ✖
+
+
+
+ );
+};
diff --git a/Base/components/MDX/MDX.tsx b/Base/components/MDX/MDX.tsx
index 304cbf4d..9bef9eb2 100644
--- a/Base/components/MDX/MDX.tsx
+++ b/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) => (
diff --git a/Base/components/SmoothRender/SmoothRender.tsx b/Base/components/SmoothRender/SmoothRender.tsx
index e769ce88..4c53f7fc 100644
--- a/Base/components/SmoothRender/SmoothRender.tsx
+++ b/Base/components/SmoothRender/SmoothRender.tsx
@@ -29,6 +29,12 @@ const SmoothRenderElement = ({ children }: SmoothRenderElementPropTypes) => {
};
export const SmoothRender = ({ children }: SmoothRenderPropTypes) =>
- children.map((child, id) => (
- {child}
- ));
+ children.map((child, id) => {
+ return child.type.name === 'NewsletterAlert' ? (
+ child
+ ) : (
+ {child}
+ );
+ // console.log({ type: child.type.name, id });
+ // return {child};
+ });
diff --git a/content/leveraging-the-idle-until-urgent-technique-to-improve-performance/en/index.mdx b/content/leveraging-the-idle-until-urgent-technique-to-improve-performance/en/index.mdx
index 31f4cf64..8962f068 100644
--- a/content/leveraging-the-idle-until-urgent-technique-to-improve-performance/en/index.mdx
+++ b/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).
+
+
---
diff --git a/package.json b/package.json
index a9c0aa90..69ab3acd 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 7fd0401f..cc6ab463 100644
--- a/yarn.lock
+++ b/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"