https://github.com/devboidesigns/album-viewer
The album-viewer 💿 web component fetches and displays albums from a specified Bandcamp artist. When you pass an artist name to the component, it will display all the musician's albums in a horizontal scrolling view.
https://github.com/devboidesigns/album-viewer
Last synced: 8 months ago
JSON representation
The album-viewer 💿 web component fetches and displays albums from a specified Bandcamp artist. When you pass an artist name to the component, it will display all the musician's albums in a horizontal scrolling view.
- Host: GitHub
- URL: https://github.com/devboidesigns/album-viewer
- Owner: DevboiDesigns
- License: mit
- Archived: true
- Created: 2025-01-09T16:47:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-08T04:10:12.000Z (about 1 year ago)
- Last Synced: 2025-10-14T11:12:26.566Z (8 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/album-viewer
- Size: 84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Album Viewer Web Component
The `album-viewer` web component fetches and displays albums from a specified [Bandcamp](https://bandcamp.com) artist
---
## Overview
The `album-viewer` web component fetches and displays albums from a specified Bandcamp artist. When you pass an artist name to the component, it will display all the musician's albums in a horizontal scrolling view. Please check the demo site below for an example.
- [Demo Website](https://devboidesigns.github.io/album-viewer/)
## Installation
Include the `album-viewer` component in your HTML file:
```html
```
## Specifying Versions
You can specify the version of the `album-viewer` component using the `@v^1.0.0` format. This allows you to control which version of the component you are using in your project. No version will default to latest.
**Example with Version Specification**
```html
```
Replace `^1.0.0` with the desired version number to use a specific version of the component.
## Usage
Add the `album-viewer` component to your HTML and pass the Bandcamp artist name as a property:
```html
```
Example:
```html
Album Viewer
```
## Properties
- `name`: artist to fetch albums for
- `iframeWidth`: The width of the iframes displaying the albums. Default is `350px`.
- `iframeHeight`: The height of the iframes displaying the albums. Default is `442px`.
- `iframeBorder`: The border style of the iframes displaying the albums. Default is `0`.
**Example with Name**
```html
```
## Styling
The component includes default styles for the horizontal scrolling view. You can customize the styles by targeting the `album-viewer` component and its internal elements.
### Default Styles
```css
album-viewer .album-viewer {
display: flex;
justify-content: top;
overflow-x: auto;
}
```
### Customizing Styles
You can override the default styles by adding custom CSS to your project. For example, to change the background color and add padding:
```css
album-viewer .album-viewer {
background-color: #f0f0f0;
padding: 10px;
}
```
### Example with Custom Styles
```html
Album Viewer
album-viewer {
background-color: #f0f0f0;
padding: 10px;
}
```
## Conclusion
The `album-viewer` web component is a simple and effective way to display albums from a Bandcamp artist in a horizontal scrolling view. By passing the artist name as a property, you can easily integrate this component into your web projects.
## Coming Soon
We are actively working on adding new features and improvements. Here are some of the upcoming features you can expect:
- **Vertical Scrolling View**: Option to display albums in a vertical scrolling view.
- **Customizable Colors**: Ability to customize the background and text colors for better integration with your website's theme.
- **Pagination**: Support for paginating through a large number of albums.
- **Loading Indicators**: Visual indicators to show loading progress while fetching album data.
- **Accessibility Improvements**: Enhancements to make the component more accessible to users with disabilities.
We welcome your feedback and suggestions to help us improve this component. Stay tuned for updates!
## Star on GitHub 🤩
If you like this web component please take a moment to
[star this project on GitHub](https://github.com/devboidesigns/album-viewer#start-of-content).
[](https://github.com/devboidesigns/album-viewer#start-of-content)