Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
gatsby-source-spotify
Advanced tools
Readme
This source plugin for Gatsby fetches personal statistics and playlists from Spotify. You can use this to display a list of your favorite artists and tracks, or your public playlists.
gatsby-source-spotify is compatible with gatsby-image.
Images are always accessible using the image
key of a node. Downloaded images are
cached locally to improve build times.
$ npm install gatsby-source-spotify
To use this plugin, you have to provide a client id, a client secret, and a personal refresh token from Spotify. To do this, first create a new Spotify App.
After you created it, click the "Edit Settings" button on the application dashboard, add http://localhost:5071/spotify
to the "Redirect URIs" section and hit save.
You can then run gatsby-source-spotify's integrated tool to log in using your Spotify account and to get your refresh token.
$ npx gatsby-source-spotify token <clientId> <clientToken>
"Illegal Scope" error
If you get an "Illegal Scope" error from Spotify, you may need to delete your Spotify app and create a new one, see issue #5.
Put those credentials into your gatsby-config.js
and you're good to go 🎉
{
resolve: `gatsby-source-spotify`,
options: {
clientId: `<CLIENT_ID>`,
clientSecret: `<CLIENT_SECRET>`,
refreshToken: `<REFRESH_TOKEN>`,
fetchPlaylists: true, // optional. Set to false to disable fetching of your playlists
fetchRecent: true, // optional. Set to false to disable fetching of your recently played tracks
timeRanges: ['short_term', 'medium_term', 'long_term'], // optional. Set time ranges to be fetched
},
},
According to Spotify, the time ranges are specified as follows:
short_term
: Data from the last four weeksmedium_term
: Data from the last six monthslong_term
: All data since the account's creationFor your top artists and tracks, I'd recommend filtering by one time_range
and
sorting by order
. This ensures that you get the correct results.
Example for your top artists with images and genres:
{
allSpotifyTopArtist(
filter: { time_range: { eq: "medium_term" } }
sort: { fields: order }
) {
edges {
node {
name
genres
image {
localFile {
childImageSharp {
fluid(maxWidth: 400) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
}
}
If you're interested in contributing, please feel free to open a pull request.
FAQs
Gatsby source plugin for using data from Spotify on your website
The npm package gatsby-source-spotify receives a total of 4 weekly downloads. As such, gatsby-source-spotify popularity was classified as not popular.
We found that gatsby-source-spotify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.