prolly the last update to dramalama.

5 files changed, 101 insertions, 43 deletions

diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index a95dcfe..1d57d1c 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -1,3 +1,7 @@
+.Main {
+	margin: 80px auto;
+}
+
 .Image {
 	display: flex;
 	flex-direction: column;
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 96635e3..b827249 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -1,3 +1,7 @@
+.MangaInfoContainer {
+	margin: 70px auto;
+}
+
 .MangaHero {
 	display: flex;
 	flex-direction: column;
@@ -28,31 +32,53 @@
 .MangaDescription {
 	color: white;
 	font-family: "Atkinson Hyperlegible";
-	text-align: center;
+	max-width: 98%;
+	margin: -10px auto;
 }
 
-.MangaDescription span {
-	margin: 10px;
-	color: var(--soft-purple);
+.Description h2 {
+	font-family: "Poppins";
+	color: gray;
 }
 
-.MangaRatings {
-	display: flex;
-	justify-content: center;
+.Description p {
 	margin-top: -10px;
 }
 
-.MangaRatings span {
-	margin-right: 2px;
-	margin-left: 2px;
-	color: var(--light-green);
+.GenreContainer {
+	margin-top: 5px;
+	display: flex;
+	align-items: center;
+}
+
+.GenreText {
+	color: var(--neon-green);
+}
+
+.genres {
+	display: flex;
+	align-items: center;
+	overflow-x: auto;
 }
 
 .MangaGenre {
 	background-color: #5f5f5f5d;
-	padding: 2px;
 	border-radius: 5px;
+	padding: 2px 5px;
 	cursor: pointer;
+	margin: 2px;
+}
+
+.MangaRatings {
+	display: flex;
+	margin: 5px 0px 10px 0px;
+	/* justify-content: center; */
+}
+
+.MangaRatings span {
+	margin-right: 2px;
+	margin-left: 2px;
+	color: var(--light-green);
 }
 
 .Character {
@@ -70,7 +96,6 @@
 	border-radius: 5px;
 }
 
-
 .CharacterEntry {
 	display: flex;
 	flex-direction: column;
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 70c4f84..c8eb389 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -4,6 +4,7 @@ import Buttons from "./buttons";
 import { redirect } from "next/navigation";
 import { FaStar } from "react-icons/fa";
 import CurrentReading from "./[read]/currentReading";
+import PreFetchChaterLinks from "../../cacher";
 
 export const runtime = "edge";
 
@@ -15,6 +16,8 @@ export default async function MangaInfo({ params }) {
 		redirect("/404");
 	}
 
+	PreFetchChaterLinks(data.chapters);
+
 	return (
 		<div className={styles.MangaInfoContainer}>
 			{data && (
@@ -49,34 +52,41 @@ export default async function MangaInfo({ params }) {
 					</div>
 
 					<div className={styles.MangaDescription}>
-						<p>{data.description.split("<br")[0]}</p>
-						<span className={styles.MangaReleaseYear}>
-							Released in: {data.releaseDate}
-						</span>
-						<span>
-							Started on: {data.startDate["day"]}-
-							{data.startDate["month"]}-{data.startDate["year"]}
-						</span>
-						<span>
-							Ended on: {data.endDate["day"]}-
-							{data.endDate["month"]}-{data.endDate["year"]}
-						</span>
-						<p style={{ color: "#7ED7C1" }}>
-							Genres:
-							{data.genres &&
-								data.genres.map((item, index) => (
-									<span
-										key={index}
-										className={styles.MangaGenre}
-										style={{
-											color: data.color,
-											margin: 5,
-										}}
-									>
-										{item}
-									</span>
-								))}
-						</p>
+						<div className={styles.Description}>
+							<h2>Description</h2>
+							<p>{data.description.split("<br")[0]}</p>
+						</div>
+
+						<div className={styles.MangaReleaseYear}>
+							<span style={{ color: "#A3FFD6" }}>
+								Started on: {data.startDate["day"]}-
+								{data.startDate["month"]}-
+								{data.startDate["year"]}
+							</span>
+							<span style={{ color: "white", margin: 10 }}>
+								|
+							</span>
+							<span style={{ color: "var(--pastel-red)" }}>
+								Ended on: {data.endDate["day"]}-
+								{data.endDate["month"]}-{data.endDate["year"]}
+							</span>
+						</div>
+
+						<div className={styles.GenreContainer}>
+							<span className={styles.GenreText}>Genres: </span>
+							<div className={styles.genres}>
+								{data.genres &&
+									data.genres.map((item, index) => (
+										<span
+											key={index}
+											className={styles.MangaGenre}
+										>
+											{item}
+										</span>
+									))}
+							</div>
+						</div>
+
 						<div className={styles.MangaRatings}>
 							<span>Ratings: {data.rating / 10}</span>
 							<span>
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index 27c3a37..97a4dba 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -1,6 +1,6 @@
 .Main {
 	max-width: 90%;
-	margin: 0px auto;
+	margin: 60px auto;
 }
 
 .MangaContainer {
@@ -18,7 +18,7 @@
 .MangaEntries {
 	display: flex;
 	flex-direction: row;
-	margin: 10px;
+	margin: 0px 10px 10px 10px;
 	padding: 10px;
 	border-style: dotted;
 	border-color: #363636 #474747;
diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js
new file mode 100644
index 0000000..ef8ef2e
--- /dev/null
+++ b/src/app/manga/cacher.js
@@ -0,0 +1,19 @@
+// This function pre-fetches all the chapter pages links for a manga in the background
+"use server";
+
+export default async function PreFetchChaterLinks(data) {
+	try {
+		const fetchPromises = data.map(async (element) => {
+			const link = `https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`;
+			await fetch(link, { cache: "force-cache" });
+		});
+
+		await Promise.all(fetchPromises);
+		console.log("Chapter links pre-fetched successfully!");
+	} catch (error) {
+		console.error(
+			"Error occurred while pre-fetching chapter links:",
+			error
+		);
+	}
+}