debugger22 · erikzaadi · Sep 30, 2016 · Sep 30, 2016 · Sep 30, 2016 · Sep 30, 2016
diff --git a/README.md b/README.md
@@ -1,2 +1,64 @@
-# github-audio
+GitHub Audio
+============
+
 Listen to music generated by events happening across GitHub
+
+_Imitation is the sincerest form of flattery._ - __Oscar Wilde__
+
+But seriously, [listen-to-wikipedia](https://github.com/hatnote/listen-to-wikipedia) by [@slaporte](https://github.com/slaporte) and [@mahmoud](https://github.com/mahmoud) is the hotness.
+
+<sub><sup><sub><sup>Use [`ULTIMATE_DREAM_KILLER`](https://github.com/debugger22/github-audio/commit/ed47067f5e56ab70d65fa31f72bf2dbc513f8f56) to filter all events except closed PRs.
+
+
+Media
+-----
+
+* [The Next Web](http://thenextweb.com/apps/2016/10/03/this-site-tracks-events-across-github-to-generate-calming-work-music/)
+* [Product Hunt](https://www.producthunt.com/tech/github-audio)
+
+
+Installation on OSX
+-------------------
+
+```bash
+$ brew install nodejs
+$ brew install npm
+$ brew install redis
+```
+
+Installation on Linux
+---------------------
+
+```bash
+$ sudo apt-get update
+$ sudo apt-get install nodejs
+$ sudo apt-get install npm
+$ sudo apt-get install redis-server
+```
+
+Install node packages
+---------------------
+
+Navigate to the project directory and run
+
+```bash
+$ npm install
+```
+
+Environment variables
+---------------------
+
+```
+$ export GITHUB_OAUTH_KEY=<your_github_oauth_key>
+```
+
+Note: Without the GitHub oauth key the number of requests is throttled at 60 per hour. It can be increased to 5000 per hour by using an oauth key.
+
+Run server
+----------
+
+```bash
+$ node server
+```
+
+Note: For production run `export NODE_ENV="production"` before starting the server.
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,113 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="title" content="GitHub Audio">
+    <meta name="description" content="Listen to music generated by events happening across GitHub">
+    <meta name="keywords" content="github, github music, github events, github visualization, listen, recent changes, sound, music, visualization">
+    <meta name='summary' content='Events on GitHub, such as pushing commits, creating pull requests, creating issues, etc. are captured and converted to music notes based on the size of the data.'>
+
+    <meta name="og:title" content="GitHub Audio">
+    <meta name="og:url" content="https://github.audio">
+    <meta name="og:image" content="https://github.audio/static/public/images/electric-guitar.png">
+    <meta name="og:description" content="Listen to music generated by events happening across GitHub">
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="https://github.audio" />
+    <meta name="twitter:title" content="GitHub Audio" />
+    <meta name="twitter:description" content="Listen to music generated by events happening across GitHub" />
+    <meta name="twitter:image" content="https://github.audio/static/public/images/electric-guitar.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta http-equiv='Expires' content='0'>
+    <meta http-equiv='Pragma' content='no-cache'>
+    <meta http-equiv='Cache-Control' content='no-cache'>
+    <meta http-equiv='imagetoolbar' content='no'>
+
+    <title>GitHub Audio</title>
+    <link rel="mask-icon" href="/static/public/images/electric-guitar.svg" color="orange">
+    <link rel="shortcut icon" type="image/png" href="/static/public/images/favicon.png"/>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.7/themes/odometer-theme-default.min.css" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" />
+    <link rel="stylesheet" href="/static/public/css/main.css"/>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.7/odometer.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.2/seedrandom.min.js"></script>
+    <script src="/static/public/js/main.js"></script>
+  </head>
+  <body>
+    <div id="fb-root"></div>
+    <script>(function(d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) return;
+      js = d.createElement(s); js.id = id;
+      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7&appId=718063574909410";
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));</script>
+
+    <header>
+      <h1 class="header-text">
+        GitHub Audio&nbsp;
+        <span class="offline-text">offline</span>
+      </h1>
+      <div class="events-remaining">
+        <span class="events-remaining-value odometer"></span>&nbsp;
+        <span class="events-remaining-text">events remaining in queue</span>&nbsp;
+        <div id="volumeSlider"></div>
+      </div>
+    </header>
+
+    <div id="area">
+      <div class="online-users-div">
+        <h2 class="online-users-text"><span class="odometer online-users-count"></span> people listening</h2>
+      </div>
+    </div>
+    <div id="config-area">
+      <div id="org-repo-filter-div">
+        Enter your organization's or repository's names to filter events&nbsp; <input type="text" id="org-repo-filter-name" placeholder="github google facebook"/>
+      </div>
+      <div class="site-description">
+        <h4>About</h4>
+        <br/>
+        <p>This website tracks events happening across GitHub and converts them to music notes based on certain parameters.</p><br/>
+        <p>
+          There are three types of sounds(bell, string pluck and string swell) based on four types of events(PushEvent, PullRequestEvent, IssuesEvent and IssueCommentEvent).
+          Bells represent PushEvents, string plucks represent IssuesEvents and IssueCommentEvents whereas string swells represent PullRequestEvents.
+        </p>
+      </div>
+    </div>
+
+    <footer>
+      <div class="footer-left-text-block">
+        this project is open source, you can view it on <a href="https://github.com/debugger22/github-audio" target="_blank">GitHub</a><br/>
+        developed by <a href="https://github.com/debugger22" target="_blank">@debugger22</a><br/><br/>
+        ProTip: It's actually kind of nice to leave on the background
+      </div>
+      <div class="footer-right-text-block">
+        inspired by <a href="http://hatnote.com" target="_blank">hatnote</a><br/>
+        <div>icons made by <a href="http://www.flaticon.com/authors/freepik" target="_blank" title="Freepik">Freepik</a></div>
+      </div>
+      <div class="social-buttons">
+        <a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="small" href="https://twitter.com/GithubAudio">Follow</a><br/>
+        <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false" data-text="Listen to music generated by events happening across GitHub. #github #music">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><br/>
+        <div class="fb-share-button" data-href="https://github.audio" data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgithub.audio%2F&amp;src=sdkpreparse">Share</a></div>
+      </div>
+    </footer>
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-84999786-1', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>