Add new components and update test section

This commit is contained in:
Korbs 2024-09-04 03:04:41 -04:00
parent d262d9fa95
commit 8d129605bc
10 changed files with 254 additions and 31 deletions

View file

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

View file

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

39
src/Comment.astro Normal file
View file

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

34
src/Creator.astro Normal file
View file

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

View file

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

View file

@ -15,17 +15,58 @@ const {
import { Image } from 'astro:assets'; 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"> <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> <p>{Length}</p>
</div> </div>
<div class="fl-vi-content"> <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> <div>
<p><strong>{Title}</strong></p> <p><strong>{Title}</strong></p>
<p>{Date} - {Views}</p> <p>{Date} - {Views}</p>
</div> </div>
</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>

View file

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

Binary file not shown.

View file

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

View file

@ -1,7 +1,10 @@
--- ---
// Components // Components
import Comment from '../../../src/Comment.astro'
import Creator from '../../../src/Creator.astro'
import Dialog from '../../../src/Dialog.astro' import Dialog from '../../../src/Dialog.astro'
import Sidebar from '../../../src/Sidebar.astro' import Sidebar from '../../../src/Sidebar.astro'
import Video from '../../../src/VideoItem.astro'
// Icons // Icons
import { import {
@ -18,7 +21,9 @@ import {
EmojiTalkingHappy, EmojiTalkingHappy,
PlanetAlt, PlanetAlt,
Settings, Settings,
MediaVideoList MediaVideoList,
LogOut,
OpenInBrowser
} from '@iconoir/vue' } from '@iconoir/vue'
--- ---
@ -60,24 +65,114 @@ import {
<a href="#"><Gamepad/> Gaming</a> <a href="#"><Gamepad/> Gaming</a>
<a href="#"><AppleImac2021Side/> Tech</a> <a href="#"><AppleImac2021Side/> Tech</a>
<h2>Project Demo</h2> <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 slot="bottom-items"><a href="#"><Settings/> Settings</a></slot>
<slot slot="footer-items"> <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> </slot>
</Sidebar> </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> <style>
body { body {
background: black; background: black;
color: white; color: white;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.content {
margin-left: 300px;
}
</style> </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> <script is:inline>
function OpenExampleDialog() { function OpenExampleDialog() {
document.querySelector('#dialog-id-thingie').style.display = 'inherit' document.querySelector('#dialog-id-thingie').style.display = 'inherit'