General cleanup

JMPerez · Apr 17, 2017 · 1b0385f · 1b0385f
1 parent 200d1ee
commit 1b0385f
Show file tree

Hide file tree

Showing 15 changed files with 556 additions and 162 deletions.
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: node index.js
diff --git a/README.md b/README.md
@@ -0,0 +1,39 @@
+# node-js-getting-started
+
+A barebones Node.js app using [Express 4](http://expressjs.com/).
+
+This application supports the [Getting Started with Node on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs) article - check it out.
+
+## Running Locally
+
+Make sure you have [Node.js](http://nodejs.org/) and the [Heroku CLI](https://cli.heroku.com/) installed.
+
+```sh
+$ git clone git@github.com:heroku/node-js-getting-started.git # or clone your own fork
+$ cd node-js-getting-started
+$ npm install
+$ npm start
+```
+
+Your app should now be running on [localhost:5000](http://localhost:5000/).
+
+## Deploying to Heroku
+
+```
+$ heroku create
+$ git push heroku master
+$ heroku open
+```
+or
+
+[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)
+
+## Documentation
+
+For more information about using Node.js on Heroku, see these Dev Center articles:
+
+- [Getting Started with Node.js on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs)
+- [Heroku Node.js Support](https://devcenter.heroku.com/articles/nodejs-support)
+- [Node.js on Heroku](https://devcenter.heroku.com/categories/nodejs)
+- [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices)
+- [Using WebSockets on Heroku with Node.js](https://devcenter.heroku.com/articles/node-websockets)
diff --git a/app.js b/app.js
diff --git a/app.json b/app.json
@@ -0,0 +1,8 @@
+{
+  "name": "Start on Heroku: Node.js",
+  "description": "A barebones Node.js app using Express 4",
+  "repository": "https://github.com/heroku/node-js-getting-started",
+  "logo": "http://node-js-sample.herokuapp.com/node.svg",
+  "keywords": ["node", "express", "heroku"],
+  "image": "heroku/nodejs"
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>Now Playing on Spotify</title>
+        <link rel="stylesheet" type="text/css" href="style.css" />
+    </head>
+<body>
+  <div class="container">
+    <div class="login-container hidden" id="js-login-container">
+      <button class="btn btn--login" id="js-btn-login">Login with Spotify</button>
+    </div>
+    <div class="hidden" id="js-main-container"></div>
+  </div>
+  <script src="http://localhost:5000/spotify-player.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/example/script.js b/example/script.js
@@ -0,0 +1,45 @@
+var mainContainer = document.getElementById('js-main-container'),
+    loginContainer = document.getElementById('js-login-container'),
+    loginButton = document.getElementById('js-btn-login'),
+    background = document.getElementById('js-background');
+
+var spotifyPlayer = new SpotifyPlayer({
+  exchangeHost: 'http://localhost:5000'
+});
+
+var template = function (data) {
+  return `
+    <div class="main-wrapper">
+      <img class="now-playing__img" src="${data.item.album.images[0].url}">
+      <div class="now-playing__side">
+        <div class="now-playing__name">${data.item.name}</div>
+        <div class="now-playing__artist">${data.item.artists[0].name}</div>
+        <div class="now-playing__status">${data.is_playing ? 'Playing' : 'Paused'}</div>
+        <div class="progress">
+          <div class="progress__bar" style="width:${data.progress_ms * 100 / data.item.duration_ms}%"></div>
+        </div>
+      </div>
+    </div>
+    <div class="background" style="background-image:url(${data.item.album.images[0].url})"></div>
+  `;
+};
+
+spotifyPlayer.on('update', response => {
+  mainContainer.innerHTML = template(response);
+});
+
+spotifyPlayer.on('login', user => {
+  if (user === null) {
+    loginContainer.style.display = 'block';
+    mainContainer.style.display = 'none';
+  } else {
+    loginContainer.style.display = 'none';
+    mainContainer.style.display = 'block';
+  }
+});
+
+loginButton.addEventListener('click', () => {
+    spotifyPlayer.login();
+});
+
+spotifyPlayer.init();
diff --git a/example/style.css b/example/style.css
@@ -0,0 +1,103 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #333;
+  color: #eee;
+  font-family: Helvetica, Arial;
+  font-size: 3vmin;
+}
+
+.hidden {
+  display: none;
+}
+
+/** Buttons **/
+.btn {
+  background-color: transparent;
+  border-radius: 2em;
+  border: 0.2em solid #1ecd97;
+  color: #1ecd97;
+  cursor: pointer;
+  font-size: 3vmin;
+  padding: 0.7em 1.5em;
+  text-transform: uppercase;
+  transition: all 0.25s ease;
+}
+
+.btn:hover {
+  background: #1ecd97;
+  color: #333;
+}
+
+.btn--login {
+  margin: 0 auto;
+}
+
+/** Now Playing **/
+.now-playing__name {
+  font-size: 1.5em;
+  margin-bottom: 0.2em;
+}
+
+.now-playing__artist {
+  margin-bottom: 1em;
+}
+
+.now-playing__status {
+  margin-bottom: 1em;
+}
+
+.now-playing__img {
+  float:left;
+  margin-right: 10px;
+  width: 45%;
+}
+
+.now-playing__side {
+  margin-left: 5%;
+  width: 45%;
+}
+
+/** Progress **/
+.progress {
+  border: 0.15em solid #eee;
+  height: 1em;
+}
+
+.progress__bar {
+  background-color: #eee;
+  border: 0.1em solid transparent;
+  height: 0.75em;
+}
+
+/** Background **/
+.background {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-size: cover;
+  background-position: center center;
+  filter: blur(8em) opacity(0.6);
+  position: absolute;
+}
+
+.main-wrapper {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  margin: 0 auto;
+  justify-content: center;
+  position: relative;
+  width: 90%;
+  z-index: 1;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+}
diff --git a/index.html b/index.html