Update demo pages

test/src/components/Info.astro

@@ -0,0 +1,39 @@
+---
+const { Title, Description } = Astro.props;
+---
+
+<div class="info">
+    <h2>{Title}</h2>
+    <p>{Description}</p>
+    <hr />
+    <slot />
+    <hr/>
+    <center>
+        <p style="display: flex; gap: 12px;justify-content: center;">
+            <a href="https://ark.sudovanilla.org/MinPluto/Zorn#installation">Documentation</a>
+            <a href="https://npm.sudovanilla.org/-/web/detail/@minpluto/zorn">Package</a>
+            <a href="https://ark.sudovanilla.org/MinPluto/Zorn">Source Code</a>
+        </p>
+    </center>
+</div>
+
+<style lang="scss" is:global>
+    .info {
+        max-width: 470px;
+        margin: auto;
+        h2 {
+            font-size: 20px !important;
+        }
+        p {
+            font-size: 14px !important;
+        }
+        hr {
+            background: #232323;
+            height: 3px;
+            border: none;
+            border-radius: 1rem;
+            margin: auto;
+            max-width: 100px;
+        }
+    }
+</style>

test/src/components/Switcher.astro

@@ -0,0 +1,27 @@
+<div class="switcher">
+    <a href="/">General Usage</a>
+    <a href="/with-separate-audio">Separated Audio</a>
+    <a href="/live">Live Stream</a>
+    <a href="/milieu">Milieu Effect</a>
+</div>
+
+<style lang="scss">
+    .switcher {
+        background: #232323;
+        border-radius: 6px;
+        text-align: center;
+        margin: auto;
+        max-width: max-content;
+        padding: 4px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        a {
+            color: white;
+            text-decoration: none;
+            border-radius: 6px;
+            padding: 6px 12px;
+            font-size: 14px;
+        }
+    }
+</style>

test/src/pages/index.astro

@@ -1,12 +1,16 @@
 ---
 // Components
+import {Zorn} from '@minpluto/zorn'
+import Info from '@components/Info.astro'
+import Switcher from '@components/Switcher.astro'
+
+// Icons
 import {
 	ArrowUpRight,
 	NavArrowLeft,
 	SwitchOn,
 	NavArrowRight
 } from '@iconoir/vue'
-import {Zorn} from '@minpluto/zorn'
 ---
 <meta charset="utf-8">
 
@@ -36,14 +40,13 @@ import {Zorn} from '@minpluto/zorn'
     </div>
 </Zorn>
 
-<h2>Ennie and Yoyki: Non-Girly Games</h2>
+<Switcher/>
-<p>Created by Daniyar Yambushev</p>
+<style is:inline>a[href="/"] {background: white !important;color: black !important;}</style>
+
+<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
 	<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
 	<p>This demo pulls from: <a href="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm">https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm</a></p>
-<br/>
+</Info>
-<a href="/with-separate-audio">View with separated audio</a>
-<a href="/live">Live Stream</a>
-<a href="/milieu">Milieu effect</a>
 
 <style>
 body {

test/src/pages/live.astro

@@ -1,5 +1,8 @@
 ---
+// Components
 import {Zorn} from '@minpluto/zorn'
+import Info from '@components/Info.astro'
+import Switcher from '@components/Switcher.astro'
 ---
 
 <Zorn
@@ -19,10 +22,10 @@ body {
 }
 </style>
 
-<h2>Relax Beats</h2>
+<Switcher/>
+<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>
+
+<Info Title="Relax Beats" Description="Live on Twitch">
 	<p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p>
 	<p>This demo pulls from: <a href="https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8">https://twitch-backend.sudovanilla.org/proxy/stream/relaxbeats/hls.m3u8</a></p>
-<br/>
+</Info>
-<a href="/">Generic Usage</a>
-<a href="/with-separate-audio">View with separated audio</a>
-<a href="/milieu">Milieu effect</a>

test/src/pages/milieu.astro

@@ -1,12 +1,16 @@
 ---
 // Components
+import {Zorn} from '@minpluto/zorn'
+import Info from '@components/Info.astro'
+import Switcher from '@components/Switcher.astro'
+
+// Icons
 import {
 	ArrowUpRight,
 	NavArrowLeft,
 	SwitchOn,
 	NavArrowRight
 } from '@iconoir/vue'
-import {Zorn} from '@minpluto/zorn'
 ---
 <meta charset="utf-8">
 
@@ -37,14 +41,14 @@ import {Zorn} from '@minpluto/zorn'
     </div>
 </Zorn>
 
-<h2>Ennie and Yoyki: Non-Girly Games</h2>
+
-<p>Created by Daniyar Yambushev</p>
+<Switcher/>
+<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
+
+<Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
 	<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
 	<p>This demo pulls from: <a href="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm">https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm</a></p>
-<br/>
+</Info>
-<a href="/with-separate-audio">View with separated audio</a>
-<a href="/live">Live Stream</a>
-<a href="/milieu">Milieu effect</a>
 
 <style>
 body {

test/src/pages/with-separate-audio.astro

@@ -1,6 +1,8 @@
 ---
 // Components
 import {Zorn} from '@minpluto/zorn'
+import Info from '@components/Info.astro'
+import Switcher from '@components/Switcher.astro'
 ---
 
 <Zorn
@@ -12,16 +14,14 @@ import {Zorn} from '@minpluto/zorn'
 	AudioAttributes=""
 />
 
-<h2>The Mark On The Wall</h2>
+<Switcher/>
-<p>Created by Anderson Wright</p>
+<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
+
+<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
 	<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
 	<p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
 	<p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>
-
+</Info>
-<br/>
-<a href="/">Generic Usage</a>
-<a href="/live">Live Stream</a>
-<a href="/milieu">Milieu effect</a>
 
 <style>
 body {

test/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "src/components/*"
+      ]
+    },
+    "jsx": "preserve"
+  }
 }