automatically focus on terminal

.gitignore

@@ -3,6 +3,8 @@ yarn.lock
 package-lock.json
 dist
 
+.parcelrc
+
 *.log
 *.tmp
 

package.json

@@ -32,7 +32,7 @@
     "xterm-js-shell": "^1.1.3"
   },
   "scripts": {
-    "prestart": "rm -f parcelrc",
+    "prestart": "rm -f .parcelrc",
     "start": "parcel",
     "build": "./build.py"
   }

src/Console.js

@@ -6,6 +6,17 @@ export class Console extends React.Component {
     constructor(props) {
         super(props);
         this.terminal = React.createRef(null);
+
+        this.terminal_el = document.getElementById('resume_js_app');
+        const t_width = this.terminal_el.clientWidth - 60;
+        const t_height = this.terminal_el.clientHeight - 60;
+
+        this.state = {
+            term_box: {
+                width: Math.floor(t_width / 9),
+                height: Math.floor(t_height / 18)
+            }
+        };
     }
 
     render() {
@@ -18,8 +29,8 @@ export class Console extends React.Component {
                                 brightGreen: '#15a179'
                             },
                             convertEol: true,
-                            rows: 30,
-                            cols: 200
+                            rows: this.state.term_box.height,
+                            cols: this.state.term_box.width
                         }}
                     />
                 </div>;
@@ -31,7 +42,18 @@ export class Console extends React.Component {
 
         /** @type { Terminal } */
         const terminal = term_ref.terminal;
-
         terminal.focus();
+
+        window.onresize = (ev) => {
+            const t_width = this.terminal_el.clientWidth;
+            const t_height = this.terminal_el.clientHeight;
+            this.setState({
+                term_box: {
+                    width: Math.floor(t_width / 27),
+                    height: Math.floor(t_height / 6.7)
+                }
+            })
+        };
+
     }
 }

src/emulator/commands/echo.js

@@ -0,0 +1,36 @@
+const { Terminal } = require("xterm");
+
+/**
+ * 
+ * @param {string[]} argv 
+ * @param {Terminal} terminal 
+ */
+module.exports = (argv, terminal) => {
+    if (argv.indexOf('--help') != -1) {
+        terminal.write(
+`Usage: ${argv[0]} [-e] [MESSAGE]
+Print a line of text into terminal.
+    -e \t Enable parsing of backslash escapes`
+        );
+        return;
+    }
+
+    let args = [...argv];
+    args.shift();
+
+    // remove -e
+    if (args.indexOf('-e') != -1)
+        args.splice(args.indexOf('-e'), 1)
+
+    let text = args.join(' ');
+
+    if (argv.indexOf('-e') != -1) {
+        try {
+            text = JSON.parse(`"${text}"`);
+        } catch (err) {
+            terminal.write(`${argv[0]}: can't parse string: ${err}`);
+        }
+    }
+
+    terminal.writeln(text);
+}

src/emulator/commands/exit.js

@@ -0,0 +1,10 @@
+const { Terminal } = require("xterm");
+
+/**
+ * 
+ * @param {string[]} argv 
+ * @param {Terminal} terminal 
+ */
+module.exports = (argv, terminal) => {
+    terminal.writeln(`${argv[0]}: not supported`);
+}

src/emulator/commands/guide.js

@@ -0,0 +1,35 @@
+module.exports = (argv, terminal) => {
+    if (argv.indexOf('--help') != -1) {
+        terminal.write(
+`Usage: ${argv[0]} [-r]
+Print out the guide how to use the terminal
+    -r \t Undocumented feature
+`
+        );
+        return;
+    }
+
+    if (argv.indexOf('-r') != -1) {
+        // TODO: put some easter eggs here
+    }
+
+    terminal.write(
+`Welcome to my resume!
+This is a UNIX terminal emulator.
+Most of the basic unix commands are available (ls, cat, rm, mkdir, etc)
+
+Although you may not be a unix user so heres a quick summary what command does what:
+ls \t- List files in directory
+cat \t- Read file contents to terminal
+rm \t- Remove file contents
+mkdir \t- Create directory
+wget \t- Download file from internet (more: wget --help)
+ps \t- List processes
+l \t- alias to ls -al
+
+Also there are some custom defined commands which are somewhat more fun:
+guide \t- Show you this menu
+skills \t- My skills info
+`
+    );
+}

src/emulator/commands/index.js

@@ -4,7 +4,6 @@ let cmds = {
     'cmdls': require('./cmds'),
     'help': require('./cmds'),
     'ls': require('./ls'),
-    'skills': require('./skills'),
     'mkdir': require('./mkdir'),
     'wget': require('./wget'),
     'export_file': require('./export_file'),
@@ -13,6 +12,13 @@ let cmds = {
     'ps': require('./ps'),
     'clear': require('./clear'),
     'rm': require('./rm'),
+    'echo': require('./echo'),
+    'exit': require('./exit'),
+    'systemctl': require('./systemctl'),
+
+
+    'guide': require('./guide'),
+    'skills': require('./skills'),
 
     // alias l='ls -l'
     'l': (a,t) => {require('./ls')([...a, '-l'], t)},

src/emulator/commands/systemctl.js

@@ -0,0 +1,10 @@
+const { Terminal } = require("xterm");
+
+/**
+ * 
+ * @param {string[]} argv 
+ * @param {Terminal} terminal 
+ */
+module.exports = (argv, terminal) => {
+    terminal.writeln(`${argv[0]}: systemd is bad`);
+}

src/emulator/index.js

@@ -1,8 +1,9 @@
 module.exports = (dom) => {
     const terminal = dom.terminal;
 
-    terminal.writeln('Welcome to my online resume!')
-    terminal.writeln('Type \033[1;32mhelp\033[0m for list of commands')
+    terminal.writeln('Welcome to my online resume!');
+    terminal.writeln('Type \033[1;32mhelp\033[0m for list of commands');
+    terminal.writeln('Type \033[1;32mguide\033[0m for help');
     terminal.writeln('Use \033[1;33mAlt+C/V\033[0m to copy or paste');
     terminal.writeln('');
 

src/emulator/zsh.js

@@ -16,7 +16,7 @@ let terminal;
  */
 let dom;
 
-const prompt = '\033[1;32muser@blek.codes \033[36m~ $ \033[0m';
+const prompt = `\x1b[1;32muser@${data.ip} \x1b[36m~ $ \x1b[0m`;
 let cmd = '';
 let lastcmd = window.sessionStorage.getItem('last_cmd') || '';