Text Terminal
A simple, extendable terminal interface for the web, used by text-quest.
Usage
Option 1 Use the CSS and JavaScript in your HTML
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>Option 2 Use a bundler
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 typeThemes
Text Terminal has the following themes bundled with it:
Dark (default)
const config = {
theme: "dark",
};
Midnight
const config = {
theme: "midnight",
};
Sunset
const config = {
theme: "sunset",
};
Jinx
const config = {
theme: "jinx",
};
Default Commands
The following commands can be overwritten with your own custom commands.
clear
Clears the contents of the terminal output.
terminal.clear();Version
Outputs the version of Text Terminal.
terminal.version();
Text Terminal v0.2.0Methods
These methods are exposed by Text Terminal for you to use:
clear()
Clears the contents of the terminal output.
terminal.clear();output()
Add a string to the terminal output.
terminal.output("Hey Text Terminal!");
Hey Text Terminal!Development Commands
If you're interested in contributing use the commands below:
-
npm i: Install deps -
npm start: Start local dev server -
npm run build: Builds the js and css files to ./dist
Tested using Node.js v12.16.1.