1
0
hugo/layouts/partials/xterm.html

250 lines
7.4 KiB
HTML
Raw Normal View History

2024-04-23 13:21:26 +00:00
<link rel="stylesheet" href="/xterm/xterm.css" />
<script src="/xterm/xterm.js"></script>
<script src="/xterm/xterm-addon-fit.js"></script>
<script>
//Utility namespace to group all functionality related to printing (both error and non error) messages
const color= "\x1b[1;35m";
const bold= "\x1b[1;37m";
const underline= "\x1b[94;4m";
const normal= "\x1b[0m";
var printOnTerm = {
getAsciiTitle: function ()
{
var title = [
color + " __ __ _ __ ____ __ " + normal,
color + " \\ \\ / /__| |_\\ \\ / / \\/ | " + normal,
color + " \\ \\/\\/ / -_) '_ \\ V /| |\\/| | " + normal,
color + " \\_/\\_/\\___|_.__/\\_/ |_| |_| " + normal,
];
return title;
},
getAsciiText: function ()
{
var text = [
" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+",
"",
" Welcome to WebVM (build 20220201). If unsure, try these examples:",
"",
" python3 examples/python3/fibonacci.py ",
" gcc -o helloworld examples/c/helloworld.c && ./helloworld",
" objdump -d ./helloworld | less -M",
" vim examples/c/helloworld.c",
"",
];
return text;
},
getSharedArrayBufferMissingMessage: function ()
{
const text = [
"",
"",
color + "CheerpX could not start" + normal,
"",
"CheerpX depends on JavaScript's SharedArrayBuffer, that your browser",
" does not support.",
"",
"SharedArrayBuffer is currently enabled by default on recent",
" versions of Chrome, Edge, Firefox and Safari.",
"",
"",
"Give it a try from another browser!",
]
return text;
},
getErrorMessage: function (error_message)
{
const text = [
"",
"",
color + "CheerpX could not start" + normal,
"",
"CheerpX internal error message is:",
error_message,
"",
"",
"CheerpX is expected to work with recent desktop versions of Chrome, Edge, Firefox and Safari",
"",
"",
"Give it a try from a desktop version / another browser!",
]
return text;
},
printMessage: function (text) {
for (var i=0; i<text.length; i++)
{
term.write(text[i]);
term.write('\n');
}
},
printError: function (message)
{
this.printMessage(message);
term.write("\n\n");
function writeCustom(something)
{
term.write(something);
}
},
};
var consoleDiv = document.getElementById("console");
//xterm.js related logic
var term = new Terminal({cursorBlink:true,convertEol:true, fontFamily:"'Roboto Mono', monospace", fontWeight: 400, fontWeightBold: 700});
var fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
term.open(consoleDiv);
term.scrollToTop();
fitAddon.fit();
window.addEventListener("resize", function(ev){fitAddon.fit();}, false);
term.focus();
var cxReadFunc = null;
function writeData(buf)
{
term.write(new Uint8Array(buf));
}
function readData(str)
{
if(cxReadFunc == null)
return;
for(var i=0;i<str.length;i++)
cxReadFunc(str.charCodeAt(i));
}
term.onData(readData);
//Actual CheerpX and bash specific logic
function runBash()
{
const structure = {
name: "bash",
cmd: "/bin/bash",
args: ["--login"],
env: ["HOME=/home/user", "TERM=xterm", "USER=user", "SHELL=/bin/bash", "EDITOR=vim", "LANG=en_US.UTF-8", "LC_ALL=C"],
expectedPrompt: ">",
versionOpt: "--version",
comment_line: "#",
description_line: "The original Bourne Again SHell",
}
if (typeof SharedArrayBuffer === "undefined")
{
printOnTerm.printError(printOnTerm.getSharedArrayBufferMissingMessage());
return;
}
async function runTest(cx)
{
term.scrollToBottom();
async function cxLogAndRun(cheerpx, cmd, args, env)
{
await cheerpx.run(cmd, args, env);
printOnTerm.printMessage(" ");
}
cxReadFunc = cx.setCustomConsole(writeData, term.cols, term.rows);
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
consoleDiv.addEventListener("dragover", preventDefaults, false);
consoleDiv.addEventListener("dragenter", preventDefaults, false);
consoleDiv.addEventListener("dragleave", preventDefaults, false);
consoleDiv.addEventListener("drop", preventDefaults, false);
var opts = {env:structure.env, cwd:"/home/user"};
while (true)
{
await cxLogAndRun(cx, structure.cmd, structure.args, opts);
}
}
function failCallback(err)
{
printOnTerm.printError(printOnTerm.getErrorMessage(err));
}
CheerpXApp.create({devices:[{type:"block",url:"https://disks.leaningtech.com/webvm_20220131.ext2",name:"block1"}],mounts:[{type:"ext2",dev:"block1",path:"/"},{type:"cheerpOS",dev:"/app",path:"/bootstrap"},{type:"devs",dev:"",path:"/dev"}]}).then(runTest, failCallback);
}
function initialMessage()
{
printOnTerm.printMessage(printOnTerm.getAsciiTitle());
printOnTerm.printMessage(["\n"]);
printOnTerm.printMessage(printOnTerm.getAsciiText());
term.registerLinkMatcher(/https:\/\/medium\.com\/p\/40a60170b361/, function(mouseEvent, matchedString) {
window.open(matchedString, "_blank")
});
const textArray = new Array(6);
const linksArray = new Array(6);
const rangesArray = new Array(6);
var last = 0;
const textLinkLine = " | GitHub | Issues | Gitter | Twitter | Latest News | About CheerpX |";
const lineWithLinks = 23;
function addLink(text, website)
{
var index = textLinkLine.indexOf(text);
const start_x = index+1;
const end_x = index + text.length;
rangesArray[last] = {start: {x:start_x, y:lineWithLinks}, end: {x:end_x, y:lineWithLinks}};
linksArray[last] = website;
last++;
}
addLink("GitHub", "https://github.com/leaningtech/webvm");
addLink("Issues", "https://github.com/leaningtech/webvm/issues");
addLink("Gitter", "https://gitter.im/leaningtech/cheerpx");
addLink("Twitter", "https://twitter.com/leaningtech");
addLink("Latest News", "https://medium.com/leaningtech");
addLink("About CheerpX", "https://leaningtech.com/cheerpx");
var provider = {
provideLinks(bufferLineNum, callback) {
switch(bufferLineNum)
{
case lineWithLinks:
{
callback([
{range: rangesArray[0], activate() {window.open('' + linksArray[0], '_blank');}},
{range: rangesArray[1], activate() {window.open('' + linksArray[1], '_blank');}},
{range: rangesArray[2], activate() {window.open('' + linksArray[2], '_blank');}},
{range: rangesArray[3], activate() {window.open('' + linksArray[3], '_blank');}},
{range: rangesArray[4], activate() {window.open('' + linksArray[4], '_blank');}},
{range: rangesArray[5], activate() {window.open('' + linksArray[5], '_blank');}},
]);
break;
}
}
}
};
term.registerLinkProvider(provider);
console.log("Welcome. We appreciate curiosity, but be warned that keeping the DevTools open causes significant performance degradation and crashes.");
}
initialMessage();
var script = document.createElement('script');
script.type = 'text/javascript';
var cxFile = "https://cheerpxdemos.leaningtech.com/publicdeploy/";
const isMobile = navigator.userAgent.toLowerCase().match(/mobile/i);
if (isMobile)
{
printOnTerm.printMessage(["Loading mobile version...\n"]);
cxFile += '20220131_500/cx.js';
}
else
{
cxFile += '20220131_700/cx.js';
}
script.src = cxFile;
script.addEventListener("load", runBash, false);
document.head.appendChild(script);
</script>