Implement banner ads for articles (#66)

* Rename advertisements to MixedAdvertisements

* Add Banner Ads that show up occasionally on top of article

* Disable ads on humor and opinions articles as per charter

* Slightly nerf ad chances

advertisements/BannerAdvertisement.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Link from "next/link";
+import banner_advertisements from "./BannerAdvertisements";
+import styles from "../styles/Advertisement.module.css";
+
+const BannerAdvertisement = (props: { index: number; show_ad: boolean }) => {
+	let index = props.index % banner_advertisements.length;
+
+	return (
+		<Link
+			href={banner_advertisements[index].url}
+			style={{ display: props.show_ad ? "block" : "none" }}
+		>
+			<div id={styles.parent_div}>
+				<Image
+					id={styles.image}
+					src={banner_advertisements[index].image_src}
+					fill
+					alt={banner_advertisements[index].name + " ad"}
+				/>
+			</div>
+		</Link>
+	);
+};
+
+export default BannerAdvertisement;

advertisements/BannerAdvertisements.ts

@@ -0,0 +1,8 @@
+const BannerAdvertisements = [
+	{
+		name: "Prompt College Application and Essay Coaching",
+		image_src: "/images/ads/prompt_banner.png",
+		url: "https://www.myprompt.com/",
+	},
+];
+export default BannerAdvertisements;

advertisements/MixedAdvertisement.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+import Link from "next/link";
+import mixed_advertisements from "./MixedAdvertisements";
+import styles from "../styles/Advertisement.module.css";
+
+const MixedAdvertisement = (props: { index: number }) => {
+	let index = props.index % mixed_advertisements.length;
+
+	return (
+		<Link href={mixed_advertisements[index].url}>
+			<div id={styles.parent_div}>
+				<Image
+					id={styles.image}
+					src={mixed_advertisements[index].image_src}
+					fill
+					alt={mixed_advertisements[index].name + " ad"}
+				/>
+			</div>
+		</Link>
+	);
+};
+
+export default MixedAdvertisement;

advertisements.ts → advertisements/MixedAdvertisements.ts

@@ -1,4 +1,4 @@
-const advertisements = [
+const MixedAdvertisements = [
 	{
 		name: "Kweller Prep",
 		image_src: "/images/ads/kweller_prep.png",
@@ -15,4 +15,4 @@ const advertisements = [
 		url: "http://www.collegeessaytutors.com/",
 	},
 ];
-export default advertisements;
+export default MixedAdvertisements;

components/MixedArticleDisplay.tsx

@@ -9,8 +9,7 @@ import styles from "../styles/MixedArticleDisplay.module.css";
 import groupByImageExists from "../utils/groupArticles";
 import generate_contributors_jsx from "./GenerateContributorsJSX";
 import { useCallback, useEffect, useState, Fragment } from "react";
-import Advertisment from "./Advertisement";
-import advertisements from "../advertisements";
+import MixedAdvertisment from "../advertisements/MixedAdvertisement";
 
 function CenterArticle(props: {
 	article: ReceivedArticle;
@@ -193,7 +192,7 @@ export default function MixedArticleDisplay(props: {
 								/>
 								{index % ad_spacing == 0 ? (
 									<div className={styles.ad_parent}>
-										<Advertisment
+										<MixedAdvertisment
 											index={index / ad_spacing}
 										/>
 									</div>
@@ -249,8 +248,11 @@ export default function MixedArticleDisplay(props: {
 								/>
 								{index % ad_spacing == 1 ? (
 									<div className={styles.ad_parent}>
-										<Advertisment
-											index={Math.floor(index / ad_spacing) + 2}
+										<MixedAdvertisment
+											index={
+												Math.floor(index / ad_spacing) +
+												2
+											}
 										/>
 									</div>
 								) : (
@@ -273,8 +275,10 @@ export default function MixedArticleDisplay(props: {
 								/>
 								{index % ad_spacing == 1 && index != 0 ? (
 									<div className={styles.ad_parent}>
-										<Advertisment
-											index={Math.floor(index / ad_spacing)}
+										<MixedAdvertisment
+											index={Math.floor(
+												index / ad_spacing
+											)}
 										/>
 									</div>
 								) : (

pages/article/[article_slug].tsx

@@ -13,9 +13,13 @@ import ShareButton from "../../components/ShareButton";
 import Link from "next/link";
 import generate_contributors_jsx from "../../components/GenerateContributorsJSX";
 import { generateMetaTags } from "../../utils/generateMetaTags";
+import BannerAdvertisements from "../../advertisements/BannerAdvertisements";
+import BannerAdvertisement from "../../advertisements/BannerAdvertisement";
 
 interface Props {
 	article: ReceivedArticle;
+	banner_ad_index: number;
+	show_ad: boolean; // temporary to not have the same banner ad on every article
 }
 
 function Article(props: Props) {
@@ -47,6 +51,8 @@ function Article(props: Props) {
 
 	const providers = ["facebook", "twitter", "linkedin", "email"];
 
+	const isAdvertisingAllowed: boolean = section_id != 2 && section_id != 4; // forbid ads on Opinions and Humor as per charter
+
 	return (
 		<div>
 			<Head>
@@ -77,6 +83,15 @@ function Article(props: Props) {
 			</Head>
 
 			<main id={styles.main}>
+				{isAdvertisingAllowed && (
+					<div className={styles.advertisements}>
+						<BannerAdvertisement
+							index={props.banner_ad_index}
+							show_ad={props.show_ad}
+						/>
+					</div>
+				)}
+
 				<article id={styles.article}>
 					<p id={styles.section} className="discrete-link">
 						<Link
@@ -160,7 +175,6 @@ function Article(props: Props) {
 
 					{/* <RecommendedArticles /> */}
 				</article>
-				<div id={styles.advertisements}></div>
 			</main>
 		</div>
 	);
@@ -174,7 +188,13 @@ export async function getServerSideProps(context: NextPageContext) {
 	let article = await get_article_by_slug(article_slug);
 	if (article) {
 		return {
-			props: { article: JSON.parse(JSON.stringify(article)) },
+			props: {
+				article: JSON.parse(JSON.stringify(article)),
+				banner_ad_index: Math.floor(
+					Math.random() * BannerAdvertisements.length
+				),
+				show_ad: Math.random() * 100 < 30, // 30% chance of showing the ad
+			},
 		};
 	} else {
 		return {

styles/[article_slug].module.css

@@ -1,6 +1,6 @@
 #main {
 	width: 95vw;
-	max-width: 900px;
+	max-width: 800px;
 	padding-top: 1rem;
 	margin: 0 auto;
 }
@@ -136,3 +136,7 @@
 	width: 100%;
 	font-style: italic;
 }
+
+.advertisements {
+	height: fit-content;
+}