Add tour for playground

packages/playground/package.json

@@ -30,7 +30,9 @@
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
-    "web-ssh-keygen": "^0.1.2"
+    "web-ssh-keygen": "^0.1.2",
+    "intro.js": "^7.2.0",
+    "js-yaml": "^4.1.0"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.0",

packages/playground/public/intro/caprover.yaml

@@ -0,0 +1,50 @@
+steps:
+  - element: .caprover-config
+    title: Configuration Tab
+    intro: PLACEHOLDER
+
+  - element: .caprover-domain
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-password
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-leader
+    triggerClick: true
+    title: Leader Tab
+    intro: PLACEHOLDER
+
+  - element: .caprover-name
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-flavor
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-dedicated
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-certified
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover.select-node
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-workers
+    triggerClick: true
+    title: Workers Tab
+    intro: PLACEHOLDER
+
+  - element: .caprover.expandable-plus
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .caprover-deploy
+    title: PLACEHOLDER
+    intro: PLACEHOLDER

packages/playground/public/intro/discourse.yaml

@@ -0,0 +1,65 @@
+steps:
+  - element: .discourse-config
+    title: Configuration Tab
+    intro: PLACEHOLDER
+
+  - element: .discourse-name
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse-email
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .vm-capacity
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse-dedicated
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse-certified
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.select-node
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.custom-domain
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.select-gateway
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse-mail
+    triggerClick: true
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.smtp-admin-email
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.smtp-admin-password
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.smtp-hostname
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.smtp-port
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse.smtp-tls
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .discourse-deploy
+    title: PLACEHOLDER
+    intro: PLACEHOLDER

packages/playground/public/intro/funkwhale.yaml

@@ -0,0 +1,48 @@
+steps:
+  - element: .funkwhale-name
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale-username
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale-email
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale-admin-password
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .vm-capacity
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .select-networks
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale-dedicated
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale-certified
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale.select-node
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale.custom-domain
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale.select-gateway
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .funkwhale-deploy
+    title: PLACEHOLDER
+    intro: PLACEHOLDER

packages/playground/public/intro/fvm.yaml

@@ -0,0 +1,49 @@
+steps:
+  - element: .fvm-config
+    title: Configuration Tab
+    intro: Fill required configuration in order to be able to deploy full virtual machine on tfgrid.
+
+  - element: .fvm-name
+    title: Instance Name
+    intro: "Choose a name for your instance or leave the auto-generated name.<br /><br />Note: only lower-case letters and numbers allowed."
+
+  - element: .vm-image
+    title: Choose Virtual Machine Image
+    intro: "You can choose a supported VM image or import a custom fList.<br /><br /><a class='app-link' target='_blank' href='https://manual.grid.tf/playground/fullVm.html'>Find More</a>"
+
+  - element: .vm-capacity
+    title: Select you instance capacity
+    intro: "You can choose a preconfigured capacity settings or set your own custom capacity."
+
+  - element: .select-networks
+    title: Network Options
+    intro: "Select a network for your workload connection."
+
+  - element: .fvm-gpu
+    title: Nodes With GPU
+    intro: "Selecting a Node with GPU. When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard."
+
+  - element: .fvm-dedicated
+    title: Dedicated Nodes
+    intro: "<a class='app-link' target='_blank' href='https://manual.grid.tf/dashboard/portal/dashboard_portal_dedicated_nodes.html'>Find More</a>"
+
+  - element: .fvm-certified
+    title: Certified Nodes
+    intro: Renting capacity on certified nodes is charged 25% extra.
+
+  - element: .fvm.select-node
+    title: Select Node
+    intro: "Select a node ID to deploy on."
+
+  - element: .fvm-disks
+    triggerClick: true
+    title: Disks Tab
+    intro: "Config your VM's disks as needed."
+
+  - element: .fvm.expandable-plus
+    title: Add a disk
+    intro: "Click the + button to add a disk to your deployment. This is optional for full VM."
+
+  - element: .fvm-deloy
+    title: Deploy
+    intro: "Once you're ready, click deploy."

packages/playground/public/intro/k8s.yaml

@@ -0,0 +1,66 @@
+steps:
+  - element: .k8s-config
+    title: Configuration Tab
+    intro: PLACEHOLDER
+
+  - element: .k8s-cluster-name
+    title: Instance Name
+    intro: PLACEHOLDER
+
+  - element: .k8s-cluster-token
+    title: Cluster Token
+    intro: PLACEHOLDER
+
+  - element: .k8s-master
+    triggerClick: true
+    title: Master Tab
+    intro: PLACEHOLDER
+
+  - element: .k8s-name
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-cpu
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-memory
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-disk
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .root-fs
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .toggle-root-fs
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-dedicated
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-certified
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s.select-node
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-workers
+    triggerClick: true
+    title: Workers Tab
+    intro: PLACEHOLDER
+
+  - element: .k8s.expandable-plus
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .k8s-deploy
+    title: PLACEHOLDER
+    intro: PLACEHOLDER

packages/playground/public/intro/mattermost.yaml

@@ -0,0 +1,45 @@
+steps:
+  - element: .mm-base
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm-name
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .vm-capacity
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm-dedicated
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm-certified
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm.select-node
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm.custom-domain
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm.select-gateway
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm-smtp
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+    triggerClick: true
+
+  - element: .mm.toggle-smtp
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER
+
+  - element: .mm-deploy
+    title: PLACEHOLDER
+    intro: PLCAEHOLDER

packages/playground/public/intro/peertube.yaml

@@ -0,0 +1,40 @@
+steps:
+  - element: .peertube-name
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube-email
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube-admin-password
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .vm-capacity
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube-dedicated
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube-certified
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube.select-node
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube.custom-domain
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube.select-gateway
+    title: PLACEHOLDER
+    intro: PLACEHOLDER
+
+  - element: .peertube-deploy
+    title: PLACEHOLDER
+    intro: PLACEHOLDER