From 90a17a3353a98b18c7f5b411b5480ab571626414 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Thu, 25 Jul 2024 00:51:54 -0400
Subject: [PATCH] Add Twitch categories to Home page

---
 src/pages/index.astro | 53 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index ff89f60..94843af 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,12 +5,14 @@ import Base from "@layouts/Default.astro";
 // Configuration
 import {
     DEFAULT_MEDIA_DATA_PROXY,
-    DEFAULT_IMAGE_PROXY
+    DEFAULT_IMAGE_PROXY,
+DEFAULT_STREAM_DATA_PROXY
 } from '@utils/GetConfig'
 import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@iconoir/vue";
 
 // Components
 import Trending from "@components/category/trending.astro";
+import Chip from "@components/Chip.astro";
 
 // Fetch
 const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending'
@@ -34,17 +36,22 @@ const GamingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending?type=gaming'
 const GamingResponse = await fetch(GamingFetch)
 const GamingData = await GamingResponse.json()
 const GamingSplit = GamingData.slice(0, 1)
+
+/// Twitch (/api/discover/)
+const TwitchDiscoverFetch = await fetch(DEFAULT_STREAM_DATA_PROXY + '/api/discover')
+const TwitchDiscoverData = await TwitchDiscoverFetch.json()
 ---
 
 <Base Title="MinPluto" Description="">
     <div class="force-center">
         <img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
-        <hr/>
         <img src="/images/backgrounds/1.webp"/>
+        <hr/>
     </div>
-    <div class="category-select-grid">
+    <div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;">
         {TrendingSplit.map((data) =>
-            <a href={'/category/trending'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+            <a href={'/discover?category=trending&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+                <Chip Text="YouTube" Color="#c91e34"/>
                 <div class="goin-card-content">
                     <GraphUp viewBox="0 0 10 24"/>
                     <p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p>
@@ -52,7 +59,8 @@ const GamingSplit = GamingData.slice(0, 1)
             </a>
         )}
         {MoviesSplit.map((data) =>
-            <a href={'/category/movies'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+            <a href={'/discover?category=movies&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+                <Chip Text="YouTube" Color="#c91e34"/>
                 <div class="goin-card-content">
                     <Movie viewBox="0 0 10 24"/>
                     <p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p>
@@ -60,7 +68,8 @@ const GamingSplit = GamingData.slice(0, 1)
             </a>
         )}
         {MusicSplit.map((data) =>
-            <a href={'/category/music'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+            <a href={'/discover?category=music&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+                <Chip Text="YouTube" Color="#c91e34"/>
                 <div class="goin-card-content">
                     <MusicDoubleNote viewBox="0 0 10 24"/>
                     <p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
@@ -68,7 +77,8 @@ const GamingSplit = GamingData.slice(0, 1)
             </a>
         )}
         {GamingSplit.map((data) =>
-            <a href={'/category/gaming'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+            <a href={'/discover?category=gaming&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
+                <Chip Text="YouTube" Color="#c91e34"/>
                 <div class="goin-card-content">
                     <Gamepad viewBox="0 0 10 24"/>
                     <p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
@@ -76,11 +86,22 @@ const GamingSplit = GamingData.slice(0, 1)
             </a>
         )}
     </div>
+    <hr/>
+    <div class="category-select-grid">
+        {TwitchDiscoverData.data.map((data) =>
+            <a href={'/discover?category=' + data.name + '&?platform=twitch'} style={'background: url("' + data.image + '")'} class="goin-card">
+                <Chip Text="Twitch" Color="#9146FF"/>
+                <div class="goin-card-content">
+                    <p>{data.displayName}</p>
+                </div>
+            </a>
+        )}
+    </div>
 </Base>
 
 
 <style is:inline>.sidebar-top-end a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
-<style>
+<style is:global>
 img[src="/images/backgrounds/1.webp"] {
     position: fixed;
     bottom: 0px;
@@ -93,7 +114,7 @@ img[src="/images/backgrounds/1.webp"] {
         display: none;
     }
     .category-select-grid {
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
     }
 }
 .force-center {
@@ -107,31 +128,37 @@ img[src="/images/backgrounds/1.webp"] {
     border-radius: 10px;
     background-size: cover !important;
     background-position: center !important;
+    position: relative;
+}
+
+.chip {
+    position: absolute;
+    z-index: 1;
+    left: 12px;
 }
 
 .goin-card-content {
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 0px 12px;
     height: 100%;
     place-content: center;
     border-radius: 10px;
     backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
 }
 .goin-card-content p {
-    font-size: 24px;
+    font-size: 18px;
     font-weight: bold;
     position: absolute;
     left: 0px;
     bottom: 0px;
-    margin: 24px;
+    margin: 12px;
 }
 .goin-card-content svg {
     position: absolute;
     right: 0px;
     bottom: 0px;
-    width: 50px;
+    width: 124px;
     height: 120px;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     opacity: 0.3;