docs: Move ads to the top of the sidebar, fix refreshing on navigation 📢

styleguidist · Sep 15, 2022 · 51db5e1 · 51db5e1
1 parent a460fcc
commit 51db5e1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/site/src/theme/DocSidebar/index.js b/site/src/theme/DocSidebar/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useScript from '@charlietango/use-script';
 import DocSidebarBase from '@theme-original/DocSidebar';
@@ -11,16 +11,29 @@ function Extra({ path }) {
 	// Load the EthicalAds script
 	useScript(SCRIPT_URL);
 
+	const adElement = useRef(null);
+
 	// Update the ad on navigation
 	useEffect(() => {
 		if (window.ethicalads) {
+			adElement.current?.classList.add(styles.hidden);
+			adElement.current?.classList.remove('loaded');
 			window.ethicalads.load_placements();
+			setTimeout(() => {
+				adElement.current?.classList.remove(styles.hidden);
+			}, 500);
 		}
 	}, [path]);
 
 	return (
 		<div className={styles.extra}>
-			<div data-ea-publisher={PUBLISHER_ID} data-ea-type="image" className="bordered"></div>
+			<div
+				ref={adElement}
+				data-ea-publisher={PUBLISHER_ID}
+				data-ea-type="image"
+				data-ea-keywords="frontend|react"
+				className="bordered"
+			></div>
 		</div>
 	);
 }
@@ -32,8 +45,8 @@ Extra.propTypes = {
 function DocSidebar({ showExtra, ...props }) {
 	return (
 		<div className={styles.sidebar}>
-			<DocSidebarBase {...props} />
 			{showExtra && <Extra path={props.path} />}
+			<DocSidebarBase {...props} />
 		</div>
 	);
 }

diff --git a/site/src/theme/DocSidebar/styles.module.css b/site/src/theme/DocSidebar/styles.module.css
@@ -6,8 +6,13 @@
 .extra {
 	display: flex;
 	justify-content: center;
-	min-height: 12rem;
+	min-height: 12.5rem;
 	background-color: var(--ifm-color-white);
+	transition: opacity 0.2s ease-in-out;
+}
+
+.hidden {
+	opacity: 0;
 }
 
 /* HACK: Horizontal EthicalAds layout */
@@ -31,16 +36,20 @@
 }
 
 @media (min-width: 997px) {
+	.extra {
+		min-height: 24rem;
+		padding-top: var(--ifm-navbar-height);
+	}
+
 	.sidebar {
 		height: 100vh;
 		overflow-y: auto;
 		position: sticky;
 		top: 0;
-		padding-top: var(--ifm-navbar-height);
 	}
 
 	/* HACK: Remove styles from the theme sidebar container */
-	.sidebar > *:first-child {
+	.sidebar > *:first-child + * {
 		height: initial;
 		overflow: initial;
 		position: initial;