Add new components and update test section

README.md

@@ -1,2 +1,2 @@
-# Flurry
+# Polestar
 A component library built for MinPluto.

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@minpluto/flurry",
+  "name": "@minpluto/polestar",
   "author": "SudoVanilla <korbs@sudovanilla.org>",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.5",
   "license": "AGPL-3.0-only",
   "bugs": {
-    "url": "https://ark.sudovanilla.org/MinPluto/Flurry/issues",
+    "url": "https://ark.sudovanilla.org/MinPluto/Polestar/issues",
     "email": "support@minpluto.org"
   },
   "funding": [

src/Comment.astro

@@ -0,0 +1,39 @@
+---
+// Properties
+const {
+    Avatar,
+    Username,
+    Link
+} = Astro.props
+
+// Components
+import { Image } from 'astro:assets';
+---
+
+<div class="fl-comment">
+    <Image src={Avatar} alt={Username + "'s avatar"} inferSize={true} format="webp"/>
+    <div>
+        <a style="margin-top: 12px;" href={Link}>{Username}</a>
+        <slot/>
+    </div>
+</div>
+
+<style lang="scss">
+    .fl-comment {
+        display: flex;
+        gap: 12px;
+        img {
+            width: 42px;
+            height: 42px;
+            border-radius: 3rem;
+        }
+        div {
+            display: grid;
+            gap: 12px;
+            * {margin: 0px}
+        }
+        a {
+            color: white;
+        }
+    }
+</style>

src/Creator.astro

@@ -0,0 +1,34 @@
+---
+// Properties
+const {
+    Avatar,
+    Name,
+    Link,
+    FollowerCount
+} = Astro.props
+
+// Components
+import { Image } from "astro:assets";
+
+---
+
+<a href={Link} class="fl-sidebar-creator">
+    <Image src={Avatar} alt={Name + "'s Avatar"} inferSize={true} format="webp"/>
+    <p>{Name}</p>
+</a>
+
+<style lang="scss">
+.fl-sidebar-creator {
+    display: flex;
+    align-items: center;
+    img {
+        width: 32px;
+        height: 32px;
+        border-radius: 3rem;
+        margin: -4px 0px;
+    }
+    p {
+        margin: 0px;
+    }
+}
+</style>

src/Sidebar.astro

@@ -11,13 +11,15 @@ import { Image } from "astro:assets";
         {
             ShowHeader ? (
                 <div class="fl-sidebar-header">
-                    <Image
+                    <a class="fl-sidebar-header-logo" href="/">
-                        src={LogoPath}
+                        <Image
-                        alt="Logo"
+                            src={LogoPath}
-                        inferSize={true}
+                            alt="Logo"
-                        format="webp"
+                            inferSize={true}
-                    />
+                            format="webp"
-                    <div>
+                        />
+                    </a>
+                    <div class="fl-sidebar-header-items">
                         <slot name="header-items" />
                     </div>
                 </div>
@@ -58,6 +60,7 @@ import { Image } from "astro:assets";
         flex-direction: column;
         justify-content: space-between;
         padding: 0px 12px;
+        overflow: auto;
         .fl-sidebar-items {
             display: grid;
             gap: 6px;
@@ -83,13 +86,15 @@ import { Image } from "astro:assets";
                 align-items: center;
                 gap: 12px;
                 border-radius: 6px;
-                padding: 6px 12px;
+                padding: 10px 12px;
                 cursor: pointer;
                 font-size: 14px;
-                border: 1px transparent solid;
+                min-height: 24px;
                 &:hover {
                     background: #3c3c3c;
-                    border: 1px #5c5c5c solid;
+                }
+                svg {
+                    width: 18px;
                 }
             }
         }
@@ -104,7 +109,7 @@ import { Image } from "astro:assets";
                     height: 64px;
                     pointer-events: none;
                 }
-                a {
+                .fl-sidebar-header-items a {
                     color: white;
                     text-decoration: none;
                     border-radius: 6px;

src/VideoItem.astro

@@ -15,17 +15,58 @@ const {
 import { Image } from 'astro:assets';
 ---
 
-<a href={"/watch?=" + VideoId} class="fl-vi">
+<a href={"/watch?v=" + VideoId} class="fl-vi">
     <div class="fl-vi-thumbnail">
-        <Image src={Thumbnail} alt={'Thumbnail'} loading="lazy" format="webp"/>
+        <Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="lazy" format="webp"/>
-        <p>{Platform}</p>
+        <!-- <p>{Platform}</p> -->
         <p>{Length}</p>
     </div>
     <div class="fl-vi-content">
-        <Image src={CreatorId} alt={'Creator Avatar'} loading="lazy" format="webp"/>
+        <Image src={'https://ipx.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/>
         <div>
             <p><strong>{Title}</strong></p>
             <p>{Date} - {Views}</p>
         </div>
     </div>
-</a>
+</a>
+
+<style lang="scss">
+.fl-vi {
+    color: white;
+    text-decoration: none;
+    .fl-vi-thumbnail {
+        position: relative;
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 6px;
+        }
+        p {
+            position: absolute;
+            bottom: 0px;
+            right: 12px;
+            background: rgba(0,0,0,0.8);
+            border-radius: 3rem;
+            padding: 6px 12px;
+            font-size: 14px;
+        }
+    }
+    .fl-vi-content {
+        display: flex;
+        gap: 12px;
+        * {margin: 0px;}
+        img {
+            width: 32px;
+            height: 32px;
+            border-radius: 3rem;
+        }
+        strong {
+            max-width: 340px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: block;
+        }
+    }
+}
+</style>

test/astro.config.mjs

@@ -1,7 +1,15 @@
 import { defineConfig } from 'astro/config'
 import vue from '@astrojs/vue'
+import node from '@astrojs/node'
 
 // https://astro.build/config
 export default defineConfig({
-    integrations: [vue()]
+    integrations: [vue()],
+    output: 'server',
+    adapter: node({
+      mode: 'standalone',
+    }),
+    experimental: {
+        serverIslands: true
+    }
 });

test/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.2",
+    "@astrojs/node": "^8.3.3",
     "@astrojs/vue": "^4.5.0",
     "@iconoir/vue": "^7.8.0",
     "astro": "^4.14.2",

test/src/pages/index.astro

@@ -1,7 +1,10 @@
 ---
 // Components
+import Comment from '../../../src/Comment.astro'
+import Creator from '../../../src/Creator.astro'
 import Dialog from '../../../src/Dialog.astro'
 import Sidebar from '../../../src/Sidebar.astro'
+import Video from '../../../src/VideoItem.astro'
 
 // Icons
 import {
@@ -18,7 +21,9 @@ import {
     EmojiTalkingHappy,
     PlanetAlt,
     Settings,
-    MediaVideoList
+    MediaVideoList,
+LogOut,
+OpenInBrowser
 } from '@iconoir/vue'
 ---
 
@@ -60,31 +65,121 @@ import {
 		<a href="#"><Gamepad/> Gaming</a>
 		<a href="#"><AppleImac2021Side/> Tech</a>
 		<h2>Project Demo</h2>
-		<a href="#" onclick="OpenExampleDialog()">Open Dialog</a>
+		<a href="#" onclick="OpenExampleDialog()"><OpenInBrowser/> Open Dialog</a>
+		<h2>Creators</h2>
+		<Creator
+			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="#"
+			FollowerCount="300K"
+			server:defer
+		>
+			<div style="display: flex; align-items: center; gap: 12px; padding: 0px 12px;" slot="fallback">
+				<div class="fl-sk-circle"></div>
+				<div class="fl-sk-text"></div>
+			</div>
+		</Creator>
+	</slot>
+	<slot slot="bottom-items">
+
 	</slot>
-	<slot slot="bottom-items"><a href="#"><Settings/> Settings</a></slot>
 	<slot slot="footer-items">
-		<a href="#"><Group/></a>
+		<a href="#"><LogOut/></a>
-		<a href="#"><Circle/></a>
+		<a href="#"><Settings/></a>
-		<a href="#"><GitFork/></a>
 	</slot>
 </Sidebar>
 
+<div class="content">
+	<div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 12px;">
+		<Video
+			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"
+			Date="2 weeks ago"
+			Views="71K"
+			Length="16:10"
+			Platform="YouTube"
+		/>
+		<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"
+			Date="1 weeks ago"
+			Views="43K"
+			Length="19:57"
+			Platform="YouTube"
+		/>
+		<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"
+			Date="2 weeks ago"
+			Views="101K"
+			Length="31:18"
+			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"
+		Link="#"
+	>
+	Lorem ipsum odor amet, consectetuer adipiscing elit. Aliquet dapibus ridiculus purus dui id fusce interdum nibh. Nullam ut eu ridiculus consequat potenti. Cursus ornare cras orci penatibus dis leo et. At suscipit volutpat tincidunt elit suscipit egestas fames fusce finibus. Quisque interdum duis pharetra lobortis facilisi. Nullam ut montes, ullamcorper platea nam convallis. Eleifend lacus congue erat, amet ac montes. Netus ex velit non cursus lacinia magnis.
+
+Phasellus eget consequat penatibus magnis at. Augue neque placerat pellentesque finibus rhoncus integer. Molestie class ac dapibus malesuada interdum natoque posuere. Odio commodo interdum et luctus suspendisse habitant feugiat. Magna luctus pharetra tristique mattis quisque ex consectetur viverra. Consequat conubia viverra vitae penatibus venenatis fusce facilisis, nisl tincidunt.
+	</Comment>
+</div>
+
 <style>
 body {
 	background: black;
 	color: white;
 	font-family: Arial, Helvetica, sans-serif;
 }
+.content {
+	margin-left: 300px;
+}
 </style>
 
+<style is:global>
+    .fl-sk-circle {
+        height: 32px;
+        width: 32px;
+    	background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
+		background-size: 400px;
+		animation: load 1s linear infinite;
+        border-radius: 3rem;
+    }
+    .fl-sk-text {
+        height: 16px;
+    	background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
+		background-size: 400px;
+		animation: load 1s linear infinite;
+        border-radius: 3rem;
+        width: 120px;
+    }
+	@keyframes load {
+		0% { background-position-x: -100px; }
+		100% { background-position-x: -100%; }
+	}
+</style>
+
+
 <script is:inline>
 	function OpenExampleDialog() {
 		document.querySelector('#dialog-id-thingie').style.display = 'inherit'
 		document.querySelector('#dialog-id-thingie-backdrop').style.display = 'inherit'
 	}
-function CloseExamepleDialog() {
+	function CloseExamepleDialog() {
-    document.querySelector('#dialog-id-thingie').style.display = 'none'
+		document.querySelector('#dialog-id-thingie').style.display = 'none'
-    document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
+		document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
-}
+	}
 </script>