All Projects → tautvilas → Termpage

tautvilas / Termpage

Licence: mit
Termpage allows you to create neat functional webpages that behave like a terminal

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Termpage

Awesome Console Services
A curated list of awesome console services (reachable via HTTP, HTTPS and other network protocols)
Stars: ✭ 3,628 (+1519.64%)
Mutual labels:  terminal
Cowsay Files
A collection of additional/alternative cowsay files.
Stars: ✭ 216 (-3.57%)
Mutual labels:  terminal
Termfeed
A simple terminal feed reader.
Stars: ✭ 219 (-2.23%)
Mutual labels:  terminal
T Load
New Interface And Loading Screen For Termux Users
Stars: ✭ 207 (-7.59%)
Mutual labels:  terminal
Csview
📠 A high performance csv viewer with cjk/emoji support.
Stars: ✭ 208 (-7.14%)
Mutual labels:  terminal
Amp
A complete text editor for your terminal.
Stars: ✭ 2,997 (+1237.95%)
Mutual labels:  terminal
Nord Xresources
An arctic, north-bluish clean and elegant Xresources color theme.
Stars: ✭ 210 (-6.25%)
Mutual labels:  terminal
Parrot.live
🐦 Bringing animated parrots to terminals everywhere
Stars: ✭ 2,642 (+1079.46%)
Mutual labels:  terminal
Notica
Send browser notifications from your terminal. No installation. No registration.
Stars: ✭ 215 (-4.02%)
Mutual labels:  terminal
Pdd
📅 Tiny date, time diff calculator with piggybacked timers
Stars: ✭ 218 (-2.68%)
Mutual labels:  terminal
Ascii py
Make some ascii arts
Stars: ✭ 211 (-5.8%)
Mutual labels:  terminal
Bb
simple process viewer in rust https://crates.io/crates/bb
Stars: ✭ 212 (-5.36%)
Mutual labels:  terminal
Synth Shell
Boost your terminal, script by script
Stars: ✭ 217 (-3.12%)
Mutual labels:  terminal
Musikcube
a cross-platform, terminal-based music player, audio engine, metadata indexer, and server in c++
Stars: ✭ 2,663 (+1088.84%)
Mutual labels:  terminal
Normit
Translations with speech synthesis in your terminal as a node package
Stars: ✭ 219 (-2.23%)
Mutual labels:  terminal
Black Void Zsh
🔮 Awesome, Customable Zsh Starter Kit 🌠🌠
Stars: ✭ 206 (-8.04%)
Mutual labels:  terminal
Rainbow
🌈 Colorize commands output or STDIN using patterns.
Stars: ✭ 217 (-3.12%)
Mutual labels:  terminal
Go Termd
Package termd provides terminal markdown rendering, with code block syntax highlighting support.
Stars: ✭ 223 (-0.45%)
Mutual labels:  terminal
Bitcoin Chart Cli
Bitcoin chart for the terminal as command line util
Stars: ✭ 221 (-1.34%)
Mutual labels:  terminal
Kmdr Cli
🧠 The CLI tool for learning commands from your terminal
Stars: ✭ 218 (-2.68%)
Mutual labels:  terminal

Termpage 💻

Version

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/[email protected]/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>[email protected]</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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;
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].