Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JeffreyCA/lastfm-recently-played-readme
Display your recent Last.fm scrobbles on your GitHub profile README.
https://github.com/JeffreyCA/lastfm-recently-played-readme
hacktoberfest lastfm profile-readme
Last synced: 2 months ago
JSON representation
Display your recent Last.fm scrobbles on your GitHub profile README.
- Host: GitHub
- URL: https://github.com/JeffreyCA/lastfm-recently-played-readme
- Owner: JeffreyCA
- License: mit
- Created: 2020-08-28T17:12:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-09T20:20:51.000Z (about 1 year ago)
- Last Synced: 2024-11-25T06:56:49.244Z (2 months ago)
- Topics: hacktoberfest, lastfm, profile-readme
- Language: TypeScript
- Homepage: https://lastfm-recently-played.vercel.app
- Size: 575 KB
- Stars: 125
- Watchers: 5
- Forks: 13
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- project-awesome - JeffreyCA/lastfm-recently-played-readme - Display your recent Last.fm scrobbles on your GitHub profile README. (TypeScript)
- awesome-github-profile - lastfm Recently Played Readme
README
# Last.fm Recently Played README
Show your recent Last.fm scrobbles on your GitHub profile README. Powered by [Vercel](https://vercel.com).
> Check out [spotify-recently-played-readme](https://github.com/JeffreyCA/spotify-recently-played-readme) for a similar integration for Spotify.
## Getting Started
Just add the following into your README and set the query parameter `user` to your Last.fm username.
```md
```
To add link to your last.fm profile, wrap the image in a link tag:
```md
[](https://www.last.fm/user/JeffreyCA01)
```
[](https://www.last.fm/user/JeffreyCA01)
## Customization
### Parameters
You can customize your list.fm status by adding query parameters after the url. Here is a list of available parameters.
| Parameter | Description | Type | Default | Valid Values |
| --------------- | ------------------------------------------------------------------------ | ------- | ------- | ----------------------------------------------------------------------------------------- |
| `count` | Number of recent tracks to display | number | 5 | 1 - 10 |
| `width` | Width of the card in pixels | number | 400 | 300-1000 |
| `loved` | Show a heart indicator for loved tracks | boolean | false | true, false |
| `show_user` | Show your username and profile picture in the specified location. | string | never | never, always, header, footer |
| `header_style` | Adjust the size of the header or hide it | string | normal | none, compact, normal, compact_stats, normal_stats, compact_stats_only, normal_stats_only |
| `footer_style` | Adjust the size of the footer or hide it | string | none | none, wave, compact, normal compact_stats, normal_stats |
| `border_radius` | Adjust the radius of the card | number | 10 | 0 - 100 |
| `loved_style` | Customize the indicator placement for loved tracks | number | 1 | 1, 2, 3, 4 |
| `bg_color` | Customize the background color of the card. Supports alpha transparency. | string | 212121 | RGB/A hexadecimal |
### Examples
#### Customizing Track Count
Change the amount of recent tracks that are displayed.
> Default: `5`
> Min Value: `1`
> Max Value: `10`
```md
```
#### Customizing card width
Change the width of the card, in pixels.
> Default: `400`
> Min Value: `300`
> Max Value: `1000`
```md
```
#### Show loved tracks
Show a heart indicator for loved tracks.
> Default: `false`
> Possible Values: `true` | `false`
```md
```
#### Show user profile
Determines if and where the user's profile information is shown. If you want to show exclusively the user's profile in a given section, use the `normal` or `compact` header and footer styles.
> Default: `never`
> Possible Values: `never` | `always` | `header` | `footer`
```md
```
| `header` | `footer & footer_style=normal` |
| :-----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: |
|  |  |
#### Header Styles
Changes the size and content of the header. You can use header and footer styles to show the user's stats (i.e. scrobbles, artist count, and track count). Using a `_stats_only` style will center the stats if the user's profile is not visible within the header. Use the `compact` or `normal` style in combination with `show_user` to exclusively show the user profile in the footer.
> Default: `normal`
> Alias: `header_size`
> Possible Values: `none` | `normal` | `compact` | `normal_stats` | `compact_stats` | `normal_stats_only` | `compact_stats_only`
| `none` | `normal_stats` | `compact_stats_only` |
| :-----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: |
|  |  |  |
#### Footer Styles
Changes the size and content of the footer. You can use header and footer styles to show the user's stats (i.e. scrobbles, artist count, and track count). Using a `_stats` style will center the stats if the user's profile is not visible within the footer. Use the `compact` or `normal` style in combination with `show_user` to exclusively show the user profile in the footer.
> Default: `none`
> Possible Values: `none` | `wave` | `normal` | `compact` | `normal_stats` | `compact_stats` |
| `wave` | `normal` | `normal_stats` |
| :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: |
|  |  |  |
#### Loved Style
Customize the indicator placement for loved tracks.
> Default: `1`
> Possible Values: `1` | `2` | `3` | `4`
| Style 1 | Style 2 | Style 3 | Style 4 |
| :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: |
|  |  |  |  |
#### Change Background Color
Change the background color of the main card with a hexadecimal RGB/A code. Supports alpha transparency.
> Default: `212121`
> Possible Values: `any valid RGB/A hex-code`
```md
```
## Deploying own Vercel project
[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2FJeffreyCA%2Flastfm-recently-played-readme&env=API_KEY,VERCEL_URL)
Deploy your own Vercel project using the link above. Next, you'll need to set the `API_KEY` environment variable to your Last.fm API key. You'll also need to set the `VERCEL_URL` system environment variable in the Vercel project settings.
## Running locally
1. Clone Git repo
```sh
$ git clone https://github.com/JeffreyCA/lastfm-recently-played-readme.git
```
2. Install Node dependencies
```sh
$ npm install
```
3. Create `.env` file containing the following:
```sh
API_KEY=
```
4. Run development server
```sh
$ npm run dev
```
The app will be running at [http://localhost:3000](http://localhost:3000).
## License
[MIT](LICENSE)