From 01dc9c97490ac28daef7e013fba0a0f82c974673 Mon Sep 17 00:00:00 2001
From: Hieuhuy Pham <hieuhuypham97@gmail.com>
Date: Wed, 12 Mar 2025 01:52:05 -0400
Subject: [PATCH] Change the way routing works, so ad will fit better for
 everyone, we gotta find away to refresh it so we can use <Link> but right now
 quick and dirty solution

---
 global.d.ts                      |  8 ++++++
 src/app/books/[bookId]/page.tsx  | 17 ++++++------
 src/app/layout.tsx               | 42 ++++++++++++++++++------------
 src/app/releases/page.tsx        | 13 +++++-----
 src/components/NavigationBar.tsx | 44 +++++++++++++++++---------------
 src/hooks/useRefreshAds.ts       | 32 +++++++++++++++++++++++
 6 files changed, 103 insertions(+), 53 deletions(-)
 create mode 100644 src/hooks/useRefreshAds.ts

diff --git a/global.d.ts b/global.d.ts
index 46cf8d5..943f9c6 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -8,6 +8,14 @@ declare namespace NodeJS {
     interface Window {
       kofiWidgetOverlay: any;
       dataLayer: any[];
+      googletag: {
+        cmd: any[];
+        pubads: () => {
+          refresh: () => void;
+          enableSingleRequest: () => void;
+        };
+        enableServices: () => void;
+      };
     }
   }
 export {};
\ No newline at end of file
diff --git a/src/app/books/[bookId]/page.tsx b/src/app/books/[bookId]/page.tsx
index d9e7e89..dad2489 100644
--- a/src/app/books/[bookId]/page.tsx
+++ b/src/app/books/[bookId]/page.tsx
@@ -4,7 +4,6 @@ import { encodeId, formatDateToMonthDayYear, markdownToHtml } from "@/lib/utils"
 import ChapterDropdown from "@/components/ChapterDropdown";
 import { Ad } from "@/lib/types";
 import { Countdown } from "@/components/Countdown";
-import Link from "next/link";
 
 export type paramsType = Promise<{ bookId: string }>;
 
@@ -106,7 +105,7 @@ export default async function BookPage(props: { params: paramsType }) {
                            <Countdown release_datetime={chapter.release_datetime} />
                         </p>
                         {chapter.number === next_chapter?.number ? (
-                            <Link
+                            <a
                                 href={'/early?bookId=' + encodeId(bookId)}
                                 className={`
                                 bg-red-500 text-white py-2 px-4 mx-2 rounded 
@@ -115,10 +114,10 @@ export default async function BookPage(props: { params: paramsType }) {
                                 `}
                             >
                                 Unlock Early AdWalled Chapter
-                            </Link>
+                            </a>
                             )
                          : (
-                            <Link
+                            <a
                                 href={Ad.patreon}
                                 className={`
                                 bg-yellow-500 text-white py-2 px-4 mx-2 rounded 
@@ -127,7 +126,7 @@ export default async function BookPage(props: { params: paramsType }) {
                                 `}
                             >
                                 Join Patreon for More Early Chapters
-                            </Link>
+                            </a>
                         )}
                     </div>
                 </li>
@@ -174,7 +173,7 @@ export default async function BookPage(props: { params: paramsType }) {
                            <Countdown release_datetime={chapter.release_datetime} />
                         </p>
                         {chapter.number === next_chapter?.number ? (
-                            <Link
+                            <a
                                 href={'/early?bookId=' + encodeId(bookId)}
                                 className={`
                                 bg-red-500 text-white py-2 px-4 mx-2 rounded 
@@ -183,10 +182,10 @@ export default async function BookPage(props: { params: paramsType }) {
                                 `}
                             >
                                 Unlock Early Ad-Walled Chapter
-                            </Link>
+                            </a>
                             )
                          : (
-                            <Link
+                            <a
                                 href={Ad.patreon}
                                 className={`
                                 bg-yellow-500 text-white py-2 px-4 mx-2 rounded 
@@ -195,7 +194,7 @@ export default async function BookPage(props: { params: paramsType }) {
                                 `}
                             >
                                 Join Patreon for More Early Chapters
-                            </Link>
+                            </a>
                         )}
                     </div>
                 </li>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4cd8ee4..33faaa0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -35,18 +35,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
   const Default_Fallback = () => (
     <div className="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
-    <img
-      src="/logo.png" // Replace this with the actual path to your logo
-      alt="Loading..."
-      className="h-16 w-16 animate-bounce" // Add animation if desired
-    />
-    <span className="ml-3 text-lg">Loading content...</span>
-  </div>
+      <img
+        src="/logo.png" // Replace this with the actual path to your logo
+        alt="Loading..."
+        className="h-16 w-16 animate-bounce" // Add animation if desired
+      />
+      <span className="ml-3 text-lg">Loading content...</span>
+    </div>
   )
-
   return (
     <html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning>
-       <head>
+      <head>
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -62,22 +61,33 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             `,
           }}
         />
-        <Script 
-        async 
-        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1843060382170565" 
+        <Script
+          async
+          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1843060382170565"
           crossOrigin="anonymous"></Script>
         <Script
-           src="https://www.googletagmanager.com/gtag/js?id=G-6SXB46RSDE"
-            strategy="afterInteractive"
+          src="https://www.googletagmanager.com/gtag/js?id=G-6SXB46RSDE"
+          strategy="afterInteractive"
         />
         <Script id="google-analytics" strategy="afterInteractive">
-        {`
+          {`
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
           gtag('config', 'G-6SXB46RSDE');
         `}
-      </Script>
+        </Script>
+        <Script
+          strategy="afterInteractive"
+          src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
+          onLoad={() => {
+            window.googletag = window.googletag || { cmd: [] };
+            window.googletag.cmd.push(() => {
+              window.googletag.pubads().enableSingleRequest();
+              window.googletag.enableServices();
+            });
+          }}
+        />
       </head>
       <body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
         <KofiWidget />
diff --git a/src/app/releases/page.tsx b/src/app/releases/page.tsx
index 1ee02b4..0565728 100644
--- a/src/app/releases/page.tsx
+++ b/src/app/releases/page.tsx
@@ -1,7 +1,6 @@
 import { formatDateToMonthDayYear } from "@/lib/utils";
 import { Chapter, Ad } from "@/lib/types";
 import { fetchReleases } from "@/lib/api";
-import Link from "next/link";
 import { Countdown } from "@/components/Countdown";
 
 
@@ -64,17 +63,17 @@ export default async function ReleasePage() {
                             .sort(([titleA], [titleB]) => titleA.localeCompare(titleB))
                             .map(([bookTitle, chapters]) => (
                                 <div key={bookTitle} className="mb-6">
-                                    <Link href={`/books/${chapters[0].book?.documentId}`}
+                                    <a href={`/books/${chapters[0].book?.documentId}`}
                                         className="text-lg font-semibold text-gray-700 dark:text-yellow-300 mb-4 hover:underline">
                                         {bookTitle}
-                                    </Link>
+                                    </a>
                                     <ul className="space-y-4">
                                         {chapters.map((chapter) => (
                                             <li
                                                 key={chapter.id}
                                                 className="p-4 bg-yellow-100 dark:bg-yellow-800 text-gray-800 dark:text-gray-100 rounded-lg shadow-sm border border-yellow-300 dark:border-yellow-700 transition-transform transform hover:scale-105"
                                             >
-                                                <Link href={`books/${chapter.book?.documentId}/chapters/${chapter.documentId}`} className="block">
+                                                <a href={`books/${chapter.book?.documentId}/chapters/${chapter.documentId}`} className="block">
 
                                                     <h4 className="text-md font-medium">
                                                         Chapter {chapter.number}: {chapter.title}
@@ -85,7 +84,7 @@ export default async function ReleasePage() {
                                                             new Date(chapter.release_datetime)
                                                         )}
                                                     </p>
-                                                </Link>
+                                                </a>
                                             </li>
                                         ))}
                                     </ul>
@@ -108,10 +107,10 @@ export default async function ReleasePage() {
                             .sort(([titleA], [titleB]) => titleA.localeCompare(titleB))
                             .map(([bookTitle, chapters]) => (
                                 <div key={bookTitle} className="mb-6">
-                                    <Link href={`/books/${chapters[0].book?.documentId}`}
+                                    <a href={`/books/${chapters[0].book?.documentId}`}
                                         className="text-lg font-semibold text-blue-700 dark:text-blue-300 mb-4 hover:underline">
                                         {bookTitle}
-                                    </Link>
+                                    </a>
                                     <ul className="space-y-4">
                                         {chapters.map((chapter) => (
                                             <li
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
index 0711256..a8aa611 100644
--- a/src/components/NavigationBar.tsx
+++ b/src/components/NavigationBar.tsx
@@ -1,7 +1,6 @@
 "use client";
 import React, { useState } from "react";
 import Image from "next/image";
-import Link from "next/link";
 import { Ad } from "@/lib/types";
 export default function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -17,29 +16,29 @@ export default function Navbar() {
             alt="Logo"
             className="h-8 w-8"
           />
-          <Link href="/" className="text-2xl font-bold">
+          <a href="https://nulltranslation.com" className="text-2xl font-bold">
             Null Translation Group
-          </Link>
+          </a>
         </div>
 
         {/* Navigation Links */}
 
         <nav className="hidden md:flex space-x-6">
-          <Link href={"/announcements"} className="hover:text-gray-400">
+          <a href={"/announcements"} className="hover:text-gray-400">
             Announcements
-          </Link>
-          <Link href="/" className="hover:text-gray-400">
+          </a>
+          <a href="https://nulltranslation.com" className="hover:text-gray-400">
             Books
-          </Link>
-          <Link href={"/releases"} className="hover:text-gray-400">
+          </a>
+          <a href={"/releases"} className="hover:text-gray-400">
             Releases
-          </Link>
-          <Link href={"/early"} className="hover:text-gray-400">
+          </a>
+          <a href={"/early"} className="hover:text-gray-400">
             Early Access
-          </Link>
-          <Link href={Ad.patreon} className="hover:text-yellow-400 text-yellow-200 font-semibold">
+          </a>
+          <a href={Ad.patreon} className="hover:text-yellow-400 text-yellow-200 font-semibold">
             Patreon
-          </Link>
+          </a>
         </nav>
 
         {/* Mobile Menu Button */}
@@ -67,18 +66,21 @@ export default function Navbar() {
       {/* Mobile Menu */}
       {isMenuOpen && (
         <div className="md:hidden bg-gray-700 px-6 pb-4">
-          <Link href={"/announcements"} className="block py-2 hover:text-gray-400">
+          <a href={"/announcements"} className="block py-2 hover:text-gray-400">
             Announcements
-          </Link>
-          <Link href={"/releases"} className="block py-2 hover:text-gray-400">
+          </a>
+          <a href={"/releases"} className="block py-2 hover:text-gray-400">
             Release
-          </Link>
-          <Link href="/" className="block py-2 hover:text-gray-400">
+          </a>
+          <a href="https://nulltranslation.com" className="block py-2 hover:text-gray-400">
             Book List
-          </Link>
-          <Link href={Ad.patreon} className="block py-2 hover:text-gray-400">
+          </a>
+          <a href={"/early"} className="hover:text-gray-400">
+            Early Access
+          </a>
+          <a href={Ad.patreon} className="hover:text-yellow-400 text-yellow-200 font-semibold">
             Patreon
-          </Link>
+          </a>
         </div>
       )}
     </div>
diff --git a/src/hooks/useRefreshAds.ts b/src/hooks/useRefreshAds.ts
new file mode 100644
index 0000000..e5d66d6
--- /dev/null
+++ b/src/hooks/useRefreshAds.ts
@@ -0,0 +1,32 @@
+"use client"
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const useRefreshAds = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      console.log("Initializing Ad Refresh...");
+      window.googletag = window.googletag || { cmd: [] };
+
+      router.events.on('routeChangeComplete', () => {
+        console.log("Refreshing Ads...");
+        window.googletag.cmd.push(() => {
+          if (window.googletag?.pubads) {
+            window.googletag.pubads().refresh();
+          }
+        });
+      });
+
+      return () => {
+        router.events.off('routeChangeComplete', () => {});
+      };
+    }
+  }, [router]);
+
+  return null;
+};
+
+export default useRefreshAds;