website: add placement

README.md

@@ -43,7 +43,7 @@ Anybody who wants to land a job at a tech company for a front end role and is lo
 ---
 
 <div align="center">
-  <h3>Get paid more. Moonchaser has negotiated hundreds of tech offers. Get 1-1 guidance from their experienced team of ex-FAANG PMs, SWEs, and Recruiters. <a href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_campaign=github_frontend" target="_blank">Find out more</a></h3>
+  <h3>Get paid more. Moonchaser has negotiated hundreds of tech offers. Get 1-1 guidance from their experienced team of ex-FAANG PMs, SWEs, and Recruiters. <a href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=frontend_github" target="_blank">Find out more</a></h3>
 </div>
 
 ---

website/docusaurus.config.js

@@ -110,4 +110,5 @@ module.exports = {
       },
     ],
   ],
+  clientModules: [require.resolve('./src/components/SidebarAd')],
 };

website/src/components/SidebarAd/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+import styles from './styles.module.css';
+
+const AD_ELEMENT_ID = 'ad-element-id';
+const CONTAINER_SELECTOR = '.menu.menu--responsive';
+
+function SidebarAd() {
+  return (
+    <a
+      className={styles.container}
+      href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=frontend_website_docs_sidebar"
+      target="_blank"
+      rel="noreferrer noopener">
+      <p className={styles.tagline}>
+        <strong>Get paid more.</strong> Receive risk-free salary negotiation
+        help from Moonchaser. You pay nothing unless your offer is increased.
+      </p>
+    </a>
+  );
+}
+
+function initAd() {
+  const $adEl = (() => {
+    const $el = document.getElementById(AD_ELEMENT_ID);
+    if ($el) {
+      return $el;
+    }
+
+    const $tocEl = document.querySelector(CONTAINER_SELECTOR);
+    if ($tocEl == null) {
+      return null;
+    }
+
+    const $newEl = document.createElement('div');
+    $newEl.id = AD_ELEMENT_ID;
+    $tocEl.append($newEl);
+
+    return $newEl;
+  })();
+
+  if ($adEl == null) {
+    return;
+  }
+
+  ReactDOM.render(<SidebarAd />, $adEl);
+}
+
+if (ExecutionEnvironment.canUseDOM) {
+  window.onload = initAd;
+}
+
+export default (function (context, options) {
+  return {
+    name: 'sidebar-ad',
+    onRouteUpdate() {
+      // Render only after the page renders.
+      setTimeout(() => {
+        initAd();
+      }, 0);
+    },
+  };
+})();

website/src/components/SidebarAd/styles.module.css

@@ -0,0 +1,33 @@
+.container {
+  background-color: var(--ifm-color-primary-light);
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-radius: var(--ifm-global-radius);
+  color: #fff;
+  display: block;
+  margin: 0.5rem;
+  padding: 1rem;
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.container:hover {
+  background-color: var(--ifm-color-primary);
+  color: #fff;
+  text-decoration: none;
+}
+
+@media screen and (max-width: 996px) {
+  .container {
+    display: none;
+  }
+}
+
+.tagline {
+  font-size: 0.75rem;
+  margin-bottom: 0;
+}
+
+.logo {
+  width: 96px;
+}

website/src/pages/index.js

@@ -70,10 +70,10 @@ function Home() {
                   <div className="margin-vert--lg">
                     <a
                       className="button button--secondary button--lg"
-                      href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_campaign=website_frontend_homepage"
+                      href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=frontend_website_homepage"
                       rel="noreferrer noopener"
                       target="_blank">
-                      Check it Out&nbsp;&nbsp;→
+                      Find Out More&nbsp;&nbsp;→
                     </a>
                   </div>
                 </div>