rewrite resume with xtermjs

This commit is contained in:
b1ek 2023-03-13 01:09:19 +10:00
parent 1a5f35bc42
commit c73c3c5284
Signed by: blek
GPG Key ID: 14546221E3595D0C
21 changed files with 134 additions and 449 deletions

View File

@ -1,12 +0,0 @@
#!/bin/sh
rm -rf dist/*
yarn run build $*
for f in ../../public/static/dist/*; do
if [ "$f" != ".gitignore" ]
then
rm -rf "$f"
fi
done
cp -r dist ../../public/static

View File

@ -1,27 +1,22 @@
{ {
"name": "resume", "name": "resume",
"version": "1.0.0", "version": "1.0.0",
"description": "", "main": "src/resume.js",
"source": "src/index.html", "source": "src/index.html",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel",
"build": "parcel build src/resume.js --no-source-maps"
},
"author": "blek", "author": "blek",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@parcel/reporter-bundle-analyzer": "^2.8.3",
"buffer": "^5.5.0",
"parcel": "^2.8.3", "parcel": "^2.8.3",
"process": "^0.11.10", "parcel-namer-without-hash": "^0.0.1",
"parcel-namer-without-hash": "^0.0.1" "process": "^0.11.10"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.21.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-console-emulator": "^5.0.2", "react-dom": "^18.2.0",
"react-dom": "^18.2.0" "xterm-for-react": "^1.0.4",
"xterm-js-shell": "^1.1.3"
},
"scripts": {
"start": "parcel"
} }
} }

View File

@ -1,73 +0,0 @@
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';
import './font/sourcecode.css';
const welcome = <pre>
Welcome to my resume!<br/>
Type
<Colored color='#156ea4'> help </Colored>
for a list of commands.
</pre>;
const inputStyle = { color: '#4d6663', fontWeight: 'bold', minWidth: 'fit-content' };
export class Base extends Component {
constructor(props) {
super(props);
this.terminal = React.createRef();
}
render() {
return (
<Terminal
ref={this.terminal}
commands={commands(this.terminal)}
welcomeMessage={welcome}
promptLabel={
/*
<table className='prompt_table'>
<tbody>
<tr>
<td style={inputStyle}>user@blek.codes</td>
<td className='prompt_spacing'></td>
<td style={{color: '#2968ac'}}> ~/resume </td>
<td className='prompt_spacing'></td>
<td style={{color: '#ff5092'}}>(</td>
<td className='prompt_spacing'></td>
<td style={{color:'limegreen'}}>master</td>
<td className='prompt_spacing'></td>
<td style={{color: '#ff5092'}}>)</td>
<td className='prompt_spacing'></td>
<td>$</td>
</tr>
</tbody>
</table>
*/
data.ip ?
(data.ip + '@blek.codes ~/resume $ ') :
'$ '
}
errorText={'zsh: command not found: [command]'}
className='console'
promptLabelStyle={inputStyle}
inputTextStyle={{...inputStyle, transform: 'translate(2px, 2px)'}}
styleEchoBack={'fullInherit'}
noDefaults
/>
)
}
componentDidMount() {
this.terminal.current.focusTerminal();
}
}

View File

@ -0,0 +1,28 @@
import React from 'react';
import { XTerm } from 'xterm-for-react'
export class Console extends React.Component {
constructor(props) {
super(props);
this.terminal = React.createRef(null);
}
render() {
return <div style={{padding: '8px'}}>
<XTerm
ref={this.terminal}
options={{
theme: {
background: '#212121',
brightGreen: '#15a179'
}
}}
/>
</div>;
}
componentDidMount() {
require('./emulator')(this.terminal.current.terminal);
this.terminal.current.terminal.focus();
}
}

View File

@ -1,34 +0,0 @@
td {
padding-right: 16px !important
}
.console {
font-family: 'Source Code Pro', monospace;
max-width: 800px;
word-wrap: break-word;
}
.prompt_table tbody tr *, .prompt_table {
padding-right: 0px !important;
}
.prompt_table {
display: inline;
}
.prompt_spacing {
padding-right: 10px !important;
}
a, a:visited {
color: rgb(36, 85, 126) !important;
text-decoration: none;
font-weight: 500;
transition: 150ms ease;
}
a:hover {
text-shadow: 0 0 4px #24557e30;
}
th {
text-align: left;
padding-right: 16px !important;
}

View File

@ -1,7 +0,0 @@
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`
}

View File

@ -1,77 +0,0 @@
import Files from '../files';
import Colored from '../../helpers/color';
const commands = (terminal) => {
const commands = {
cat: {
description: 'Show contents of a file',
fn: require('./cat')
},
ls: {
description: 'Show files in current directory',
fn: () => {
return '\'ls\' is not recognized as an internal or external command, operable program or batch file.';
},
unlisted: true
},
dir: {
description: 'Show files in current directory',
fn: () => {
return <pre style={{color: '#2e8b7e', fontWeight: 'bold', margin: '0'}}>
{Object.keys(Files).join(' ')}
</pre>;
}
},
skills: {
description: 'My skills data',
fn: require('./skills')
},
clear: {
description: 'Clear the terminal.',
fn: () => {
terminal.current.clearStdout();
}
},
socials: {
description: 'View my social links',
fn: require('./social')
},
social: {
description: 'View my sociala links',
fn: require('./social'),
unlisted: true,
}
};
commands.help = {
unlisted: true,
fn: () => {
return (
<pre>
Commands list:
<table>
<tbody>
{
Object.keys(commands).map((cmd, i) => {
if (commands[cmd].unlisted) return;
return <tr key={i}>
<td style={{color: 'aquamarine'}}>{cmd}</td>
<td style={{padding: '0 8px'}}> : </td>
<td style={{color: 'white'}}>{commands[cmd].description}</td>
</tr>
})
}
</tbody>
</table>
</pre>
);
}
}
return commands;
}
module.exports = commands;

View File

@ -1,128 +0,0 @@
import Colored from '../../helpers/color';
const Title = (p) => {return <h3 style={{margin: '16px 0', color: '#526b93'}}>{...p.children}</h3>}
const projects = {
web: [
{
name: 'blek! Site',
source: 'https://github.com/b1ek/blekSite',
desc: 'Second rewrite of my website in Laravel'
},
{
name: 'homepage.js',
source: 'https://git.blek.codes/blek/homepage.js',
desc: 'Third re write of my website in Node/Express.JS/Pug and couple other libs'
},
{
name: 'blek! Sail',
source: 'https://github.com/b1ek/sail',
desc: 'A production-ready server for serving Laravel projects'
},
{
name: 'blek! ID',
source: 'https://github.com/b1ek/blekID',
desc: 'An auth server. Not really proud of this one, as the code is very spaghetti and practically useless.'
},
{
name: 'blek! Bin',
source: 'https://git.blek.codes/blek/bin',
desc: 'Privacy-respecting, js-free alternative to Pastebin. Inspired by Librebin.'
},
{
name: 'College project',
source: '#',
desc: 'Work in progress. Planned to be a site with rental apartments for students'
}
]
}
const skills = {
web: (
<pre>
<Title>My web experience</Title>
<p>
Most of my web projects are listed on <a href='https://github.com/b1ek'>GitHub</a>.<br/>
I like Express.JS and Laravel, but also want to try Rust.<br/>
<br/>
On frontend, i like to write no-js HTML using<br/>
template engines, or use React for complex apps like this one.
</p>
<hr style={{margin:'10px 0'}}/>
<p>
My projects:
</p>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Sources</th>
<th>Description</th>
</tr>
{
Object.keys(projects.web).map((key, i) => {
const proj = projects.web[key];
return (
<tr key={i}>
<td>{proj.name}</td>
<td>
<a href={proj.source}>Link</a>
</td>
<td>{proj.desc}</td>
</tr>
)
})
}
</tbody>
</table>
</pre>
),
nt: (
<pre>
<Title>My native dev experience</Title>
<p>
It isn't much.<br/>
I have only one project that is made with
Qt/C++: <a href='https://github.com/b1ek/CuteSchedule'>CuteSchedule</a> (Cute
stands fot Qt).<br/>
<br/>
But I do have a lot of experience with C and C++, as I like to write<br/>
a lot of programs in those languages in my free time.<br/>
An example of these programs: <a href='https://github.com/b1ek/f2bin'>f2bin</a>
, <a href='https://github.com/b1ek/BrainHeck'>BrainHeck</a>.
</p>
</pre>
)
}
module.exports = (args) => {
if (skills[args]) return skills[args];
return (<pre>
<Colored color='#00ffe7'>Web dev (PHP & JS)</Colored>
<br/>
[#####] 100%<br/>
My main work field<br/>
More: <Colored color='seagreen' weight='normal'>skills web</Colored><br/>
<br/>
<Colored color='#cc6a6a'>C/C++/Rust native dev</Colored><br/>
[## ] 40%<br/>
I do this... sometimes<br/>
More: <Colored color='seagreen' weight='normal'>skills nt</Colored><br/>
<br/>
<Colored color='#7dadd7'>Linux skills</Colored><br/>
[#####] 100%<br/>
Do this all the time. I run linux on my laptop, pc and server<br/>
<br/>
<Colored color='#2e8b7e'>Being cis</Colored><br/>
[ ] 0%<br/>
Never liked it<br/>
<br/>
</pre>)
}

View File

@ -1,17 +0,0 @@
import Color from '../../helpers/color';
const Link = (prop) => {
return <a href={prop.href} style={{color:'lightblue',textDecoration:'none',fontWeight:'bold'}}>{...prop.children}</a>
}
module.exports = () => {
return <p>
My socials are listed below:<br/>
<br/>
{'>'} <Link href='https://blek.codes'>My website</Link><br/>
{'>'} <Link href='https://github.com/b1ek'>Github page</Link><br/>
{'>'} <Link href='https://git.blek.codes/b1ek'>Gitea page</Link><br/>
{'>'} <Link href='mailto:me@blek.codes'>Email</Link><br/>
{'>'} <Link href='https://t.me/bleki42'>Telegram</Link><br/>
<Color color='gray' weight='default'>(all links are clickable)</Color>
</p>;
}

View File

@ -1,43 +0,0 @@
const Hi = (props) => {
return <span style={{color:'seagreen',fontWeight:'bold'}}>{...props.children}</span>
}
const HR = () => {
return <hr style={{margin:'16px 0'}}/>;
}
module.exports = {
'README.md': <>
<h1># Hello there!</h1>
<HR />
My name is Alice and I am a fullstack web developer.<br/>
I am a trans girl and I live in Russia.<br/>
<br/>
This app was built with <Hi>React.JS</Hi> and <Hi>Parcel</Hi>.<br/>
<h2>## About me</h2>
<HR />
I am <Hi>vegan</Hi> and like to listen to hyperpop/jpop.
Though being <Hi>vegan</Hi>, I do eat fried chicken occasionally.<br/>
<br/>
I honestly believe that governments are spying on us
every time they get a chance to, which is always.
This is why I run <Hi>linux</Hi> and use little to none of proprietary
software, all my connections are proxied through an offshore server
and I don't use <Hi>The Internet</Hi> when I don't have to.<br/>
<br/>
I like <Hi>PHP+JS</Hi> and <Hi>C</Hi>. I use <Hi>PHP+JS</Hi> for work and <Hi>C</Hi> for passion projects,
as I find it too much of work and possible memory leaks and a lot of nasty
stuff. To be honestly, I don't imagine building a site or an IDE using just <Hi>C</Hi>.
Perhaps, if speed is very much important, I would look into <Hi>C++</Hi>, <Hi>Rust</Hi> or <Hi>Go</Hi>.<br/>
<br/>
Also I have some experience with stuff like <Hi>Arduino</Hi> and/or <Hi>Raspberry Pi</Hi>.
I used to have a team of other makers and we tried to build a vending machine on a bunch of Arduinos and one <s>Raspberry</s> Orange Pi.<br/>
<br/>
Read this app's source code
on <a href='https://git.blek.codes/blek/homepage.js/src/branch/master/react/resume'>Gitea </a>
or <a href='https://github.com/b1ek/homepage.js/tree/master/react/resume'>Github</a>
</>,
'super_secret_password.txt':
<h1 style={{color:'gray',fontWeight:'bold'}}>UwU</h1>,
}

View File

@ -0,0 +1,8 @@
module.exports = (terminal) => {
terminal.writeln('Welcome to my online resume!')
terminal.writeln('Type \033[1;32mhelp\033[0m for list of commands')
terminal.writeln('');
require('./zsh')(terminal);
}

View File

@ -0,0 +1,74 @@
import { Terminal } from 'xterm';
/**
* @type {Terminal}
*/
let terminal;
const prompt = '\033[1;32muser@blek.codes \033[36m~ $ \033[0m';
let cmd = '';
function pr_char(char) {
cmd += char;
terminal.write(char);
}
function exec_cmd() {
let c = cmd;
reset_cmd();
terminal.writeln('zsh: command not found: ' + c);
print_prompt();
}
function print_prompt() {
terminal.write(prompt);
}
function reset_cmd() {
cmd = '';
terminal.writeln('');
}
function control_char(char) {
const id = char.codePointAt(0);
switch (id) {
// backspace
case 127:
if (terminal.buffer.active.cursorX == prompt.length) break;
terminal.write('\b \b');
cmd = cmd.substring(0, cmd.length - 1);
break;
// enter
case 13:
exec_cmd();
break;
// Ctrl+c
case 3:
terminal.write('^C');
reset_cmd();
print_prompt();
break;
default:
console.log('Unknown special char: ' + id);
break;
}
}
function key(e) {
if (RegExp(/^\p{L}/,'u').test(e.key)) {
pr_char(e.key);
} else {
control_char(e.key);
}
}
module.exports = (t) => {
terminal = t;
terminal.onKey(key);
terminal.write(prompt);
}

View File

@ -1,23 +0,0 @@
@font-face {
font-family: 'Source Code Pro';
src: url(./SourceCodeRegular.ttf);
font-weight: 400;
}
@font-face {
font-family: 'Source Code Pro';
src: url(./SourceCodeMedium.ttf);
font-weight: 500;
}
@font-face {
font-family: 'Source Code Pro';
src: url(./SourceCodeSemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: 'Source Code Pro';
src: url(./SourceCodeBold.ttf);
font-weight: 700;
}

View File

@ -1,3 +0,0 @@
module.exports = (p) => {
return <span style={{color: p.color, fontWeight: (p.weight ? p.weight : 'bold')}}>{...p.children}</span>
}

View File

@ -1,12 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'/> <title>resume.js</title>
<title>Resume debug mode</title> <meta charset="utf-8" />
<script type="module" src='resume.js'></script> <link rel="stylesheet" href="rootstyle.css" />
<link rel="stylesheet" href='styles.css'/>
</head> </head>
<body> <body>
<div id='resume_js_app'></div> <div id="resume_js_app"></div>
<script src="resume.js" type="module"></script>
</body> </body>
</html> </html>

View File

@ -1,10 +1,6 @@
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { Base } from './Base'; import { Console } from "./Console";
import './Style.css';
setTimeout(() => { const container = document.getElementById("resume_js_app");
document.getElementById('resume_js_app').innerHTML = ''; const root = createRoot(container)
const container = document.getElementById("resume_js_app"); root.render(<Console />);
const root = createRoot(container)
root.render(<Base />);
}, (Math.random() * 50) + 50)