Updated konsole
This commit is contained in:
@@ -1,9 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import '../misc/konsole';
|
||||
import {onMounted} from 'vue';
|
||||
import {onMounted, ref} from 'vue';
|
||||
|
||||
onMounted(() => {
|
||||
(<any>window).cli?.build('#konsole');
|
||||
const animate = ref(true);
|
||||
|
||||
function sleep(time: number) {
|
||||
return new Promise(res => setTimeout(res, time));
|
||||
}
|
||||
|
||||
async function showerThought(s=10000) {
|
||||
if(!animate.value) return;
|
||||
await (<any>window).cli.type('shower-thought');
|
||||
if(!animate.value) return;
|
||||
await sleep(s);
|
||||
if(!animate.value) return;
|
||||
await(<any>window).cli.type('clear');
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
(<any>window).cli.build('#konsole');
|
||||
while(animate) {
|
||||
if(!animate.value) break;
|
||||
await sleep(3000);
|
||||
if(!animate.value) break;
|
||||
await showerThought();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -21,7 +42,6 @@ onMounted(() => {
|
||||
color: #0f0;
|
||||
|
||||
.cli-stdout-line {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 1.25rem;
|
||||
}
|
||||
@@ -45,42 +65,11 @@ onMounted(() => {
|
||||
color: #0f0;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
|
||||
animation: blink-empty 1s infinite linear;
|
||||
background-image: linear-gradient(#0f0, #0f0);
|
||||
background-position: 1px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1px 1.1em;
|
||||
|
||||
&:focus {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-label {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
|
||||
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
|
||||
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
|
||||
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
|
||||
}
|
||||
|
||||
@keyframes blink-empty {
|
||||
0% {background-size: 1px 1.1em;}
|
||||
50% {background-size: 1px 1.1em;}
|
||||
51% {background-size: 0 1.1em;}
|
||||
100% {background-size: 0 1.1em;}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div id="konsole"></div>
|
||||
<div id="konsole" @click="animate = false"></div>
|
||||
</template>
|
||||
|
||||
@@ -36,7 +36,6 @@ window.cli = {
|
||||
window.cli._input.addEventListener('keyup', (e) => {
|
||||
if(e.key == "Enter") {
|
||||
window.cli.disable();
|
||||
window.cli.stdOut(`${window.cli.prompt()} ${window.cli._input.value}`);
|
||||
if(!!window.cli._input.value) {
|
||||
window.cli._history.push(window.cli._input.value);
|
||||
window.cli._index = window.cli._history.length;
|
||||
@@ -108,22 +107,22 @@ window.cli = {
|
||||
p.innerText = text;
|
||||
window.cli._output.appendChild(p);
|
||||
},
|
||||
stdIn:(command) => {
|
||||
stdIn:(command, silent=false) => {
|
||||
(Array.isArray(command) ? command.join(' ') : command).split(';').filter(c => !!c).forEach(c => {
|
||||
const parts = c.match(/(?:[^\s"]+|"[^"]*")+/g);
|
||||
if(!parts) return;
|
||||
|
||||
const exec = window.cli.exec[parts[0]];
|
||||
if(!exec?.run) {
|
||||
window.cli.stdErr(`${parts[0]}: command not found`);
|
||||
window.cli.stdErr(`${window.cli.prompt()} ${command}\n${parts[0]}: command not found`);
|
||||
} else {
|
||||
try {
|
||||
const args = parts.slice(1).map(a => (a[0] == '"' || a[0] == "'") ? a.slice(1, -1) : a);
|
||||
const out = exec.run(args);
|
||||
if(!!out) window.cli.stdOut(out);
|
||||
if(!!out && !silent) window.cli.stdOut(`${window.cli.prompt()} ${command}\n${out}`);
|
||||
} catch(err) {
|
||||
console.error(err);
|
||||
window.cli.stdErr(err.message || `${parts[0]}: exited with a non-zero status`);
|
||||
window.cli.stdErr(`${window.cli.prompt()} ${command}\n${err.message || `${parts[0]}: exited with a non-zero status`}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -134,6 +133,24 @@ window.cli = {
|
||||
p[html ? 'innerHTML' : 'innerText'] = text;
|
||||
window.cli._output.appendChild(p);
|
||||
},
|
||||
type: (text, speed=150) => {
|
||||
let counter = 0;
|
||||
return new Promise(res => {
|
||||
let typing = setInterval(() => {
|
||||
if(counter < text.length) {
|
||||
window.cli._input.value += text[counter];
|
||||
} else {
|
||||
clearInterval(typing);
|
||||
setTimeout(() => {
|
||||
window.cli.stdIn(text);
|
||||
window.cli._input.value = '';
|
||||
res();
|
||||
}, 750);
|
||||
}
|
||||
counter++;
|
||||
}, speed);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.cli.exec['banner'] = {
|
||||
@@ -173,6 +190,17 @@ window.cli.exec['clear'] = {
|
||||
window.cli._output.innerHTML = '';
|
||||
}
|
||||
}
|
||||
window.cli.exec['date'] = {
|
||||
autocomplete: () => {
|
||||
return [];
|
||||
},
|
||||
help: () => {
|
||||
return 'Get current date & time';
|
||||
},
|
||||
run: args => {
|
||||
return (new Date()).toLocaleString();
|
||||
}
|
||||
}
|
||||
window.cli.exec['echo'] = {
|
||||
autocomplete: () => {
|
||||
return [];
|
||||
@@ -207,7 +235,7 @@ window.cli.exec['help'] = {
|
||||
},
|
||||
run: args => {
|
||||
return `Konsole v${window.cli.version} - A prototype bash emulator written by Zakary Timson\n\n` +
|
||||
Object.keys(window.cli.exec).map(command => `${command} - ${window.cli.exec[command].help()}`).join('\n') + '\n\n';
|
||||
Object.keys(window.cli.exec).map(command => `${command} - ${window.cli.exec[command].help()}`).join('\n');
|
||||
}
|
||||
}
|
||||
window.cli.exec['hostname'] = {
|
||||
|
||||
@@ -60,7 +60,7 @@ fetch('https://git.zakscode.com/api/v1/repos/search', {
|
||||
<hr class="mb-4">
|
||||
<img alt="Childhood" src="/childhood.jpg" height="150px" width="auto" class="float-end m-3 m-md-0 ml-md-3" style="border-radius: 50%;">
|
||||
<p>Zak Timson is a software engineer with over 10 years of professional experience. Zak has had a love for computers since he was born & taught himself to code at the age of 13. Since then, he has gone to school for computer science & has worked for both small businesses and large corporations as a developer and team lead.</p>
|
||||
<p>Zak specializes in full-stack web development & server infrastructure, and primarily works on large enterprise grade "Software as a service" (SaaS) products. As a software architect & team lead he is able to work with businesses to create a road map of their needs, build enterprise grade software solutions that meet those needs & work with clients to host & deliver automatic updates at scale using continuous integration.</p>
|
||||
<p>Zak specializes in full-stack web development, DevOps & cloud/server infrastructure, and primarily works on large enterprise grade "Software as a service" (SaaS) products. As a software architect & team lead he is able to work with businesses to create a road map of their needs, build enterprise grade software solutions that meet those needs & work with clients to host & deliver automatic updates at scale using continuous integration.</p>
|
||||
|
||||
<div class="mt-4">
|
||||
<h4 class="mb-3 text-muted">CSV & References</h4>
|
||||
|
||||
Reference in New Issue
Block a user