Updated konsole

src/components/konsole.vue

@@ -1,9 +1,30 @@
 <script setup lang="ts">
 import '../misc/konsole';
-import {onMounted} from 'vue';
+import {onMounted, ref} from 'vue';
 
-onMounted(() => {
+const animate = ref(true);
-	(<any>window).cli?.build('#konsole');
+
+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>

src/misc/konsole.js

@@ -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'] = {

src/views/Home.vue

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