From a7d8606df93c52ff25d4aa941305a47a51413e78 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Sun, 30 May 2021 02:22:24 +0800
Subject: [PATCH] website: add placement
---
website/docusaurus.config.js | 1 +
website/src/components/SidebarAd/index.js | 56 +++++++++++++++++++
.../components/SidebarAd/styles.module.css | 27 +++++++++
3 files changed, 84 insertions(+)
create mode 100644 website/src/components/SidebarAd/index.js
create mode 100644 website/src/components/SidebarAd/styles.module.css
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 (
+ <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);
+ },
+ };
+})();
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;
+}