MinPluto/Polestar
1
Fork 0
Code Issues Pull requests Activity

Compare commits

base: MinPluto:c2f1cfa187ee1885ae7c37758aaa092b7a1a8195
Branches Tags
MinPluto:main
...
compare: MinPluto:d262d9fa951012b8d3761ec292799260b3a1cafe
Branches Tags
MinPluto:main

6 commits
c2f1cfa187 ... d262d9fa95

Author SHA1 Message Date
Korbs
d262d9fa95 Update author and version, add bugs and funding section 2024-08-22 03:43:00 -04:00
Korbs
6dbe3a073f update 2024-08-22 03:42:35 -04:00
Korbs
64e05d875f Add Sidebar 2024-08-22 03:42:29 -04:00
Korbs
1c322cd7bd Update dialog 2024-08-22 03:42:24 -04:00
Korbs
39a32be329 Update test area 2024-08-22 03:42:13 -04:00
Korbs
ad7bef219b Add logo for demo 2024-08-22 03:41:57 -04:00
10 changed files with 407 additions and 39 deletions
Show stats Expand all files Collapse all files

4
.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
test/node_modules/
test/.astro/
node_modules
.vscode

BIN
bun.lockb Executable file
View file

Binary file not shown.

14
package.json
View file

@ -1,9 +1,19 @@
{
"name": "@minpluto/flurry",
"author": "SudoVanilla",
"author": "SudoVanilla <korbs@sudovanilla.org>",
"type": "module",
"version": "0.0.1",
"version": "0.0.11",
"license": "AGPL-3.0-only",
"bugs": {
"url": "https://ark.sudovanilla.org/MinPluto/Flurry/issues",
"email": "support@minpluto.org"
},
"funding": [
{
"type": "SudoVanilla",
"url": "https://liberapay.com/SudoVanilla/"
}
],
"exports": {
".": "./index.ts"
},

162
src/Dialog.astro
View file

@ -2,39 +2,163 @@
// Properties
const {
Name,
Title = 'Dialog Title',
Description = 'Description',
Title = "Dialog Title",
Description = "Description",
CloseButton = true,
QuestionTooltip = false, // Requires Astro Tooltip: https://code.juliancataldo.com/component/astro-tooltips/#installation
Actions = false,
BlurryBackdrop = true
} = Astro.props
BlurryBackdrop = true,
} = Astro.props;
---
<div id={Name} class="fl-dialog-backdrop"></div>
<div id={Name + '-backdrop'} class="fl-dialog-backdrop"></div>
<div id={Name} class="fl-dialog">
<div class="fl-dialog-header">
<div class="fl-dialog-header-start">
<h2>{Title}</h2>
<p>{Description}</p>
</div>
<div class="fl-dialog-header-end">
{QuestionTooltip ?
<button title={QuestionTooltip}><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 19.01L12.01 18.9989" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
:
null
{
QuestionTooltip ? (
<button title={QuestionTooltip}>
<svg
width="24px"
height="24px"
stroke-width="1.5"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
color="#000000"
>
<>
<path
d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976"
stroke="#000000"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 19.01L12.01 18.9989"
stroke="#000000"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</>
</svg>
</button>
) : null
}
{
CloseButton ? (
<button onclick={CloseButton}>
<svg
width="24px"
height="24px"
stroke-width="1.5"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
color="#000000"
>
<path
d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
stroke="#FFF"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
) : null
}
{CloseButton ? <button><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button> : null}
</div>
</div>
<div class="fl-dialog-content">
<slot/>
<slot />
</div>
{Actions ?
<div class="fl-dialog-actions">
<slot name="actions"/>
</div>
:
null
{
Actions ? (
<div class="fl-dialog-actions">
<slot name="actions" />
</div>
) : null
}
</div>
</div>
<style lang="scss" is:inline>
.fl-dialog-backdrop {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
z-index: 1;
display: none;
}
.fl-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
background: black;
border-radius: 12px;
border: 1px #3e3e3e solid;
max-width: 720px;
display: none;
.fl-dialog-header {
border-radius: 12px 12px 0px 0px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
* {margin: 0px}
p {
color: gray;
}
button {
background: transparent;
border-radius: 3rem;
border: none;
aspect-ratio: 1;
&:hover {
background: #1e1e1e;
cursor: pointer;
}
}
}
.fl-dialog-content {
padding: 12px 24px;
}
.fl-dialog-actions {
border-radius: 0px 0px 12px 12px;
padding: 12px 24px;
display: flex;
justify-content: flex-end;
gap: 6px;
a, button {
color: black;
background: white;
border: none;
font-size: 16px;
border-radius: 4px;
padding: 6px 12px;
&:hover {
filter: brightness(0.6);
cursor: pointer;
}
}
.fl-secondary-btn {
color: white;
background: transparent;
&:hover {
cursor: pointer;
filter: brightness(0.6);
}
}
}
}
</style>

148
src/Sidebar.astro Normal file
View file

@ -0,0 +1,148 @@
---
// Properties
const { ShowHeader, LogoPath, ShowVersion, FooterLinks, Size } = Astro.props;
// Components
import { Image } from "astro:assets";
---
<div class="fl-sidebar">
<div class="fl-sidebar-top">
{
ShowHeader ? (
<div class="fl-sidebar-header">
<Image
src={LogoPath}
alt="Logo"
inferSize={true}
format="webp"
/>
<div>
<slot name="header-items" />
</div>
</div>
) : null
}
<div class="fl-sidebar-items">
<slot name="top-items" />
</div>
</div>
<div class="fl-sidebar-bottom">
<div class="fl-sidebar-items">
<slot name="bottom-items" />
</div>
<div class="fl-sidebar-footer">
{ShowVersion ? <p id="fl-your-version">v2025.05.16</p> : null}
{
FooterLinks ? (
<div>
<slot name="footer-items" />
</div>
) : null
}
</div>
</div>
</div>
<style lang="scss" is:global>
.fl-sidebar {
background: #121212;
color: white;
max-width: 240px;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0px 12px;
.fl-sidebar-items {
display: grid;
gap: 6px;
h2 {
font-size: 16px;
color: gray;
font-weight: normal;
padding-left: 12px;
pointer-events: none;
}
hr {
width: calc(100% - 24px);
border: none;
background: #363636;
height: 3px;
border-radius: 1rem;
margin: 6px 0px;
}
a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 12px;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border: 1px transparent solid;
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
.fl-sidebar-top {
.fl-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 12px;
img {
width: 64px;
height: 64px;
pointer-events: none;
}
a {
color: white;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
border: 1px transparent solid;
padding: 8px;
svg {
transform: translate(0px, 6px);
}
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
}
.fl-sidebar-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 12px;
* {margin: 0px}
a {
color: white;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
border: 1px transparent solid;
padding: 8px 6px;
aspect-ratio: 1;
svg {
transform: translate(0px, 6px);
}
&:hover {
background: #3c3c3c;
border: 1px #5c5c5c solid;
}
}
}
}
</style>

7
test/astro.config.mjs
View file

@ -1,4 +1,7 @@
import { defineConfig } from 'astro/config';
import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'
// https://astro.build/config
export default defineConfig({});
export default defineConfig({
integrations: [vue()]
});

BIN
test/bun.lockb Executable file
View file

Binary file not shown.

11
test/package.json
View file

@ -10,8 +10,13 @@
"astro": "astro"
},
"dependencies": {
"astro": "^4.14.2",
"@astrojs/check": "^0.9.2",
"typescript": "^5.5.4"
"@astrojs/vue": "^4.5.0",
"@iconoir/vue": "^7.8.0",
"astro": "^4.14.2",
"astro-tooltips": "^0.6.2",
"sass-embedded": "^1.77.8",
"typescript": "^5.5.4",
"vue": "^3.4.38"
}
}
}

BIN
test/public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -1,16 +1,90 @@
---
// Components
import Dialog from '../../../src/Dialog.astro'
import Sidebar from '../../../src/Sidebar.astro'
// Icons
import {
InputSearch,
ProfileCircle,
Group,
Circle,
GitFork,
GraphUp,
Movie,
MusicDoubleNote,
Gamepad,
AppleImac2021Side,
EmojiTalkingHappy,
PlanetAlt,
Settings,
MediaVideoList
} from '@iconoir/vue'
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<Dialog
Name="dialog-id-thingie"
Title="Flurry Dialog"
Description="It's a dialog, what else did you expect?"
CloseButton="CloseExamepleDialog()"
Actions
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<slot slot="actions">
<button onclick="CloseExamepleDialog()" class="fl-secondary-btn">Secondary</button>
<a>Primary</a>
</slot>
</Dialog>
<Sidebar
ShowHeader
LogoPath="https://ark.sudovanilla.org/avatars/984c733421da0eca64a9ec4f55305f739d748f0f50e5a91890a3372c544aa119?size=200"
ShowVersion
FooterLinks
>
<slot slot="header-items">
<a href="#"><InputSearch/></a>
<a href="#"><ProfileCircle/></a>
</slot>
<slot slot="top-items">
<a href="#"><PlanetAlt/> Home</a>
<a href="#"><MediaVideoList/> Feed</a>
<h2>Categories</h2>
<a href="#"><GraphUp/> Trending</a>
<a href="#"><Movie/> Trailers</a>
<a href="#"><MusicDoubleNote/> Music</a>
<a href="#"><Gamepad/> Gaming</a>
<h2>Channel Discovery</h2>
<a href="#"><EmojiTalkingHappy/> Comedy</a>
<a href="#"><Gamepad/> Gaming</a>
<a href="#"><AppleImac2021Side/> Tech</a>
<h2>Project Demo</h2>
<a href="#" onclick="OpenExampleDialog()">Open Dialog</a>
</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>
</slot>
</Sidebar>
<style>
body {
background: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
</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'
}
</script>