add google ads (#590)

* add google ads

* include Ads.txt

* fix post date issue

---------

Co-authored-by: Alex Patterson <alex.patterson@fusionauth.io>

Author: codercatdev

app/(main)/(post)/post/[slug]/page.tsx

@@ -3,6 +3,12 @@ import { groq, type PortableTextBlock } from "next-sanity";
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 
+//Google Ads
+import dynamic from "next/dynamic";
+const GoogleAdBanner = dynamic(() => import("@/components/google-ad-banner"), {
+  ssr: false,
+});
+
 import Avatar from "@/components/avatar";
 import DateComponent from "@/components/date";
 import MoreContent from "@/components/more-content";
@@ -15,6 +21,7 @@ import { resolveOpenGraphImage } from "@/sanity/lib/utils";
 import CoverMedia from "@/components/cover-media";
 import MoreHeader from "@/components/more-header";
 import { BreadcrumbLinks } from "@/components/breadrumb-links";
+import SponsorCard from "@/components/sponsor-card";
 
 type Props = {
   params: { slug: string };
@@ -66,11 +73,18 @@ export default async function PostPage({ params }: Props) {
         <h1 className="mb-12 text-4xl font-bold leading-tight tracking-tighter text-balance md:text-7xl md:leading-none lg:text-8xl">
           {post.title}
         </h1>
-        <div className="hidden md:mb-12 md:block">
-          <div className="flex flex-col gap-8">
-            {post?.author && (
-              <div className="flex">
-                {post.author.map((a) => (
+        <div className="mb-8 sm:mx-0 md:mb-16">
+          <CoverMedia
+            cloudinaryImage={post?.coverImage}
+            cloudinaryVideo={post?.videoCloudinary}
+            youtube={post?.youtube}
+          />
+        </div>
+        <div className="max-w-2xl sm:max-w-none">
+          <div className="mb-6">
+            {(post?.author) && (
+              <div className="flex flex-wrap gap-2">
+                {post?.author?.map((a) => (
                   <Avatar
                     key={a._id}
                     name={a.title}
@@ -80,39 +94,28 @@ export default async function PostPage({ params }: Props) {
                 ))}
               </div>
             )}
-            <div className="text-lg">
-              <DateComponent dateString={post.date} />
-            </div>
           </div>
-        </div>
-        <div className="mb-8 sm:mx-0 md:mb-16">
-          <CoverMedia
-            cloudinaryImage={post?.coverImage}
-            cloudinaryVideo={post?.videoCloudinary}
-            youtube={post?.youtube}
-          />
-        </div>
-        <div className="block md:hidden">
-          <div className="max-w-2xl mx-auto">
-            <div className="mb-6">
-              {post.author && (
-                <div className="flex">
-                  {post.author.map((a) => (
-                    <Avatar
-                      key={a._id}
-                      name={a.title}
-                      href={`/author/${a?.slug}`}
-                      coverImage={a?.coverImage}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-            <div className="mb-4 text-lg">
-              <DateComponent dateString={post.date} />
-            </div>
+          <div className="mb-4 text-lg">
+            <DateComponent dateString={post.date} />
           </div>
         </div>
+        {post?.sponsor?.length ? (
+          <section className="flex flex-col mt-10 mb-10">
+            <h2 className="mb-4 text-2xl font-bold">Sponsors</h2>
+            <hr className="border-accent-2" />
+            <div className="my-12 ">
+              <SponsorCard sponsors={post.sponsor} />
+            </div>
+            <hr className="border-accent-2" />
+          </section>
+        ) : (
+          <GoogleAdBanner
+            data-ad-slot="slotnumber"
+            data-full-width-responsive="true"
+            data-ad-layout="in-article"
+            data-ad-format="fluid"
+          />
+        )}
         {post.content?.length && (
           <PortableText
             className="mx-auto prose-violet lg:prose-xl dark:prose-invert"

app/(main)/layout.tsx

@@ -27,6 +27,7 @@ import AlgoliaDialog from "@/components/algolia-dialog";
 import { FaBars } from "react-icons/fa6";
 import PlayerFloating from "@/components/player-floating";
 import { PlayerProvider } from "@/components/player-context";
+import Script from "next/script";
 
 const nunito = Nunito({
   subsets: ["latin"],
@@ -138,6 +139,12 @@ export default async function RootLayout({
             <SpeedInsights />
           </ThemeProvider>
         </PlayerProvider>
+        <Script
+          async
+          src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}`}
+          strategy="lazyOnload"
+          crossOrigin="anonymous"
+        ></Script>
       </body>
     </html>
   );

components/google-ad-banner.tsx

@@ -0,0 +1,63 @@
+"use client"
+import Router from "next/router";
+import { useEffect } from "react";
+declare global {
+    interface Window {
+        adsbygoogle: unknown[];
+    }
+}
+
+interface AdsBannerProps {
+    "data-ad-slot": string;
+    "data-ad-format": string;
+    "data-full-width-responsive": string;
+    "data-ad-layout"?: string;
+}
+
+const GoogleAdBanner = (props: AdsBannerProps) => {
+    useEffect(() => {
+        const handleRouteChange = () => {
+            const intervalId = setInterval(() => {
+                try {
+                    // Check if the 'ins' element already has an ad in it
+                    if (window.adsbygoogle) {
+                        window.adsbygoogle.push({});
+                        clearInterval(intervalId);
+                    }
+                } catch (err) {
+                    console.error("Error pushing ads: ", err);
+                    clearInterval(intervalId); // Ensure we clear interval on errors too
+                }
+            }, 100);
+            return () => clearInterval(intervalId); // Clear interval on component unmount
+        };
+
+        // Run the function when the component mounts
+        handleRouteChange();
+
+        // Subscribe to route changes
+        if (typeof window !== "undefined") {
+            Router.events.on("routeChangeComplete", handleRouteChange);
+
+            // Unsubscribe from route changes when the component unmounts
+            return () => {
+                Router.events.off("routeChangeComplete", handleRouteChange);
+            };
+        }
+    }, []);
+
+    return (
+        <ins
+            className="adsbygoogle adbanner-customize mt-2"
+            style={{
+                display: "block",
+                overflow: "hidden",
+                border: process.env.NODE_ENV === "development" ? "1px solid red" : "none",
+            }}
+            data-adtest="on"
+            data-ad-client={process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}
+            {...props}
+        />
+    );
+};
+export default GoogleAdBanner;

public/Ads.txt

@@ -0,0 +1 @@
+google.com, pub-8603586563858288, DIRECT, f08c47fec0942fa0