From 93a50bf8857cd684924bfc3f32486fc9329a786a Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 00:24:11 -0300 Subject: [PATCH 1/8] refactor: Watch Page Tweaks for Movie type --- app/watch/[id]/page.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/app/watch/[id]/page.tsx b/app/watch/[id]/page.tsx index b5f62090..044e4f04 100644 --- a/app/watch/[id]/page.tsx +++ b/app/watch/[id]/page.tsx @@ -31,6 +31,7 @@ async function WatchEpisode({ params, searchParams }: { const mediaData = await anilist.getMediaInfo(params.id) as ApiDefaultResult const episodeData = await gogoanime.getLinksForThisEpisode(searchParams.q) as EpisodeLinks + const episodeNumber = searchParams?.q.replace(/-/g, ' ').split(" ").map( (item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode \b/) ) @@ -59,27 +60,28 @@ async function WatchEpisode({ params, searchParams }: {
{/* SHOWS EPISODE ID SLICED FROM "EPISODE" WORD, AND ADD MEDIA NAME*/} -

- {searchParams?.q.replace(/-/g, ' ').split(" ").map((item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode\b/))} - {" "}-{" "} - {mediaData.title.romaji || mediaData.title.native} -

+ {mediaData.format == "MOVIE" ? ( +

{mediaData.title.romaji || mediaData.title.native}

+ ) : ( +

+ Episode {episodeNumber} + {" "}-{" "} + {mediaData.title.romaji || mediaData.title.native} +

+ )}
- + {mediaData.format != "MOVIE" && ( + + )}
-

- COMMENTS FOR EPISODE {searchParams?.q.replace(/-/g, ' ').split(" ").map( - (item) => - item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode \b/)) - } -

+

COMMENTS {mediaData.format != "MOVIE" && (`FOR EPISODE ${episodeNumber}`)}

From 571fdf6941e5d211dad2aacdd8227f03bad2a04b Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 14:57:18 -0300 Subject: [PATCH 2/8] feat: Add News Page --- api/news.ts | 29 + app/layout/header/index.tsx | 6 +- app/news/[id]/page.tsx | 9 + app/news/components/SwiperContainer/index.tsx | 60 ++ .../SwiperContainer/styles.module.css | 77 +++ app/news/page.module.css | 513 ++++++++++++++++++ app/news/page.tsx | 243 +++++++++ app/ts/interfaces/newsInterface.d.ts | 15 + 8 files changed, 950 insertions(+), 2 deletions(-) create mode 100644 api/news.ts create mode 100644 app/news/[id]/page.tsx create mode 100644 app/news/components/SwiperContainer/index.tsx create mode 100644 app/news/components/SwiperContainer/styles.module.css create mode 100644 app/news/page.module.css create mode 100644 app/news/page.tsx create mode 100644 app/ts/interfaces/newsInterface.d.ts diff --git a/api/news.ts b/api/news.ts new file mode 100644 index 00000000..8fa2d7b4 --- /dev/null +++ b/api/news.ts @@ -0,0 +1,29 @@ +import { News } from "@/app/ts/interfaces/newsInterface" +import Axios from "axios" + +const CONSUMET_API_URL = process.env.NEXT_PUBLIC_CONSUMET_API_URL + +// eslint-disable-next-line import/no-anonymous-default-export +export default { + + getNews: async (topic?: string) => { + + try { + + const { data } = await Axios({ + url: `${CONSUMET_API_URL}/news/ann/recent-feeds${topic ? `?topic=${topic}` : ""}`, + method: "GET" + }) + + return data as News[] + + } + catch (err) { + + console.log(err) + + } + + } + +} \ No newline at end of file diff --git a/app/layout/header/index.tsx b/app/layout/header/index.tsx index 40b5ec4f..bb2fcfbf 100644 --- a/app/layout/header/index.tsx +++ b/app/layout/header/index.tsx @@ -41,8 +41,10 @@ function Header() { -
  • - News +
  • + News + +
    • diff --git a/app/news/[id]/page.tsx b/app/news/[id]/page.tsx new file mode 100644 index 00000000..f4a1ddcd --- /dev/null +++ b/app/news/[id]/page.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +function NewPage() { + return ( +
    NewPage
    + ) +} + +export default NewPage \ No newline at end of file diff --git a/app/news/components/SwiperContainer/index.tsx b/app/news/components/SwiperContainer/index.tsx new file mode 100644 index 00000000..ef12863a --- /dev/null +++ b/app/news/components/SwiperContainer/index.tsx @@ -0,0 +1,60 @@ +"use client" +import React from 'react' +import { Swiper, SwiperSlide } from "swiper/react"; +import { A11y, Navigation, Pagination } from 'swiper/modules'; +import styles from "./styles.module.css" +import Image from 'next/image'; +import Link from 'next/link'; +import { News } from '@/app/ts/interfaces/newsInterface'; + +function SwiperContainer({ data, options, children }: { + data?: News[], + options?: { + slidesPerView?: number + bp480: number, + bp740: number, + bp1275: number, + }, + children?: any +}) { + + return ( + + + {data?.map((item, key: number) => ( + + + +
    + +
    + {item.title} +
    + +
    + + {item.topics[0].toUpperCase()} + +

    {item.title}

    + +
    +
    +     + + ))} + +     + ); +} + +export default SwiperContainer \ No newline at end of file diff --git a/app/news/components/SwiperContainer/styles.module.css b/app/news/components/SwiperContainer/styles.module.css new file mode 100644 index 00000000..a40eb1fd --- /dev/null +++ b/app/news/components/SwiperContainer/styles.module.css @@ -0,0 +1,77 @@ +.list_container { + overflow: hidden; + width: 100%; +} + +.list_container>div { + display: flex; + flex-direction: row; +} + +.custom_list_item>* { + + height: inherit; + width: inherit !important; + +} + +.news_container { + + position: relative; + /* width: 100px; */ + height: 480px; + overflow: hidden; + border-radius: 12px; +} + +.img_container img{ + + object-fit: cover; + +} + +.title_container { + + position: absolute; + + bottom: 16px; + z-index: 1; + + margin: 16px; + padding: 16px; + + border-radius: 12px; + + background-color: var(--white-100); + +} + +.topic { + + width: min-content; + + display: block; + + margin-bottom: 16px; + + padding: 8px 16px; + background-color: var(--black-05); + + border-radius: 4px; + + font-weight: 400; + font-size: var(--font-size--small-2); +} + +.title_container h3 a { + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 700; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} \ No newline at end of file diff --git a/app/news/page.module.css b/app/news/page.module.css new file mode 100644 index 00000000..a970cd62 --- /dev/null +++ b/app/news/page.module.css @@ -0,0 +1,513 @@ +#container { + + margin-top: 32px; + margin-bottom: 32px; + margin-left: auto; + margin-right: auto; + + width: 96%; + max-width: var(--breakpoint-sm); + + gap: 32px; + +} + +@media((min-width: 768px)) { + #container { + max-width: var(--breakpoint-md); + } +} + +@media((min-width: 860px)) { + #container { + width: 100%; + margin: auto; + margin-top: 64px; + margin-bottom: 64px; + } +} + +@media((min-width: 1020px)) { + #container { + width: 96%; + max-width: var(--breakpoint-xl); + } +} + +@media((min-width: 1280px)) { + #container { + width: 100%; + } +} + +#container>h1 { + + font-size: var(--font-size--h4); + background-color: var(--brand-color); + + color: var(--white-100); + + width: fit-content; + + margin-bottom: 32px; + + padding: 8px 16px; + +} + +/* HIGHLIGHT */ +#container #highlight { + + display: grid; + grid-template-columns: 1fr; + gap: 32px; + +} + +@media(min-width: 1020px) { + + #container #highlight { + + grid-template-columns: 2fr 1fr; + + } + +} + +#container #highlight { + + padding-bottom: 24px; + border-bottom: 1px solid var(--white-50); + +} + +#highlighted_news { + + display: flex; + flex-direction: column; + gap: 16px; + +} + +#highlighted_news #main_news { + position: relative; + background-color: var(--black-100); + + display: grid; + grid-template-columns: 1fr; + +} + +@media(min-width: 520px) { + #highlighted_news #main_news { + grid-template-columns: 35% 1fr; + } +} + + +#highlighted_news #main_news .image_container { + + overflow: hidden; + position: relative; + aspect-ratio: 400/583; + +} + +#highlighted_news #main_news .image_container img { + object-fit: cover; + + transition: all ease-in-out 100ms; +} + +@media(min-width: 600px) { + #highlighted_news #main_news .image_container { + min-height: 420px; + } +} + +#highlighted_news #main_news:hover .image_container img { + + transform: scale(1.1); + +} + +#highlighted_news #main_news .highlight_title { + position: absolute; + + right: 8px; + left: 8px; + bottom: 32px; + +} + +@media(min-width: 520px) { + #highlighted_news #main_news .highlight_title { + left: 170px; + } +} + +@media(min-width: 600px) { + #highlighted_news #main_news .highlight_title { + left: 320px; + } +} + +.topic { + + width: min-content; + + display: block; + + margin-bottom: 16px; + + padding: 8px 16px; + background-color: var(--white-100); + + border-radius: 4px; + + font-weight: 400; + font-size: var(--font-size--small-2); +} + +#highlighted_news #main_news .highlight_title h2 a { + + display: block; + + color: var(--white-100); + + font-family: var(--font-family-sans-serif); + font-size: var(--font-size--h4); + font-weight: 600; + +} + +/* */ + +#news_second { + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 32px; + +} + +#news_second .hero_news_container { + display: flex; + flex-direction: column; + align-items: center; +} + +#news_second .hero_news_container .image_container { + + overflow: hidden; + + position: relative; + + aspect-ratio: 16/9; + + width: 100%; + + border-radius: 8px; + overflow: hidden; +} + + +#news_second .hero_news_container .image_container img { + + transition: all ease-in-out 100ms; + + object-fit: cover; +} + +@media(min-width: 780px) { + #news_second .hero_news_container .image_container { + min-height: 120px; + height: auto; + } +} + +#news_second .hero_news_container:hover .image_container img { + + transform: scale(1.1); + +} + +#news_second .hero_news_container .topic { + + margin-top: 32px; + margin-bottom: 8px; + +} + +#news_second .hero_news_container h2 a { + + transition: all ease-in-out 300ms; + +} + +#news_second .hero_news_container h2:hover a { + + color: var(--brand-color); + +} + +#news_second .hero_news_container h2 a { + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 600; + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +#news_second .hero_news_container h2:hover a { + + color: var(--brand-color); + +} + +/* HERO NEWS LIST */ + +#hero_news_list { + display: flex; + flex-direction: column; + gap: 16px; +} + +#hero_news_list .hero_news_container:not(:last-child) { + + border-bottom: 1px solid var(--white-50); + +} + +#hero_news_list .hero_news_container { + + padding: 16px 0; + + display: grid; + grid-template-columns: 1fr 3fr; + gap: 16px; + +} + +#hero_news_list .hero_news_container .image_container { + overflow: hidden; + position: relative; + + aspect-ratio: 16/15; + + border-radius: 8px; + overflow: hidden; + +} + +#hero_news_list .hero_news_container .image_container img { + transition: all ease-in-out 100ms; + object-fit: cover; +} + +#hero_news_list .hero_news_container:hover .image_container img { + + transform: scale(1.1); + +} + +.highlight_title h2 a { + + transition: all ease-in-out 300ms; + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 600; + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +.highlight_title h2:hover a { + + color: var(--brand-color); + +} + +/* ANIMES NEWS */ +#animes_container { + + margin-bottom: 32px; + padding: 32px 0; + border-bottom: 1px solid var(--white-50); + +} + +@media(min-width: 600px) { + #animes_container { + margin-bottom: 0; + } +} + +#animes_container h2 { + + font-size: var(--font-size--h4); + color: var(--white-100); + margin-bottom: 24px; + +} + +/* 3 TOPICS CONTAINER */ +#manga_games_industry_container { + + display: grid; + grid-template-columns: 1fr; + gap: 32px; + +} + +@media(min-width: 600px) { + #manga_games_industry_container { + + grid-template-columns: 1fr 1fr 1fr; + + } +} + +#manga_games_industry_container .list_container { + + + display: flex; + flex-direction: column; + gap: 24px; + +} + +@media(min-width: 600px) { + #manga_games_industry_container .list_container { + margin: 24px 0; + } +} + +#manga_games_industry_container .list_container:not(:last-child) { + + padding-bottom: 32px; + border-bottom: 1px solid var(--white-50); + +} + +@media(min-width: 600px) { + #manga_games_industry_container .list_container:not(:last-child) { + border-bottom: 0; + } +} + +#manga_games_industry_container .list_container .item_container .image_container img, +#manga_games_industry_container .list_container .highlighted_container .image_container img { + + transition: all ease-in-out 100ms; + +} + +#manga_games_industry_container .list_container .item_container:hover .image_container img, +#manga_games_industry_container .list_container .highlighted_container:hover .image_container img { + + transform: scale(1.05); + +} + +#manga_games_industry_container .list_container>h2 { + + padding: 8px 16px; + + width: max-content; + + font-size: var(--font-size--p); + color: var(--white-100); + + background-color: var(--brand-color); + +} + +#manga_games_industry_container .list_container .highlighted_container { + + position: relative; + min-height: 260px; + + border-radius: 4px 4px 0 0; + + overflow: hidden; + +} + +.image_container img { + + object-fit: cover; + +} + +#manga_games_industry_container .list_container .highlighted_container .highlight_title { + + position: absolute; + bottom: 0; + left: 0; + right: 0; + + background-image: linear-gradient(transparent, rgba(24 24 24 / 0.5) 43%) +} + +#manga_games_industry_container .list_container .highlighted_container .highlight_title h2, +#manga_games_industry_container .list_container .highlighted_container .highlight_title>a { + position: relative; + bottom: 16px; + left: 16px; + right: 16px; +} + +#manga_games_industry_container .list_container .highlighted_container .highlight_title h2 a { + color: var(--white-100); + width: 92%; +} + +#manga_games_industry_container .item_container { + + display: grid; + grid-template-columns: 35% 1fr; + gap: 16px; + +} + +#manga_games_industry_container .item_container .image_container { + position: relative; + + aspect-ratio: 16/13; + + border-radius: 4px; + + overflow: hidden; +} + +#manga_games_industry_container .item_container .item_title_container { + + max-height: fit-content; + margin: auto; + +} + +#manga_games_industry_container .item_container .item_title_container small { + margin-top: 4px; + + display: flex; + gap: 0 8px; + align-items: center; + + font-weight: 300; + color: var(--white-50); +} \ No newline at end of file diff --git a/app/news/page.tsx b/app/news/page.tsx new file mode 100644 index 00000000..fe7147fd --- /dev/null +++ b/app/news/page.tsx @@ -0,0 +1,243 @@ +import { Metadata } from 'next' +import React from 'react' +import styles from "./page.module.css" +import newsApi from '@/api/news' +import Image from 'next/image' +import Link from 'next/link' +import SwiperContainer from './components/SwiperContainer' +import SvgCalendar from "@/public/assets/calendar3.svg" +import { News } from '../ts/interfaces/newsInterface' + +export const metadata: Metadata = { + title: 'News | AniProject', + description: 'See the latest news about a variety of animes, mangas and movies.', +} + +async function NewsHomePage() { + + const news = await newsApi.getNews() + + const animesNews = await newsApi.getNews("anime") as News[] + const mangasNews = await newsApi.getNews("manga") as News[] + const gamesNews = await newsApi.getNews("games") as News[] + const industryNews = await newsApi.getNews("industry") as News[] + + return ( + (news && mangasNews && gamesNews && industryNews) && ( +
    + +

    TRENDING NOW

    + +
    + +
    + +
    + +
    + {news[0].title} +
    + +
    + {news[0]?.topics[0] && ( + {news[0].topics[0].toUpperCase()} + )} + +

    {news[0].title}

    +
    +
    + +
    + {news.slice(1, 4).map((item, key) => ( + +
    + +
    + {item.title} +
    + +
    + {news[0]?.topics[0] && ( + {item.topics[0].toUpperCase()} + )} + +

    {item.title}

    +
    +
    + + ))} +
    + +
    + +
    + {news.slice(4, 9).map((item, key) => ( + +
    + +
    + {item.title} +
    + +
    + {news[0]?.topics[0] && ( + {item.topics[0].toUpperCase()} + )} + +

    {item.title}

    +
    +
    + + ))} +
    + +
    + +
    + +

    Recent Animes News

    + + + +
    + +
    + +
    + +

    MANGAS

    + +
    + +
    + {mangasNews[0].title} +
    + +
    + {news[0]?.topics[0] && ( + {mangasNews[0].topics[0].toUpperCase()} + )} + +

    {mangasNews[0].title}

    +
    +
    + + {mangasNews.slice(1, 6).map((item, key) => ( + +
    + +
    + {item.title} +
    + +
    + +

    {item.title}

    + + {item.uploadedAt && ( + {item.uploadedAt} + )} + +
    +
    + + ))} +
    + +
    + +

    GAMES

    + +
    + +
    + {gamesNews[0].title} +
    + +
    + {news[0]?.topics[0] && ( + {gamesNews[0].topics[0].toUpperCase()} + )} + +

    {gamesNews[0].title}

    +
    +
    + + {gamesNews.slice(1, 6).map((item, key) => ( + +
    + +
    + {item.title} +
    + +
    + +

    {item.title}

    + + {item.uploadedAt && ( + {item.uploadedAt} + )} + +
    +
    + + ))} +
    + +
    + +

    INDUSTRY

    + +
    + +
    + {industryNews[0].title} +
    + +
    + {news[0]?.topics[0] && ( + {industryNews[0].topics[0].toUpperCase()} + )} + +

    {industryNews[0].title}

    +
    +
    + + {industryNews.slice(1, 6).map((item, key) => ( + +
    + +
    + {item.title} +
    + +
    + +

    {item.title}

    + + {item.uploadedAt && ( + {item.uploadedAt} + )} + +
    +
    + + ))} +
    + +
    + +
    + ) + ) +} + +export default NewsHomePage \ No newline at end of file diff --git a/app/ts/interfaces/newsInterface.d.ts b/app/ts/interfaces/newsInterface.d.ts new file mode 100644 index 00000000..b147051c --- /dev/null +++ b/app/ts/interfaces/newsInterface.d.ts @@ -0,0 +1,15 @@ +export interface News { + + title: string, + id: string, + uploadedAt: string, + topics: string[], + preview: { + intro: string, + full: string + }, + thumbnail: string, + thumbnailHash: string, + url: string + +} \ No newline at end of file From 8b07fc8d8457f7f561a9ccc7387d7875e811f054 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 15:49:26 -0300 Subject: [PATCH 3/8] refactor: Add News Section to Header --- .../header/components/NavListMenu/index.tsx | 11 +- .../NewsNavListHover/component.module.css | 123 ++++++++++++++++++ .../components/NewsNavListHover/index.tsx | 66 ++++++++++ app/layout/header/headerComponent.module.css | 12 +- app/layout/header/index.tsx | 3 +- 5 files changed, 205 insertions(+), 10 deletions(-) create mode 100644 app/layout/header/components/NewsNavListHover/component.module.css create mode 100644 app/layout/header/components/NewsNavListHover/index.tsx diff --git a/app/layout/header/components/NavListMenu/index.tsx b/app/layout/header/components/NavListMenu/index.tsx index c622d1f5..fde914f7 100644 --- a/app/layout/header/components/NavListMenu/index.tsx +++ b/app/layout/header/components/NavListMenu/index.tsx @@ -118,7 +118,16 @@ function NavListMenu() {
  • Highest Rated
    • - {/*
  • Movies
    • */} + +
  • + +
    + News +
    + +
    • diff --git a/app/layout/header/components/NewsNavListHover/component.module.css b/app/layout/header/components/NewsNavListHover/component.module.css new file mode 100644 index 00000000..da4e6521 --- /dev/null +++ b/app/layout/header/components/NewsNavListHover/component.module.css @@ -0,0 +1,123 @@ +#news_header_nav_container { + + z-index: 2; + position: absolute; + top: 69px; + left: 0; + + padding-top: 32px; + padding-bottom: 64px; + padding-left: 64px; + padding-right: 64px; + + background-color: var(--black-100); + + width: 100%; + + +} + +#news_header_nav_container .link_container { + + max-width: var(--breakpoint-xxl); + margin: auto; + margin-bottom: 32px; + + +} + +#news_header_nav_container .link_container a { + + width: fit-content; + + border-bottom: 2px solid var(--white-75); + +} + +#news_header_nav_container>ul { + + max-width: var(--breakpoint-xxl); + margin: auto; + + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 0 32px; + +} + +#news_header_nav_container>ul[data-loading=true] { + + display: flex; + align-items: center; + justify-content: center; + +} + + +#news_header_nav_container>ul>li { + + padding-top: 32px; + padding-right: 32px; + +} + +#news_header_nav_container>ul>li:not(:nth-child(5)):not(:last-child) { + + border-right: 1px solid var(--white-50); + +} + +#news_header_nav_container>ul>li .image_container { + + aspect-ratio: 16/9; + position: relative; + +} + +#news_header_nav_container>ul>li .image_container img { + + object-fit: cover; + + border-radius: 4px; + +} + +#news_header_nav_container>ul>li .title_container { + + margin-top: 8px; + +} + +#news_header_nav_container>ul>li .title_container a { + + transition: all ease-in-out 300ms; + + font-size: var(--font-size--small-1); + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +#news_header_nav_container>ul>li:hover .title_container a { + + color: var(--brand-color); + +} + +#news_header_nav_container>ul>li .title_container small { + + display: flex; + align-items: center; + gap: 0 4px; + + width: max-content; + + color: var(--white-75); + margin-top: 8px; + margin-left: auto; + +} \ No newline at end of file diff --git a/app/layout/header/components/NewsNavListHover/index.tsx b/app/layout/header/components/NewsNavListHover/index.tsx new file mode 100644 index 00000000..5d315c00 --- /dev/null +++ b/app/layout/header/components/NewsNavListHover/index.tsx @@ -0,0 +1,66 @@ +"use client" +import React, { useLayoutEffect, useState } from 'react' +import styles from "./component.module.css" +import Link from 'next/link' +import LoadingSvg from "@/public/assets/ripple-1s-200px.svg" +import news from '@/api/news' +import { News } from '@/app/ts/interfaces/newsInterface' +import SvgCalendar from "@/public/assets/calendar3.svg" +import Image from 'next/image' + +function AnimeNavListHover() { + + const [animeData, setAnimeData] = useState() + + const loadData = async () => { + + const data = await news.getNews() + + setAnimeData(data) + + } + + useLayoutEffect(() => { + loadData() + }, []) + + return ( +
    + +
    + Go to News Page +
    + +
      + + {animeData ? ( + + animeData.slice(0, 10).map((item, key) => ( +
    • + +
      + + {item.title} + +
      + +
      + +
      {item.title}
      + + {item.uploadedAt} + +
      + +
      • + )) + ) : ( + + )} + +
    +
    + ) +} + +export default AnimeNavListHover \ No newline at end of file diff --git a/app/layout/header/headerComponent.module.css b/app/layout/header/headerComponent.module.css index 24533bc4..bca2adb4 100644 --- a/app/layout/header/headerComponent.module.css +++ b/app/layout/header/headerComponent.module.css @@ -36,12 +36,6 @@ header>div#container { } } -/* @media((min-width: 992px) and (max-width: 1200px)) { - header>div#container { - width: var(--breakpoint-md); - } -} */ - @media((min-width: 1201px) and (max-width: 1400px)) { header>div#container { width: var(--breakpoint-xl); @@ -155,7 +149,8 @@ header#background button svg { } -#navbar_container>ul>li>ul { +#navbar_container>ul>li>ul, +#navbar_container>ul>li>div { display: none; } @@ -168,7 +163,8 @@ header#background button svg { } -#navbar_container>ul>li:hover>ul { +#navbar_container>ul>li:hover>ul, +#navbar_container>ul>li:hover>div { display: block; diff --git a/app/layout/header/index.tsx b/app/layout/header/index.tsx index bb2fcfbf..270bf7f2 100644 --- a/app/layout/header/index.tsx +++ b/app/layout/header/index.tsx @@ -8,6 +8,7 @@ import MangaNavListHover from './components/MangaNavListHover' import UserSideMenu from './components/UserSideMenu' import NavListMenu from './components/NavListMenu' import SearchContainer from './components/SearchContainer' +import NewsNavListHover from './components/NewsNavListHover' function Header() { @@ -44,7 +45,7 @@ function Header() {
  • News - +
    • From 04cc17ff005afc834824bec803ff6cad53d444a1 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 19:46:19 -0300 Subject: [PATCH 4/8] feat: Add News Article Page --- api/news.ts | 29 +++- .../[date]/[newsTitle]/[id]/page.module.css | 134 ++++++++++++++++++ app/news/[date]/[newsTitle]/[id]/page.tsx | 86 +++++++++++ app/news/[id]/page.tsx | 9 -- .../components/NewsCard1/component.module.css | 71 ++++++++++ app/news/components/NewsCard1/index.tsx | 30 ++++ ...styles.module.css => component.module.css} | 3 +- app/news/components/SwiperContainer/index.tsx | 4 +- app/news/page.module.css | 54 +------ app/news/page.tsx | 56 ++++---- app/ts/interfaces/newsInterface.d.ts | 7 + 11 files changed, 385 insertions(+), 98 deletions(-) create mode 100644 app/news/[date]/[newsTitle]/[id]/page.module.css create mode 100644 app/news/[date]/[newsTitle]/[id]/page.tsx delete mode 100644 app/news/[id]/page.tsx create mode 100644 app/news/components/NewsCard1/component.module.css create mode 100644 app/news/components/NewsCard1/index.tsx rename app/news/components/SwiperContainer/{styles.module.css => component.module.css} (95%) diff --git a/api/news.ts b/api/news.ts index 8fa2d7b4..2a51a1c5 100644 --- a/api/news.ts +++ b/api/news.ts @@ -1,12 +1,14 @@ import { News } from "@/app/ts/interfaces/newsInterface" import Axios from "axios" +import { cache } from "react" const CONSUMET_API_URL = process.env.NEXT_PUBLIC_CONSUMET_API_URL // eslint-disable-next-line import/no-anonymous-default-export export default { - getNews: async (topic?: string) => { + // GET ALL NEWS, OR NEWS BY TOPIC + getNews: cache(async (topic?: string) => { try { @@ -14,7 +16,7 @@ export default { url: `${CONSUMET_API_URL}/news/ann/recent-feeds${topic ? `?topic=${topic}` : ""}`, method: "GET" }) - + return data as News[] } @@ -24,6 +26,27 @@ export default { } - } + }), + + // GET NEWS ARTICLE BY ID + getNewsInfo: cache(async (id: string) => { + + try { + + const { data } = await Axios({ + url: `${CONSUMET_API_URL}/news/ann/info?id=${id}`, + method: "GET" + }) + + return data as News + + } + catch (err) { + + console.log(err) + + } + + }) } \ No newline at end of file diff --git a/app/news/[date]/[newsTitle]/[id]/page.module.css b/app/news/[date]/[newsTitle]/[id]/page.module.css new file mode 100644 index 00000000..6965f604 --- /dev/null +++ b/app/news/[date]/[newsTitle]/[id]/page.module.css @@ -0,0 +1,134 @@ +#container { + + margin-top: 32px; + margin-bottom: 32px; + margin-left: auto; + margin-right: auto; + + display: grid; + + width: 96%; + + max-width: var(--breakpoint-sm); + +} + +@media((min-width: 768px)) { + #container { + max-width: var(--breakpoint-md); + } +} + +@media((min-width: 1020px)) { + #container { + max-width: var(--breakpoint-xl); + gap: 32px; + grid-template-columns: 3fr 1fr; + } +} + +@media((min-width: 1480px)) { + #container { + + width: auto; + max-width: var(--breakpoint-xxl); + + } +} + +#heading_container h1 { + + font-family: var(--font-family-sans-sarif); + color: var(--white-100); +} + +#img_intro_container { + + margin: 32px 0; + + display: grid; + grid-template-columns: 1fr; + align-items: center; + + gap: 16px; + +} + +@media((min-width: 440px)) { + #img_intro_container { + grid-template-columns: 120px 1fr; + } +} + +#img_container { + + overflow: hidden; + border-radius: 4px; + + position: relative; + + aspect-ratio: 9/12; + +} + +#img_intro_container small { + + padding: 16px 32px; + + background-color: var(--brand-color); + + font-size: var(--font-size--p); + font-weight: 800; + + color: var(--white-100); + +} + +#main_text_container p { + + color: var(--white-100); + + line-height: 1.5; + + font-family: var(--font-family-sans-sarif); + font-weight: 300; + font-size: calc(var(--font-size--p) + 1px); + +} + +#footer_container { + + margin: 32px 0; + + display: flex; + flex-direction: column; + + gap: 16px; + +} + +#footer_container small { + + color: var(--white-100); + font-weight: 300; + +} + +#footer_container small a { + + color: var(--brand-color); + +} + +#footer_container small a:hover { + + text-decoration: underline; + +} + +/* OTHER NEWS */ +#other_news_container>ul>li:not(:last-child) { + + border-bottom: 1px solid var(--white-50); + +} \ No newline at end of file diff --git a/app/news/[date]/[newsTitle]/[id]/page.tsx b/app/news/[date]/[newsTitle]/[id]/page.tsx new file mode 100644 index 00000000..92f8fa5d --- /dev/null +++ b/app/news/[date]/[newsTitle]/[id]/page.tsx @@ -0,0 +1,86 @@ +import news from '@/api/news' +import { News, NewsArcticle } from '@/app/ts/interfaces/newsInterface' +import React from 'react' +import styles from "./page.module.css" +import Link from 'next/link' +import Image from 'next/image' +import NewsCard1 from '@/app/news/components/NewsCard1' + +export async function generateMetadata({ params }: { params: { id: string } }) { + + const newsData = await news.getNewsInfo(params.id) as NewsArcticle + + return { + title: `${newsData.title} | AniProject`, + description: newsData.intro, + } +} + +async function NewPage({ params }: { params: { id: string } }) { + + const newsData = await news.getNewsInfo(params.id) as NewsArcticle + const otherNews = await news.getNews() as News[] + + return ( +
    + +
    + +
    + +

    {newsData.title}

    + +
    + +
    + {newsData.intro} +
    + + {newsData.intro} + +
    + +
    + +
    + +

    {newsData.description}

    + +
    + +
    + + Source: Anime News Network + + + {new Date(`${newsData.uploadedAt}`).toLocaleString( + 'default', + { month: 'long', day: "numeric", year: "numeric", hour: 'numeric', minute: '2-digit' } + )} + + +
    + +
    + +
    + +
      + {otherNews.slice(0, 7).map((item, key) => ( + +
    • +
      + +
      +
      • + + ))} +
    + +
    + +
    + ) +} + +export default NewPage \ No newline at end of file diff --git a/app/news/[id]/page.tsx b/app/news/[id]/page.tsx deleted file mode 100644 index f4a1ddcd..00000000 --- a/app/news/[id]/page.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -function NewPage() { - return ( -
    NewPage
    - ) -} - -export default NewPage \ No newline at end of file diff --git a/app/news/components/NewsCard1/component.module.css b/app/news/components/NewsCard1/component.module.css new file mode 100644 index 00000000..42138edf --- /dev/null +++ b/app/news/components/NewsCard1/component.module.css @@ -0,0 +1,71 @@ +.hero_news_container { + + padding: 16px 0; + + display: grid; + grid-template-columns: 1fr 3fr; + gap: 16px; + +} + +.hero_news_container .image_container { + overflow: hidden; + position: relative; + + aspect-ratio: 16/15; + + border-radius: 8px; + overflow: hidden; + +} + +.hero_news_container .image_container img { + transition: all ease-in-out 100ms; + object-fit: cover; +} + +.hero_news_container:hover .image_container img { + + transform: scale(1.1); + +} + +.topic { + + width: min-content; + + display: block; + + margin-bottom: 8px; + + padding: 8px 16px; + background-color: var(--white-100); + + border-radius: 4px; + + font-weight: 400; + font-size: var(--font-size--small-2); +} + +.highlight_title h2 a { + + transition: all ease-in-out 300ms; + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 600; + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +.highlight_title h2:hover a { + + color: var(--brand-color); + +} \ No newline at end of file diff --git a/app/news/components/NewsCard1/index.tsx b/app/news/components/NewsCard1/index.tsx new file mode 100644 index 00000000..fac1a934 --- /dev/null +++ b/app/news/components/NewsCard1/index.tsx @@ -0,0 +1,30 @@ +import Link from 'next/link' +import React from 'react' +import styles from "./component.module.css" +import Image from 'next/image' +import { News } from '@/app/ts/interfaces/newsInterface' + +function NewsCard1({ data }: { data: News }) { + return ( +
    + +
    + + {data.title} + +
    + +
    + {data.topics[0] && ( + {data.topics[0].toUpperCase()} + )} + +

    + {data.title} +

    +
    +
    + ) +} + +export default NewsCard1 \ No newline at end of file diff --git a/app/news/components/SwiperContainer/styles.module.css b/app/news/components/SwiperContainer/component.module.css similarity index 95% rename from app/news/components/SwiperContainer/styles.module.css rename to app/news/components/SwiperContainer/component.module.css index a40eb1fd..5e83722b 100644 --- a/app/news/components/SwiperContainer/styles.module.css +++ b/app/news/components/SwiperContainer/component.module.css @@ -18,13 +18,12 @@ .news_container { position: relative; - /* width: 100px; */ height: 480px; overflow: hidden; border-radius: 12px; } -.img_container img{ +.img_container img { object-fit: cover; diff --git a/app/news/components/SwiperContainer/index.tsx b/app/news/components/SwiperContainer/index.tsx index ef12863a..664e0615 100644 --- a/app/news/components/SwiperContainer/index.tsx +++ b/app/news/components/SwiperContainer/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import { Swiper, SwiperSlide } from "swiper/react"; import { A11y, Navigation, Pagination } from 'swiper/modules'; -import styles from "./styles.module.css" +import styles from "./component.module.css" import Image from 'next/image'; import Link from 'next/link'; import { News } from '@/app/ts/interfaces/newsInterface'; @@ -45,7 +45,7 @@ function SwiperContainer({ data, options, children }: { {item.topics[0].toUpperCase()} -

    {item.title}

    +

    {item.title}

    diff --git a/app/news/page.module.css b/app/news/page.module.css index a970cd62..9dadea4b 100644 --- a/app/news/page.module.css +++ b/app/news/page.module.css @@ -251,27 +251,6 @@ } -#news_second .hero_news_container h2 a { - - line-height: 1.4; - - font-family: var(--font-family-sans-serif); - font-weight: 600; - color: var(--white-100); - - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - -} - -#news_second .hero_news_container h2:hover a { - - color: var(--brand-color); - -} - /* HERO NEWS LIST */ #hero_news_list { @@ -280,43 +259,12 @@ gap: 16px; } -#hero_news_list .hero_news_container:not(:last-child) { +#hero_news_list>div:not(:last-child) { border-bottom: 1px solid var(--white-50); } -#hero_news_list .hero_news_container { - - padding: 16px 0; - - display: grid; - grid-template-columns: 1fr 3fr; - gap: 16px; - -} - -#hero_news_list .hero_news_container .image_container { - overflow: hidden; - position: relative; - - aspect-ratio: 16/15; - - border-radius: 8px; - overflow: hidden; - -} - -#hero_news_list .hero_news_container .image_container img { - transition: all ease-in-out 100ms; - object-fit: cover; -} - -#hero_news_list .hero_news_container:hover .image_container img { - - transform: scale(1.1); - -} .highlight_title h2 a { diff --git a/app/news/page.tsx b/app/news/page.tsx index fe7147fd..31d58d43 100644 --- a/app/news/page.tsx +++ b/app/news/page.tsx @@ -7,6 +7,7 @@ import Link from 'next/link' import SwiperContainer from './components/SwiperContainer' import SvgCalendar from "@/public/assets/calendar3.svg" import { News } from '../ts/interfaces/newsInterface' +import NewsCard1 from './components/NewsCard1' export const metadata: Metadata = { title: 'News | AniProject', @@ -43,7 +44,7 @@ async function NewsHomePage() { {news[0].topics[0].toUpperCase()} )} -

    {news[0].title}

    +

    {news[0].title}

    @@ -53,7 +54,7 @@ async function NewsHomePage() {
    - {item.title} + {item.title}
    @@ -61,7 +62,7 @@ async function NewsHomePage() { {item.topics[0].toUpperCase()} )} -

    {item.title}

    +

    {item.title}

    @@ -73,20 +74,7 @@ async function NewsHomePage() {
    {news.slice(4, 9).map((item, key) => ( -
    - -
    - {item.title} -
    - -
    - {news[0]?.topics[0] && ( - {item.topics[0].toUpperCase()} - )} - -

    {item.title}

    -
    -
    + ))}
    @@ -117,7 +105,7 @@ async function NewsHomePage() {
    - {mangasNews[0].title} + {mangasNews[0].title}
    @@ -125,7 +113,7 @@ async function NewsHomePage() { {mangasNews[0].topics[0].toUpperCase()} )} -

    {mangasNews[0].title}

    +

    {mangasNews[0].title}

    @@ -134,12 +122,14 @@ async function NewsHomePage() {
    - {item.title} + + {item.title} +
    -

    {item.title}

    +

    {item.title}

    {item.uploadedAt && ( {item.uploadedAt} @@ -158,7 +148,9 @@ async function NewsHomePage() {
    - {gamesNews[0].title} + + {gamesNews[0].title} +
    @@ -166,7 +158,7 @@ async function NewsHomePage() { {gamesNews[0].topics[0].toUpperCase()} )} -

    {gamesNews[0].title}

    +

    {gamesNews[0].title}

    @@ -175,12 +167,14 @@ async function NewsHomePage() {
    - {item.title} + + {item.title} +
    -

    {item.title}

    +

    {item.title}

    {item.uploadedAt && ( {item.uploadedAt} @@ -199,7 +193,9 @@ async function NewsHomePage() {
    - {industryNews[0].title} + + {industryNews[0].title} +
    @@ -207,7 +203,7 @@ async function NewsHomePage() { {industryNews[0].topics[0].toUpperCase()} )} -

    {industryNews[0].title}

    +

    {industryNews[0].title}

    @@ -216,12 +212,14 @@ async function NewsHomePage() {
    - {item.title} + + {item.title} +
    -

    {item.title}

    +

    {item.title}

    {item.uploadedAt && ( {item.uploadedAt} diff --git a/app/ts/interfaces/newsInterface.d.ts b/app/ts/interfaces/newsInterface.d.ts index b147051c..194d593d 100644 --- a/app/ts/interfaces/newsInterface.d.ts +++ b/app/ts/interfaces/newsInterface.d.ts @@ -12,4 +12,11 @@ export interface News { thumbnailHash: string, url: string +} + +export interface NewsArcticle extends News { + + intro: string, + description: string + } \ No newline at end of file From 07cfb263b810322e7912512f1128473425698291 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 20:39:20 -0300 Subject: [PATCH 5/8] fix: Cards Sweaper shows part of next offset card --- api/news.ts | 4 ++++ app/components/SwiperListContainer/index.tsx | 13 ++++++------- app/news/components/SwiperContainer/index.tsx | 9 ++++----- app/news/page.tsx | 12 ++++++------ 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/api/news.ts b/api/news.ts index 2a51a1c5..b9c6c1a5 100644 --- a/api/news.ts +++ b/api/news.ts @@ -24,6 +24,8 @@ export default { console.log(err) + return err + } }), @@ -45,6 +47,8 @@ export default { console.log(err) + return err + } }) diff --git a/app/components/SwiperListContainer/index.tsx b/app/components/SwiperListContainer/index.tsx index cddaf697..4ff0aa29 100644 --- a/app/components/SwiperListContainer/index.tsx +++ b/app/components/SwiperListContainer/index.tsx @@ -7,7 +7,7 @@ import styles from "./styles.module.css" import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'; import ListCarousel from '../HomePage/HeroListCarousel'; -function SwiperListContainer({ data, options, children, customHeroSection }: { +function SwiperListContainer({ data, options, customHeroSection }: { data?: ApiDefaultResult[], options?: { slidesPerView?: number @@ -15,20 +15,19 @@ function SwiperListContainer({ data, options, children, customHeroSection }: { bp740: number, bp1275: number, }, - children?: any, customHeroSection?: boolean }) { - + return ( diff --git a/app/news/components/SwiperContainer/index.tsx b/app/news/components/SwiperContainer/index.tsx index 664e0615..0f2a62e9 100644 --- a/app/news/components/SwiperContainer/index.tsx +++ b/app/news/components/SwiperContainer/index.tsx @@ -7,22 +7,21 @@ import Image from 'next/image'; import Link from 'next/link'; import { News } from '@/app/ts/interfaces/newsInterface'; -function SwiperContainer({ data, options, children }: { +function SwiperContainer({ data, options }: { data?: News[], options?: { slidesPerView?: number bp480: number, bp740: number, bp1275: number, - }, - children?: any + } }) { return ( {item.topics[0].toUpperCase()} -

    {item.title}

    +

    {item.title}

    diff --git a/app/news/page.tsx b/app/news/page.tsx index 31d58d43..1c3545ee 100644 --- a/app/news/page.tsx +++ b/app/news/page.tsx @@ -16,7 +16,7 @@ export const metadata: Metadata = { async function NewsHomePage() { - const news = await newsApi.getNews() + const news = await newsApi.getNews() as News[] const animesNews = await newsApi.getNews("anime") as News[] const mangasNews = await newsApi.getNews("manga") as News[] @@ -85,12 +85,12 @@ async function NewsHomePage() {

    Recent Animes News

    - From b17400118f7a961a2ebfddbf1236759313a57ac2 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 20:43:38 -0300 Subject: [PATCH 6/8] fix: Type on Header --- app/layout/header/components/NewsNavListHover/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/layout/header/components/NewsNavListHover/index.tsx b/app/layout/header/components/NewsNavListHover/index.tsx index 5d315c00..9552b2db 100644 --- a/app/layout/header/components/NewsNavListHover/index.tsx +++ b/app/layout/header/components/NewsNavListHover/index.tsx @@ -14,7 +14,7 @@ function AnimeNavListHover() { const loadData = async () => { - const data = await news.getNews() + const data = await news.getNews() as News[] setAnimeData(data) From 4d24c290a7b93a77d5ef727f40206ed518324bb5 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 21:32:35 -0300 Subject: [PATCH 7/8] fix: Episodes Number and Scroll on Watch Page --- app/news/page.tsx | 2 +- .../EpisodesSideListContainer/index.tsx | 4 +++- app/watch/[id]/page.module.css | 15 +++++++++++++++ app/watch/[id]/page.tsx | 10 +++++----- package-lock.json | 4 ++-- package.json | 2 +- 6 files changed, 27 insertions(+), 10 deletions(-) diff --git a/app/news/page.tsx b/app/news/page.tsx index 1c3545ee..a6610dfc 100644 --- a/app/news/page.tsx +++ b/app/news/page.tsx @@ -85,7 +85,7 @@ async function NewsHomePage() {

    Recent Animes News

    - div.grid[data-format="MOVIE"]>* { + + padding-right: 16px; + +} + @media(min-width: 768px) { #media_info_container { @@ -64,6 +70,15 @@ gap: 16px 32px; justify-content: space-between; } + + #media_info_container>div.grid[data-format="MOVIE"] { + grid-template-columns: 1fr; + } + + #media_info_container>div.grid[data-format="MOVIE"]>* { + + width: 80%; + } } @media(min-width: 980px) { diff --git a/app/watch/[id]/page.tsx b/app/watch/[id]/page.tsx index 044e4f04..a0bf120b 100644 --- a/app/watch/[id]/page.tsx +++ b/app/watch/[id]/page.tsx @@ -33,7 +33,7 @@ async function WatchEpisode({ params, searchParams }: { const episodeData = await gogoanime.getLinksForThisEpisode(searchParams.q) as EpisodeLinks const episodeNumber = searchParams?.q.replace(/-/g, ' ').split(" ").map( - (item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode \b/) + (item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode\b/) ) return ( @@ -64,13 +64,13 @@ async function WatchEpisode({ params, searchParams }: {

    {mediaData.title.romaji || mediaData.title.native}

    ) : (

    - Episode {episodeNumber} + {episodeNumber} {" "}-{" "} {mediaData.title.romaji || mediaData.title.native}

    )} -
    +
    {mediaData.format != "MOVIE" && ( @@ -81,9 +81,9 @@ async function WatchEpisode({ params, searchParams }: {
    -

    COMMENTS {mediaData.format != "MOVIE" && (`FOR EPISODE ${episodeNumber}`)}

    +

    COMMENTS {mediaData.format != "MOVIE" && (`FOR ${episodeNumber.toUpperCase()}`)}

    - +
    diff --git a/package-lock.json b/package-lock.json index 4014fe5a..a644400a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "aniproject", - "version": "2.3.5", + "version": "2.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "aniproject", - "version": "2.3.5", + "version": "2.4.0", "dependencies": { "axios": "^1.6.6", "firebase": "^10.8.0", diff --git a/package.json b/package.json index 9c4b96ef..b3cd6a2b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aniproject", - "version": "2.3.5", + "version": "2.4.0", "private": true, "scripts": { "dev": "next dev", From 7aea3153b81a1009175db0bc86616ff7cf8befe5 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 2 Mar 2024 21:40:43 -0300 Subject: [PATCH 8/8] docs: Readme update --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f5bafd5d..bd66092a 100644 --- a/README.md +++ b/README.md @@ -13,12 +13,12 @@ Project of animes and mangas website, utilizing the