Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trovster/music-wrapped
A Web Component for end-of-year music statistics.
https://github.com/trovster/music-wrapped
music web-component
Last synced: 3 days ago
JSON representation
A Web Component for end-of-year music statistics.
- Host: GitHub
- URL: https://github.com/trovster/music-wrapped
- Owner: trovster
- License: mit
- Created: 2023-12-03T17:23:48.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2023-12-03T18:12:29.000Z (10 months ago)
- Last Synced: 2024-09-26T17:21:29.051Z (7 days ago)
- Topics: music, web-component
- Language: JavaScript
- Homepage: https://trovster.github.io/music-wrapped/
- Size: 989 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Music Wrapped
This is a Web Component for creating a music card similar to end-of-year
statistics provided by Spotify or Apple Music.
## Installation
```bash
npm install @trovster/music-wrapped --save
```
## Usage
These are [Web
Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) and
must be imported before the custom elements can be used. If you are using the
fitness card, then you do not need to import the activity ring.
```html
import '@trovster/music-wrapped/src/MusicWrapped.js';
```
The card requires the lists inside the component. These should contain a
`title=""` attribute, which is used for the list title. You can add the optional
“Minutes Listened” and ”Top Genre” information by using the `seconds` and
`genre` attributes.
```html
- Taylor Swift
- Bad Bunny
- Post Malone
- Ed Sheeran
```
## Development
### Linting and Formatting
To scan the project for linting and formatting errors, run:
```bash
npm run lint
```
To automatically fix linting and formatting errors, run:
```bash
npm run format
```
### Local Demo with `web-dev-server`
To start a local development server that serves the basic demo located in
`docs/index.html`, run:
```bash
npm start
```
### Tooling Configs
For most of the tools, the configuration is in the `package.json` to minimize
the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to
individual files.