add render animation, add forwarding, add commands, css mobile view

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="top">
     <console class="console"></console>
-  </div>
 </template>
 
 <script>
@@ -16,12 +14,45 @@ export default {
 </script>
 
 <style lang="scss">
+body,html{
+  margin: 0;
+}
+*{
+  scrollbar-width: thin;
+  scrollbar-color: #444 #2220;
+}
+*::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+*::-webkit-scrollbar-track {
+  background: none;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #444;
+  border-radius: 0.25rem;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
+  position: absolute;
+  background-color: #222;
+  min-height: 100%;
+  width: 100%;
 }
 .console{
   position: absolute;
-  left: 50%;
+  width: 36rem;
-  transform: translate(-50%,0);
+  height: calc(100% - 2rem);
+  overflow-y: auto;
+  left: calc(50% - 19rem);
+  padding: 1rem;
+}
+@media (max-width: 45rem){
+  .console{
+    width: calc(100% - 2rem);
+    height: calc(100% - 2rem);
+    overflow-y: auto;
+    left: 0;
+  }
 }
 </style>

src/components/console.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="console">
-    <div @keypress.enter="execCommand()" class="group" v-for="(group, index) in history" :key="group">
+    <div @keypress.enter="renderCommand()" class="group" v-for="(group, index) in history" :key="group">
       <pre><span class="host">{{group.host}}</span><span
-          v-if="index !== history.length-1">{{group.command}}</span><input v-else v-model="group.command" type="text"></pre>
+          v-if="index !== history.length-1">{{group.command}}</span><input ref="consoleInput" v-else v-model="group.command" type="text"></pre>
       <pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
     </div>
   </div>
@@ -22,6 +22,28 @@ export default {
     execCommand(){
       commands.methods.renderCommand()
       this.$forceUpdate()
+    },
+    renderCommand(){
+      let command = commands.methods.getCommand();
+      command.output.forEach((group, i) => {
+        setTimeout(() => {
+          this.history[this.history.length-1].output.push(group);
+          if (group.forward) window.location = group.forward;
+          if (command.output.length-1 === i){
+            this.history.push({
+              host: "[cybre.town]$ ",
+              command: "",
+              output: []
+            });
+            this.$forceUpdate()
+            this.$nextTick(function(){
+              this.$refs.consoleInput.focus();
+              this.$refs.consoleInput.select();
+            })
+          }
+          window.scrollTo(0,document.body.scrollHeight);
+        }, group.delay)
+      })
     }
   }
 }

src/render-commands.js

@@ -2,22 +2,18 @@ let commands = [
   {
     name: "unknown",
     output:[
-      {
+      {color: "white", content: "\nthe command you entered is undefined!\n\n", delay: 100},
-        color: "white",
-        content: "\nthe command you entered is undefined!\n",
-        delay: 100
-      },
       {
         color: "white",
         content:
-            "try something like:\n" +
+          "try something like:\n" +
-            "\n" +
+          "\n" +
-            "    - Mastodon   > social\n" +
+          "    - Mastodon   > social\n" +
-            "    - Gitea      > git\n" +
+          "    - Gitea      > git\n" +
-            "    - Matrix     > element\n" +
+          "    - Matrix     > element\n" +
-            "    - Etherpad   > ether\n" +
+          "    - Etherpad   > ether\n" +
-            "    - short url  > surl\n" +
+          "    - short url  > surl\n" +
-            "    - Jitsi      > meet\n",
+          "    - Jitsi      > meet\n",
         delay: 200
       },
     ]
@@ -25,11 +21,7 @@ let commands = [
   {
     name: "welcome",
     output:[
-      {
+      {color: "white", content: "\nWelcome to:\n", delay: 100},
-        color: "white",
-        content: "\nWelcome to:\n",
-        delay: 100
-      },
       {
         color: "green",
         content:
@@ -42,7 +34,7 @@ let commands = [
           " \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/   \\/_/\\/_/\n" +
           "           /\\___/\n" +
           "           \\/__/                                             @adb.sh\n\n",
-        delay: 200
+        delay: 300
       },
       {
         color: "white",
@@ -55,25 +47,75 @@ let commands = [
           "    - Etherpad   > ether\n" +
           "    - short url  > surl\n" +
           "    - Jitsi      > meet\n",
-        delay: 300
+        delay: 500
       }
     ]
   },
   {
-    name: "social",
+    name: ["ls", "la", "list"],
     output:[
-      {
+      {color: "white", content: "social ", delay: 100},
-        color: "blue",
+      {color: "white", content: "git ", delay: 200},
-        content: "\nsocial",
+      {color: "white", content: "element ", delay: 300},
-        delay: 100
+      {color: "white", content: "ether ", delay: 350},
-      },
+      {color: "white", content: "surl ", delay: 400},
-      {
+      {color: "white", content: "meet", delay: 500},
-        color: "white",
+    ]
-        content: " is loading\n",
+  },
-        delay: 100
+  {
-      },
+    name: ["social", "mastodon", "Mastodon", "mstdn"],
+    output:[
+      {color: "blue", content: "\nMastodon", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: "forwarding", delay: 400},
+      {color: "white", content: " ...", forward: "https://social.cybre.town", delay: 600}
+    ]
+  },
+  {
+    name: ["git", "gitea", "Gitea"],
+    output:[
+      {color: "blue", content: "\nGitea", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: "forwarding", delay: 400},
+      {color: "white", content: " ...", forward: "https://git.adb.sh", delay: 600}
     ]
   },
+  {
+    name: ["matrix", "Matrix", "element", "Element"],
+    output:[
+      {color: "blue", content: "\nmatrix", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: "forwarding", delay: 400},
+      {color: "white", content: " ...", forward: "https://element.adb.sh", delay: 600}
+    ]
+  },
+  {
+    name: ["ether", "etherpad", "Etherpad"],
+    output:[
+      {color: "blue", content: "\nEtherpad", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: "forwarding", delay: 400},
+      {color: "white", content: " ...", forward: "https://ether.adb.sh", delay: 600}
+    ]
+  },
+  {
+    name: ["surl", "short-url", "shortURL"],
+    output:[
+      {color: "blue", content: "\ngit", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: "forwarding", delay: 400},
+      {color: "white", content: " ...", forward: "https://s.adb.sh", delay: 600}
+    ]
+  },
+  {
+    name: ["meet", "jitsi", "Jitsi"],
+    output:[
+      {color: "blue", content: "\nJitsi", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: "forwarding", delay: 400},
+      {color: "white", content: " ...", forward: "https://meet.adb.sh", delay: 600}
+    ]
+  }
 ]
 
 let history = [{
@@ -91,21 +133,19 @@ export default {
   },
   methods:{
     renderCommand(input){
-      if (input === undefined) input = history[history.length-1].command;
+      history[history.length-1].output = this.getCommand(input).output;
-      input = input.split(" ");
-      let command = commands.find((command) => command.name === input[0]);
-      if (command === undefined) command = commands[0];
-      command.output.forEach(group => {
-        /*setTimeout(() => {
-          history[history.length-1].output.push(group);
-        }, group.delay)*/
-        history[history.length-1].output.push(group);
-      })
       history.push({
         host: "[cybre.town]$ ",
         command: "",
         output: []
       })
+    },
+    getCommand(input) {
+      input = (input?input:history[history.length-1].command).split(" ")[0];
+      let command = commands.find(
+        command => Array.isArray(command.name)?command.name.find(
+          altName => altName === input):command.name === input);
+      return command?command:commands[0];
     }
   }
 }