website: improve swizzling

website/src/components/SidebarAd/index.js

@@ -24,9 +24,11 @@ function TopResume({className}) {
         window.gtag('event', 'topresume.sidebar.click');
       }}>
       <p className={styles.tagline}>
+        <strong>Best resume service for FAANG</strong>
+        <br />
         If you are running low on time, I recommend TopResume's{' '}
-        <u>resume writing</u> and free <u>resume screening</u> services, which
-        has helped countless software engineers get interviews at FAANG.
+        <u>free resume review</u> services, which has helped countless software
+        engineers get interviews at FAANG.
       </p>
     </a>
   );
@@ -64,9 +66,10 @@ function Educative({className}) {
         window.gtag('event', 'educative.sidebar.click');
       }}>
       <p className={styles.tagline}>
-        <strong>Looking to get hired at FAANG?</strong> <u>Educative</u> offers
-        many great courses to improve your interview game.{' '}
-        <u>Join today for a 10% discount!</u>
+        <strong>Looking to get hired at FAANG?</strong>
+        <br />
+        <u>Educative</u> offers many great courses to improve your interview
+        game. <u>Join today for a 10% discount!</u>
       </p>
     </a>
   );

website/src/theme/DocItem/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import clsx from 'clsx';
+import DocPaginator from '@theme/DocPaginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import Seo from '@theme/Seo';
+import DocItemFooter from '@theme/DocItemFooter';
+import TOC from '@theme/TOC';
+import TOCCollapsible from '@theme/TOCCollapsible';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
+import SidebarAd from '../../components/SidebarAd';
+
+export default function DocItem(props) {
+  const {content: DocContent} = props;
+  const {metadata, frontMatter} = DocContent;
+  const {
+    image,
+    keywords,
+    hide_title: hideTitle,
+    hide_table_of_contents: hideTableOfContents,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel,
+  } = frontMatter;
+  const {description, title} = metadata; // We only add a title if:
+  // - user asks to hide it with front matter
+  // - the markdown content does not already contain a top-level h1 heading
+
+  const shouldAddTitle =
+    !hideTitle && typeof DocContent.contentTitle === 'undefined';
+  const windowSize = useWindowSize();
+  const canRenderTOC =
+    !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
+  // const renderTocDesktop =
+  //   canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
+  return (
+    <>
+      <Seo
+        {...{
+          title,
+          description,
+          keywords,
+          image,
+        }}
+      />
+
+      <div className="row">
+        <div
+          className={clsx('col', {
+            [styles.docItemCol]: !hideTableOfContents,
+          })}>
+          <DocVersionBanner />
+          <div className={styles.docItemContainer}>
+            <article>
+              <DocVersionBadge />
+
+              {canRenderTOC && (
+                <TOCCollapsible
+                  toc={DocContent.toc}
+                  minHeadingLevel={tocMinHeadingLevel}
+                  maxHeadingLevel={tocMaxHeadingLevel}
+                  className={clsx(
+                    ThemeClassNames.docs.docTocMobile,
+                    styles.tocMobile,
+                  )}
+                />
+              )}
+
+              <div
+                className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+                {/*
+                Title can be declared inside md content or declared through front matter and added manually
+                To make both cases consistent, the added title is added under the same div.markdown block
+                See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+                */}
+                {shouldAddTitle && (
+                  <header>
+                    <Heading as="h1">{title}</Heading>
+                  </header>
+                )}
+
+                <DocContent />
+              </div>
+
+              <DocItemFooter {...props} />
+            </article>
+            <DocPaginator previous={metadata.previous} next={metadata.next} />
+            <div className="margin-top--md">
+              <SidebarAd />
+            </div>
+          </div>
+        </div>
+        <div className="col col--3">
+          {/* Change it such that sidebar ad is shown regardless whether there's a TOC */}
+          <TOC
+            toc={DocContent.toc}
+            minHeadingLevel={tocMinHeadingLevel}
+            maxHeadingLevel={tocMaxHeadingLevel}
+            className={ThemeClassNames.docs.docTocDesktop}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

website/src/theme/DocItem/styles.module.css

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+
+  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+  .tocMobile {
+    display: none;
+  }
+}

website/src/theme/DocPaginator/index.js

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
-import SidebarAd from '../../components/SidebarAd';
 
 function DocPaginator({previous, next}) {
   return (
@@ -47,10 +46,6 @@ function DocPaginator({previous, next}) {
           )}
         </div>
       </nav>
-      <div className="margin-top--md">
-        <SidebarAd />
-      </div>
-    </>
   );
 }