add socials command

This commit is contained in:
b1ek 2023-03-10 01:50:22 +10:00
parent 8d841a6bff
commit 21908f395d
Signed by: blek
GPG Key ID: 14546221E3595D0C
4 changed files with 88 additions and 27 deletions

View File

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

View File

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

View File

@ -2,21 +2,63 @@ import Files from '../files';
import Colored from '../../helpers/color'; import Colored from '../../helpers/color';
module.exports = { const commands = (terminal) => {
cat: { const commands = {
description: 'Show contents of a file', cat: {
fn: require('./cat') description: 'Show contents of a file',
}, fn: require('./cat')
ls: { },
description: 'Show files in current directory', ls: {
fn: ()=>{ description: 'Show files in current directory',
return <pre style={{color: '#2e8b7e', fontWeight: 'bold'}}> fn: ()=>{
{Object.keys(Files).join(' ')} return <pre style={{color: '#2e8b7e', fontWeight: 'bold'}}>
</pre>; {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;

View File

@ -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>;
}