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;
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%);

View File

@ -2,37 +2,50 @@ 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%'}}
promptLabelStyle={inputStyle}
inputTextStyle={{...inputStyle, color: '#5ba2b0', transform: 'translateY(2px)'}}
styleEchoBack={'fullInherit'}
noDefaults
noAutoScroll
/>
)
}

View File

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

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