Full Code of TheDen/0xfee1dead.top for AI

Repository: TheDen/0xfee1dead.top
Branch: master
Commit: 4951db6466f7
Files: 14
Total size: 15.3 KB

Directory structure:
gitextract_4zmqjexi/

├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── config/
│   ├── certbot.sh
│   └── nginx.default
├── htopgen.sh
├── index.html
├── package.json
├── process.yml
├── public/
│   ├── reload.js
│   ├── ribbon.css
│   └── stylesheet.css
└── server.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Swap
[._]*.s[a-v][a-z]
[._]*.sw[a-p]
[._]s[a-v][a-z]
[._]sw[a-p]

# Session
Session.vim

# Temporary
.netrwhist
*~
# Auto-generated tag files
tags

# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2017 Denis Khoshaba

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: Makefile
================================================
# build app

.PHONY: install
install:
	sudo npm install -g pm2
	npm install

.PHONY: stop
stop:
	pm2 delete live-htop || true
	kill $$(pgrep -f htopgen.sh) || true

.PHONY: start
start:
	./htopgen.sh &
	pm2 start process.yml

.PHONY: renew-cert-dry-run
renew-cert-dry-run:
	sudo certbot renew --dry-run

.PHONY: renew-cert
renew-cert:
	sudo certbot renew


================================================
FILE: README.md
================================================
# 0xfee1dead.top

Live `htop` output of a server

## Build

### Prerequisites

* htop
* Node
* [aha](https://github.com/theZiz/aha)
* coreutils

Running `make install` installs the npm modules and the `pm2` cli tool

## Run

```make run``` will run the node `pm2` and `htopgen.sh` to generate the `htop.html` files

## Screenshot

![In-browser screenshot](0xfee1dead.top.png)

## Thanks

* [krismsd](https://github.com/krismsd) for helping me out with `sockets.io`
* [tobiasahlin](https://github.com/tobiasahlin) for the css spinner


================================================
FILE: config/certbot.sh
================================================
#!/bin/sh

if ! grep ^ /etc/apt/sources.list /etc/apt/sources.list.d/*  | grep -q certbot; then
  sudo add-apt-repository ppa:certbot/certbot
  sudo apt-get update
  sudo apt-get install python-certbot-nginx -y
fi

echo "y" | sudo ufw enable
sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'
sudo ufw allow 'OpenSSH'

sudo certbot --nginx -d 0xfee1dead.top -d www.0xfee1dead.top


================================================
FILE: config/nginx.default
================================================
server {

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name 0xfee1dead.top www.0xfee1dead.top _;

        location / {
                proxy_pass http://localhost:8080;
                root /home/ubuntu/0xfee1dead.top/public/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

        location ~* socket.io/* {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;
                proxy_set_header X-NginX-Proxy true;

                proxy_pass http://localhost:8080;
                proxy_redirect off;

                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }

        location ^~ /.well-known/acme-challenge/ {
        alias /var/www/acme-challenge/;
        }
}


================================================
FILE: htopgen.sh
================================================
#!/bin/bash

touch public/htop.html
touch public/htop.html.aux

while true; do
  echo q | htop | aha --stylesheet --black --line-fix | sed 's/<\/style>/body {overflow-x: hidden; font-size: 2vh;}<\/style>/g' > ./public/htop.html.aux && mv -f ./public/htop.html.aux ./public/htop.html
  sleep 2
done


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>/usr/bin/htop</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
    <link rel='stylesheet' href='ribbon.css' meta http-equiv="Content-Type" content="application/xml+xhtml; charset=UTF-8" />
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
			socket.on('fileUpdate', (msg) => {
				document.getElementById("feed").innerHTML = msg;
      });
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-76175181-5"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-76175181-5');
    </script>
  </head>
  <body>
    <a class='github-fork-ribbon' href='https://github.com/theden/0xfee1dead.top' target='_blank' title='Fork me on GitHub'>Fork me on GitHub</a>
    <div id="feed">
			<div style="text-align:center; font-family: monospace; font-size: 2vh;">[live htop]<div class="spinner">
					<div class="double-bounce1"></div>
					<div class="double-bounce2"></div>
				</div> 
				<div>
					<a style="position: fixed; bottom: 0; right: 0; left: 0; width: 100%;font-family: monospace; font-size: 2vh; color: white; text-decoration: none;" href="http://theden.sh" target="_blank">✌ theden.sh</a>
				</div>
				<a style="position: fixed; bottom: 0; right: 0; left: 0; width: 100%;font-family: monospace; font-size: 2vh; color: white; text-decoration: none;" href="http://theden.sh" target="_blank">✌ theden.sh</a>
	</body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "0xfee1dead.top",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Denis Khoshaba",
  "dependencies": {
    "express": "^4.15.3",
    "fs": "0.0.1-security",
    "http": "0.0.0",
    "path": "^0.12.7",
    "pm2": "^2.6.1",
    "socket.io": "^2.0.3",
    "watch": "^1.0.2"
  },
  "license": "GPL-2.0"
}


================================================
FILE: process.yml
================================================
apps:
  - script: "server.js"
    name: "live-htop"
    instances: 0  # "0" means as much instances as you have CPU cores
    exec_mode: cluster
    watch: false # if true, it will restart your app everytime a file change is detected on the folder or subfolder of your app.
    combine_logs: true


================================================
FILE: public/reload.js
================================================
(function refresh () {
  var verboseLogging = false
  var socketUrl = window.location.origin
  if (!window.location.origin.match(/:[0-9]+/)) {
    socketUrl = window.location.origin + ':80'
  }
  socketUrl = socketUrl.replace(/(^http(s?):\/\/)(.*:)(.*)/,'ws$2://$39856') // This is dynamically populated by the reload.js file before it is sent to the browser
  var socket

  if (verboseLogging) {
    console.log('Reload Script Loaded')
  }

  if (!('WebSocket' in window)) {
    throw new Error('Reload only works with browsers that support WebSockets')
  }

  // Explanation of the flags below:

  // The first change flag is used to tell reload to wait until the socket closes at least once before we allow the page to open on a socket open event. Otherwise reload will go into a inifite loop, as the page will have a socket on open event once it loads for the first time
  var firstChangeFlag = false

  // The navigatedAwayFromPageFlag is set to true in the event handler onbeforeunload because we want to short-circuit reload to prevent it from causing the page to reload before the navigation occurs.
  var navigatedAwayFromPageFlag

    // Wait until the page loads for the first time and then call the webSocketWaiter function so that we can connect the socket for the first time
  window.addEventListener('load', function () {
    if (verboseLogging === true) {
      console.log('Page Loaded - Calling webSocketWaiter')
    }
    websocketWaiter()
  })

  // If the user navigates away from the page, we want to short-circuit reload to prevent it from causing the page to reload before the navigation occurs.
  window.addEventListener('beforeunload', function () {
    if (verboseLogging === true) {
      console.log('Navigated away from the current URL')
    }

    navigatedAwayFromPageFlag = true
  })

  // Check to see if the server sent us reload (meaning a manually reload event was fired) and then reloads the page
  var socketOnMessage = function (msg) {
    if (msg.data === 'reload') {
      socket.close()
    }
  }

  var socketOnOpen = function (msg) {
    if (verboseLogging) {
      console.log('Socket Opened')
    }

    // We only allow the reload on two conditions, one when the socket closed (firstChange === true) and two if we didn't navigate to a new page (navigatedAwayFromPageFlag === false)
    if (firstChangeFlag === true && navigatedAwayFromPageFlag !== true) {
      if (verboseLogging) {
        console.log('Reloaded')
      }

      // Reset the firstChangeFlag to false so that when the socket on open events are being fired it won't keep reloading the page
      firstChangeFlag = false

      // Now that everything is set up properly we reload the page
      window.location.reload()
    }
  }

  // Socket on close event that sets flags and calls the webSocketWaiter function
  var socketOnClose = function (msg) {
    if (verboseLogging) {
      console.log('Socket Closed - Calling webSocketWaiter')
    }

    // We encountered a change so we set firstChangeFlag to true so that as soon as the server comes back up and the socket opens we can allow the reload
    firstChangeFlag = true

    // Call the webSocketWaiter function so that we can open a new socket and set the event handlers
    websocketWaiter()
  }

  var socketOnError = function (msg) {
    if (verboseLogging) {
      console.log(msg)
    }
  }

  // Function that opens a new socket and sets the event handlers for the socket
  function websocketWaiter () {
    if (verboseLogging) {
      console.log('Waiting for socket')
    }
    setTimeout(function () {
      socket = new WebSocket(socketUrl) // eslint-disable-line

      socket.onopen = socketOnOpen
      socket.onclose = socketOnClose
      socket.onmessage = socketOnMessage
      socket.onerror = socketOnError
    }, 250)
  }
})()



================================================
FILE: public/ribbon.css
================================================
/*!
 * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
 * https://github.com/simonwhitaker/github-fork-ribbon-css
*/.github-fork-ribbon{width:12.1em;height:12.1em;position:fixed
;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:2vh;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:before,.github-fork-ribbon:after{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);-moz-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(title);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,0.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,0.7)}.github-fork-ribbon.left-top,.github-fork-ribbon.left-bottom{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}


================================================
FILE: public/stylesheet.css
================================================
body         {color: white; background-color: black; overflow-x: hidden;}
.reset       {color: white;}
.bg-reset    {background-color: black;}
.inverted    {color: black;}
.bg-inverted {background-color: white;}
.dimgray     {color: dimgray;}
.red         {color: red;}
.green       {color: lime;}
.yellow      {color: yellow;}
.blue        {color: #3333FF;}
.purple      {color: fuchsia;}
.cyan        {color: aqua;}
.white       {color: white;}
.bg-black    {background-color: black;}
.bg-red      {background-color: red;}
.bg-green    {background-color: lime;}
.bg-yellow   {background-color: yellow;}
.bg-blue     {background-color: #3333FF;}
.bg-purple   {background-color: fuchsia;}
.bg-cyan     {background-color: aqua;}
.bg-white    {background-color: white;}
.underline   {text-decoration: underline;}
.bold        {font-weight: bold;}
.blink       {text-decoration: blink;}

.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


================================================
FILE: server.js
================================================
var express = require('express');
var path = require('path');
var fs = require('fs');
var app = express()
var http = require('http').Server(app);
var io = require('socket.io')(http);
var watch = require('watch');

app.use(express.static('public'))
var publicDir = path.join(__dirname, 'public')


app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

var sockets = [];
io.on('connection', function(socket){
  sockets.push(socket);

  socket.on('disconnection', () => {
    let index = sockets.indexOf(socket);
    socket.splice(index, 1);
  })
});

var port = 8080
http.listen(port, function(){
  console.log('listening on ' + port);
});

watch.watchTree(__dirname + '/public', function (f, curr, prev) {
  if (typeof f === 'string' && f.endsWith('htop.html')) {
    fs.readFile(__dirname + '/public/htop.html', 'utf8', (err, data) => {
      if (err) {
        console.log(err);
        return;
      }
      sockets.forEach(s => {
          s.emit('fileUpdate', data);
      })
    });
  }
});