Expand list for tech channels

src/components/DiscoverChannel.astro

@@ -0,0 +1,42 @@
+---
+// Properties
+const {
+    ChannelId
+} = Astro.props
+
+// Configuration
+import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY} from '@utils/GetConfig'
+
+// Fetch
+const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + ChannelId).then((response) => response.json());
+---
+
+<a href={'/channel/' + channel.authorId} style={"background: url('" +  DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[0].url} class="discovery-channel">
+    <div class="dc-c">
+        <img src={DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[5].url}/>
+        <p>{channel.author}</p>
+    </div>
+</a>
+<style lang="scss">
+.discovery-channel {
+    text-decoration: none;
+    border-radius: 10px;
+    font-weight: bold;
+    background-position: center !important;
+    background-size: cover !important;
+    .dc-c {
+        border-radius: 10px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        text-align: center;
+        backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
+        img {
+            width: 24%;
+            align-self: center;
+            border-radius: 10rem;
+            padding: 30px;
+        }
+    }
+}
+</style>

src/data/discover.json

@@ -1,39 +1,35 @@
 {
     "Tech": [
-        {
-            "Name": "Linus Tech Tips",
-            "Id": "UCXuqSBlHAE6Xw-yeJA0Tunw",
-            "Link": "UCXuqSBlHAE6Xw-yeJA0Tunw",
-            "Logo": "/ggpht/Vy6KL7EM_apxPSxF0pPy5w_c87YDTOlBQo3MADDF0Wl51kwxmt9wmRotnt2xQXwlrcyO0Xe56w",
-            "Banner": "/ggpht/oaPQn9KofKbSwSKTW8eGEQTM8KwZ5wZMbo69PPxhgqu3NTNljx7hfJB1XmR4ZTa0VPdpnpIzlQ"
-        },
-        {
-            "Name": "Mac Address",
-            "Id": "UC0KfjyvabuE2J-RBC6ko2Lw",
-            "Link": "UC0KfjyvabuE2J-RBC6ko2Lw",
-            "Logo": "/ggpht/ytc/AIdro_k44TPOZxZNdlBdnnEjlvFs8EP832dq1-bX0ZxG",
-            "Banner": "/ggpht/u5LNefuGhw400tFMOtaFY0JFUM-RUChETq3TRCa1v_vRhnXtULjELNgyTEgB2_PGUMnNdxr4qjY"
-        },
-        {
-            "Name": "MKBHD",
-            "Id": "/UCBJycsmduvYEL83R_U4JriQ",
-            "Link": "/UCBJycsmduvYEL83R_U4JriQ",
-            "Logo": "/ggpht/lkH37D712tiyphnu0Id0D5MwwQ7IRuwgQLVD05iMXlDWO-kDHut3uI4MgIEAQ9StK0qOST7fiA",
-            "Banner": "/ggpht/KhLiJiH9xE8AiPUz9fLD9rOQYNH_EVhVuaKyAu2hp8alAhtkV4IQ9-Dfsoge8E11Im0nxDgjsQ"
-        },
-        {
-            "Name": "The Linux Experiment",
-            "Id": "UC5UAwBUum7CPN5buc-_N1Fw",
-            "Link": "UC5UAwBUum7CPN5buc-_N1Fw",
-            "Logo": "/ggpht/ytc/AIdro_kHP15da41K6sBItk2eRhwK31vp_UO6a4DEzH0EFw",
-            "Banner": "/ggpht/Lc1dH-nj6nvU63AH85SPgoLd2oba4zA41zNbZSWg81PN_zl1mgC_eiL3DbJJPb7b_nS7FarUTYE"
-        },
-        {
-            "Name": "NetworkChuck",
-            "Id": "UC9x0AN7BWHpCDHSm9NiJFJQ",
-            "Link": "UC9x0AN7BWHpCDHSm9NiJFJQ",
-            "Logo": "/ggpht/ytc/AIdro_lUWCdtX-DVvLxWMK-gY-p24JNKmrCtKX_s404uMg",
-            "Banner": "/ggpht/Lc1dH-6TsuYML3OSXSVVFkRGfPfq1qhEiG0tkKj-UV6XPfifmDDAuV8QTF4wna5maptTBMhikcjaAWcg"
-        }
+        {"Id": "UCXuqSBlHAE6Xw-yeJA0Tunw"},
+        {"Id": "UC0KfjyvabuE2J-RBC6ko2Lw"},
+        {"Id": "UCBJycsmduvYEL83R_U4JriQ"},
+        {"Id": "UC5UAwBUum7CPN5buc-_N1Fw"},
+        {"Id": "UC9x0AN7BWHpCDHSm9NiJFJQ"},
+        {"Id": "UCsTcErHg8oDvUnTzoqsYeNw"},
+        {"Id": "UCMiJRAwDNSNzuYeN2uWa0pA"},
+        {"Id": "UCWFKCr40YwOZQx8FHU_ZqqQ"},
+        {"Id": "UCsBjURrPoezykLs9EqgamOA"},
+        {"Id": "UCXGgrKt94gR6lmN4aN3mYTg"},
+        {"Id": "UCey_c7U86mJGz1VJWH5CYPA"},
+        {"Id": "UC9fSZHEh6XsRpX-xJc6lT3A"},
+        {"Id": "UCVYamHliCI9rw1tHR1xbkfw"},
+        {"Id": "UCP7WmQ_U4GB3K51Od9QvM0w"},
+        {"Id": "UCZNhwA1B5YqiY1nLzmM0ZRg"},
+        {"Id": "UCOk-gHyjcWZNj3Br4oxwh0A"},
+        {"Id": "UCHkYOD-3fZbuGhwsADBd9ZQ"},
+        {"Id": "UCp3yVOm6A55nx65STpm3tXQ"},
+        {"Id": "UC29ju8bIPH5as8OGnQzwJyA"},
+        {"Id": "UC4w1YQAJMWOz4qtxinq55LQ"},
+        {"Id": "UCOWcZ6Wicl-1N34H0zZe38w"},
+        {"Id": "UChIs72whgZI9w6d6FhwGGHA"},
+        {"Id": "UCLx053rWZxCiYWsBETgdKrQ"},
+        {"Id": "UCEp20NgOZHmgWdbQdHSxgjw"},
+        {"Id": "UCQ6fPy9wr7qnMxAbFOGBaLw"},
+        {"Id": "UCUQo7nzH1sXVpzL92VesANw"},
+        {"Id": "UC1tVU8H153ZFO9eRsxdJlhA"},
+        {"Id": "UCvpfclapgcuJo0M_x65pfRw"},
+        {"Id": "UCgyqtNWZmIxTx3b6OxTSALw"},
+        {"Id": "UChIZGfcnjHI0DG4nweWEduw"},
+        {"Id": "UC0vBXGSyV14uvJ4hECDOl0Q"}
     ]
 }

src/pages/discover/tech.astro

@@ -1,28 +1,26 @@
 ---
-import { changeLanguage } from "i18next";
+// Layout
+import Base from "@layouts/Default.astro";
 
-import Discover from "@layouts/Discover.astro";
 // Properties
 const { FetchData, CategoryName, CategoryDescription } = Astro.props;
-// Use on top of Default Layout
-import Base from "@layouts/Default.astro";
+
+// Components
+import DiscoverChannel from '@components/DiscoverChannel.astro'
+
 // Configuration
 import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
+
 // Discover Data
-import Discover from "../../data/discover.json";
+import DiscoverData from "../../data/discover.json";
 
 
 ---
 
 <Base>
     <div class="video-grid">
-        {Discover.Tech.map((channel) =>
-            <a href={'/channel/' + channel.Link} style={"background: url('" +  DEFAULT_MEDIA_DATA_PROXY + channel.Banner} class="discovery-channel">
-                <div class="dc-c">
-                    <img src={DEFAULT_MEDIA_DATA_PROXY + channel.Logo}/>
-                    <p>{channel.Name}</p>
-                </div>
-            </a>
+        {DiscoverData.Tech.map((channel) =>
+            <DiscoverChannel ChannelId={channel.Id}/>
         )}
     </div>
     <hr/>
@@ -32,27 +30,4 @@ import Discover from "../../data/discover.json";
     </div>
 </Base>
 
-<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
-<style lang="scss">
-.discovery-channel {
-    text-decoration: none;
-    border-radius: 10px;
-    font-weight: bold;
-    background-position: center !important;
-    background-size: cover !important;
-    .dc-c {
-        border-radius: 10px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        text-align: center;
-        backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
-        img {
-            width: 24%;
-            align-self: center;
-            border-radius: 10rem;
-            padding: 30px;
-        }
-    }
-}
-</style>
+<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>