Adding Executables to Home Directory 관련

How to Create an Interactive Terminal Portfolio Website

---

In this article, you will learn how to create an interactive terminal-based portfolio and a résumé in JavaScript. We'll use the jQuery Terminal library (and a few other tools) to create a website that looks like a real terminal. This article will sho...

---

How to Create an Interactive Terminal Portfolio Website

In this article, you will learn how to create an interactive terminal-based portfolio and a résumé in JavaScript. We'll use the jQuery Terminal library (and a few other tools) to create a website that looks like a real terminal. This article will sho...

Another thing you can do to improve the portfolio is to help your visitor learn what commands they can use, by introducing executable when running ls. They will look like binaries on the Linux system.

// not every command needs to be binary
// we picked those three that works more like real programs
const files = [
  'joke',
  'credits',
  'record'
];

function print_home() {
  term.echo(dirs.map(dir => {
    return `<blue class="directory">${dir}</blue>`;
  }).join('\n'));
  term.echo(files.map(file => {
    return `<green class="command">${file}</green>`;
  }).join('\n'));
}

With this, you will be able to click the command and execute it. So your visitors will know that they can run joke command without the need to type help command. For this to work, we need one last change, adding class to the green XML tag:

$.terminal.xml_formatter.tags.green = (attrs) => {
  return `[[;#44D544;;${attrs.class}]`;
};