spotify-github-profile - GitLite

KO | EN

gitlite — search

#javascript #react #ai #golang #go #docker #windows #awesome #cli #kubernetes #vue #awesome-list #security #ios

spotify-github-profile

(★ 2,203)

Show your Spotify playing on your Github profile

File Explorer

Download Latest Version (.zip)

- - all.json
- - ci.yml
- settings.json
- - callback.html.j2
  - spotify.apple.html.j2
  - spotify.compact.html.j2
  - spotify.default.html.j2
  - spotify.karaoke.html.j2
  - spotify.natemoo-re.html.j2
  - spotify.novatorem.html.j2
  - spotify.spotify-embed.html.j2
- app.py
- callback.py
- login.py
- requirements.txt
- theme_dev.py
- util
- view.py
- view.svg.py
- nginx.conf
- btn-connect.svg
- btn-spotify.png
- compact.svg
- default.svg
- example.svg
- karaoke.svg
- natemoo-re.svg
- novatorem.svg
- spotify-embed.svg
- __init__.py
- test_api_callback.py
- test_api_login.py
- test_api_view.py
- test_api_view_sg.py
- test_util_profanity.py
- test_util_remaster.py
- __init__.py
- firestore.py
- profanity.py
- remaster.py
- spotify.py
.dockerignore
.env.example
.gitattributes
.gitignore
docker-compose.yml
Dockerfile
LICENSE
pyproject.toml
README.md

# Installation Guide

1. Get the code

git clone https://github.com/kittinan/spotify-github-profile

Downloads the entire project code from GitHub to your computer.

cd spotify-github-profile

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker compose up -d --build

Builds and starts all defined containers (server, database, etc.) at once, in the background.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Python

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Python 3 On Windows, be sure to check 'Add Python to PATH' during installation.

pip install -r api/requirements.txt

Installs the Python libraries listed in requirements.txt (or similar).

✅ If it runs without errors and prints output in the terminal, it worked.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# spotify-github-profile

Create Spotify now playing card on your github profile

Running on Vercel serverless function, store data in Firebase (store only access_token, refresh_token, token_expired_timestamp)

## Annoucements

**2024-06-21**

Vercel change the package the free tier is not enough for our usage. I moved service to self-host at Digital Ocean.

Please replace your old endpoint `https://spotify-github-profile.vercel.app` to `https://spotify-github-profile.kittinanx.com`

## Table of Contents
[Connect And Grant Permission](#connect-and-grant-permission)
[Example](#example)
[Customization](#customization)
[Running for development locally](#running-for-development-locally)
[Setting up Vercel](#setting-up-vercel)
[Setting up Firebase](#setting-up-firebase)
[Setting up Spotify dev](#setting-up-spotify-dev)
[Running locally](#running-locally)
[How to Contribute](#how-to-contribute)
[Known Bugs](#known-bugs)
[Credit](#credit)

## Connect And Grant Permission

- Click `Connect with Spotify` button below to grant permission

[<img src="/img/btn-spotify.png">](https://spotify-github-profile.kittinanx.com/api/login)

## Example

- Default theme

![spotify-github-profile](https://raw.githubusercontent.com/kittinan/spotify-github-profile/master/img/default.svg)

- Compact theme

![spotify-github-profile](https://raw.githubusercontent.com/kittinan/spotify-github-profile/master/img/compact.svg)

- Natemoo-re theme

![spotify-github-profile](https://raw.githubusercontent.com/kittinan/spotify-github-profile/master/img/natemoo-re.svg)

- Novatorem theme

![spotify-github-profile](https://raw.githubusercontent.com/kittinan/spotify-github-profile/master/img/novatorem.svg)

- Karaoke theme

![spotify-github-profile](https://raw.githubusercontent.com/kittinan/spotify-github-profile/master/img/karaoke.svg)

- Spotify Embed theme (NEW!)

![spotify-github-profile](https://raw.githubusercontent.com/kittinan/spotify-github-profile/master/img/spotify-embed.svg)

## Customization

You can customize the appearance by adding query parameters to your URL:

| Parameter | Description | Default |
|-----------|-------------|---------|
| `theme` | Theme to use (`default`, `compact`, `natemoo-re`, `novatorem`, `karaoke`, `spotify-embed`, `apple`) | `default` |
| `background_color` | Background color (hex without #) | `121212` |
| `border_radius` | Border radius in pixels | `10` |
| `bar_color` | Equalizer bar color (hex without #) | `53b14f` |
| `bar_color_cover` | Extract bar color from album cover (`true`/`false`) | `false` |
| `cover_image` | Show album cover image (`true`/`false`) | `true` |
| `show_offline` | Show offline status when not playing (`true`/`false`) | `false` |
| `interchange` | Swap artist and song name positions (`true`/`false`) | `false` |
| `mode` | Color mode for supported themes (`light`/`dark`) | `light` |

### Example

```
https://spotify-github-profile.kittinanx.com/api/view?uid=YOUR_UID&cover_image=true&theme=default&border_radius=15&bar_color=53b14f
```

## Running for development locally without Vercel

To run the application locally without Vercel:

1. Copy `.env.example` to `.env` in the root directory and replace the placeholder values with your actual configuration.

2. Install the required dependencies:
   ```sh
   pip install -r api/requirements.txt
   ```

3. Run the application:
   ```sh
   python api/app.py
   ```

4. Access the login page at http://localhost:3000/api/login

Note: Ensure your Spotify app's redirect URI is set to `http://localhost:3000/api/callback` and `BASE_URL` in `.env` is set to `http://localhost:3000/api`.

## Running for development locally with Vercel

To develop locally, you need:

- A fork of this project as your repository
- A Vercel project connected with the forked repository
- A Firebase project with Cloud Firestore setup
- A Spotify developer account

### Setting up Vercel

- [Create a new Vercel project by importing](https://vercel.com/import) the forked project on GitHub

### Setting up Firebase

- Create [a new Firebase project](https://console.firebase.google.com/u/0/)
- Create a new Cloud Firestore in the project
- Download configuration JSON file from _Project settings_ > _Service accounts_ > _Generate new private key_
- Convert private key content as BASE64
  - You can use Encode/Decode extension in VSCode to do so
  - This key will be used in step explained below

### Setting up Spotify dev

- Login to [developer.spotify.com](https://developer.spotify.com/dashboard/applications)
- Create a new project
- Edit settings to add _Redirect URIs_
  - add `http://localhost:3000/api/callback`

### Running locally

- Install [Vercel command line](https://vercel.com/download) with `npm i -g vercel`
- Create `.env` file at the root of the project 
- Paste your keys in `SPOTIFY_CLIENT_ID`, `SPOTIFY_SECRET_ID`, and insert the name of your downloaded JSON file in `FIREBASE`

```sh
BASE_URL='http://localhost:3000/api'
SPOTIFY_CLIENT_ID='____'
SPOTIFY_SECRET_ID='____'
FIREBASE='__BASE64_FIREBASE_JSON_FILE__'
```

- Run `vercel dev`

```sh
$ vercel dev
Vercel CLI 20.1.2 dev (beta) — https://vercel.com/feedback
> Ready! Available at http://localhost:3000
```

- Now try to access http://localhost:3000/api/login

### Run unittest

- Run all tests
```sh
pytest tests/ -v
```

- Run tests with coverage
```sh
pytest tests/ --cov=api --cov-report=html
```

- Run specific test file
```sh
pytest tests/test_api_view.py -v
```

- Run with maxfail (like CI)
```sh
pytest tests/ --maxfail=5 --disable-warnings -v
```

## How to Contribute

- Develop locally and submit a pull request!
- Submit newly encountered bugs to the [Issues](https://github.com/kittinan/spotify-github-profile/issues) page
- Submit feature suggestions to the [Issues](https://github.com/kittinan/spotify-github-profile/issues) page, with the label [Feature Suggestion]

## Known Bugs

[404/500 Error when playing local files](https://github.com/kittinan/spotify-github-profile/issues/19)

## Other Platforms
- [Apple Music GitHub Profile](https://github.com/rayriffy/apple-music-github-profile)

## Credit

Inspired by https://github.com/natemoo-re