website: remove CarbonAds

website/src/components/CarbonAd/index.js

@@ -1,48 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-
-// Credits: https://github.com/tannerlinsley/react-query/blob/master/docs/src/components/CarbonAds.js
-function buildScript(src, attrs = {}) {
-  if (typeof document !== 'undefined') {
-    const script = document.createElement('script');
-    script.async = true;
-    script.defer = true;
-    script.src = src;
-    Object.keys(attrs).forEach((attr) =>
-      script.setAttribute(attr, attrs[attr]),
-    );
-
-    return script;
-  }
-}
-
-export default React.memo(() => {
-  const ref = useRef();
-
-  useEffect(() => {
-    const script = buildScript(
-      '//cdn.carbonads.com/carbon.js?serve=CEAI4537&placement=wwwtechinterviewhandbookorg',
-      {
-        type: 'text/javascript',
-        id: '_carbonads_js',
-      },
-    );
-
-    ref.current.appendChild(script);
-  }, []);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      [...ref.current.children].forEach((child) => {
-        if (child && child.id && child.id.startsWith('carbonads_')) {
-          ref.current.removeChild(child);
-        }
-      });
-    }, 100);
-
-    return () => {
-      clearInterval(interval);
-    };
-  });
-
-  return <div ref={ref} />;
-});

website/src/css/custom.css

@@ -164,70 +164,3 @@ html[data-theme='dark'] .navbar-icon-telegram:before {
   width: 24px;
 }
 
-#carbonads * {
-  margin: initial;
-  padding: initial;
-}
-#carbonads {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
-    sans-serif;
-  display: flex;
-  background-color: hsl(0, 0%, 98%);
-  box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
-  z-index: 100;
-  margin: 1rem auto;
-}
-html[data-theme='dark'] #carbonads {
-  background-color: hsl(0, 0%, 15%);
-  box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085), 0 0 2px hsl(0deg 0% 0% / 0.085),
-    0 0 4px hsl(0deg 0% 0% / 0.085), 0 0 8px hsl(0deg 0% 0% / 0.085);
-}
-#carbonads a {
-  color: inherit;
-  text-decoration: none;
-}
-#carbonads a:hover {
-  color: inherit;
-}
-#carbonads span {
-  position: relative;
-  display: block;
-  overflow: hidden;
-}
-#carbonads .carbon-wrap {
-  display: flex;
-}
-#carbonads .carbon-img {
-  display: block;
-  margin: 0;
-  line-height: 1;
-}
-#carbonads .carbon-img img {
-  display: block;
-}
-#carbonads .carbon-text {
-  font-size: 13px;
-  padding: 10px;
-  margin-bottom: 16px;
-  line-height: 1.5;
-  text-align: left;
-}
-#carbonads .carbon-poweredby {
-  display: block;
-  padding: 6px 8px;
-  background: #f1f1f2;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-  font-size: 8px;
-  line-height: 1;
-  border-top-left-radius: 3px;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-html[data-theme='dark'] #carbonads .carbon-poweredby {
-  background: #1e2021;
-}

website/src/pages/index.js

@@ -8,7 +8,6 @@ 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';
@@ -112,7 +111,6 @@ function Home() {
       description={siteConfig.tagline}>
       <HeroSection />
       <WhatIsThisSection />
-      <CarbonAdSection />
       <TweetsSection />
       <HowToUseSection />
       <AlgoMonsterSection />
@@ -213,20 +211,6 @@ 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.

website/src/theme/TOC/index.js

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import TOCItems from '@theme/TOCItems';
 import styles from './styles.module.css'; // Using a custom className
 import SidebarAd from '../../components/SidebarAd';
-import CarbonAd from '../../components/CarbonAd';
 // This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
 
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
@@ -15,42 +14,14 @@ function TOC({className, ...props}) {
       <div className="margin--md">
         <SidebarAd position="table_of_contents" />
       </div>
+      <h3 className="padding-left--md padding-top--md margin-bottom--none">
+        Table of Contents
+      </h3>
       <TOCItems
         {...props}
         linkClassName={LINK_CLASS_NAME}
         linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
       />
-      <div className="padding-horiz--md">
-        <CarbonAd />
-      </div>
-      <div className="margin--md">
-        <div className={clsx('padding--md', styles.socialLinksContainer)}>
-          <div className={styles.socialLinks}>
-            Follow
-            <a
-              href="https://t.me/techinterviewhandbook"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-icon navbar-icon-telegram"
-              aria-label="Telegram channel"
-            />
-            <a
-              href="https://twitter.com/techinterviewhb"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-icon navbar-icon-twitter"
-              aria-label="Twitter"
-            />
-            <a
-              href="https://www.facebook.com/techinterviewhandbook"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="navbar-icon navbar-icon-facebook"
-              aria-label="Facebook page"
-            />
-          </div>
-        </div>
-      </div>
     </div>
   );
 }