update with nuxt4 for docker-web

app/components/demo.vue

@@ -0,0 +1,200 @@
+<script>
+export default {
+  data: () => ({
+    terminalContent: '',
+    subDomain: '',
+    nextcloudClass: [],
+    jellyfinClass: [],
+    backbuttonClass: [],
+    subdomainClass: [],
+    pointerClass: [],
+    isDemonstrationEnded: false,
+    isPageScrolled: false,
+    pointer: {
+      top: '100%',
+      left: '0%',
+      opacity: '0'
+    }
+  }),
+  created () {
+    this.nextcloudClass = this.jellyfinClass = []
+  },
+  beforeMount () {
+    window.addEventListener('scroll', () => {
+      if (!this.isPageScrolled) { this.demonstration() }
+      this.isPageScrolled = true
+    })
+  },
+  beforeUnmount () {
+    window.removeEventListener('scroll', () => {
+      if (!this.isPageScrolled) { this.demonstration() }
+      this.isPageScrolled = true
+    })
+  },
+  methods: {
+    demonstration () {
+      const upClass = [
+        'w-20',
+        'h-20',
+        'p-4',
+        'opacity-100',
+        'animate-upApp',
+        'rounded-xl',
+        'bg-black',
+        'bg-opacity-10',
+        'transition-all'
+      ]
+      const downClass = ['opacity-0', 'w-0', 'p-0', 'transition-all']
+      const openClass = [
+        'w-full',
+        'h-full',
+        'p-20',
+        'rounded-b-xl',
+        'rounded-t-none',
+        'bg-gradient-to-r',
+        'from-indigo-100',
+        'to-violet-100',
+        'transition-all'
+      ]
+      const closeClass = [
+        ...upClass,
+        'm-2'
+      ]
+
+      function delay (time) {
+        return new Promise(resolve => setTimeout(resolve, time))
+      }
+
+      this.isDemonstrationEnded = false
+      this.terminalContent = ''
+      this.nextcloudClass = this.jellyfinClass = downClass
+
+      let i = 0
+
+      this.timer = setInterval(async () => {
+        // nextcloud
+        // up
+        if (i === 0) {
+          const cmd = '$ docker-web up nextcloud\n'
+          for (const y in cmd) {
+            this.terminalContent += cmd[y]
+            await delay(20)
+          }
+        }
+        if (i === 1) this.terminalContent += 'Creating nextcloud ... done\n'
+        if (i === 2) this.terminalContent += '[√] https://nextcloud.domain.com\n'
+        if (i === 3) this.nextcloudClass = upClass
+        if (i === 4) this.pointer = {left: '47%', top: '53%', opacity: '100'}
+        // open
+        if (i === 5) this.nextcloudClass.push('animate-openApp')
+        if (i === 5) this.pointerClass = ['']
+        if (i === 5) this.pointerClass = ['animate-click']
+        if (i === 6) this.nextcloudClass = openClass
+        if (i === 6) this.subDomain = 'cloud.'
+        if (i === 6) this.subdomainClass = ['']
+        if (i === 6) this.subdomainClass = ['animate-click']
+        // close
+        if (i === 7) this.terminalContent = ''
+        if (i === 8) this.pointer = {left: '10%', top: '3%'}
+        if (i === 9) this.backbuttonClass = ['']
+        if (i === 9) this.backbuttonClass = ['animate-click']
+        if (i === 10) this.nextcloudClass = closeClass
+        if (i === 10) this.subDomain = this.backbuttonClass = ''
+        if (i === 11) this.pointer.opacity = '0'
+        if (i === 12) this.pointer.top = '50%'
+
+        // jellyfin
+        // up
+        if (i === 11) {
+          const cmd = '$ docker-web up jellyfin\n'
+          for (const y in cmd) {
+            this.terminalContent += cmd[y]
+            await delay(20)
+          }
+        }
+        if (i === 12) this.terminalContent += 'Creating jellyfin ... done\n'
+        if (i === 13) this.terminalContent += '[√] https://jellyfin.domain.com\n'
+        if (i === 14) this.jellyfinClass = closeClass
+        if (i === 16) this.pointer = {left: '47%', top: '53%', opacity: '100'}
+        // open
+        if (i === 16) this.jellyfinClass.push('animate-openApp')
+        if (i === 16) this.pointerClass = ['animate-click']
+        if (i === 16) this.nextcloudClass = downClass
+        if (i === 17) this.jellyfinClass = openClass
+        if (i === 17) this.subDomain = 'jellyfin.'
+        if (i === 17) this.subdomainClass = ['']
+        if (i === 17) this.pointer = {left: '10%', top: '3%'}
+        if (i === 17) this.subdomainClass = ['animate-click']
+        // close
+        if (i === 19) this.backbuttonClass = ['']
+        if (i === 19) this.backbuttonClass = ['animate-click']
+        if (i === 19) this.pointer = {opacity: '0'}
+        if (i === 20) this.jellyfinClass = this.nextcloudClass = closeClass
+        if (i === 20) this.subDomain = ''
+        if (i === 20) this.terminalContent = ''
+        if (i === 21) this.pointer = {top: '100%', left: '0'}
+
+        // nextcloud down
+        if (i === 23) {
+          const cmd = '$ docker-web down\n'
+          for (const y in cmd) {
+            this.terminalContent += cmd[y]
+            await delay(20)
+          }
+        }
+        if (i === 24) this.terminalContent += 'Stopping nextcloud ... done\n'
+        if (i === 25) this.terminalContent += '[√] Removing nextcloud ... done\n'
+        if (i === 26) this.nextcloudClass = downClass
+        if (i === 27) this.terminalContent += 'Stopping jellyfin ... done\n'
+        if (i === 28) this.terminalContent += '[√] Removing jellyfin ... done\n'
+        if (i === 29) this.jellyfinClass = downClass
+        if (i === 30) this.isDemonstrationEnded = true
+
+        i += 1
+        // i = 5
+
+        // if (i === 30) clearInterval(this.timer)
+        if (i === 33) this.terminalContent = ''
+        if (i === 33) this.jellyfinClass = downClass
+        if (i === 33) i = 0
+      }, 700)
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="docker-web-section">
+    <Terminal :terminal-content="terminalContent" />
+    <div
+      class="bg-slate-400 flex flex-col items-center relative rounded-2xl w-full m-0 md:min-w-fit max-w-2xl md:-ml-8 md:z-0 overflow-hidden"
+    >
+      <div class="absolute block bg-black bg-opacity-10 rounded-full h-10 w-10 transition-all duration-700 ease-out" :class="pointerClass" :style="{left: pointer.left, top: pointer.top, opacity: pointer.opacity}"></div> 
+      <div
+        class="bg-white flex items-center rounded-2xl pr-4 pl-2 py-1 m-4 w-4/5"
+      >
+        <SvgBackbutton
+          class="mr-3 p-1 bg-slate-300 rounded-full"
+          :class="backbuttonClass"
+        />
+        <span class="text-gray-400"> https:// </span>
+        <span class="text-indigo-700 font-bold" :class="subdomainClass">
+          {{ subDomain }} </span>domain.com
+      </div>
+      <div
+        class="bg-white w-full h-full flex rounded-b-xl justify-center items-center h-96 max-h-96"
+      >
+        <SvgNextcloud
+          class="app-demo"
+          :class="nextcloudClass"
+          title="nextcloud.domain.com"
+        />
+        <SvgJellyfin
+          class="app-demo"
+          :class="jellyfinClass"
+          title="jellyfin.domain.com"
+        />
+      </div>
+    </div>
+  </section>
+</template>