Merge branch 'main' of github.com:Oliver-Akins/top-lists into main

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at oliver.akins1999@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

README.md

@@ -1,2 +1,33 @@
-# spotify-top
+# Spotify Top Lists
 A tool for getting a user's top tracks/artists on Spotify
+
+---
+
+## Local Installation:
+Follow the steps below for information on how to run the webpage locally.
+
+1. Clone the repository locally
+2. Create a Spotify developer app in [Spotify's Developer Dashboard](https://developer.spotify.com/dashboard/applications)
+3. Change the client ID in `/src/components/LoginView.vue` to be the client ID associated with the app you just made in the Spotify developer dashboard.
+4. Run one of the following commands (I prefer using `pnpm` over `npm`)
+   - `pnpm install`
+   - `npm install`
+5. Once the above command is finished, run the corresponding serve command.
+   - `pnpm serve`
+   - `npm serve`
+6. Go to the localhost IP in your browser, **do not try to log in yet**. (It should already be copied to your clipboard).
+7. If the address copied to clipboard is not `http://localhost:8080`, you will need to modify the `/src/js/constants.js` file's `DEV_URL` to match what was copied to your clipboard.
+8. Add the address exactly as it is to your Spotify application as an authentication redirect. Make sure to save the change.
+9. Once this is done, you can reload the page/restart the webserver and are ready to log in.
+
+---
+
+## Contributing:
+I appreciate any and all pull requests, so long as they follow the below guidelines that I have set:
+
+- Indentation must be tabs. If you use spaces in your PR, it will not get merged until adjusted.
+- Naming of constants is in `SCREAMING_SNAKE_CASE`
+- File and component names are in `CapitalCamel`
+- Naming of everything else is in `snake_case`
+- Component names should be as short as possible, while still maintaining a high level of clarity as to what it is.
+- If in doubt about something, open an issue, or comment on an already existing, related issue mentioning @Oliver-Akins

package.json

@@ -11,7 +11,7 @@
 		"lint": "vue-cli-service lint"
 	},
 	"dependencies": {
-		"axios": "^0.19.2",
+		"axios": "^0.21.0",
 		"clipboard-polyfill": "^3.0.1",
 		"core-js": "^3.6.5",
 		"v-tooltip": "^2.0.3",
@@ -20,9 +20,9 @@
 		"vue-textarea-autosize": "^1.1.1"
 	},
 	"devDependencies": {
-		"@vue/cli-plugin-babel": "~4.4.0",
+		"@vue/cli-plugin-babel": "~4.5.8",
-		"@vue/cli-plugin-eslint": "~4.4.0",
+		"@vue/cli-plugin-eslint": "~4.5.8",
-		"@vue/cli-service": "~4.4.0",
+		"@vue/cli-service": "~4.5.8",
 		"babel-eslint": "^10.1.0",
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^6.2.2",

src/App.vue

@@ -62,7 +62,7 @@ export default {
 
 <style>
 @import "./css/transitions.css";
-@import "./css/theme/dark.css";
+@import "./css/theme/halloween.css";
 @import "./css/scrollbar.css";
 @import "./css/tooltips.css";
 @import "./css/inputs.css";

src/components/ControlBar.vue

@@ -212,10 +212,11 @@ export default {
 }
 
 #error {
+	background-color: var(--error-background);
 	border-radius: var(--corner-rounding);
-	border-color: var(--error);
+	border-color: var(--error-accent);
+	color: var(--error-text);
 	border-style: solid;
-	color: var(--error);
 	text-align: center;
 	border-width: 2px;
 	padding: 10px;

src/components/LoginView.vue

@@ -75,7 +75,7 @@ export default {
 .card {
 	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
-	color: var(--spotify-green);
+	color: var(--card-text);
 	text-align: center;
 	padding: 15px;
 	width: 90%;

src/components/modals/DetailedTrack.vue

@@ -162,6 +162,7 @@ export default {
 	background-color: var(--modal-background);
 	border-radius: var(--corner-rounding);
 	padding: 0 15px 15px 15px;
+	color: var(--modal-text);
 	overflow-y: auto;
 	max-height: 85%;
 	z-index: 11;

src/components/modals/FeaturesInfo.vue

@@ -155,6 +155,7 @@ export default {
 	background-color: var(--modal-background);
 	border-radius: var(--corner-rounding);
 	padding: 0 15px 15px 15px;
+	color: var(--modal-text);
 	text-align: center;
 	overflow-y: auto;
 	max-height: 85%;

src/components/modals/PopularityInfo.vue

@@ -55,6 +55,7 @@ export default {
 .modal {
 	background-color: var(--modal-background);
 	border-radius: var(--corner-rounding);
+	color: var(--modal-text);
 	text-align: center;
 	max-height: 85%;
 	padding: 0 15px;

src/components/modals/ShareTrack.vue

@@ -73,6 +73,7 @@ export default {
 	background-color: var(--modal-background);
 	border-radius: var(--corner-rounding);
 	padding: 0 15px 15px 15px;
+	color: var(--modal-text);
 	text-align: center;
 	max-height: 85%;
 	z-index: 11;

src/css/theme/halloween.css

@@ -0,0 +1,70 @@
+:root {
+	--spotify-green: #1DB954;
+	--spotify-white: #FFFFFF;
+	--spotify-black: #000000;
+
+	--accent1: #7289da;
+	--accent2: #00aa00;
+
+	--error: #ff0000;
+	--error-background: #ff00005d;
+	--error-text: white;
+	--error-accent: var(--error);
+
+	--success: var(--accent2);
+	--success-background: #00aa002f;
+	--success-text: var(--card-text);
+	--success-accent: #00aa00;
+
+	--background: #FF8C00;
+	--background-text: var(--spotify-white);
+
+	--card-colour: #794200;
+	--card-text: white;
+
+	--on-card-colour: #bd6800;
+	--on-card-text: white;
+
+	--modal-container-background: #0e0f10e0;
+	--modal-background: var(--background);
+	--modal-close-button: black;
+	--modal-text: black;
+
+	--fonts: 'Open Sans', sans-serif;
+
+	--corner-rounding: 7px;
+
+	--input-background: var(--spotify-black);
+	--input-text: orange;
+	--input-active-border: var(--accent1);
+
+	--button-background: #f09e3c;
+	--button-hover-background: #d6923f;
+	--button-disabled-background: #965200;
+	--button-text: var(--spotify-black);
+	--button-disabled-text: var(--spotify-black);
+
+	--textarea-background: var(--spotify-black);
+	--textarea-text-colour: orange;
+	--textarea-border-colour: var(--accent1);
+
+	--missing-picture-background: var(--on-card-colour);
+	--missing-picture-foreground: var(--accent2);
+
+	--tooltip-colour: var(--spotify-black);
+	--tooltip-text: orange;
+
+	--percent-filled: black;
+	--percent-empty: white;
+	--percent-text: black;
+
+	--scrollbar-background: #6d3e00;
+	--scrollbar-handle: #e06500;
+	--scrollbar-handle-hover: #e06500c2;
+
+	--card-bottom-row-text-colour: var(--on-card-text);
+	--card-bottom-row-background: var(--on-card-colour);
+	--card-bottom-row-hover-background: #9e5700;
+	--card-bottom-row-divider-colour: white;
+	--card-bottom-row-icon-colour: white;
+}