update

index.ts

@@ -1,5 +1,5 @@
 export { default as Comment } from "./src/Comment.astro"
-export { default as Creator } from "./src/Creator.astro"
+export { default as SidebarCreator } from "./src/SidebarCreator.astro"
 export { default as Dialog } from "./src/Dialog.astro"
 export { default as Sidebar } from "./src/Sidebar.astro"
 export { default as VideoItem } from "./src/VideoItem.astro"

package.json

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

src/Sidebar.astro

@@ -1,6 +1,6 @@
 ---
 // Properties
-const { ShowHeader, LogoPath, ShowVersion, FooterLinks, Size } = Astro.props;
+const { ShowHeader, LogoPath, ShowVersion, FooterLinks, Version } = Astro.props;
 
 // Components
 import { Image } from "astro:assets";
@@ -34,7 +34,7 @@ import { Image } from "astro:assets";
             <slot name="bottom-items" />
         </div>
         <div class="fl-sidebar-footer">
-            {ShowVersion ? <p id="fl-your-version">v2025.05.16</p> : null}
+            {ShowVersion ? <p id="fl-your-version">{Version}</p> : null}
             {
                 FooterLinks ? (
                     <div>
@@ -108,6 +108,7 @@ import { Image } from "astro:assets";
                     width: 64px;
                     height: 64px;
                     pointer-events: none;
+                    object-fit: contain;
                 }
                 .fl-sidebar-header-items a {
                     color: white;

src/VideoItem.astro

@@ -63,9 +63,9 @@ import { Image } from 'astro:assets';
         strong {
             max-width: 340px;
             overflow: hidden;
-            white-space: nowrap;
+            white-space: wrap;
             text-overflow: ellipsis;
-            display: block;
+            display: inline-grid;
         }
     }
 }

test/src/pages/index.astro

@@ -1,7 +1,12 @@
 ---
+// Information
+import {
+    version
+} from '../../../package.json'
+
 // Components
 import Comment from '../../../src/Comment.astro'
-import Creator from '../../../src/Creator.astro'
+import SidebarCreator from '../../../src/SidebarCreator.astro'
 import Dialog from '../../../src/Dialog.astro'
 import Sidebar from '../../../src/Sidebar.astro'
 import Video from '../../../src/VideoItem.astro'
@@ -10,9 +15,6 @@ import Video from '../../../src/VideoItem.astro'
 import {
     InputSearch,
     ProfileCircle,
-    Group,
-    Circle,
-    GitFork,
     GraphUp,
     Movie,
     MusicDoubleNote,
@@ -22,8 +24,8 @@ import {
     PlanetAlt,
     Settings,
     MediaVideoList,
-LogOut,
+	LogOut,
-OpenInBrowser
+	OpenInBrowser
 } from '@iconoir/vue'
 ---
 
@@ -47,6 +49,7 @@ OpenInBrowser
 	LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
 	ShowVersion
 	FooterLinks
+	Version={version}
 >
 	<slot slot="header-items">
 		<a href="#"><InputSearch/></a>
@@ -67,7 +70,7 @@ OpenInBrowser
 		<h2>Project Demo</h2>
 		<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
 		<h2>Creators</h2>
-		<Creator
+		<SidebarCreator
 			Avatar="https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj"
 			Name="The Linux Experiment"
 			Link="#"
@@ -78,7 +81,7 @@ OpenInBrowser
 				<div class="fl-sk-circle"></div>
 				<div class="fl-sk-text"></div>
 			</div>
-		</Creator>
+		</SidebarCreator>
 	</slot>
 	<slot slot="bottom-items">
 
@@ -95,32 +98,50 @@ OpenInBrowser
 			VideoId="PuGeR075MkE"
 			CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
 			Title="Immutable Linux, without the hassle? Vanilla OS 2 Orchid"
-			Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/PuGeR075MkE/mqdefault.jpg"
+			Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/PuGeR075MkE/mqdefault.jpg"
 			Date="2 weeks ago"
 			Views="71K"
 			Length="16:10"
 			Platform="YouTube"
-		/>
+			server:defer
+		>
+		<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
+			<div class="fl-sk-video"></div>
+			<div class="fl-sk-text"></div>
+		</div>
+		</Video>
 		<Video
 			VideoId="urC7PKlM3Qo"
 			CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
 			Title="Nvidia pilfers Youtube for AI, GNOME HDR, Immutable Manjaro: Linux & Open Source News"
-			Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/urC7PKlM3Qo/mqdefault.jpg"
+			Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/urC7PKlM3Qo/mqdefault.jpg"
 			Date="1 weeks ago"
 			Views="43K"
 			Length="19:57"
 			Platform="YouTube"
-		/>
+			server:defer
+		>
+		<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
+			<div class="fl-sk-video"></div>
+			<div class="fl-sk-text"></div>
+		</div>
+		</Video>
 		<Video
 			VideoId="YFr5E2C5ex8"
 			CreatorId="UC5UAwBUum7CPN5buc-_N1Fw"
 			Title="COSMIC Desktop ALPHA: a unique & important project for Linux!"
-			Thumbnail="https://ipx.sudovanilla.org/https://inv.tux.pizza/vi/YFr5E2C5ex8/mqdefault.jpg"
+			Thumbnail="https://ipx.sudovanilla.org/https://yt.sudovanilla.org/vi/YFr5E2C5ex8/mqdefault.jpg"
 			Date="2 weeks ago"
 			Views="101K"
 			Length="31:18"
 			Platform="YouTube"
-		/>
+			server:defer
+		>
+		<div style="display: flex; flex-direction: column; align-items: left; gap: 12px; padding: 0px 12px;" slot="fallback">
+			<div class="fl-sk-video"></div>
+			<div class="fl-sk-text"></div>
+		</div>
+		</Video>
 	</div>
 
 	<br/>
@@ -145,11 +166,20 @@ body {
 	font-family: Arial, Helvetica, sans-serif;
 }
 .content {
-	margin-left: 300px;
+	margin-left: 260px;
+	padding: 12px;
 }
 </style>
 
 <style is:global>
+	.fl-sk-video {
+		height: 183px;
+		width: 100%;
+    	background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
+		background-size: 600px;
+		animation: load 2s linear infinite;
+		border-radius: 6px;
+	}
     .fl-sk-circle {
         height: 32px;
         width: 32px;