valere/docker-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: last astro version (need dynamic data after loading the page)

Browse Source
This commit is contained in:
prosety
2022-11-24 08:57:23 +01:00
parent 42c5c2a871
commit 2c4a48e1a6
3 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/demo.vue
View File

@@ -1,29 +1,69 @@
<script>
<script is:inline>
import Nextcloud from '../svg/apps/nextcloud.vue'
export default {
components: { Nextcloud },
data: () => ({
terminalContent: '',
subDomain: '',
stories: [
{
terminal: ['pegaz up nextcloud', '[*] pre-install', 'Creating nextcloud ... done', '[*] post-install', '[√] https://cloud.domain.com'],
navigator: ['show', 'nextcloud', 'click', 'nextcloud', 'goto', 'cloud'],
},
{
terminal: ['pegaz up jellyfin', '[*] pre-install', 'Creating jellyfin ... done', '[*] post-install', '[√] https://jellyfin.domain.com'],
navigator: ['show', 'jellyfin', 'click', 'jellyfin', 'goto', 'jellyfin'],
},
{
terminal: ['pegaz down nextcloud', 'Stopping test ... done', 'Removing test ... done'],
navigator: ['goto', 'home', 'hide', 'jellyfin'],
},
],
}),
methods: {
delay(milliseconds) {
return new Promise(resolve => {
setTimeout(resolve, milliseconds)
})
},
},
async created() {
this.stories.map(story => {
story.terminal.map(async cmd => {
this.terminalContent += 'n'
await this.delay(1000)
this.terminalContent = 'NEW'
console.log('each second')
}
)
})
},
}
</script>
<template>
<section class="flex flex-col md:flex-row items-center justify-center mb-28">
<div class="bg-slate-900 rounded-xl w-4/5 md:w-96 h-56 md:z-10 -mb-8 md:-mb-0 max-w-full">
<div class="bg-slate-900 flex-row rounded-xl w-4/5 md:w-96 h-56 md:z-10 -mb-8 md:-mb-0 max-w-full">
<div class="p-3 flex justify-between w-20">
<div class="bg-green-400 h-4 w-4 r-1 rounded-full"></div>
<div class="bg-yellow-300 h-4 w-4 r-1 rounded-full"></div>
<div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
</div>
<code class="text-white font-mono p-4 pt-0">
$: pegaz up nextcloud
<span class="w-2 h-4 bg-white inline-block animate-blink relative" />
</code>
<div class="flex h-4/5">
<code class="text-white font-mono p-4 pt-0 mr-0 overflow-scroll">
{{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
</code>
</div>
</div>
<div class="bg-slate-400 flex flex-col items-center rounded-2xl w-full md:w-2/4 md:min-w-fit h-80 md:-ml-8 md:z-0">
<div class="bg-white inline-block rounded-2xl px-4 py-1 m-4 w-4/6">
<span class="text-gray-400">
https://
</span>
domain.com
<span class="text-indigo-700 font-semibold">
{{ subDomain }}
</span>domain.com
</div>
<div class="bg-white w-full h-full flex justify-center items-center group">
<Nextcloud class="w-20 bg-black bg-opacity-10 inline-block rounded-xl p-4 cursor-pointer scale-0 group-hover:scale-100 transition-transform" />

2
src/components/hero-buttons.vue
View File

@@ -23,7 +23,7 @@
<template>
<section class="py-4 sm:flex justify-center items-center">
<a href="https://github.com/valerebron/pegaz" target="_blank"
class="py-4 px-6 h-14 leading-6 flex justify-center bg-purple-500 text-black text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-purple-400 focus:outline-none focus:text-white focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-500 text-black text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-600 focus:outline-none hover:text-white focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-100">
get started
</a>
<div class="font-mono bg-neutral-900 text-neutral-50 rounded-md flex justify-between pl-3 pr-4 py-3 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">