From ec888b9bec997456368d03579e569929f3745307 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Thu, 18 Apr 2024 21:43:02 +0530 Subject: feature added: tracker for mangas --- src/app/globals.css | 9 ++-- src/app/kdrama/components/popular.jsx | 2 +- .../manga/[title]/[id]/[read]/currentReading.jsx | 39 ++++++++++-------- src/app/manga/[title]/[id]/[read]/download.jsx | 12 ++++-- src/app/manga/[title]/[id]/[read]/page.jsx | 3 -- src/app/manga/[title]/[id]/[read]/read.module.css | 13 ++---- src/app/manga/[title]/[id]/buttons.jsx | 31 ++++++++++---- src/app/manga/[title]/[id]/info.module.css | 16 +++++--- src/app/manga/[title]/[id]/page.jsx | 6 +-- src/app/manga/[title]/page.jsx | 5 ++- src/app/manga/[title]/title.module.css | 11 +++-- src/app/manga/cacher.js | 15 ++++++- src/app/manga/manga.module.css | 21 +++++++++- src/app/manga/searchBar.jsx | 48 +++++++++++++--------- src/app/page.module.css | 5 ++- 15 files changed, 149 insertions(+), 87 deletions(-) (limited to 'src') diff --git a/src/app/globals.css b/src/app/globals.css index 77c028c..7b5d384 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital@0;1&family=Quicksand&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend+Deca&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root { --neon-green: #45FFCA; @@ -12,11 +11,11 @@ body { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; background-color: #1a1a1a; } body::-webkit-scrollbar { - width: 0px; + width: 0; } \ No newline at end of file diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx index 639ed9f..4f9a1d2 100644 --- a/src/app/kdrama/components/popular.jsx +++ b/src/app/kdrama/components/popular.jsx @@ -37,7 +37,7 @@ export default async function PopularDramas() { async function getPopular() { const res = await fetch("https://dramacool-scraper.vercel.app/popular", { - next: { revalidate: 86400 }, + next: { revalidate: 33200 }, }); const data = await res.json(); return data; diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx index 2db6d77..0050d61 100644 --- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx +++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx @@ -1,27 +1,34 @@ "use client"; -import { useState, useEffect } from "react"; + import styles from "./read.module.css"; +import { useEffect } from "react"; -export default function CurrentReading() { - const [chapter, setChapter] = useState(null); - const [volume, setVolume] = useState(null); +function get_current_info(title) { + let req = {}; useEffect(() => { - setChapter(localStorage.getItem("chapter") || ""); - setVolume(localStorage.getItem("volume") || ""); - }); + const data = JSON.parse(localStorage.getItem("mangaData")); + data.watchHis.forEach((element) => { + if (element.title === title) { + req.chapter = element.chapter; + req.volume = element.volume; + } + }); + }, []); - return CR(chapter, volume); + return req || false; } -function CR(chapter, volume) { +export default function Current({ name: title }) { + let data = get_current_info(title); + if (!data) { + return; + } + return ( -
- {chapter && volume && ( -

- Reading: Vol {volume} Chapter {chapter} -

- )} -
+
+

{data.chapter}

+

{data.volume}

+
); } diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx index b8af783..e7a20ee 100644 --- a/src/app/manga/[title]/[id]/[read]/download.jsx +++ b/src/app/manga/[title]/[id]/[read]/download.jsx @@ -1,5 +1,6 @@ +"use client"; + import styles from "./read.module.css"; -// import Link from "next/link"; export default function DownloadManga({ chapterId: id }) { return ( @@ -7,10 +8,13 @@ export default function DownloadManga({ chapterId: id }) { + alert( + "Downloads are not instant. It might take some time to prepare your file. Thank you for your patience" + ) + } > - + ); diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx index 239a4d6..dbba6e0 100644 --- a/src/app/manga/[title]/[id]/[read]/page.jsx +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -1,7 +1,6 @@ import styles from "./read.module.css"; import Image from "next/image"; import DownloadManga from "./download"; -import CurrentReading from "./currentReading"; export default async function Read({ params }) { const chapterId = params.read; @@ -26,7 +25,6 @@ export default async function Read({ params }) { return (
-

Total pages: {images.length}

@@ -47,7 +45,6 @@ export default async function Read({ params }) {
))}
- ); } diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css index 1d57d1c..420fff8 100644 --- a/src/app/manga/[title]/[id]/[read]/read.module.css +++ b/src/app/manga/[title]/[id]/[read]/read.module.css @@ -22,7 +22,7 @@ .ImageContainer p { text-align: center; color: white; - font-family: "Kanit"; + font-family: "Atkinson Hyperlegible", serif; font-size: 16px; margin: 5px; } @@ -30,7 +30,7 @@ .NotFound { text-align: center; color: white; - font-family: "Atkinson Hyperlegible"; + font-family: "Atkinson Hyperlegible", serif; font-size: 20px; } @@ -43,7 +43,7 @@ outline: none; border-radius: 5px; padding: 5px; - font-family: "Lato"; + font-family: "Atkinson Hyperlegible", serif; font-size: 16px; background-color: var(--light-green); cursor: pointer; @@ -53,13 +53,6 @@ background-color: var(--pastel-red); } -.CurrentReadingContainer { - text-align: center; - color: white; - font-family: "Quicksand"; - font-size: 18px; -} - @media screen and (max-width: 768px) { .ImageContainer img { width: 95%; diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx index 19da1d3..4c11705 100644 --- a/src/app/manga/[title]/[id]/buttons.jsx +++ b/src/app/manga/[title]/[id]/buttons.jsx @@ -2,8 +2,21 @@ import styles from "./info.module.css"; import Link from "next/link"; +import { storeLocal } from "../../history/storeData"; export default function Buttons({ content: data }) { + function store_to_local(title, chapter, volume, image, id, id2) { + let data = { + title: title, + chapter: chapter, + volume: volume, + image: image, + id: id, + mangaId: id2, + }; + storeLocal(data); + } + return (
{data.chapters && @@ -15,9 +28,16 @@ export default function Buttons({ content: data }) { href={{ pathname: `/manga/info/read/${item.id}`, }} - onClick={() => - test(item.chapterNumber, item.volumeNumber) - } + onClick={() => { + store_to_local( + data.title.english || data.title.romaji, + parseInt(item.chapterNumber), + parseInt(item.volumeNumber), + data.image, + item.id, + data.id + ); + }} >
-

Chapters & Volumes diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx index 0602ad9..589ff53 100644 --- a/src/app/manga/[title]/page.jsx +++ b/src/app/manga/[title]/page.jsx @@ -1,13 +1,16 @@ import styles from "./title.module.css"; import Image from "next/image"; import Link from "next/link"; +import { PreFetchMangaInfo } from "../cacher"; -// This page displays all the available mangas or manhwas when the user searches for one/ +// This page displays all the available mangas or manhwas when the user searches for one/ export default async function MangaInfo({ params }) { const title = params.title; const data = await GetSearchedAnime(title); + PreFetchMangaInfo(data); + return (

diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css index 8a87422..e7842d5 100644 --- a/src/app/manga/[title]/title.module.css +++ b/src/app/manga/[title]/title.module.css @@ -11,7 +11,7 @@ .SearchedFor { color: white; text-align: center; - font-family: "Poppins"; + font-family: "Lexend Deca", serif; font-size: 26px; } @@ -42,10 +42,11 @@ .MangaInfo { color: white; margin-left: 20px; + font-family: "Atkinson Hyperlegible"; } .MangaTitle { - font-family: "Lato"; + font-family: "Lexend Deca", serif; margin: 0px; font-size: 22px; color: var(--neon-green); @@ -53,14 +54,18 @@ .MangaStatus { color: var(--soft-purple); + font-family: "Poppins", serif; + } .MangaVolume { color: #FFACAC; + font-family: "Poppins", serif; } .MangaChapters { - color: #FFEBB4 + color: #FFEBB4; + font-family: "Poppins", serif; } @media screen and (max-width: 768px) { diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js index 916caca..7f047ab 100644 --- a/src/app/manga/cacher.js +++ b/src/app/manga/cacher.js @@ -1,7 +1,7 @@ // This function pre-fetches all the chapter pages links for a manga in the background "use server"; -export default async function PreFetchChaterLinks(data) { +export async function PreFetchChaterLinks(data) { try { const fetchPromises = data.map(async (element) => { const link = `https://consumet-jade.vercel.app/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`; @@ -17,3 +17,16 @@ export default async function PreFetchChaterLinks(data) { ); } } + +export async function PreFetchMangaInfo(data) { + try { + const fetchPromises = data.results.map(async (element) => { + const link = `https://consumet-jade.vercel.app/meta/anilist-manga/${element.id}?provider=mangadex`; + await fetch(link, { next: { revalidate: 86400 } }); + }); + await Promise.all(fetchPromises); + console.log("Manga info pre-fetched successfully!"); + } catch (error) { + console.error("error", error); + } +} diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css index d321533..8dd72d0 100644 --- a/src/app/manga/manga.module.css +++ b/src/app/manga/manga.module.css @@ -12,6 +12,22 @@ width: auto; } +.searchMain { + display: flex; + align-items: center; +} + +.searchMain button { + margin: 10px 5px 0px 5px; + padding: 4px; + border-radius: 0.3rem; + border: none; + outline: none; + font-family: "Atkinson Hyperlegible", serif; + background: #1f1f1f; + color: white; +} + .SearchBar { display: flex; align-items: center; @@ -20,7 +36,8 @@ border-style: dotted; border-color: rgb(63, 63, 63); border-width: 2px; - width: 20dvw + width: 20dvw; + border-radius: 1rem; } .SearchBar input { @@ -31,7 +48,7 @@ padding: 4px; width: 100%; color: white; - font-family: "Kanit"; + font-family: "Lexend Deca", serif; font-size: 16px; } diff --git a/src/app/manga/searchBar.jsx b/src/app/manga/searchBar.jsx index 7fb4ad1..bffb957 100644 --- a/src/app/manga/searchBar.jsx +++ b/src/app/manga/searchBar.jsx @@ -4,6 +4,7 @@ import { FaSearch } from "react-icons/fa"; import styles from "./manga.module.css"; import { useState } from "react"; import { useRouter } from "next/navigation"; +import Link from "next/link"; // This is the search bar for the mangapage. Nothing extraordinary but just an input box and a search icon. Gets the work done. @@ -13,25 +14,32 @@ export default function SearchBar() { const [title, setMangaTitle] = useState(""); return ( -
- - setMangaTitle(e.target.value)} - onKeyDown={(event) => { - if ( - (event.key === "Enter" || - event.code === 13 || - event.code === "Enter") && - title !== "" - ) { - router.push(`/manga/${title}`); - } - }} - > -
+
+
+ + setMangaTitle(e.target.value)} + onKeyDown={(event) => { + if ( + (event.key === "Enter" || + event.code === 13 || + event.code === "Enter") && + title !== "" + ) { + router.push(`/manga/${title}`); + } + }} + > +
+
+ + + +
+
); } diff --git a/src/app/page.module.css b/src/app/page.module.css index 8a64245..3a7031f 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -11,7 +11,7 @@ align-items: center; justify-content: space-between; background-color: #121212; - font-family: "Poppins", serif; + font-family: "Lexend Deca", serif; z-index: 2; } @@ -57,6 +57,7 @@ font-size: 14px; margin: 0; padding: 0.6rem; + font-family: "Poppins", serif; } .content { @@ -84,7 +85,7 @@ border-radius: 5px; transition: opacity 400ms ease; padding: 0.4rem 2rem; - font-family: "Poppins", serif; + font-family: "Lexend Deca", serif; } .content:hover>.contentContainer div { -- cgit v1.2.3