From 97ee8b20f48023b7b8cae63f29ac4715383d2b48 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Mon, 4 Nov 2024 12:47:36 -0500
Subject: [PATCH] Update demo pages

---
 test/src/components/Info.astro           | 39 ++++++++++++++++++++++++
 test/src/components/Switcher.astro       | 27 ++++++++++++++++
 test/src/pages/index.astro               | 21 +++++++------
 test/src/pages/live.astro                | 17 ++++++-----
 test/src/pages/milieu.astro              | 24 +++++++++------
 test/src/pages/with-separate-audio.astro | 18 +++++------
 test/tsconfig.json                       | 10 +++++-
 7 files changed, 120 insertions(+), 36 deletions(-)
 create mode 100644 test/src/components/Info.astro
 create mode 100644 test/src/components/Switcher.astro

diff --git a/test/src/components/Info.astro b/test/src/components/Info.astro
new file mode 100644
index 0000000..42dd941
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/src/components/Switcher.astro b/test/src/components/Switcher.astro
new file mode 100644
index 0000000..b3d428e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/src/pages/index.astro b/test/src/pages/index.astro
index a54fbe8..37daca9 100644
--- a/test/src/pages/index.astro
+++ b/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>
-<p>Created by Daniyar Yambushev</p>
-<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/>
-<a href="/with-separate-audio">View with separated audio</a>
-<a href="/live">Live Stream</a>
-<a href="/milieu">Milieu effect</a>
+<Switcher/>
+<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>
+</Info>
 
 <style>
 body {
diff --git a/test/src/pages/live.astro b/test/src/pages/live.astro
index de7ff2c..c3f428b 100644
--- a/test/src/pages/live.astro
+++ b/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>
-<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/>
-<a href="/">Generic Usage</a>
-<a href="/with-separate-audio">View with separated audio</a>
-<a href="/milieu">Milieu effect</a>
\ No newline at end of file
+<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>
+</Info>
\ No newline at end of file
diff --git a/test/src/pages/milieu.astro b/test/src/pages/milieu.astro
index 2e224e9..25f7ba7 100644
--- a/test/src/pages/milieu.astro
+++ b/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">
 
@@ -16,7 +20,7 @@ import {Zorn} from '@minpluto/zorn'
 	Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
 	CustomControlsWithMenu
 	SettingsMenu
-    Milieu
+	Milieu
 >
 	<div id="settings" class="vc-menu">
 		<button>Stats for Geeks</button>
@@ -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>
-<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/>
-<a href="/with-separate-audio">View with separated audio</a>
-<a href="/live">Live Stream</a>
-<a href="/milieu">Milieu effect</a>
+
+<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>
+</Info>
 
 <style>
 body {
diff --git a/test/src/pages/with-separate-audio.astro b/test/src/pages/with-separate-audio.astro
index 1fb7c56..1d13cbb 100644
--- a/test/src/pages/with-separate-audio.astro
+++ b/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>
-<p>Created by Anderson Wright</p>
-<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>
+<Switcher/>
+<style is:inline>a[href="/with-separate-audio"] {background: white !important;color: black !important;}</style>
 
-<br/>
-<a href="/">Generic Usage</a>
-<a href="/live">Live Stream</a>
-<a href="/milieu">Milieu effect</a>
+<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>
 
 <style>
 body {
diff --git a/test/tsconfig.json b/test/tsconfig.json
index 77da9dd..3cdb810 100644
--- a/test/tsconfig.json
+++ b/test/tsconfig.json
@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": [
+        "src/components/*"
+      ]
+    },
+    "jsx": "preserve"
+  }
 }
\ No newline at end of file