add socials command

public/static/ui/resume.css

@@ -5,13 +5,10 @@ div#resume_js_app {
     border: 1px solid #e1e1e1;
     font-family: monospace;
     box-shadow: 0 2px 4px #30303060;
-/*    padding: 10px 8px;*/
     color: #e1e1e1;
 }
-div#resume_js_app * {
-    padding: 0; margin: 0;
-}
 div#resume_js_app p.js_loading_indicator {
+    padding: 0; margin: 0;
     position: relative;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);

react/resume/src/Base.js

@@ -2,30 +2,41 @@ import React, { Component } from 'react';
 import Terminal from 'react-console-emulator';
 import Files from './emulation/files';
 import commands from './emulation/commands';
+import Colored from './helpers/color';
 
-const welcome = `
-Welcome to my resume!
-Type 'help' for list of commands.
-`;
+const welcome = <pre>
+Welcome to my resume!<br/>
+Type 
+<Colored color='#156ea4'> help </Colored>
+for a list of commands.
+</pre>;
 
 const inputStyle = { color: '#2e8b7e', fontWeight: 'bold' };
 
 export class Base extends Component {
+    constructor(props) {
+        super(props);
+        this.terminal = React.createRef();
+    }
     render() {
         return (
             <Terminal
-                commands={commands}
+                ref={this.terminal}
+                commands={commands(this.terminal)}
                 welcomeMessage={welcome}
                 promptLabel={
-                    <pre>
+                    /*<pre>
                         user@blek.codes 
                         <span style={{color: '#2968ac'}}> ~/resume </span>
                         <span style={{color: '#ff5092'}}>(
                             <span style={{color:'limegreen'}}>master</span>
                         ) </span>
                         $ 
-                        </pre>
+                    </pre>*/
+                        '$ '
                 }
+                
+                errorText={'zsh: command not found: [command]'}
 
                 style={{height:'100%'}}
 
@@ -33,6 +44,8 @@ export class Base extends Component {
                 inputTextStyle={{...inputStyle, color: '#5ba2b0', transform: 'translateY(2px)'}}
 
                 styleEchoBack={'fullInherit'}
+                noDefaults
+                noAutoScroll
             />
         )
     }

react/resume/src/emulation/commands/index.js

@@ -2,21 +2,63 @@ import Files from '../files';
 
 import Colored from '../../helpers/color';
 
-module.exports = {
-    cat: {
-        description: 'Show contents of a file',
-        fn: require('./cat')
-    },
-    ls: {
-        description: 'Show files in current directory',
-        fn: ()=>{
-            return <pre style={{color: '#2e8b7e', fontWeight: 'bold'}}>
-                {Object.keys(Files).join('   ')}
-            </pre>;
+const commands = (terminal) => {
+    const commands = {
+        cat: {
+            description: 'Show contents of a file',
+            fn: require('./cat')
+        },
+        ls: {
+            description: 'Show files in current directory',
+            fn: ()=>{
+                return <pre style={{color: '#2e8b7e', fontWeight: 'bold'}}>
+                    {Object.keys(Files).join('   ')}
+                </pre>;
+            }
+        },
+        skills: {
+            description: 'My skills data',
+            fn: require('./skills')
+        },
+
+        clear: {
+            description: 'Clear the terminal.',
+            fn: () => {
+                terminal.current.setState({stdout: []});
+            }
+        },
+
+        socials: {
+            description: 'View my social links',
+            fn: require('./social')
+        }
+    };
+
+    commands.help = {
+        fn: () => {
+            return (
+                <pre>
+                    Commands list:
+                    <table>
+                        <tbody>
+                            {
+                                Object.keys(commands).map((cmd, i) => {
+                                    if (cmd == 'help') return;
+                                    return <tr key={i}>
+                                        <td style={{color: 'violet'}}>{cmd}</td>
+                                        <td style={{padding: '0 8px'}}> : </td>
+                                        <td>{commands[cmd].description}</td>
+                                    </tr>
+                                })
+                            }
+                        </tbody>
+                    </table>
+                </pre>
+            );
         }
-    },
-    skills: {
-        description: 'My skills data',
-        fn: require('./skills')
     }
-}
+
+    return commands;
+}
+
+module.exports = commands;

react/resume/src/emulation/commands/social.js

@@ -0,0 +1,9 @@
+module.exports = () => {
+    return <p>
+        <a href='https://blek.codes'>My website</a><br/>
+        <a href='https://github.com/b1ek'>Github page</a><br/>
+        <a href='https://git.blek.codes/b1ek'>Gitea page</a><br/>
+        <a href='mailto:me@blek.codes'>Email</a><br/>
+        <a href='https://t.me/bleki42'>Telegram</a><br/>
+    </p>;
+}