iNocturnis/NullTranslationWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hieuhuy Pham 2025-03-12 01:52:05 -04:00
parent b7f7fd1989
commit 01dc9c9749
6 changed files with 103 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
global.d.ts vendored
View File

@ -8,6 +8,14 @@ declare namespace NodeJS {
interface Window { interface Window {
kofiWidgetOverlay: any; kofiWidgetOverlay: any;
dataLayer: any[]; dataLayer: any[];
googletag: {
cmd: any[];
pubads: () => {
refresh: () => void;
enableSingleRequest: () => void;
};
enableServices: () => void;
};
} }
} }
export {}; export {};

17
src/app/books/[bookId]/page.tsx
View File

@ -4,7 +4,6 @@ import { encodeId, formatDateToMonthDayYear, markdownToHtml } from "@/lib/utils"
import ChapterDropdown from "@/components/ChapterDropdown"; import ChapterDropdown from "@/components/ChapterDropdown";
import { Ad } from "@/lib/types"; import { Ad } from "@/lib/types";
import { Countdown } from "@/components/Countdown"; import { Countdown } from "@/components/Countdown";
import Link from "next/link";
export type paramsType = Promise<{ bookId: string }>; export type paramsType = Promise<{ bookId: string }>;
@ -106,7 +105,7 @@ export default async function BookPage(props: { params: paramsType }) {
<Countdown release_datetime={chapter.release_datetime} /> <Countdown release_datetime={chapter.release_datetime} />
</p> </p>
{chapter.number === next_chapter?.number ? ( {chapter.number === next_chapter?.number ? (
<Link <a
href={'/early?bookId=' + encodeId(bookId)} href={'/early?bookId=' + encodeId(bookId)}
className={` className={`
bg-red-500 text-white py-2 px-4 mx-2 rounded 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 Unlock Early AdWalled Chapter
</Link> </a>
) )
: ( : (
<Link <a
href={Ad.patreon} href={Ad.patreon}
className={` className={`
bg-yellow-500 text-white py-2 px-4 mx-2 rounded 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 Join Patreon for More Early Chapters
</Link> </a>
)} )}
</div> </div>
</li> </li>
@ -174,7 +173,7 @@ export default async function BookPage(props: { params: paramsType }) {
<Countdown release_datetime={chapter.release_datetime} /> <Countdown release_datetime={chapter.release_datetime} />
</p> </p>
{chapter.number === next_chapter?.number ? ( {chapter.number === next_chapter?.number ? (
<Link <a
href={'/early?bookId=' + encodeId(bookId)} href={'/early?bookId=' + encodeId(bookId)}
className={` className={`
bg-red-500 text-white py-2 px-4 mx-2 rounded 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 Unlock Early Ad-Walled Chapter
</Link> </a>
) )
: ( : (
<Link <a
href={Ad.patreon} href={Ad.patreon}
className={` className={`
bg-yellow-500 text-white py-2 px-4 mx-2 rounded 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 Join Patreon for More Early Chapters
</Link> </a>
)} )}
</div> </div>
</li> </li>

12
src/app/layout.tsx
View File

@ -43,7 +43,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<span className="ml-3 text-lg">Loading content...</span> <span className="ml-3 text-lg">Loading content...</span>
</div> </div>
) )
return ( return (
<html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning> <html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning>
<head> <head>
@ -78,6 +77,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
gtag('config', 'G-6SXB46RSDE'); 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> </head>
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen"> <body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<KofiWidget /> <KofiWidget />

13
src/app/releases/page.tsx
View File

@ -1,7 +1,6 @@
import { formatDateToMonthDayYear } from "@/lib/utils"; import { formatDateToMonthDayYear } from "@/lib/utils";
import { Chapter, Ad } from "@/lib/types"; import { Chapter, Ad } from "@/lib/types";
import { fetchReleases } from "@/lib/api"; import { fetchReleases } from "@/lib/api";
import Link from "next/link";
import { Countdown } from "@/components/Countdown"; import { Countdown } from "@/components/Countdown";
@ -64,17 +63,17 @@ export default async function ReleasePage() {
.sort(([titleA], [titleB]) => titleA.localeCompare(titleB)) .sort(([titleA], [titleB]) => titleA.localeCompare(titleB))
.map(([bookTitle, chapters]) => ( .map(([bookTitle, chapters]) => (
<div key={bookTitle} className="mb-6"> <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"> className="text-lg font-semibold text-gray-700 dark:text-yellow-300 mb-4 hover:underline">
{bookTitle} {bookTitle}
</Link> </a>
<ul className="space-y-4"> <ul className="space-y-4">
{chapters.map((chapter) => ( {chapters.map((chapter) => (
<li <li
key={chapter.id} 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" 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"> <h4 className="text-md font-medium">
Chapter {chapter.number}: {chapter.title} Chapter {chapter.number}: {chapter.title}
@ -85,7 +84,7 @@ export default async function ReleasePage() {
new Date(chapter.release_datetime) new Date(chapter.release_datetime)
)} )}
</p> </p>
</Link> </a>
</li> </li>
))} ))}
</ul> </ul>
@ -108,10 +107,10 @@ export default async function ReleasePage() {
.sort(([titleA], [titleB]) => titleA.localeCompare(titleB)) .sort(([titleA], [titleB]) => titleA.localeCompare(titleB))
.map(([bookTitle, chapters]) => ( .map(([bookTitle, chapters]) => (
<div key={bookTitle} className="mb-6"> <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"> className="text-lg font-semibold text-blue-700 dark:text-blue-300 mb-4 hover:underline">
{bookTitle} {bookTitle}
</Link> </a>
<ul className="space-y-4"> <ul className="space-y-4">
{chapters.map((chapter) => ( {chapters.map((chapter) => (
<li <li

44
src/components/NavigationBar.tsx
View File

@ -1,7 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { Ad } from "@/lib/types"; import { Ad } from "@/lib/types";
export default function Navbar() { export default function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
@ -17,29 +16,29 @@ export default function Navbar() {
alt="Logo" alt="Logo"
className="h-8 w-8" 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 Null Translation Group
</Link> </a>
</div> </div>
{/* Navigation Links */} {/* Navigation Links */}
<nav className="hidden md:flex space-x-6"> <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 Announcements
</Link> </a>
<Link href="/" className="hover:text-gray-400"> <a href="https://nulltranslation.com" className="hover:text-gray-400">
Books Books
</Link> </a>
<Link href={"/releases"} className="hover:text-gray-400"> <a href={"/releases"} className="hover:text-gray-400">
Releases Releases
</Link> </a>
<Link href={"/early"} className="hover:text-gray-400"> <a href={"/early"} className="hover:text-gray-400">
Early Access Early Access
</Link> </a>
<Link href={Ad.patreon} className="hover:text-yellow-400 text-yellow-200 font-semibold"> <a href={Ad.patreon} className="hover:text-yellow-400 text-yellow-200 font-semibold">
Patreon Patreon
</Link> </a>
</nav> </nav>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
@ -67,18 +66,21 @@ export default function Navbar() {
{/* Mobile Menu */} {/* Mobile Menu */}
{isMenuOpen && ( {isMenuOpen && (
<div className="md:hidden bg-gray-700 px-6 pb-4"> <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 Announcements
</Link> </a>
<Link href={"/releases"} className="block py-2 hover:text-gray-400"> <a href={"/releases"} className="block py-2 hover:text-gray-400">
Release Release
</Link> </a>
<Link href="/" className="block py-2 hover:text-gray-400"> <a href="https://nulltranslation.com" className="block py-2 hover:text-gray-400">
Book List Book List
</Link> </a>
<Link href={Ad.patreon} className="block py-2 hover:text-gray-400"> <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 Patreon
</Link> </a>
</div> </div>
)} )}
</div> </div>

32
src/hooks/useRefreshAds.ts Normal file
View File

@ -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;