Update demo pages
This commit is contained in:
Korbs
parent
5193a5e4d3
commit
97ee8b20f4
7 changed files with 120 additions and 36 deletions
39
test/src/components/Info.astro
Normal file
39
test/src/components/Info.astro
Normal file
|
|
@ -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>
|
||||||
27
test/src/components/Switcher.astro
Normal file
27
test/src/components/Switcher.astro
Normal file
|
|
@ -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>
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
---
|
---
|
||||||
// Components
|
// Components
|
||||||
|
import {Zorn} from '@minpluto/zorn'
|
||||||
|
import Info from '@components/Info.astro'
|
||||||
|
import Switcher from '@components/Switcher.astro'
|
||||||
|
|
||||||
|
// Icons
|
||||||
import {
|
import {
|
||||||
ArrowUpRight,
|
ArrowUpRight,
|
||||||
NavArrowLeft,
|
NavArrowLeft,
|
||||||
SwitchOn,
|
SwitchOn,
|
||||||
NavArrowRight
|
NavArrowRight
|
||||||
} from '@iconoir/vue'
|
} from '@iconoir/vue'
|
||||||
import {Zorn} from '@minpluto/zorn'
|
|
||||||
---
|
---
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
|
@ -36,14 +40,13 @@ import {Zorn} from '@minpluto/zorn'
|
||||||
</div>
|
</div>
|
||||||
</Zorn>
|
</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>
|
||||||
<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 Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
|
||||||
<br/>
|
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
|
||||||
<a href="/with-separate-audio">View with separated audio</a>
|
<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>
|
||||||
<a href="/live">Live Stream</a>
|
</Info>
|
||||||
<a href="/milieu">Milieu effect</a>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
---
|
---
|
||||||
|
// Components
|
||||||
import {Zorn} from '@minpluto/zorn'
|
import {Zorn} from '@minpluto/zorn'
|
||||||
|
import Info from '@components/Info.astro'
|
||||||
|
import Switcher from '@components/Switcher.astro'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Zorn
|
<Zorn
|
||||||
|
|
@ -19,10 +22,10 @@ body {
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<h2>Relax Beats</h2>
|
<Switcher/>
|
||||||
<p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p>
|
<style is:inline>a[href="/live"] {background: white !important;color: black !important;}</style>
|
||||||
<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 Title="Relax Beats" Description="Live on Twitch">
|
||||||
<a href="/">Generic Usage</a>
|
<p>Source: <a href="https://www.twitch.tv/relaxbeats">https://www.twitch.tv/relaxbeats</a></p>
|
||||||
<a href="/with-separate-audio">View with separated audio</a>
|
<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>
|
||||||
<a href="/milieu">Milieu effect</a>
|
</Info>
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
---
|
---
|
||||||
// Components
|
// Components
|
||||||
|
import {Zorn} from '@minpluto/zorn'
|
||||||
|
import Info from '@components/Info.astro'
|
||||||
|
import Switcher from '@components/Switcher.astro'
|
||||||
|
|
||||||
|
// Icons
|
||||||
import {
|
import {
|
||||||
ArrowUpRight,
|
ArrowUpRight,
|
||||||
NavArrowLeft,
|
NavArrowLeft,
|
||||||
SwitchOn,
|
SwitchOn,
|
||||||
NavArrowRight
|
NavArrowRight
|
||||||
} from '@iconoir/vue'
|
} from '@iconoir/vue'
|
||||||
import {Zorn} from '@minpluto/zorn'
|
|
||||||
---
|
---
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
|
@ -37,14 +41,14 @@ import {Zorn} from '@minpluto/zorn'
|
||||||
</div>
|
</div>
|
||||||
</Zorn>
|
</Zorn>
|
||||||
|
|
||||||
<h2>Ennie and Yoyki: Non-Girly Games</h2>
|
|
||||||
<p>Created by Daniyar Yambushev</p>
|
<Switcher/>
|
||||||
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
|
<style is:inline>a[href="/milieu"] {background: white !important;color: black !important;}</style>
|
||||||
<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 Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
|
||||||
<a href="/with-separate-audio">View with separated audio</a>
|
<p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">https://www.youtube.com/watch?v=MuyJtxzyU3o</a></p>
|
||||||
<a href="/live">Live Stream</a>
|
<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>
|
||||||
<a href="/milieu">Milieu effect</a>
|
</Info>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
---
|
---
|
||||||
// Components
|
// Components
|
||||||
import {Zorn} from '@minpluto/zorn'
|
import {Zorn} from '@minpluto/zorn'
|
||||||
|
import Info from '@components/Info.astro'
|
||||||
|
import Switcher from '@components/Switcher.astro'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Zorn
|
<Zorn
|
||||||
|
|
@ -12,16 +14,14 @@ import {Zorn} from '@minpluto/zorn'
|
||||||
AudioAttributes=""
|
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>
|
||||||
<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>
|
|
||||||
|
|
||||||
<br/>
|
<Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
|
||||||
<a href="/">Generic Usage</a>
|
<p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
|
||||||
<a href="/live">Live Stream</a>
|
<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>
|
||||||
<a href="/milieu">Milieu effect</a>
|
<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>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,11 @@
|
||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict"
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@components/*": [
|
||||||
|
"src/components/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"jsx": "preserve"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue