[04] Fix not building because of broken CONSUMET API

04 NachoNekoNyaanime-UI/src/components/Section.astro

@@ -25,7 +25,7 @@ const { title, animeList } = Astro.props;
     </p>
 
     <div class="mt-2 mb-8 ml-2 flex space-x-4 overflow-y-hidden overflow-x-scroll p-1 outline-none scrollbar-hide sm:ml-6">
-      {animeList.map((anime) => (
+      {animeList?.map((anime) => (
         <AnimeCard key={anime.id} anime={anime}/>
       ))}
     </div>

04 NachoNekoNyaanime-UI/src/components/anime/Banner.astro

@@ -21,38 +21,38 @@ const { anime }  = Astro.props;
 ---
 <div class="relative h-[200px] sm:h-[250px] md:h-[300px] lg:h-[350px] xl:h-[400px] 2xl:h-[450px]">
     {/* The image behind the banner */}
-    {anime.cover && (
+    {anime?.cover && (
       <span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0">
-        <img src={anime.cover} alt={`Banner for ${anime.title.english || anime.title.romaji}`} class="opacity-60 min-w-full min-h-full object-cover"/>
+        <img src={anime?.cover} alt={`Banner for ${anime?.title.english || anime?.title.romaji}`} class="opacity-60 min-w-full min-h-full object-cover"/>
       </span>
     )}
 
     {/* The container that lies on top of the image */}
     <div class="absolute ml-4 mt-4 space-y-2 text-white sm:ml-8 sm:mt-6 md:space-y-3 lg:mt-8 xl:mt-10 2xl:mt-12">
       {/* the title */}
       <p class="text-xl font-Noto-800 font-extrabold line-clamp-1 sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl">
-        {anime.title.romaji || anime.title.english}
+        {anime?.title.romaji || anime?.title.english}
       </p>
       <p class="text-sm font-normal text-gray-300 line-clamp-1 sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl">
-        {anime.title.english ?? anime.title.romaji}
+        {anime?.title.english || anime?.title.romaji}
       </p>
 
       {/* Icons showing the info about the anime */}
       <div class="flex space-x-2">
-        <Icon icon="./PlayIcon.svg" text={anime.type} />
-        <Icon icon="./ClockIcon.svg" text={`${anime.duration} Min/Ep`} />
-        <Icon icon="./LikeIcon.svg" text={`${anime.rating}%`} />
+        <Icon icon="./PlayIcon.svg" text={anime?.type} />
+        <Icon icon="./ClockIcon.svg" text={`${anime?.duration} Min/Ep`} />
+        <Icon icon="./LikeIcon.svg" text={`${anime?.rating}%`} />
       </div>
 
       {/* Array of the genres */}
       <div class="mr-2 flex flex-wrap gap-x-2 gap-y-1 sm:gap-x-3 md:gap-x-4">
-        {anime.genres.map((genre) => (
+        {anime?.genres.map((genre) => (
           <Genre genre={genre} />
         ))}
       </div>
 
       <p class="hidden max-w-3xl md:block md:line-clamp-3 lg:line-clamp-4 xl:line-clamp-5 2xl:line-clamp-6">
-        {(anime.description).replace(/<\/?\w*\\?>/gm, '')}
+        {(anime?.description).replace(/<\/?\w*\\?>/gm, '')}
       </p>
 
       {/* the button at the bottom */}

04 NachoNekoNyaanime-UI/src/pages/index.astro

@@ -1,17 +1,18 @@
 ---
-import Layout from '../layouts/Layout.astro';
-import Header from '../components/Header.astro';
-import Banner from '../components/anime/Banner.astro';
-import Section from '../components/Section.astro';
+import Layout from "../layouts/Layout.astro";
+import Header from "../components/Header.astro";
+import Banner from "../components/anime/Banner.astro";
+import Section from "../components/Section.astro";
 
-const fetchAnime = await fetch('https://api.consumet.org/meta/anilist/info/140960').then(r => r.json());
-const trendingAnime = await fetch('https://api.consumet.org/meta/anilist/trending').then(r => r.json());
-const popularAnime = await fetch('https://api.consumet.org/meta/anilist/popular').then(r => r.json());
+const API_DOWN = "API IS CURRENTLY DOWN. PLEASE CHECK BACK LATER~";
+const fetchAnime = await fetch("https://api.consumet.org/meta/anilist/info/140960").then((r) => r.json());
+const trendingAnime = await fetch("https://api.consumet.org/meta/anilist/trending").then((r) => r.json());
+const popularAnime = await fetch("https://api.consumet.org/meta/anilist/popular").then((r) => r.json());
 ---
+
 <Layout>
-	<Header/>
-      <Banner anime={fetchAnime}/>
-      <Section title="Trending Now" animeList={trendingAnime.results}/>
-      <Section title="Popular" animeList={popularAnime.results}/>
+	<Header />
+	{fetchAnime.message ? API_DOWN : <Banner anime={fetchAnime}/>}
+	{trendingAnime.message ? API_DOWN : <Section title="Trending Now" animeList={trendingAnime.results}/>}
+	{popularAnime.message ? API_DOWN : <Section title="Popular" animeList={popularAnime.results} />}
 </Layout>
-

04 NachoNekoNyaanime-UI/tailwind.config.cjs

@@ -4,7 +4,4 @@ module.exports = {
 	theme: {
 		extend: {},
 	},
-	plugins: [
-		require('@tailwindcss/line-clamp')
-	],
 }