Add new components and update test section
This commit is contained in:
Korbs
parent
d262d9fa95
commit
8d129605bc
10 changed files with 254 additions and 31 deletions
|
|
@ -1,2 +1,2 @@
|
|||
# Flurry
|
||||
# Polestar
|
||||
A component library built for MinPluto.
|
||||
|
|
@ -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": [
|
||||
|
|
|
|||
39
src/Comment.astro
Normal file
39
src/Comment.astro
Normal 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
34
src/Creator.astro
Normal 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>
|
||||
|
|
@ -11,13 +11,15 @@ import { Image } from "astro:assets";
|
|||
{
|
||||
ShowHeader ? (
|
||||
<div class="fl-sidebar-header">
|
||||
<Image
|
||||
src={LogoPath}
|
||||
alt="Logo"
|
||||
inferSize={true}
|
||||
format="webp"
|
||||
/>
|
||||
<div>
|
||||
<a class="fl-sidebar-header-logo" href="/">
|
||||
<Image
|
||||
src={LogoPath}
|
||||
alt="Logo"
|
||||
inferSize={true}
|
||||
format="webp"
|
||||
/>
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
<p>{Platform}</p>
|
||||
<Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="lazy" format="webp"/>
|
||||
<!-- <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>
|
||||
|
|
@ -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
|
||||
}
|
||||
});
|
||||
|
|
|
|||
BIN
test/bun.lockb
BIN
test/bun.lockb
Binary file not shown.
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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="#"><Circle/></a>
|
||||
<a href="#"><GitFork/></a>
|
||||
<a href="#"><LogOut/></a>
|
||||
<a href="#"><Settings/></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() {
|
||||
document.querySelector('#dialog-id-thingie').style.display = 'none'
|
||||
document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
|
||||
}
|
||||
function CloseExamepleDialog() {
|
||||
document.querySelector('#dialog-id-thingie').style.display = 'none'
|
||||
document.querySelector('#dialog-id-thingie-backdrop').style.display = 'none'
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue