Logo swap, layour changes so the night mode button stays on top. Change src images to Image from next otherwise lint will complain. Api changes to accomendate the new Strapi. Same for type changes to fit into the new Strapi.
This commit is contained in:
@@ -12,34 +12,28 @@ export default async function ChapterPage(props: { params: paramsType}) {
|
||||
const book = await fetchBookById(bookId);
|
||||
|
||||
const chapters :Chapter[] = book.chapters;
|
||||
const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.Chapter_Number - b.Chapter_Number);
|
||||
const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.number - b.number);
|
||||
const current_chapter = sorted_chapters.find((chapter) => chapter.documentId === chapterId) || undefined;
|
||||
const next_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.Chapter_Number === current_chapter.Chapter_Number + 1)?.documentId || "" : "";
|
||||
const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.Chapter_Number === current_chapter.Chapter_Number - 1)?.documentId || "" : "";
|
||||
const next_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number + 1)?.documentId || "" : "";
|
||||
const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.number === current_chapter.number - 1)?.documentId || "" : "";
|
||||
// Fetch chapter data
|
||||
|
||||
if (current_chapter === undefined) {
|
||||
return (
|
||||
<div className="relative bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
|
||||
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
|
||||
<div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
|
||||
|
||||
{/* Client component for navigation */}
|
||||
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
|
||||
<div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
|
||||
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
|
||||
<div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg mt-4">
|
||||
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
|
||||
|
||||
<div className="pt-4" dangerouslySetInnerHTML={{ __html: current_chapter.Content }}></div>
|
||||
<div className="pt-4" dangerouslySetInnerHTML={{ __html: current_chapter.content }}></div>
|
||||
|
||||
{/* Client component for navigation */}
|
||||
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter}/>
|
||||
<NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter}/>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { fetchBookChapterLinks } from "@/lib/api";
|
||||
import { fetchBookById, fetchBookChapterLinks } from "@/lib/api";
|
||||
import { Book } from "@/lib/types";
|
||||
import { formatDateToMonthDayYear } from "@/lib/utils";
|
||||
import ChapterDropdown from "@/components/ChapterDropdown";
|
||||
import Image from "next/image";
|
||||
|
||||
export type paramsType = Promise<{ bookId: string}>;
|
||||
|
||||
@@ -11,7 +12,7 @@ export default async function BookPage(props: { params: paramsType }) {
|
||||
|
||||
let book: Book;
|
||||
try {
|
||||
book = await fetchBookChapterLinks(bookId);
|
||||
book = await fetchBookById(bookId);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return (
|
||||
@@ -21,31 +22,35 @@ export default async function BookPage(props: { params: paramsType }) {
|
||||
);
|
||||
}
|
||||
|
||||
const { Name, Author, Description, chapters } = book;
|
||||
const { title, author, description, chapters, cover } = book;
|
||||
const cover_media = cover?.at(0);
|
||||
const recentChapters = chapters.length > 6 ? chapters.slice(chapters.length - 6, chapters.length) : chapters;
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto py-10 px-4">
|
||||
<div className="flex items-center justify-between mb-4 pt-4">
|
||||
{/* Book Title */}
|
||||
<h1 className="text-5xl font-bold">{Name}</h1>
|
||||
|
||||
{/* Patreon Button */}
|
||||
<a
|
||||
href="https://www.patreon.com/c/nulltranslationgroup/membership?view_as=patron" // Replace with your Patreon URL
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="ml-4 bg-yellow-500 text-white font-semibold py-2 px-4 rounded hover:bg-yellow-600 transition duration-200"
|
||||
>
|
||||
Join Our Patreon for Unreleased Chapters
|
||||
</a>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<img src={`${process.env.NEXT_PUBLIC_API_URL}${cover_media?.url}`}
|
||||
alt={cover_media?.alternativeText || `Cover of ${book.title}`}
|
||||
className="rounded-lg object-cover w-64 h-96"
|
||||
/>
|
||||
<div className="flex items-center justify-between mb-4 pt-4">
|
||||
<h1 className="text-5xl font-bold">{title}</h1>
|
||||
<a
|
||||
href="https://www.patreon.com/c/nulltranslationgroup/membership?view_as=patron" // Replace with your Patreon URL
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="ml-4 bg-yellow-500 text-white font-semibold py-2 px-4 rounded hover:bg-yellow-600 transition duration-200"
|
||||
>
|
||||
Join Our Patreon for Unreleased Chapters
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 mb-4">
|
||||
<strong>Author:</strong> {Author}
|
||||
<strong>Author:</strong> {author}
|
||||
<br></br>
|
||||
<strong>Translator:</strong> Null Translation Group
|
||||
</p>
|
||||
<p className="mb-6">{Description}</p>
|
||||
<p className="mb-6">{description}</p>
|
||||
|
||||
<h2 className="text-3xl font-semibold mb-4">Recent Chapters</h2>
|
||||
<ul className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -56,10 +61,10 @@ export default async function BookPage(props: { params: paramsType }) {
|
||||
className="block bg-white dark:bg-gray-800 rounded-lg shadow p-4 hover:shadow-lg transition duration-200"
|
||||
>
|
||||
<h3 className="text-xl font-medium">
|
||||
Chapter {chapter.Chapter_Number}: {chapter.Name}
|
||||
Chapter {chapter.number}: {chapter.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
||||
<strong>Release Date:</strong> {formatDateToMonthDayYear(new Date(chapter.ReleaseDate))}
|
||||
<strong>Release Date:</strong> {formatDateToMonthDayYear(new Date(chapter.release_date))}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
@@ -76,10 +81,10 @@ export default async function BookPage(props: { params: paramsType }) {
|
||||
className="block bg-white dark:bg-gray-800 rounded-lg shadow p-4 hover:shadow-lg transition duration-200"
|
||||
>
|
||||
<h3 className="text-xl font-medium">
|
||||
Chapter {chapter.Chapter_Number}: {chapter.Name}
|
||||
Chapter {chapter.number}: {chapter.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
||||
<strong>Release Date:</strong> {formatDateToMonthDayYear(new Date(chapter.ReleaseDate))}
|
||||
<strong>Release Date:</strong> {formatDateToMonthDayYear(new Date(chapter.release_date))}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user