Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

termpage

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

termpage

Terminal Webpage Toolkit

0.1.5
latest
Source
npm

Version published: 5 years ago

Weekly downloads: 1

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

Termpage 💻

Termpage allows you to create neat webpages that behave like a terminal

Why Termpage?

I wanted to build an effective web interface for my raspberry pi home server without thinking too much about design or ux.

Example usage

You can see usage demo in the examples folder or let a cow tell your fortune

To use termpage include the lib from CDN or install it from npm.

<script src="https://cdn.jsdelivr.net/npm/termpage@0.1.3/dist/termpage.min.js" type="text/javascript">
</script>

npm install --save termpage

The easiest way to get started is to drop this code in your index.html and implement your own terminal logic inside command processing function

<!doctype html>
<html>
  <head>
    <title>termpage@home</title>
    <script src="https://cdn.jsdelivr.net/npm/termpage@0.1.3/dist/termpage.min.js" type="text/javascript"></script>
  </style>
  </head>
  <body>
    <div class="termpage-window" style="position:absolute;top:0;bottom:0;left:0;right:0" id="window"></div>
    <script>
      Termpage.init(document.getElementById('window'), (command) => {
        command = command.toLowerCase().trim();
        if (command === 'home') {
          return "Welcome to termpage";
        } else {
          return 'Command not found';
        }
      }, {
        initialCommand: 'home'
      });
    </script>
  </body>
</html>

API documentation

Termpage.init

Termpage.init(domElement, commandParser, options)

commandParser = (input) => {
  return response;
}

input is user input command string

response can be either string or object {text: responseText, commands: ['menuCommand1', 'menuCommand']}

Commands array is used to display command suggestion interface bellow command input. This interface can make life easier for people with mobile devices because they can tap on commands instead of typing them.

List of available options:

  {
    prompt: '$',
    initialCommand: 'home',
    autoFocus: true
  },

Responses can be returned as promises for async commands.

Termpage.replace, Termpage.link and Termpage.color

Termpage.replace together with Termpage.link and Termpage.color helpers can be used to format terminal output without losing monospace alignment between lines.

This code would format Cell1 as a html link and Cell2 as span with color

Termpage.replace(
`
------------------
| Cell1 | Cell2 |
------------------
`, {Cell1: Termpage.link('http://home.tautvilas.lt'), Cell2: termpage.color('red')})

Styling

These default Termpage styles can be freely customized by overriding them with your own css file

.termpage-window {
  background-color: black;
  border: 2px solid #888;
  padding-top: 5px;
}

.termpage-window * {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  color: #ddd;
}

.termpage-input {
  background-color: #222;
  color: #ddd;
  caret-color: white;
}

.termpage-block, .termpage-input {
  line-height: 20px;
}

.termpage-block {
  padding-left: 5px;
  padding-right: 5px;
}

.termpage-window a {
  background-color: #888;
  text-decoration: none;
  cursor:pointer;
}
.termpage-window a:hover {
  background-color: #333;
}

.termpage-menu {
  background-color: #888;
}

.termpage-menu li:hover {
  background-color: #666;
  cursor: pointer;
}

Keywords

FAQs

What is termpage?

Is termpage popular?

Is termpage well maintained?

Package last updated on 26 Jan 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install