How to Improve Completion 관련

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

Our completion is not perfect as it only completes the commands. If you'd like to have completion that also handles directories, you need to use a function:

const term = $('body').terminal(commands, {
  greetings: false,
  checkArity: false,
  completion(string) {
    // in every function we can use `this` to reference term object
    const cmd = this.get_command();
    // we process the command to extract the command name
    // and the rest of the command (the arguments as one string)
    const { name, rest } = $.terminal.parse_command(cmd);
    if (['cd', 'ls'].includes(name)) {
      if (rest.startsWith('~/')) {
        return dirs.map(dir => `~/${dir}`);
      }
      if (rest.startsWith('../') && cwd != root) {
        return dirs.map(dir => `../${dir}`);
      }
      if (cwd === root) {
        return dirs;
      }
    }
    return Object.keys(commands);
  },
  prompt
});

Note

The string argument was left as documentation. It can be used if you only want to complete a single word.