spotify-github-profile - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #typescript #llm #go #golang #android #linux #cli #kubernetes #vue #security #openai #ios

spotify-github-profile

(★ 2,203)

Show your Spotify playing on your Github profile

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd spotify-github-profile

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Docker

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.

docker compose up -d --build

정의된 모든 컨테이너(서버, DB 등)를 한 번에 빌드하고 백그라운드에서 실행합니다.

✅ 터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.

3. Python

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Python 3 설치 시 'Add Python to PATH' 옵션을 꼭 체크하세요 (Windows).

pip install -r api/requirements.txt

requirements.txt 등에 명시된 파이썬 라이브러리를 설치합니다.

✅ 에러 메시지 없이 실행되고 터미널에 안내 문구가 출력되면 정상입니다.

이 레포의 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