From 422ae252803a2a4bdbe4c0c0164da56df7ab1a20 Mon Sep 17 00:00:00 2001
From: Bin Lin Zh <binlinzh@gmail.com>
Date: Wed, 27 Dec 2023 19:50:08 -0500
Subject: [PATCH] Added horizontal ads to bottom of articles

Horizontal ads are present in all articles excluding news and opinions.
There is currently a placeholder image in place.
---
 components/HorizontalAdvertisement.tsx        |  26 ++++++++++++++++++
 horizontalAdvertisements.ts                   |   8 ++++++
 pages/article/[article_slug].tsx              |   8 +++++-
 .../images/ads/horizontal_ad_placeholder.jpg  | Bin 0 -> 4311 bytes
 4 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 components/HorizontalAdvertisement.tsx
 create mode 100644 horizontalAdvertisements.ts
 create mode 100644 public/images/ads/horizontal_ad_placeholder.jpg

diff --git a/components/HorizontalAdvertisement.tsx b/components/HorizontalAdvertisement.tsx
new file mode 100644
index 0000000..d45585a
--- /dev/null
+++ b/components/HorizontalAdvertisement.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Link from "next/link";
+import horizontalAdvertisements from "../horizontalAdvertisements";
+import styles from "../styles/Advertisement.module.css";
+
+const HorizontalAdvertisement = (props: { index: number , section_id: number}) => {
+	let index = props.index % horizontalAdvertisements.length;
+	let section_id = props.section_id;
+
+	if (section_id != 0 && section_id != 2) {
+		return (
+			<Link href={horizontalAdvertisements[index].url}>
+				<div id={styles.parent_div}>
+					<Image
+						id={styles.image}
+						src={horizontalAdvertisements[index].image_src}
+						fill
+						alt={horizontalAdvertisements[index].name + " ad"}
+					/>
+				</div>
+			</Link>
+		);
+	}
+};
+
+export default HorizontalAdvertisement;
diff --git a/horizontalAdvertisements.ts b/horizontalAdvertisements.ts
new file mode 100644
index 0000000..9898dd6
--- /dev/null
+++ b/horizontalAdvertisements.ts
@@ -0,0 +1,8 @@
+const horizontalAdvertisements = [
+	{
+		name: "placeholder",
+		image_src: "/images/ads/horizontal_ad_placeholder.jpg",
+		url: "..",
+	},
+];
+export default horizontalAdvertisements;
diff --git a/pages/article/[article_slug].tsx b/pages/article/[article_slug].tsx
index fde1e6c..baa1b1f 100644
--- a/pages/article/[article_slug].tsx
+++ b/pages/article/[article_slug].tsx
@@ -13,6 +13,7 @@ import ShareButton from "../../components/ShareButton";
 import Link from "next/link";
 import generate_contributors_jsx from "../../components/GenerateContributorsJSX";
 import { generateMetaTags } from "../../utils/generateMetaTags";
+import HorizontalAdvertisement from "../../components/HorizontalAdvertisement";
 
 interface Props {
 	article: ReceivedArticle;
@@ -160,7 +161,12 @@ function Article(props: Props) {
 
 					{/* <RecommendedArticles /> */}
 				</article>
-				<div id={styles.advertisements}></div>
+				<div id={styles.advertisements}>
+				<HorizontalAdvertisement
+					index={0}
+					section_id={section_id}
+				/>
+				</div>
 			</main>
 		</div>
 	);
diff --git a/public/images/ads/horizontal_ad_placeholder.jpg b/public/images/ads/horizontal_ad_placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b094356b7b2da5c296470a92eb25bd8f24973d03
GIT binary patch
literal 4311
zcmex=<NpH&0WUXCHwH#VMurL?WcdG(LCLiuGmU}4*Ox(yfq{VoC?~|g3}i6^AsGC>
z&EU+y#K;IjP{7Q}3<7K{EX=IzZ0zhH%)!ac$-%+J!OqUb%f-db0|e}xeEhsTd>}T+
z5Ri6|E+FFJVCMj-APxLKz#z!M@Qb;HnNf*>Nsy6Qkn#T!26>=cS%E$Rc?t>`nV4Bv
z*?>;s;sz?%DgbmoGcyy=v8*gCK-INCc?K3iRv|@0M>gTWM0TY@5u?V53ptdXHXalW
zy7)oGIH{<KlS@ooLQ+aqO<hA%%f!^o+``hz*~Qh(-NVx>I3zSIJR&kGIVCkMJtH%#
zxTLhKyrQzIxuvzOy`!^h(&Q;qr%j(RbJn88OO`HMzGCI7O`ErD-L`$l&RvHNA31vL
z_=%IJE?vHI_1g6tH*Y<B^!UlsXU|`}eD(3u=PzHsegE<E7sy|X49pO3!F`72FF~Nc
zn1FG>!VdBmBU3pLGYhh?DjKp0IR>&P778mFHFAhJO<cI~Ag8i%&<D|^qKjN&DkcwA
zKZ3jl_8D;=Ya+{MaE~GUb&G+AnGqOy%z_N|4FBq1Eb3y=7{#MuFq#HN)4*sN7)=AC
dX<#%BjHZFnG%%V5M$^D(8W>Fj1k%9&n*ez6f$0DM

literal 0
HcmV?d00001