MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Compare commits

base: MinPluto:5a942031684fc29441a7abbb2f56348297630a2a
Branches Tags
MinPluto:main
...
compare: MinPluto:bddd6b9c513bff96e02b66d6850363ca692480ea
Branches Tags
MinPluto:main

3 commits
5a94203168 ... bddd6b9c51

Author SHA1 Message Date
Korbs
bddd6b9c51 update 2024-09-05 15:57:07 -04:00
Korbs
f4cc2fa077 Rename Creator to SidebarCreator 2024-09-05 15:57:03 -04:00
Korbs
cf579e0508 Add skeleton for videos 2024-09-05 15:56:50 -04:00
6 changed files with 52 additions and 21 deletions
Show stats Expand all files Collapse all files

2
index.ts
View file

@ -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"

2
package.json
View file

@ -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",

5
src/Sidebar.astro
View file

@ -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;

0
src/Creator.astro → src/SidebarCreator.astro
View file

4
src/VideoItem.astro
View file

@ -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;
}
}
}

60
test/src/pages/index.astro
View file

@ -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,
OpenInBrowser
LogOut,
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;