diff --git a/advertisements/BannerAdvertisement.tsx b/advertisements/BannerAdvertisement.tsx new file mode 100644 index 0000000..a39d0cf --- /dev/null +++ b/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 ( + +
+ {banner_advertisements[index].name +
+ + ); +}; + +export default BannerAdvertisement; diff --git a/advertisements/BannerAdvertisements.ts b/advertisements/BannerAdvertisements.ts new file mode 100644 index 0000000..3e7d2ab --- /dev/null +++ b/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; diff --git a/advertisements/MixedAdvertisement.tsx b/advertisements/MixedAdvertisement.tsx new file mode 100644 index 0000000..17a2bf7 --- /dev/null +++ b/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 ( + +
+ {mixed_advertisements[index].name +
+ + ); +}; + +export default MixedAdvertisement; diff --git a/advertisements.ts b/advertisements/MixedAdvertisements.ts similarity index 85% rename from advertisements.ts rename to advertisements/MixedAdvertisements.ts index 399e7a6..986728b 100644 --- a/advertisements.ts +++ b/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; diff --git a/components/Advertisement.tsx b/components/Advertisement.tsx deleted file mode 100644 index 94658a0..0000000 --- a/components/Advertisement.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import Image from "next/image"; -import Link from "next/link"; -import advertisements from "../advertisements"; -import styles from "../styles/Advertisement.module.css"; - -const Advertisment = (props: { index: number }) => { - let index = props.index % advertisements.length; - - return ( - -
- {advertisements[index].name -
- - ); -}; - -export default Advertisment; diff --git a/components/MixedArticleDisplay.tsx b/components/MixedArticleDisplay.tsx index 2b913ff..6f52b58 100644 --- a/components/MixedArticleDisplay.tsx +++ b/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 ? (
-
@@ -249,8 +248,11 @@ export default function MixedArticleDisplay(props: { /> {index % ad_spacing == 1 ? (
-
) : ( @@ -273,8 +275,10 @@ export default function MixedArticleDisplay(props: { /> {index % ad_spacing == 1 && index != 0 ? (
-
) : ( diff --git a/pages/article/[article_slug].tsx b/pages/article/[article_slug].tsx index c02144f..bd45104 100644 --- a/pages/article/[article_slug].tsx +++ b/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 (
@@ -77,6 +83,15 @@ function Article(props: Props) {
+ {isAdvertisingAllowed && ( +
+ +
+ )} +

*/}

-
); @@ -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 { diff --git a/public/images/ads/prompt_banner.png b/public/images/ads/prompt_banner.png new file mode 100644 index 0000000..d758873 Binary files /dev/null and b/public/images/ads/prompt_banner.png differ diff --git a/styles/[article_slug].module.css b/styles/[article_slug].module.css index d0990f3..70e277b 100644 --- a/styles/[article_slug].module.css +++ b/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; +}