website: add placement

website/docusaurus.config.js

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

website/src/components/SidebarAd/index.js

@@ -0,0 +1,56 @@
+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';
+
+function SidebarAd() {
+  return (
+    <a
+      className={styles.container}
+      href="https://www.moonchaser.io/?utm_source=techinterviewhandbook&utm_medium=referral&utm_campaign=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('[class^="tableOfContents"]');
+    const $newEl = document.createElement('div');
+    $newEl.id = AD_ELEMENT_ID;
+    $tocEl.appendChild($newEl);
+
+    return $newEl;
+  })();
+
+  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,27 @@
+.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: 1rem;
+  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;
+}
+
+.tagline {
+  font-size: 0.75rem;
+  margin-bottom: 0;
+}
+
+.logo {
+  width: 96px;
+}