FEAT: switch to vite vue stack

src/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <metainfo>
+    <template v-slot:title="{ content }">
+      {{ content ? `${content} | ${siteName}` : siteName }}
+    </template>
+  </metainfo>
+  <router-view />
+</template>
+
+<script setup>
+import { useMeta } from 'vue-meta'
+
+const siteName = 'Pegaz.io'
+
+useMeta({
+  title: '',
+  htmlAttrs: { lang: 'en', amp: true },
+})
+</script>
+
+<style lang="postcss">
+  html {
+    @apply bg-slate-100
+  }
+</style>

src/components/VButton.vue

@@ -0,0 +1,7 @@
+<template>
+    <button
+        class="px-4 py-2 ml-2 text-white transition duration-200 bg-blue-500 rounded  hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2"
+    >
+        <slot></slot>
+    </button>
+</template>

src/components/demo.vue

@@ -1,61 +1,57 @@
-<script is:inline>
-  import Nextcloud from '../svg/apps/nextcloud.vue'
+<script>
+  import { onBeforeUnmount } from 'vue'
+import Nextcloud from '~/components/svg/apps/nextcloud.vue'
 
   export default {
     components: { Nextcloud },
     data: () => ({
       terminalContent: '',
       subDomain: '',
+      isLaunched: false,
       stories: [
         {
-          terminal: ['pegaz up nextcloud', '[*] pre-install', 'Creating nextcloud ... done', '[*] post-install', '[√] https://cloud.domain.com'],
+          terminal: ['pegaz up nextcloud', 'Creating nextcloud ... done', '[√] 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'],
+          terminal: ['pegaz up jellyfin', 'Creating jellyfin ... done', '[√] https://jellyfin.domain.com'],
           navigator: ['show', 'jellyfin', 'click', 'jellyfin', 'goto', 'jellyfin'],
         },
         {
-          terminal: ['pegaz down nextcloud', 'Stopping test ... done', 'Removing test ... done'],
+          terminal: ['pegaz down nextcloud', 'Stopping nextcloud ... done', 'Removing nextcloud ... 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')
-          }
-        )
-      })
-    },
+      const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+      let i = 0
+      this.timer = await setInterval(() => {
+        this.terminalContent += this.stories[0].terminal[i]+'\n'
+        i += 1
+        if (i == this.stories[0].terminal.length) {
+          clearInterval(this.timer)
+          this.isLaunched = true
+        }
+      }, 1000)
+    }
   }
 </script>
 
 <template>
   <section class="flex flex-col md:flex-row items-center justify-center mb-28">
-    <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">
+    <code 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 md:min-w-max">
       <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>
       <div class="flex h-4/5">
-        <code class="text-white font-mono p-4 pt-0 mr-0 overflow-scroll">
+        <code class="w-full text-white font-mono p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
           {{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
         </code>
       </div>
-    </div>
+    </code>
     <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">
@@ -66,7 +62,7 @@
         </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" />
+        <Nextcloud class="w-20 bg-black bg-opacity-10 inline-block rounded-xl p-4 cursor-pointer scale-0 transition-transform" :class="isLaunched ? 'scale-100' : ''" />
       </div>
     </div>
   </section>

src/components/hero-buttons.vue

@@ -1,5 +1,5 @@
 <script>
-  import ClipBoard from '../svg/clipboard.vue'
+  import ClipBoard from '~/components/svg/clipboard.vue'
   export default {
     components: { ClipBoard },
     data: () => {

src/components/hero-title.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import Logo from '../svg/logo.vue'
+  import Logo from '~/components/svg/logo.vue'
 </script>
 
 <template>

src/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="astro/client" />

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/layouts/404.vue

@@ -0,0 +1,19 @@
+<template>
+    <main class="max-w-5xl p-5 mx-auto my-10 text-center">
+        <router-view />
+        <div>
+            <v-button @click="router.back()"> Go Back </v-button>
+        </div>
+    </main>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { useMeta } from 'vue-meta'
+
+useMeta({
+    title: '404 - Not found!',
+})
+
+const router = useRouter()
+</script>

src/layouts/Layout.astro

@@ -1,41 +0,0 @@
----
-export interface Props {
-	title: string;
-}
-
-const { title } = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/valerebron/pegaz/master/docs/pegaz.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-		<meta name="description" content="pegaz, deploy stack on the go with docker-compose">
-		<link rel="canonical" href="https://pegaz.io">
-		<meta property="og:title" content="pegaz, deploy stack on the go">
-		<meta property="og:image" content="https://raw.githubusercontent.com/valerebron/pegaz/master/docs/pegaz.svg">
-		<meta property="og:site_name" content="pegaz">
-		<script defer data-domain="pegaz.io" src="https://plausible.erudi.fr/js/plausible.js"></script>
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>
-<style is:global>
-	:root {
-		--accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
-	}
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
-	}
-</style>

src/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view />
+</template>

src/main.js

@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import { createMetaManager } from 'vue-meta'
+import { createRouter, createWebHistory } from 'vue-router'
+import { createPinia } from 'pinia'
+import { setupLayouts } from 'virtual:generated-layouts'
+import generatedRoutes from 'virtual:generated-pages'
+import App from './App.vue'
+import './index.css'
+
+const routes = setupLayouts(generatedRoutes)
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+})
+
+const app = createApp(App).use(router).use(createPinia()).use(createMetaManager())
+
+await router.isReady()
+app.mount('#app')

src/pages/[...all].vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="py-4 text-2xl text-center">Page Not found!</div>
+</template>
+
+<route lang="yaml">
+meta:
+    layout: 404
+</route>

src/pages/about/[name].vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <h1 class="text-2xl font-bold">About {{ usersStore.name }}</h1>
+
+        <p class="my-8">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque
+            voluptatem consequuntur molestiae cumque recusandae eos non,
+            consectetur, repellat architecto illo nobis, voluptatum dolor!
+            Reprehenderit, nam veniam quibusdam ab nulla rem.
+        </p>
+        <router-link to="/">
+            <v-button>Back to home</v-button>
+        </router-link>
+    </div>
+</template>
+
+<script setup>
+import { useMeta } from 'vue-meta'
+import { useUsersStore } from '~/stores/useUsersStore'
+
+useMeta({
+    title: 'About Page',
+})
+
+const usersStore = useUsersStore()
+</script>

src/pages/index.astro

@@ -1,28 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
-import Github from "../svg/github.vue";
-import HeroTitle from "../components/hero-title.vue";
-import HeroButtons from "../components/hero-buttons.vue";
-import Demo from "../components/demo.vue";
----
-
-<Layout title="Welcome to Pegaz.io.">
-  <div class="mx-6">
-    <header class="h-screen flex flex-col justify-center">
-      <nav class="fixed right-0 top-0 p-2">
-        <a
-          title="Go to Pegaz GitHub repo"
-          href="https://github.com/valerebron/pegaz"
-          target="_blank"
-        >
-          <Github class="bg-white rounded-full hover:scale-105" />
-        </a>
-      </nav>
-      <HeroTitle client:visible />
-      <HeroButtons client:visible />
-    </header>
-    <main class="-mt-20">
-      <Demo />
-    </main>
-  </div>
-</Layout>

src/pages/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="mx-6">
+    <header class="h-screen flex flex-col justify-center">
+      <nav class="fixed right-0 top-0 p-2">
+        <a
+          title="Go to Pegaz GitHub repo"
+          href="https://github.com/valerebron/pegaz"
+          target="_blank"
+        >
+          <Github class="bg-white rounded-full hover:scale-105" />
+        </a>
+      </nav>
+      <HeroTitle client:visible />
+      <HeroButtons client:visible />
+    </header>
+    <main class="-mt-20">
+      <Demo />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { useMeta } from 'vue-meta'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUsersStore } from '~/stores/useUsersStore'
+
+import Github from "~/components/svg/github.vue";
+import HeroTitle from "~/components/hero-title.vue";
+import HeroButtons from "~/components/hero-buttons.vue";
+import Demo from "~/components/demo.vue";
+
+useMeta({
+  title: 'Deploy stack',
+})
+
+const router = useRouter()
+
+const usersStore = useUsersStore()
+
+const newName = ref('')
+
+function saveName() {
+  if (newName.value === '') {
+    return
+  }
+
+  usersStore.saveName(newName.value)
+  router.push(`/about/${newName.value}`)
+  newName.value = ''
+}
+</script>

src/stores/useUsersStore.js

@@ -0,0 +1,24 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+export const useUsersStore = defineStore('users', {
+  state: () => {
+    return {
+      name: 'John Doe'
+    }
+  },
+
+	getters: {
+    nameUppercased: (state) => state.name.toUpperCase()
+  },
+
+	actions: {
+    saveName(name) {
+			this.name = name
+    }
+  },
+})
+
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUsersStore, import.meta.hot))
+