Bump version

package.json

@@ -2,7 +2,7 @@
   "name": "@minpluto/polestar",
   "author": "SudoVanilla <korbs@sudovanilla.org>",
   "type": "module",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "license": "AGPL-3.0-only",
   "bugs": {
     "url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",

src/Category.astro

@@ -0,0 +1,56 @@
+---
+// Properties
+const {
+    Name,
+    Link,
+    Thumbnail,
+    Platform
+} = Astro.props
+---
+
+<a href={Link} class="category-card">
+    {Platform ? 
+        <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
+        :
+        <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
+    }
+    <img onload="this.style.opacity = '1'" src={Thumbnail}/>
+    <p>{Name}</p>
+</a>
+
+<style lang="scss">
+.category-card {
+    position: relative;
+    color: white;
+    text-decoration: none;
+    &::before {
+        content: "";
+        position: absolute;
+        backdrop-filter: blur(12px) contrast(0.8) brightness(0.4);
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        border-radius: 6px;
+    }
+    img {
+        border-radius: 6px;
+        height: 100%;
+        width: 100%;
+        opacity: 0;
+    }
+    p {
+        font-size: 32px;
+        font-weight: bold;
+        margin: 24px;
+        position: absolute;
+        bottom: 0px;
+    }
+    span {
+        fill: white;
+        width: 32px;
+        position: absolute;
+        margin: 24px;
+    }
+}
+</style>

src/Sidebar.astro

@@ -86,7 +86,7 @@ import { Image } from "astro:assets";
                 align-items: center;
                 gap: 12px;
                 border-radius: 6px;
-                padding: 10px 12px;
+                padding: 6px 12px;
                 cursor: pointer;
                 font-size: 14px;
                 min-height: 24px;

src/search/Field.astro

@@ -0,0 +1,55 @@
+---
+import { Search, ArrowRight } from "@iconoir/vue";
+---
+
+<div class="search-field">
+    <Search class="search-field-mag" />
+    <input placeholder="Search..." />
+    <button class="search-field-submit">Go</button>
+</div>
+
+<style lang="scss">
+    .search-field {
+        display: flex;
+        align-items: center;
+        position: relative;
+        max-width: 360px;
+        input {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            height: 100%;
+            width: -moz-available;
+            border-radius: 3rem;
+            border: 1px #3b3b3b solid;
+            background: #282828;
+            color: white;
+            padding: 18px 24px 18px 48px;
+            &:focus {
+                outline: none;
+            }
+        }
+        .search-field-mag {
+            position: absolute;
+            z-index: 5;
+            left: 18px;
+            top: 7px;
+            width: 18px;
+            pointer-events: none;
+        }
+        .search-field-submit {
+            display: none;
+            position: absolute;
+            right: 12px;
+            top: 6px;
+            border-radius: 3rem;
+            border: none;
+            align-items: center;
+            gap: 6px;
+            font-size: 14px;
+            background: white;
+            padding: 4px 12px;
+            cursor: pointer;
+        }
+    }
+</style>

test/astro.config.mjs

@@ -11,5 +11,10 @@ export default defineConfig({
     }),
     experimental: {
         serverIslands: true
+    },
+    vite: {
+      server: {
+        hmr: false
+      }
     }
 });

test/src/pages/index.astro

@@ -10,6 +10,32 @@ import SidebarCreator from '../../../src/SidebarCreator.astro'
 import Dialog from '../../../src/Dialog.astro'
 import Sidebar from '../../../src/Sidebar.astro'
 import Video from '../../../src/VideoItem.astro'
+import Category from '../../../src/Category.astro'
+import SearchField from '../../../src/search/Field.astro'
+
+// Data
+/// Fetch Categories for YouTube
+const TrendingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending'
+const TrendingResponse = await fetch(TrendingFetch)
+const TrendingData = await TrendingResponse.json()
+const TrendingSplit = TrendingData.slice(0, 1)
+
+const MoviesFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=movies'
+const MoviesResponse = await fetch(MoviesFetch)
+const MoviesData = await MoviesResponse.json()
+const MoviesSplit = MoviesData.slice(0, 1)
+
+
+const MusicFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=music'
+const MusicResponse = await fetch(MusicFetch)
+const MusicData = await MusicResponse.json()
+const MusicSplit = MusicData.slice(0, 1)
+
+
+const GamingFetch = 'https://yt.sudovanilla.org' + '/api/v1/trending?type=gaming'
+const GamingResponse = await fetch(GamingFetch)
+const GamingData = await GamingResponse.json()
+const GamingSplit = GamingData.slice(0, 1)
 
 // Icons
 import {
@@ -27,6 +53,7 @@ import {
 	LogOut,
 	OpenInBrowser
 } from '@iconoir/vue'
+import { Search } from '@iconoir/vue'
 ---
 
 
@@ -93,6 +120,14 @@ import {
 </Sidebar>
 
 <div class="content">
+	<div style="margin: auto;width: 360px;padding: 64px;">
+		<SearchField/>
+	</div>
+
+	<br/>
+	<br/>
+	<br/>
+
 	<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px;">
 		<Video
 			VideoId="PuGeR075MkE"
@@ -148,6 +183,45 @@ import {
 	<br/>
 	<br/>
 
+	<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px;">
+		{TrendingSplit.map((category) =>
+			<Category
+				Name="Trending"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+		{MoviesSplit.map((category) =>
+			<Category
+				Name="Trailers"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+		{MusicSplit.map((category) =>
+			<Category
+				Name="Music"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+		{GamingSplit.map((category) =>
+			<Category
+				Name="Gaming"
+				Link="#"
+				Thumbnail={"https://ipx.sudovanilla.org/https://img.youtube.com/vi/" + category.videoId + "/mqdefault.jpg"}
+				Platform="YouTube"
+			/>
+		)}
+	</div>
+
+	<br/>
+	<br/>
+	<br/>
+
 	<Comment
 		Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
 		Username="The Linux Experiment"
@@ -163,7 +237,7 @@ Phasellus eget consequat penatibus magnis at. Augue neque placerat pellentesque
 body {
 	background: black;
 	color: white;
-	font-family: Arial, Helvetica, sans-serif;
+	font-family: Arial, Helvetica, sans-serif;+
 }
 .content {
 	margin-left: 260px;
@@ -212,4 +286,10 @@ body {
 		document.querySelector('#dialog-id-thingie').style.display = 'none'
 		document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
 	}
-</script>
+</script>
+
+<style is:inline>
+div.fl-sidebar-items:nth-child(2) > a:nth-child(1) {
+	background: #3c3c3c !important;
+}
+</style>