From 9202a2b6790e57dc35d0563d014e89d981a65e37 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Mon, 25 Mar 2024 11:33:09 +0530 Subject: feature added: mangas are now available --- src/app/globals.css | 1 + src/app/header/header.jsx | 11 +- src/app/manga/Manga.jsx | 63 ++++++++++ src/app/manga/[title]/[id]/[read]/page.jsx | 51 ++++++++ src/app/manga/[title]/[id]/[read]/read.module.css | 43 +++++++ src/app/manga/[title]/[id]/buttons.jsx | 28 +++++ src/app/manga/[title]/[id]/info.module.css | 135 ++++++++++++++++++++ src/app/manga/[title]/[id]/page.jsx | 102 +++++++++++++++ src/app/manga/[title]/page.jsx | 74 +++++++++++ src/app/manga/[title]/title.module.css | 61 +++++++++ src/app/manga/manga.module.css | 145 ++++++++++++++++++++++ src/app/manga/page.jsx | 62 +++++++++ src/app/manga/searchBar.jsx | 35 ++++++ src/app/page.module.css | 2 +- src/app/video/[animeId]/page.jsx | 3 +- 15 files changed, 810 insertions(+), 6 deletions(-) create mode 100644 src/app/manga/Manga.jsx create mode 100644 src/app/manga/[title]/[id]/[read]/page.jsx create mode 100644 src/app/manga/[title]/[id]/[read]/read.module.css create mode 100644 src/app/manga/[title]/[id]/buttons.jsx create mode 100644 src/app/manga/[title]/[id]/info.module.css create mode 100644 src/app/manga/[title]/[id]/page.jsx create mode 100644 src/app/manga/[title]/page.jsx create mode 100644 src/app/manga/[title]/title.module.css create mode 100644 src/app/manga/manga.module.css create mode 100644 src/app/manga/page.jsx create mode 100644 src/app/manga/searchBar.jsx (limited to 'src') diff --git a/src/app/globals.css b/src/app/globals.css index 42eb9ad..a76fc50 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -34,6 +34,7 @@ body::-webkit-scrollbar { .rightNav { display: flex; cursor: pointer; + overflow-x: auto; } .rightNav a { diff --git a/src/app/header/header.jsx b/src/app/header/header.jsx index bc4a019..22798b4 100644 --- a/src/app/header/header.jsx +++ b/src/app/header/header.jsx @@ -8,17 +8,20 @@ export default function Header() { href="/" style={{ color: "black", textDecoration: "none" }} > -

+

Dramalama

- -

Kdrama

-

Anime

+ +

Manga

+ + +

Kdrama

+
diff --git a/src/app/manga/Manga.jsx b/src/app/manga/Manga.jsx new file mode 100644 index 0000000..c4a0410 --- /dev/null +++ b/src/app/manga/Manga.jsx @@ -0,0 +1,63 @@ +import styles from "./manga.module.css"; +import Image from "next/image"; + +export default async function Manga() { + return ( +
+
+
+
+ Manga madness is here +
+ +
+
+
+ Haikyu +
+
+ Haikyu + Haikyu +
+
+
+ +
+
+

+ Welcome to Dramalama Manga +

+

+ Dive into a world where action jumps off the page and + pictures paint a thousand words. Manga Universe is a + site that will immerse you in stunning illustrations and + compel you to lose yourself in thrilling narratives. +

+
+
+

Why choose us?

+

+ Our platform is built by manga enthusiasts, for manga + enthusiasts. That means high quality scans, an extensive + series catalogue, and regular series updates. +

+
+
+
+ ); +} diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx new file mode 100644 index 0000000..a90d170 --- /dev/null +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -0,0 +1,51 @@ +import styles from "./read.module.css"; +import Image from "next/image"; + +export default async function Read({ params }) { + const chapterId = params.read; + const data = await getPages(chapterId); + if (data.length === 0) { + return ( +
+

+ This chapter has no content. Please check the next chapter. +

+
+ ); + } + + let images = []; + for (var i = 0; i < data.length; i++) { + var imgUrl = data[i].img; + images.push(imgUrl); + } + + return ( +
+
+ {images && + images.map((item, index) => ( +
+ Pages +

{index + 1}

+
+ ))} +
+
+ ); +} + +async function getPages(id) { + const res = await fetch( + `https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${id}&provider=mangadex` + ); + const data = await res.json(); + return data; +} diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css new file mode 100644 index 0000000..3a8c99f --- /dev/null +++ b/src/app/manga/[title]/[id]/[read]/read.module.css @@ -0,0 +1,43 @@ +.ImageContainer img { + width: auto; + height: auto; + border-radius: 5px; + margin-top: 10px; + +} + +.Image { + display: flex; + flex-direction: column; + align-items: center; + background-color: #1b1b1b; + border-radius: 10px; + width: auto; + margin-top: 10px; +} + +.ImageContainer p { + text-align: center; + color: white; + font-family: "Kanit"; + font-size: 16px; + margin: 5px; +} + +.NotFound { + text-align: center; + color: white; + font-family: "Atkinson Hyperlegible"; + font-size: 20px; +} + +@media screen and (max-width: 768px) { + .ImageContainer img { + width: 90%; + align-items: center; + } + + .Image { + width: 100%; + } +} \ No newline at end of file diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx new file mode 100644 index 0000000..07fe3c3 --- /dev/null +++ b/src/app/manga/[title]/[id]/buttons.jsx @@ -0,0 +1,28 @@ +import styles from "./info.module.css"; +import Link from "next/link"; + +export default async function Buttons({ content: data }) { + return ( +
+ {data.chapters && + data.chapters.map((item, index) => { + if (item.pages !== 0) { + return ( + + + + ); + } + })} +
+ ); +} diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css new file mode 100644 index 0000000..99ea636 --- /dev/null +++ b/src/app/manga/[title]/[id]/info.module.css @@ -0,0 +1,135 @@ +.MangaInfoContainer { + max-width: 90%; + margin: 0px auto; +} + +.MangaHero { + display: flex; + flex-direction: column; +} + +.HeroImage { + width: 100%; + height: auto; + max-height: 550px; + border-radius: 10px; +} + +.TitleContainer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; +} + +.TitleContainer p { + font-family: "Lato"; + font-size: 32px; +} + +.TitleContainer img { + border-radius: 10px; +} + +.MangaDescription { + color: white; + font-family: "Atkinson Hyperlegible"; + text-align: center; +} + +.MangaDescription span { + margin: 10px; + color: var(--soft-purple); +} + +.MangaRatings { + color: var(--light-green); +} + +.MangaGenre { + background-color: #5f5f5f5d; + padding: 2px; + border-radius: 5px; + cursor: pointer; +} + +.Character { + display: flex; + flex-direction: row; + overflow-x: auto; +} + +.Character::-webkit-scrollbar { + height: 5px; +} + +.Character::-webkit-scrollbar-thumb { + background-color: #949494; + border-radius: 5px; +} + +.Character::-webkit-scrollbar-track { + background-color: rgb(87, 87, 87); + border-radius: 5px; +} + +.CharacterEntry { + margin: 5px; +} + +.CharacterEntry p { + text-align: center; + color: white; +} + +.CharacterEntry img { + border-radius: 10px; +} + +/* Chapters Buttons */ +.ChapterContainer { + width: 95%; + margin: 20px auto; + text-align: center; + height: 400px; + overflow-y: auto; +} + +.ChapterContainer::-webkit-scrollbar { + width: 5px; +} + +.ChapterContainer::-webkit-scrollbar-thumb { + background-color: #949494; + border-radius: 5px; +} + +.ChapterContainer::-webkit-scrollbar-track { + background-color: rgb(66, 66, 66); + border-radius: 5px; +} + +.ChapterContainer button { + width: 100px; + padding: 10px; + margin: 5px; + border-radius: 5px; + font-size: 16px; + border: none; + outline: none; + font-family: "Lato"; + background-color: #41C9E2; + cursor: pointer; + transition: transform 0.2s linear; + +} + +.ChapterContainer button:hover { + background-color: var(--neon-green); +} + +.ChapterContainer button:focus { + opacity: 0.6; + transition: transform 0.2s linear; + transform: scale(0.9); +} \ No newline at end of file diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx new file mode 100644 index 0000000..b41f719 --- /dev/null +++ b/src/app/manga/[title]/[id]/page.jsx @@ -0,0 +1,102 @@ +import styles from "./info.module.css"; +import Image from "next/image"; +import Buttons from "./buttons"; + +export default async function MangaInfo({ params }) { + const id = params.id; + const data = await getMangaInfo(id); + + return ( +
+ {data && ( +
+
+ Cover Poster +
+

+ {data.title["romaji"]} +

+ Manga Poster +
+
+ +
+

{data.description.split(" + + Released in: {data.releaseDate} + + + Started on: {data.startDate["day"]}- + {data.startDate["month"]}-{data.startDate["year"]} + + + Ended on: {data.endDate["day"]}- + {data.endDate["month"]}-{data.endDate["year"]} + +

+ Ratings: {data.rating / 10} +

+

+ Genres: + {data.genres && + data.genres.map((item, index) => ( + + {item} + + ))} +

+
+ +
+
+ {data.characters && + data.characters.map((item, index) => ( +
+ Character Poster +

+ {item.name.full} ({item.role}) +

+
+ ))} +
+
+ + +
+ )} +
+ ); +} + +async function getMangaInfo(id) { + const res = await fetch( + `https://consumet-api-di2e.onrender.com/meta/anilist-manga/info/${id}?provider=mangadex` + ); + const data = await res.json(); + return data; +} diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx new file mode 100644 index 0000000..92c2897 --- /dev/null +++ b/src/app/manga/[title]/page.jsx @@ -0,0 +1,74 @@ +import styles from "./title.module.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function MangaInfo({ params }) { + const title = params.title; + const data = await GetSearchedAnime(title); + + return ( +
+
+ {title && ( +
+

Searched for: {decodeURIComponent(title)}

+
+ )} + {data && + data.results.map(async (item, index) => { + let desc = item.description || ""; // Ensure desc is not null + if (desc === "") { + desc = "Not found"; // If desc is empty, set it to "Not found" + } + return ( + +
+ Manga Poster +
+

+ {item.title["romaji"]},{" "} + {item.title["english"]},{" "} + {item.title["native"]} +

+

+ {desc.includes && + desc.includes(" +

+ {item.status} +

+

+ Chapters: {item.totalChapters} +

+

+ Volumes: {item.volumes} +

+
+
+ + ); + })} +
+
+ ); +} + +async function GetSearchedAnime(title) { + const res = await fetch( + "https://consumet-api-di2e.onrender.com/meta/anilist-manga/" + title + ); + const data = await res.json(); + return data; +} diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css new file mode 100644 index 0000000..eef08ba --- /dev/null +++ b/src/app/manga/[title]/title.module.css @@ -0,0 +1,61 @@ +.Main { + max-width: 90%; + margin: 0px auto; +} + +.MangaContainer { + display: flex; + flex-direction: column; +} + +.SearchedFor { + color: white; + text-align: center; + font-family: "Kanit"; + font-size: 26px; +} + +.MangaEntries { + display: flex; + flex-direction: row; + margin: 10px; + padding: 10px; + border-style: dotted; + border-color: #363636 #474747; + border-radius: 10px; + border-width: 4px; + align-items: center; + cursor: pointer; + transition: transform 0.2s linear; +} + +.MangaEntries:hover { + transition: transform 0.2s linear; + transform: scale(1.01); + border-color: #535353 #686868; + +} + +.MangaInfo { + color: white; + margin-left: 20px; +} + +.MangaTitle { + font-family: "Lato"; + margin: 0px; + font-size: 22px; + color: var(--neon-green); +} + +.MangaStatus { + color: var(--soft-purple); +} + +.MangaVolume { + color: #FFACAC; +} + +.MangaChapters { + color: #FFEBB4 +} \ No newline at end of file diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css new file mode 100644 index 0000000..7e4a5ba --- /dev/null +++ b/src/app/manga/manga.module.css @@ -0,0 +1,145 @@ +@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Inter&display=swap'); + +.Main { + max-width: 90%; + margin: 10px auto; +} + +.Hero { + display: flex; + align-items: center; + justify-content: space-between; +} + +.ImageContainer { + display: flex; + flex-direction: column; +} + +.ImageContainer img { + margin: 0px 4px 4px 4px; + border-radius: 8px; + animation: zoomer 1s alternate-reverse infinite ease; +} + +@keyframes zoomer { + to { + transform: scale(1.01); + } +} + +.WelcomeContainer button { + font-family: "Inter"; + font-size: 16px; + margin-top: 8px; + padding: 6px; + border-radius: 5px; + border: none; + outline: none; + background-color: var(--neon-green); + cursor: pointer; +} + +.WelcomeText { + font-family: "Kanit"; + color: white; + font-size: 50px; + text-shadow: #FC0 2px 2px 50px; + margin-right: 10px; +} + + +.SelfPromoContainer { + display: flex; + justify-content: space-around; + font-family: "Lato"; + color: white; + /* margin-top: 20px; */ +} + +.SelfPromoContainer p { + font-family: "Quicksand"; + color: white; + text-align: center; +} + + +@media screen and (max-width: 1024px) { + + .HorizontalImageContainer img { + width: auto; + height: auto; + } + + .VerticalImageContainer img { + width: 265px; + } +} + +@media screen and (max-width: 768px) { + + .HorizontalImageContainer img { + width: 95%; + height: auto; + } + + .VerticalImageContainer img { + width: 46.5%; + height: 300px; + } +} + +.SearchBar { + display: flex; + align-items: center; + border-radius: 4px; + background: #1f1f1f; + margin-top: 5px; + width: 55%; +} + +.SearchBar input { + background: none; + outline: none; + border: none; + margin-left: 5px; + padding: 4px; + width: 100%; + color: white; + font-family: "Kanit"; + font-size: 16px; +} + +@media screen and (max-width: 425px) { + + .Hero { + flex-direction: column; + } + + .WelcomeContainer { + display: flex; + align-items: center; + flex-direction: column; + margin-bottom: 10px; + } + + .WelcomeText { + font-size: 32px; + } + + .HorizontalImageContainer img { + margin-top: 20px; + width: 100%; + height: auto; + } + + .VerticalImageContainer img { + display: none; + } + + .SearchBar { + width: 80%; + } +} + +/* Search Bar from searchBar.jsx */ \ No newline at end of file diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx new file mode 100644 index 0000000..7f1f9cb --- /dev/null +++ b/src/app/manga/page.jsx @@ -0,0 +1,62 @@ +import styles from "./manga.module.css"; +import Image from "next/image"; +import SearchBar from "./searchBar"; + +export default async function Manga() { + return ( +
+
+
+
+ Manga madness is here +
+ +
+
+
+ Haikyu +
+
+ Haikyu + Haikyu +
+
+
+ +
+
+

+ Welcome to Dramalama Manga +

+

+ Dive into a world where action jumps off the page and + pictures paint a thousand words. Dramalama Manga is a + site that will immerse you in stunning illustrations and + compel you to lose yourself in thrilling narratives. +

+
+
+
+ ); +} diff --git a/src/app/manga/searchBar.jsx b/src/app/manga/searchBar.jsx new file mode 100644 index 0000000..fa0962a --- /dev/null +++ b/src/app/manga/searchBar.jsx @@ -0,0 +1,35 @@ +"use client"; + +import { FaSearch } from "react-icons/fa"; +import styles from "./manga.module.css"; +import { useState } from "react"; +import { useRouter } from "next/navigation"; + +export default function SearchBar() { + const router = useRouter(); + + 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}`); + } + }} + > +
+ ); +} diff --git a/src/app/page.module.css b/src/app/page.module.css index c8bd07e..9e8ddad 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -3,7 +3,7 @@ flex-direction: column; justify-content: center; align-items: center; - height: 90dvh; + height: 85dvh; max-width: 500px; margin: 0px auto; text-align: center; diff --git a/src/app/video/[animeId]/page.jsx b/src/app/video/[animeId]/page.jsx index cfa8cd5..c0339f7 100644 --- a/src/app/video/[animeId]/page.jsx +++ b/src/app/video/[animeId]/page.jsx @@ -48,7 +48,8 @@ export default async function Video({ params }) { async function getVideoLink(id) { const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id + "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id, + { next: { revalidate: 3600 } } // Video links are revalidated after an hour ); const data = res.json(); return data; -- cgit v1.2.3