Personal Website With JS Terminal Emulator
LIVE DEMO: https://tjzimmerman.com
DOCKER CONTAINER: https://hub.docker.com/r/zimmertr/personal-website/
Summary
This Web Application is mostly written in Javascript. But also utilizes BASH, Perl, and Python in the backend. I made it both in an attempt to learn Javascript and to improve my personal website. In retrospective it was a poor decision to to use cgi scripts in the backend. I recognize now that a web API would have been a much better design. A future rewrite may, perhaps, include that revision.
Docker Deployment
- Use docker-compose file found here: https://github.com/zimmertr/Personal-Website-With-JS-Terminal-Emulator/blob/master/Docker/docker-compose.yaml in conjuction with the docker container found here: https://hub.docker.com/r/zimmertr/personal-website/
- Make sure you create these files so Docker doesn't auto-create them as directories.
/Weatherpy/weatherrc: https://github.com/JackWink/Weather/blob/master/README.md#configuring/Weatherpy/weather.txt: Can be a blank file as long as it is mounted RW. Will be overwritten every 3 minutes with new data starting at t+3M.
- Drop your personal files in
/Files/and they will be available atwww.domain.com/Files/
Dedicated Server Deployment
- Deploy Apache webserver; install perl, perl-cgi, snmpwalk, nslookup
- Copy cgi scripts to
/var/www/cgi-bin; copyindex.htmlandfilesdirectory to/var/www/html - Enable execution of CGI scripts.
- Install JackWink's WeatherPy: https://github.com/JackWink/Weather
- Create wunderground api token, add cron to update weather txt file periodically.
Terminal Command Information
Each command has an included manpage that can be accessed with man >command<. Some of my favorite commands are health and status. Health can be used to query my internal servers for their system & resource information and Status can be used to evaluate the up/down status of each of my servers. For example, try executing health janus. (Janus is the hostname of one of my internal servers.)
Full list of supported commands:
| Command | Short Description |
|---|---|
| about | Return information about myself |
| clear | Clear the text area |
| echo | Write arguements to STDOUT |
| health | Query a specific server for it's health |
| help | List all tjsh commands to STDOUT |
| history | Display previously executed commands |
| ifconfig | Display server network information |
| man | Display the manual page for a command |
| nslookup | Query an internet name server for info |
| ping | Send an ICMP request to a server |
| status | Show the up/down status of all servers |
| weather | Show a weather report for the servers location |
How does it work?
The application is quite simple. An event handler is spawned by shell.js that listens for STDINN. When a query is detected, the string in the input field is parsed and stored as a variable. It is then compared against a whitelist of commands. If a match is detected, one of two things will happen.
- If the command is simple enough in nature,
man for example, javascript can handle it will and proceed to do so. - If the command is complex or involves communication with my internal network, then a separate cgi script is chainloaded to complete the task.
The resulting output is then returned to the terminal as STDOUT/STDERR. After a command has finished executing, the terminal enters the cleanup phase. This is used to scroll the output box to the end of STDOUT/STDERR in the event that it takes up more lines than are available. The input field is then purged of the executed command and a new line is inserted following the output to prepare for another command.
Some other notable things:
- The application supports moderate error handling for both server-side and PEBKAC issues.
- The browser's local storage is leveraged to persist a .tjsh_history file, of sorts. for `history`.
- The vertical size of the outbox box can be adjusted by dragging the bottom right corner up and down.
