diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index cc37d6dc..b6059079 100755 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -59,4 +59,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 00000000..0aa58fad --- /dev/null +++ b/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 ( + +

+ 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('[class^="tableOfContents"]'); + const $newEl = document.createElement('div'); + $newEl.id = AD_ELEMENT_ID; + $tocEl.appendChild($newEl); + + return $newEl; + })(); + + 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 00000000..3d01ee70 --- /dev/null +++ b/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; +}