Skip to content

Commit

Permalink
feat: Add Keywords to pages
Browse files Browse the repository at this point in the history 
Added keywords to metadata in page.tsx and updated media page with next episode and actor information
  • Loading branch information
@ErickLimaS
ErickLimaS committed Oct 8, 2024
1 parent 12e299a commit 48a73c5
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 75 deletions.
159 changes: 84 additions & 75 deletions app/media/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,15 @@ export async function generateMetadata({ params }: { params: { id: number } }) {
description:
mediaData.description ||
`See more info about ${mediaData.title.romaji || mediaData.title.native}`,
keywords: [
mediaData.title.romaji,
mediaData.title.english,
mediaData.title.native,
`${mediaData.title.romaji} anime`,
`${mediaData.title.romaji} release`,
`${mediaData.title.english} release`,
"anime info",
],
};
}

Expand Down Expand Up @@ -132,21 +141,21 @@ export default async function MediaPage({
{isOnMobileScreen == true &&
mediaInfo.nextAiringEpisode &&
mediaInfo.format != "MOVIE" && (
<div id={styles.next_episode_container}>
<h2 className={styles.heading_style}>NEXT EPISODE</h2>

<p>
<span>Episode {mediaInfo.nextAiringEpisode.episode}</span>{" "}
on{" "}
{convertFromUnix(mediaInfo.nextAiringEpisode.airingAt, {
month: "long",
year: "numeric",
hour: undefined,
minute: undefined,
})}
</p>
</div>
)}
<div id={styles.next_episode_container}>
<h2 className={styles.heading_style}>NEXT EPISODE</h2>

<p>
<span>Episode {mediaInfo.nextAiringEpisode.episode}</span>{" "}
on{" "}
{convertFromUnix(mediaInfo.nextAiringEpisode.airingAt, {
month: "long",
year: "numeric",
hour: undefined,
minute: undefined,
})}
</p>
</div>
)}

{/* DESCRIPTION */}
<section id={styles.description_container}>
Expand Down Expand Up @@ -183,35 +192,35 @@ export default async function MediaPage({
{/* SHOWS ACTOR ONLY FOR ANIMES */}
{mediaInfo.type == "ANIME" &&
character.voiceActorRoles[0] && (
<div className={styles.actor_container}>
<div className={styles.img_container}>
<Image
src={
character.voiceActorRoles[0] &&
<div className={styles.actor_container}>
<div className={styles.img_container}>
<Image
src={
character.voiceActorRoles[0] &&
character.voiceActorRoles[0].voiceActor
.image.large
}
alt={
`${
character.voiceActorRoles[0] &&
}
alt={
`${
character.voiceActorRoles[0] &&
character.voiceActorRoles[0].voiceActor
.name.full
} voiceover for ${
character.node.name.full
}` || "No Name Actor"
}
fill
sizes="90px"
/>
</div>

<h3>
{character.voiceActorRoles[0] &&
} voiceover for ${
character.node.name.full
}` || "No Name Actor"
}
fill
sizes="90px"
/>
</div>

<h3>
{character.voiceActorRoles[0] &&
character.voiceActorRoles[0].voiceActor.name
.full}
</h3>
</div>
)}
</h3>
</div>
)}
</li>
))}
</ul>
Expand All @@ -223,20 +232,20 @@ export default async function MediaPage({
{mediaInfo.type == "ANIME" &&
mediaInfo.format != "MOVIE" &&
mediaInfo.status != "NOT_YET_RELEASED" && (
<section id={styles.episodes_container}>
<EpisodesContainer
crunchyrollInitialEpisodes={getCrunchyrollEpisodes()}
mediaInfo={mediaInfo}
episodesWatchedOnAnilist={
mediaInfo.mediaListEntry?.progress || undefined
}
imdb={{
mediaSeasons: imdbMediaInfo?.seasons,
episodesList: getImdbEpisodesListWithNoSeasons(),
}}
/>
</section>
)}
<section id={styles.episodes_container}>
<EpisodesContainer
crunchyrollInitialEpisodes={getCrunchyrollEpisodes()}
mediaInfo={mediaInfo}
episodesWatchedOnAnilist={
mediaInfo.mediaListEntry?.progress || undefined
}
imdb={{
mediaSeasons: imdbMediaInfo?.seasons,
episodesList: getImdbEpisodesListWithNoSeasons(),
}}
/>
</section>
)}

{/* CHAPTERS - ONLY FOR MANGAS */}
{mediaInfo.type == "MANGA" && (
Expand Down Expand Up @@ -333,21 +342,21 @@ export default async function MediaPage({
{isOnMobileScreen == false &&
mediaInfo.nextAiringEpisode &&
mediaInfo.format != "MOVIE" && (
<div id={styles.next_episode_container}>
<h2 className={styles.heading_style}>NEXT EPISODE</h2>

<p>
<span>Episode {mediaInfo.nextAiringEpisode.episode}</span>{" "}
on{" "}
{convertFromUnix(mediaInfo.nextAiringEpisode.airingAt, {
month: "long",
year: "numeric",
hour: undefined,
minute: undefined,
})}
</p>
</div>
)}
<div id={styles.next_episode_container}>
<h2 className={styles.heading_style}>NEXT EPISODE</h2>

<p>
<span>Episode {mediaInfo.nextAiringEpisode.episode}</span>{" "}
on{" "}
{convertFromUnix(mediaInfo.nextAiringEpisode.airingAt, {
month: "long",
year: "numeric",
hour: undefined,
minute: undefined,
})}
</p>
</div>
)}

{/* SCORE */}
{(mediaInfo.averageScore || imdbMediaInfo?.rating != 0) && (
Expand All @@ -370,14 +379,14 @@ export default async function MediaPage({

{imdbMediaInfo?.rating != 0 &&
imdbMediaInfo?.rating != null && (
<li className="display_flex_row align_items_center">
<ScoreRating
ratingScore={Number(imdbMediaInfo.rating.toFixed(1))}
source="imdb"
ratingType="string"
/>
</li>
)}
<li className="display_flex_row align_items_center">
<ScoreRating
ratingScore={Number(imdbMediaInfo.rating.toFixed(1))}
source="imdb"
ratingType="string"
/>
</li>
)}
</ul>
</div>
)}
Expand Down
22 changes: 22 additions & 0 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,28 @@ export const metadata: Metadata = {
title: "Home | AniProject",
description:
"A anime platform that showcases popular and trending animes, mangas and movies. Explore the latest releases, keep watching your favorites, and discover what's popular in the anime world.",
keywords: [
"Aniproject",
"Ani project",
"Ani project github",
"Animes",
"Anime Reviews",
"Latest Anime Releases",
"Anime Genres",
"Popular Anime Series",
"Anime News",
"Anime Characters",
"Manga Recommendations",
"Anime Community",
"Anime Events",
"Subbed Anime",
"Dubbed Anime",
"Classic Anime",
"Anime Trailers",
"Anime Forums",
"Anime Art",
"Anime Culture",
],
};

export default async function Home() {
Expand Down

0 comments on commit 48a73c5

Please sign in to comment.