Sharing Link to Terminal Session 관련

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 cool thing that I will show you is recording commands in the URL. You can create whole terminal session and save it in a URL hash. To start recoding a session you need to execute the following:

term.history_state(true);

When you execute the command echo x, it should create a URL hash that looks like this: #[[0,1,"echo%20x"]].

To stop recording, you can use:

term.history_state(false);

You can write this into a command record start | stop, so it will be easier to record sessions.

The last thing to do to restore the session is to use the option execHash: true.

const term = $('body').terminal(commands, {
  /* rest of the options */
  execHash: true
});

When you do this and refresh the page, while having the URL hash with the session, it should replay the session and you should see same output as you did when you recorded it.

If you want the exec to be animated you can use this option:

const term = $('body').terminal(commands, {
  /* rest of the options */
  execHash: true,
  execAnimation: true
});

To share the link, it’s better to use a URL shortener like TinyURL. Make sure you test the shortened URL to see if it works.