chore: add banner test

Multiform-Validator · May 27, 2024 · 7827adf · 7827adf
1 parent 83852b2
commit 7827adf
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 9 deletions.
diff --git a/docs/src/app/news/page.tsx b/docs/src/app/news/page.tsx
@@ -1,32 +1,59 @@
 import "@/css/news.css";
+import { AddBanner } from "@/components/Adsense";
 import MainBg from "@/components/MainBg";
 
 export default function NewsPage() {
+	const GOOGLE_ADSENSE_CLIENT_ID = process.env.GOOGLE_ADSENSE_CLIENT_ID ?? "";
+	const SlotAd1AndAd2 = "9630566447";
+	const SlotAd3 = "8700628151";
+	const SlotAd4 = "3500719479";
+	const SlotAd5AndAd6 = "7092033017";
+
 	return (
 		<MainBg>
 			<div id="news-page">
 				<div className="div-ad div-ad1">
-					<h1>News1</h1>
+					<AddBanner
+						AdClient={GOOGLE_ADSENSE_CLIENT_ID}
+						AdSlot={SlotAd1AndAd2}
+					/>
 				</div>
 
 				<div className="div-ad div-ad2">
-					<h1>News2</h1>
+					<AddBanner
+						AdClient={GOOGLE_ADSENSE_CLIENT_ID}
+						AdSlot={SlotAd1AndAd2}
+					/>
 				</div>
 
 				<div className="div-ad div-ad3">
-					<h1>News3</h1>
+					<AddBanner
+						AdClient={GOOGLE_ADSENSE_CLIENT_ID}
+						AdSlot={SlotAd3}
+						AdFormat="fluid"
+					/>
 				</div>
 
 				<div className="div-ad div-ad4">
-					<h1>News4</h1>
+					<AddBanner
+						AdClient={GOOGLE_ADSENSE_CLIENT_ID}
+						AdSlot={SlotAd4}
+						AdFormat="autorelaxed"
+					/>
 				</div>
 
 				<div className="div-ad div-ad5">
-					<h1>News5</h1>
+					<AddBanner
+						AdClient={GOOGLE_ADSENSE_CLIENT_ID}
+						AdSlot={SlotAd5AndAd6}
+					/>
 				</div>
 
 				<div className="div-ad div-ad6">
-					<h1>News6</h1>
+					<AddBanner
+						AdClient={GOOGLE_ADSENSE_CLIENT_ID}
+						AdSlot={SlotAd5AndAd6}
+					/>
 				</div>
 			</div>
 		</MainBg>

diff --git a/docs/src/components/Adsense/AddBanner.tsx b/docs/src/components/Adsense/AddBanner.tsx
@@ -0,0 +1,31 @@
+import Script from "next/script";
+
+interface AddBannerProps {
+	AdClient: string;
+	AdSlot: string;
+	AdFormat?: string;
+	FullWidthResponsive?: boolean;
+}
+
+export default function AddBanner({
+	AdClient,
+	AdSlot,
+	AdFormat = "auto",
+	FullWidthResponsive = true,
+}: AddBannerProps) {
+	return (
+		<>
+			<ins
+				className="adsbygoogle"
+				style={{ display: "block" }}
+				data-ad-client={AdClient}
+				data-ad-slot={AdSlot}
+				data-ad-format={AdFormat}
+				data-full-width-responsive={FullWidthResponsive}
+			/>
+			<Script id="adsbygoogle-start" strategy="lazyOnload">
+				{`(adsbygoogle = window.adsbygoogle || []).push({});`}
+			</Script>
+		</>
+	);
+}
diff --git a/docs/src/components/Adsense/index.tsx b/docs/src/components/Adsense/index.tsx
@@ -1,3 +1,5 @@
+import Script from "next/script";
+
 interface AdsenseProps {
 	GOOGLE_ADSENSE_CLIENT_ID: string | undefined;
 }
@@ -11,3 +13,34 @@ export default function Adsense({ GOOGLE_ADSENSE_CLIENT_ID }: AdsenseProps) {
 		/>
 	);
 }
+
+interface AddBannerProps {
+	AdClient: string;
+	AdSlot: string;
+	AdFormat?: string;
+	FullWidthResponsive?: boolean;
+}
+
+// TEST
+export function AddBanner({
+	AdClient,
+	AdSlot,
+	AdFormat = "auto",
+	FullWidthResponsive = true,
+}: AddBannerProps) {
+	return (
+		<>
+			<ins
+				className="adsbygoogle"
+				style={{ display: "block" }}
+				data-ad-client={AdClient}
+				data-ad-slot={AdSlot}
+				data-ad-format={AdFormat}
+				data-full-width-responsive={FullWidthResponsive}
+			/>
+			<Script id="adsbygoogle-start" strategy="lazyOnload">
+				{`(adsbygoogle = window.adsbygoogle || []).push({});`}
+			</Script>
+		</>
+	);
+}
diff --git a/docs/src/css/news.css b/docs/src/css/news.css
@@ -5,7 +5,6 @@
 }
 #news-page .div-ad {
   border: 0.1px solid rgba(204, 204, 204, 0.4);
-  display: block;
   border-radius: 5px;
   width: 100%;
   height: 100%;

diff --git a/docs/src/css/news.css.map b/docs/src/css/news.css.map
diff --git a/docs/src/css/news.scss b/docs/src/css/news.scss
@@ -5,7 +5,6 @@
 
   .div-ad {
     border: 0.1px solid #cccccc66;
-		display: block;
 		border-radius: 5px;
 		width: 100%;
 		height: 100%;