feat: Add home page lead window for 200 contributors blogs

website/src/css/customTheme.css

@@ -30,7 +30,7 @@
   --color-downloads-dropdown-items: #f3f4f6;
 }
 
-html[data-theme='dark'] {
+html[data-theme="dark"] {
   --color-secondary-bg: #121212;
   --ifm-color-dark: #b0b0b0;
   --color-title: #f0f0f0;
@@ -324,7 +324,7 @@ header h2 {
   font-size: 2.2rem;
   margin-bottom: 10px;
 }
-.learn-how .hero__subtitle{
+.learn-how .hero__subtitle {
   color: var(--color-secondary-text);
 }
 
@@ -569,7 +569,7 @@ a:hover {
   height: 24px;
 }
 
-.team-githubLogo{
+.team-githubLogo {
   height: 24px;
 }
 
@@ -627,7 +627,7 @@ a:hover {
 }
 
 .downloads-versioninfo-span {
-  color: var(--color-downloads-rightside-versioninfo-span)
+  color: var(--color-downloads-rightside-versioninfo-span);
 }
 
 .downloads-dropdown {
@@ -639,7 +639,7 @@ a:hover {
 }
 
 .team-repocard {
-  color: var(--color-team-repocard)
+  color: var(--color-team-repocard);
 }
 
 .team-repocard:hover {
@@ -657,3 +657,48 @@ a:hover {
 .help-page .card p {
   color: var(--color-help-subtitle);
 }
+
+.pic-wrapper {
+  width: 440px;
+  position: fixed;
+  display: flex;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  outline: 0;
+  overflow: auto;
+  border: 0;
+  box-shadow: 0 0 20px -12px #626365;
+}
+
+.pic-wrapper a {
+  display: flex;
+}
+
+.pic-wrapper-close {
+  position: absolute;
+  z-index: 1000;
+  top: 10px;
+  right: 25px;
+  font-weight: 900;
+  color: rgb(135, 151, 172);
+  font-size: 16px;
+  outline: none;
+  border: 1px solid transparent;
+}
+
+.pic-wrapper-close:hover {
+  cursor: pointer;
+}
+
+.pic-wrapper-close svg {
+  width: 10px;
+  height: 15px;
+  display: inherit;
+}
+
+@media only screen and (max-width: 440px) {
+  .pic-wrapper {
+    width: 100%;
+  }
+}

website/src/pages/index.js

@@ -120,7 +120,7 @@ const Showcase = () => {
   }
   const showcases = siteConfig.customFields.showcases.map((user) => (
     <a href={user.infoLink} key={user.infoLink} target="_blank">
-      <img className="user-logo" src={'https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/static/img/' +  user.image} alt={user.caption} />
+      <img className="user-logo" src={'https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/static/img/' + user.image} alt={user.caption} />
     </a>
   ));
   const middleIndex = (showcases.length / 2).toFixed(0);
@@ -216,12 +216,12 @@ const ContributionSection = () => {
         <p>Find a good first issue to get you started !</p>
       </div>
       <div className="contribution-link">
-             <Link
-              to="/docs/general/contributor-guide#good-first-issues"
-             >
-              <GitHubLogo className="contribution-logo" />
-              Good First Issues
-            </Link>
+        <Link
+          to="/docs/general/contributor-guide#good-first-issues"
+        >
+          <GitHubLogo className="contribution-logo" />
+          Good First Issues
+        </Link>
       </div>
     </div>
   );
@@ -233,20 +233,20 @@ const NewsletterSection = () => {
     <div className="newsletter">
       <div className="center-elem news-logo">
         <svg className="news-logo-svg" width="185" height="156" viewBox="0 0 185 156" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#F8423F"/>
-        <path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)"/>
-        <path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)"/>
-        <defs>
-        <linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
-        <stop offset="0.536111" stopColor="#FC0A04"/>
-        <stop offset="1" stopColor="#CF0500" stopOpacity="0.77"/>
-        </linearGradient>
-        <linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
-        <stop offset="0.473466" stopColor="#E2423E"/>
-        <stop offset="1" stopColor="#E2423E" stopOpacity="0.77"/>
-        </linearGradient>
-        </defs>
-      </svg>
+          <path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#F8423F" />
+          <path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)" />
+          <path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)" />
+          <defs>
+            <linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
+              <stop offset="0.536111" stopColor="#FC0A04" />
+              <stop offset="1" stopColor="#CF0500" stopOpacity="0.77" />
+            </linearGradient>
+            <linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
+              <stop offset="0.473466" stopColor="#E2423E" />
+              <stop offset="1" stopColor="#E2423E" stopOpacity="0.77" />
+            </linearGradient>
+          </defs>
+        </svg>
       </div>
       <div className="center-elem news-text">
         <h2>Stay up to date about all Apache APISIX™ News</h2>
@@ -258,6 +258,44 @@ const NewsletterSection = () => {
   );
 };
 
+const Contributor200Poster = () => {
+  const [display, setDisplay] = useState(true);
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    addEventListener('click', () => {
+      if (localStorage.getItem('theme') !== theme) {
+        setTheme(localStorage.getItem('theme'));
+      };
+    });
+  }, [theme]);
+
+  if (!display || (typeof window !== 'undefined' && localStorage.getItem('SHOW_200_CONTRIBUTOR_EVENT_ENTRY'))) {
+    return null;
+  }
+
+  const onClose = () => {
+    setDisplay(false);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('SHOW_200_CONTRIBUTOR_EVENT_ENTRY', 'true');
+    }
+  };
+
+  return (
+    <div className="pic-wrapper">
+      <button className="pic-wrapper-close" onClick={onClose}>
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" className="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
+          <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
+        </svg>
+      </button>
+      <a href="/blog/2021/07/06/celebrate-200-contributors" onClick={onClose}>
+        {theme === "light" && <img src="/img/200_mark_light.jpg" alt="" />}
+        {theme === "dark" && <img src="/img/200_mark_dark.jpg" alt="" />}
+      </a>
+    </div>
+  )
+}
+
 const Index = (props) => {
   return (
     <Layout>
@@ -267,6 +305,7 @@ const Index = (props) => {
       <Showcase />
       <ContributionSection />
       <NewsletterSection />
+      <Contributor200Poster />
     </Layout>
   );
 };