website: add Carbon to homepage

website/docusaurus.config.js

@@ -40,7 +40,7 @@ module.exports = {
           href: '/algorithms/introduction',
         },
         {label: 'Blog', to: 'blog', position: 'left'},
-        {label: 'Advertise', to: '/advertise', position: 'left'},
+        // {label: 'Advertise', to: '/advertise', position: 'left'},
         {
           href: 'https://github.com/yangshun/tech-interview-handbook',
           position: 'right',

website/src/components/CarbonAd/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export default React.memo(() => {
+  return (
+    <div>
+      <script
+        async
+        type="text/javascript"
+        src="//cdn.carbonads.com/carbon.js?serve=CEAI4537&placement=wwwtechinterviewhandbookorg"
+        id="_carbonads_js"
+      />
+      {process.env.NODE_ENV === 'development' && (
+        <div id="carbonads">
+          <span>
+            <span className="carbon-wrap">
+              <a
+                href="https://srv.carbonads.net/ads/click/x/GTND42JWCABD6K7LCVYLYKQNCESIEKJLCKBIKZ3JCYBD527JC67DV2JKC6YDLK7WFTBDPKQJCK7IK23IFTADT23MHEYIK23UCEYDK53ECTNCYBZ52K?segment=placement:wwwtechinterviewhandbookorg;"
+                className="carbon-img"
+                target="_blank"
+                rel="noopener sponsored">
+                <img
+                  src="https://cdn4.buysellads.net/uu/1/100164/1630683824-shortcut260x200.png"
+                  alt="ads via Carbon"
+                  border="0"
+                  height="100"
+                  width="130"
+                  style={{maxWidth: 130}}
+                />
+              </a>
+              <a
+                href="https://srv.carbonads.net/ads/click/x/GTND42JWCABD6K7LCVYLYKQNCESIEKJLCKBIKZ3JCYBD527JC67DV2JKC6YDLK7WFTBDPKQJCK7IK23IFTADT23MHEYIK23UCEYDK53ECTNCYBZ52K?segment=placement:wwwtechinterviewhandbookorg;"
+                className="carbon-text"
+                target="_blank"
+                rel="noopener sponsored">
+                What if Your Project Management Tool Was Fast and Intuitive? Try
+                Shortcut (formerly Clubhouse).
+              </a>
+            </span>
+            <a
+              href="http://carbonads.net/?utm_source=wwwtechinterviewhandbookorg&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon"
+              className="carbon-poweredby"
+              target="_blank"
+              rel="noopener sponsored">
+              ads via Carbon
+            </a>
+          </span>
+        </div>
+      )}
+    </div>
+  );
+});

website/src/pages/index.js

@@ -7,6 +7,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
 import successStories from '../data/successStories';
+import CarbonAd from '../components/CarbonAd';
 
 const BLIND_75_URL =
   'https://www.teamblind.com/post/New-Year-Gift---Curated-List-of-Top-75-LeetCode-Questions-to-Save-Your-Time-OaM1orEU';
@@ -110,6 +111,7 @@ function Home() {
       description={siteConfig.tagline}>
       <HeroSection />
       <WhatIsThisSection />
+      <CarbonAdSection />
       <TweetsSection />
       <HowToUseSection />
       <AlgoMonsterSection />
@@ -210,6 +212,20 @@ function WhatIsThisSection() {
   );
 }
 
+function CarbonAdSection() {
+  return (
+    <div className={classnames('padding-vert--lg', styles.section)}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <CarbonAd />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function MoonchaserSection() {
   // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
   // we'll render this on the browser only.
@@ -281,7 +297,7 @@ function HowToUseStep({index, title, ctaLink, contents}) {
 
 function HowToUseSection() {
   return (
-    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
+    <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
       <div className="container">
         <div className="row">
           <div className="col col--10 col--offset-1">
@@ -505,7 +521,7 @@ function AlgoMonsterSection() {
 
 function TweetsSection() {
   return (
-    <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
+    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
       <div className="container">
         <h2
           className={classnames(
@@ -807,7 +823,7 @@ function SponsorshipSection() {
 
 function PreFooterSection() {
   return (
-    <div className={classnames('padding-vert--xl', styles.sectionAlt2)}>
+    <div className={classnames('padding-vert--xl', styles.sectionAlt)}>
       <div className="container">
         <div className="row">
           <div className="col col--4">

website/src/theme/DocItem/index.js

@@ -10,21 +10,9 @@ import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import CarbonAd from '../../components/CarbonAd';
 import SidebarAd from '../../components/SidebarAd';
 
-const CarbonAd = React.memo(() => {
-  return (
-    <div>
-      <script
-        async
-        type="text/javascript"
-        src="//cdn.carbonads.com/carbon.js?serve=CEAI4537&placement=wwwtechinterviewhandbookorg"
-        id="_carbonads_js"
-      />
-    </div>
-  );
-});
-
 export default function DocItem(props) {
   const {content: DocContent} = props;
   const {metadata, frontMatter} = DocContent;