build: update env variables

.env.sample

@@ -1,2 +1,2 @@
-SP_CLIENT_ID=
-SP_CLIENT_SECRET=
+NOW_CLIENT_ID=
+NOW_CLIENT_SECRET=

README.md

@@ -3,28 +3,30 @@
 A simple app to display your currently playing Spotify track on a Raspberry Pi, made with Vue.
 
 Nowify will:
-* ✅ - Use Spotify Web API to get your current track
-* ✅ - Only access that and no other data
-* ✅ - Use Access and Refresh Tokens to ensure that you;re kept logged in between sessions
-* ✅ - Display the current track artist, cover, and a matching vibrant background colour
 
-## Preview:
+✅ - Use Spotify Web API to get your current track
+✅ - Only access that and no other data
+✅ - Use Access and Refresh Tokens to ensure that you;re kept logged in between sessions
+✅ - Display the current track artist, cover, and a matching vibrant background colour
+
+Preview:
 ![Nowify Preview Image 1](assets/preview-1.png?raw=true "Nowify preview image, cover art for the song 'Wherever you go' by The Avalanches and Jamie xx")
 ![Nowify Preview Image 2](assets/preview-2.png?raw=true "Nowify preview image, cover art for the song 'Gas Drawls' by MF DOOM")
 ![Nowify Preview Image 3](assets/preview-3.png?raw=true "Nowify preview image, cover art for the song '有吗炒面' by Lexie Liu")
 ---
 
+Original Write up:
+[https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/](https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/)
+
 ## How to use:
 To use this, you'll need to clone the repo, generate some API keys and run some commands to compile the code.
 
 To compile the code, you will need a package manager installed. Either [npm](https://www.npmjs.com/get-npm) or [yarn](https://classic.yarnpkg.com/en/docs/install/#mac-stable). I use yarn.
 
 1. Create Spotify Client keys.
-
 To allow authorisation to your track data, you'll need to generate client keys. You can do this by logging in to the [Spotify Dashboard](https://developer.spotify.com/dashboard/applications) creating an app.
 
 2. Clone this repository and install dependencies
-
 After you clone, navigate to the directory and install the dependencies:
 
 via yarn:
@@ -38,11 +40,9 @@ npm install
 ```
 
 3. Add your Client ID and Client Secret
-
 Copy the `.env.sample` file to a new file called `.env` and enter your generated Client ID and Client Secret.
 
 4. Compile the code
-
 In the repo directory, run the following command to compile the project:
 
 via yarn:
@@ -68,13 +68,13 @@ npm run serve
 ```
 
 5. Upload to a webserver.
-
 The output of `yarn build` will be created in a folder called `/dist/` - this is the usable version of Nowify which is ready to be added to your web server. You could use Netlify, GitHub Pages, Vercel, or any webserver for this. I use Netlify.
 
 Alternatively, you can use packages to run a local webserver.
 
-6. View on your Pi and play some music.
+*NOTE*: This app uses Environment Variables to keep your Client ID and Secret secure. These will not be added to your
 
+6. View on your Pi and play some music.
 Now you're ready to go. Open your site on the Raspberry Pi, login, and play some music. I'd recommend disabling the screensaver on your Pi and opening Chromium in kiosk mode:
 
 ```
@@ -83,9 +83,9 @@ Now you're ready to go. Open your site on the Raspberry Pi, login, and play some
 @xset s noblank # ensure screen doesn't go blank
 @chromium-browser --kiosk https://*YOUR-URL-HERE* # open up chromium to specific web page
 ```
-
+---
 ### Original Write up:
 [https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/](https://ashcroft.dev/blog/now-playing-screen-spotify-raspberry-pi-es6/)
 
 ### Brief About:
-Nowify was a project that I originally made in 2017 when I wanted to learn more modern Javascript. Over the years, I've learned a lot more and had people contact me about Nowify, so I wanted to build a more modern version of it using modern tools. This is still a learning exercise, but hopefully one that's more usable. If you'd like to view the old repository, that can be found on the `old` branch.
+Nowify was a project that I originally made in 2017 when I wanted to learn more modern Javascript. Over the years, I've learned a lot more and had people contact me about Nowify, so I wanted to build a more modern version of it using modern tools. This is still a learning exercise, but hopefully one that's more usable. If you'd like to view the old repository, that can be found on the `old` branch.

src/App.vue

@@ -33,8 +33,8 @@ export default {
       test: 'hello, world',
       auth: {
         status: false,
-        clientId: process.env.VUE_APP_SP_CLIENT_ID,
-        clientSecret: process.env.VUE_APP_SP_CLIENT_SECRET,
+        clientId: process.env.NOW_CLIENT_ID,
+        clientSecret: process.env.NOW_CLIENT_SECRET,
         authCode: '',
         accessToken: '',
         refreshToken: ''

src/utils/props.js

@@ -2,7 +2,6 @@
  * Util: Props
  * Helper file to keep consistent props across all components.
  */
-
 export default {
   msg: {
     type: String,
@@ -20,20 +19,4 @@ export default {
     type: Object,
     default: () => ({})
   }
-  // string: {
-  //   type: String,
-  //   default: ''
-  // },
-  // number: {
-  //   type: Number,
-  //   default: 0
-  // },
-  // array: {
-  //   type: Array,
-  //   default: () => []
-  // },
-  // object: {
-  //   type: Object,
-  //   default: () => ({})
-  // }
 }

src/utils/utils.js

@@ -4,24 +4,22 @@
  */
 
 /**
- * Example Function.
+ * Config object.
  */
-//  export function superCool() {
-// return 'x';
-//  }
-
 const config = {
   authNamespace: 'nowify_auth_state'
 }
 
 /**
+ * Get stored authorisation object.
  * @return {Object}
  */
 export function getStoredAuth() {
   return JSON.parse(window.localStorage.getItem(config.authNamespace)) || {}
 }
 
 /**
+ * Set stored authorisation object.
  * @return {Object}
  */
 export function setStoredAuth(authState = {}) {