src/components/konsole.vue

@@ -1,30 +1,9 @@
 <script setup lang="ts">
 import '../misc/konsole';
-import {onMounted, ref} from 'vue';
+import {onMounted} from 'vue';
 
-const animate = ref(true);
+onMounted(() => {
-
+	(<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>
 
@@ -42,6 +21,7 @@ onMounted(async () => {
 		color: #0f0;
 
 		.cli-stdout-line {
+			margin: 0;
 			padding: 0;
 			min-height: 1.25rem;
 		}
@@ -65,11 +45,42 @@ onMounted(async () => {
 			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" @click="animate = false"></div>
+	<div id="konsole"></div>
 </template>

src/misc/konsole.js

@@ -36,6 +36,7 @@ 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;
@@ -88,17 +89,16 @@ window.cli = {
 	},
 	prompt: () => `${window.cli.user}@${window.cli.hostname}:${window.cli.pwd}${window.cli.user == 'root' ? '#' : '$'}`,
 	fs: (path, set) => {
-		return window.cli.path(path).split('/').filter(p => !!p).reduce((t, p,  i, arr) => {
+		let target = window.cli.filesystem;
-			if(!t?.hasOwnProperty(p)) {
+		const parts = window.cli.path(path).split('/').filter(p => !!p);
-				if(set == undefined) return undefined;
+		parts.forEach((p, i, arr) => {
-				t[p] = {};
+			if(!target[p] && set !== undefined) {
+				if(i + 1 != arr.length) target[p] = {};
+				else target[p] = set == null ? undefined : set;
 			}
-			if(set !== undefined && i == arr.length - 1) {
+			target = target[p];
-				if(set == null) delete t[p];
+		});
-				else t[p] = set;
+		return target;
-			}
-			return t[p];
-		}, window.cli.filesystem);
 	},
 	stdErr: (text) => {
 		const p = document.createElement('p');
@@ -107,22 +107,22 @@ window.cli = {
 		p.innerText = text;
 		window.cli._output.appendChild(p);
 	},
-	stdIn:(command, silent=false) => {
+	stdIn:(command) => {
 		(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(`${window.cli.prompt()} ${command}\n${parts[0]}: command not found`);
+				window.cli.stdErr(`${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 && !silent) window.cli.stdOut(`${window.cli.prompt()} ${command}\n${out}`);
+					if(!!out) window.cli.stdOut(out);
 				} catch(err) {
 					console.error(err);
-					window.cli.stdErr(`${window.cli.prompt()} ${command}\n${err.message || `${parts[0]}: exited with a non-zero status`}`);
+					window.cli.stdErr(err.message || `${parts[0]}: exited with a non-zero status`);
 				}
 			}
 		});
@@ -133,24 +133,6 @@ 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'] = {
@@ -190,17 +172,6 @@ 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 [];
@@ -235,7 +206,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');
+			Object.keys(window.cli.exec).map(command => `${command} - ${window.cli.exec[command].help()}`).join('\n') + '\n\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, 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>
+			<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>
 
 			<div class="mt-4">
 				<h4 class="mb-3 text-muted">CSV & References</h4>