diff --git a/README.md b/README.md index 33378a3af..791049043 100644 --- a/README.md +++ b/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 ---
-

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. Find out more

+

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. Find out more

--- diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 0d63a329b..d593fd94b 100755 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -110,4 +110,5 @@ module.exports = { }, ], ], + clientModules: [require.resolve('./src/components/SidebarAd')], }; diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js new file mode 100644 index 000000000..917ded520 --- /dev/null +++ b/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 ( + +

+ Get paid more. Receive risk-free salary negotiation + help from Moonchaser. You pay nothing unless your offer is increased. +

+
+ ); +} + +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(, $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); + }, + }; +})(); diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css new file mode 100644 index 000000000..623b0d836 --- /dev/null +++ b/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; +} diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 6ae0f9418..f1859cd13 100755 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -70,10 +70,10 @@ function Home() {
- Check it Out  → + Find Out More  →