make some basic resume commands

react/resume/package.json

@@ -13,11 +13,14 @@
   "author": "blek",
   "license": "MIT",
   "devDependencies": {
+    "buffer": "^5.5.0",
     "parcel": "^2.8.3",
     "process": "^0.11.10"
   },
   "dependencies": {
+    "@babel/runtime": "^7.21.0",
     "react": "^18.2.0",
+    "react-console-emulator": "^5.0.2",
     "react-dom": "^18.2.0"
   }
 }

react/resume/src/Base.js

@@ -1,3 +1,21 @@
-export function Base() {
+import React, { Component } from 'react';
-    return <p></p>;
+import Terminal from 'react-console-emulator';
+import Files from './emulation/files';
+import commands from './emulation/commands';
+
+const welcome = `
+Welcome to my resume!
+Type 'help' for list of commands.
+`;
+
+export class Base extends Component {
+    render() {
+        return (
+            <Terminal
+                commands={commands}
+                welcomeMessage={welcome}
+                promptLabel={'user@blek.codes/resume~$'}
+            />
+        )
+    }
 }

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

@@ -0,0 +1,7 @@
+import Files from '../files';
+
+module.exports = (args) => {
+    if (args == undefined) args = '';
+    if (Files[args]) return Files[args];
+    return `cat: cannot open file '${args}': no such file or directory`
+}

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

@@ -0,0 +1,14 @@
+import Files from '../files';
+
+module.exports = {
+    cat: {
+        description: 'Show contents of a file',
+        fn: require('./cat')
+    },
+    ls: {
+        description: 'Show files in current directory',
+        fn: ()=>{
+            return Object.keys(Files).join('  ');
+        }
+    }
+}

react/resume/src/emulation/files.js

@@ -0,0 +1,13 @@
+const Hi = (props) => {
+    return <span style={{color:'seagreen',fontWeight:'bold'}}>{...props.children}</span>
+}
+
+module.exports = {
+    'about.txt': <>
+    Hi! This is my online resume.
+    <br/>
+    You can browse files with <Hi>ls</Hi>, and read them with <Hi>cat</Hi>.
+    </>,
+    'super_secret_password.txt':
+        <span style={{color:'orange',fontWeight:'bold'}}>uwu</span>
+}