website: tweak doc layout and font sizes

contents/negotiation.md

@@ -45,6 +45,9 @@ Things Moonchaser can do for you:
 
 <a className="button button--primary" href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation">Book a free consultation with Moonchaser &nbsp;→</a>
 
+<br/>
+<br/>
+
 ### Levels.fyi
 
 [Levels.fyi](https://www.levels.fyi/services/?ref=TechInterviewHandbook&utm_source=techinterviewhandbook&utm_medium=referral&utm_content=website_negotiation) is most famously known for being a salary database but they also offer complementary services such as salary negotiation where you will be put in-touch with experienced recruiters to help you in the process. How Levels.fyi differs from Moonchaser is that Levels.fyi charges a flat fee whereas Moonchaser takes a percentage of the negotiated difference.

website/src/components/CarbonAd/index.js

@@ -30,5 +30,19 @@ export default React.memo(() => {
     ref.current.appendChild(script);
   }, []);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      [...ref.current.children].forEach((child) => {
+        if (child.id.startsWith('carbonads_')) {
+          ref.current.removeChild(child);
+        }
+      });
+    }, 100);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
   return <div ref={ref} />;
 });

website/src/css/custom.css

@@ -83,6 +83,10 @@ div[class^='announcementBar_'] {
   font-weight: bold;
 }
 
+.menu {
+  font-size: 0.875rem;
+}
+
 .theme-doc-markdown details {
   --ifm-alert-background-color: transparent;
   border: 1px solid var(--ifm-color-primary);

website/src/theme/DocItem/index.js

@@ -10,7 +10,6 @@ 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';
 
 export default function DocItem(props) {
@@ -30,7 +29,7 @@ export default function DocItem(props) {
 
   const shouldAddTitle =
     !hideTitle && typeof DocContent.contentTitle === 'undefined';
-  const windowSize = useWindowSize();
+  // const windowSize = useWindowSize();
   const canRenderTOC =
     !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
   // const renderTocDesktop =
@@ -55,7 +54,6 @@ export default function DocItem(props) {
           <div className={styles.docItemContainer}>
             <article>
               <DocVersionBadge />
-
               {canRenderTOC && (
                 <TOCCollapsible
                   toc={DocContent.toc}
@@ -80,9 +78,6 @@ export default function DocItem(props) {
                   </header>
                 )}
                 <DocItemFooter {...props} />
-                <div className="margin-top--md">
-                  <CarbonAd />
-                </div>
                 <div className="margin-top--md">
                   <DocContent />
                 </div>
@@ -94,7 +89,7 @@ export default function DocItem(props) {
             </div>
           </div>
         </div>
-        <div className="col col--3">
+        <div className="col col--4">
           {/* Change it such that sidebar ad is shown regardless whether there's a TOC */}
           <TOC
             toc={DocContent.toc}

website/src/theme/DocSidebar/index.js

@@ -14,6 +14,7 @@ import {translate} from '@docusaurus/Translate';
 import {DocSidebarItems} from '@theme/DocSidebarItem';
 import styles from './styles.module.css';
 import SidebarAd from '../../components/SidebarAd';
+import CarbonAd from '../../components/CarbonAd';
 
 function useShowAnnouncementBar() {
   const {isActive} = useAnnouncementBar();

website/src/theme/TOC/index.js

@@ -3,6 +3,7 @@ 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';
@@ -19,6 +20,9 @@ function TOC({className, ...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}>