A simple, extendable terminal interface for the web, used by text-quest.
Follow the example below to include the CSS and JavaScript directly into your HTML page (download the files from GitHub):
<html>
<head>
<!-- CSS for Text Terminal -->
<link href="text-terminal.css" rel="stylesheet" />
</head>
<body>
<!-- Container for Text Terminal -->
<div id="text-terminal"></div>
<!-- JavaScript for Text Terminal -->
<script src="index.js"></script>
<script>
// Custom commands
const commands = {};
// Config for Text Terminal
const textTerminalConfig = {
containerId = "text-terminal",
prompt: "textTerm@quest",
theme: "dark",
commands: commands, // Custom commands
};
// Initialise Text Terminal
const terminal = new TextTerminal(config);
</script>
</body>
</html>Using a bundler (like Parcel).
Install Text Terminal using npm:
npm install text-terminal -Dor yarn:
yarn add text-terminal -DThen, import and initialise Text Terminal into your project:
import TextTerminal from "text-terminal/dist";
import "text-terminal/dist/text-terminal.css";
const commands = {};
const config = {
containerId: "text-terminal",
prompt: "textTerm@quest",
theme: "dark",
commands: commands,
};
const terminal = new TextTerminal(config);Text Terminal also comes with TypeScript compatibility out of the box, so you can use it in your TypeScript projects. To adapt from the above excerpt:
// Create a new TextTerminal with a config object where all properties are optional
const terminal = new TextTerminal({
containerId: "text-terminal",
prompt: "textTerm@quest",
theme: "dark",
commands: {},
});
// All methods of the TextTerminal class are recognised by your IDE with correct typing
terminal.createDom(document.getElementById("my-element")); // HTMLElement argument type
terminal.output("Hey Text Terminal!") // string argument typeText Terminal has the following themes bundled with it:
const config = {
theme: "dark",
};
const config = {
theme: "midnight",
};
const config = {
theme: "sunset",
};
const config = {
theme: "jinx",
};
The following commands can be overwritten with your own custom commands.
Clears the contents of the terminal output.
terminal.clear();Outputs the version of Text Terminal.
terminal.version();
Text Terminal v0.2.0These methods are exposed by Text Terminal for you to use:
Clears the contents of the terminal output.
terminal.clear();Add a string to the terminal output.
terminal.output("Hey Text Terminal!");
Hey Text Terminal!If you're interested in contributing use the commands below:
npm i: Install depsnpm start: Start local dev servernpm run build: Builds the js and css files to ./dist
Tested using Node.js v12.16.1.