Add Soundcloud embeds for songs and playlists

[nicknish]

Hello! After sorting through some trouble with other gatsby embed plugins, I found this project a few days ago and I'm already excited about it. Thanks for the hard work!

I saw that Soundcloud embeds was an issue in #3, so I went ahead and gave it a go.

Closes #3

What:

Add Soundcloud embeds

Why:

Existing issue #3

How:

1. Validate the URL is a standard song or playlist URL (e.g. https://soundcloud.com/clemenswenners/africa)
2. Generate an iframe url that mirrors the standard Soundcloud embed generated from their website* (e.g. Go to song/playlist > Share > Embed)
3. Return the iframe HTML string

Screenshots:

I created a CodeSandbox example to demo the output and to compare its appearance to the typical Soundcloud embed. Check it out below

https://codesandbox.io/s/soundcloud-dynamic-embed-zkjm9

*Implementation Notes:

• By default, I've set the Soundcloud embed to NOT autoplay. Because this is a library, I thought it would be more flexible for most consumers' use cases (e.g. in case they want to embed multiple Soundcloud songs/playlists in succession)

Checklist:

• Documentation
• Tests
• Ready to be merged

[swyxio]

gorgeous!

[nicknish]

Hi @MichaelDeBoey! Any feedback on this guy? ☝️

Also -- thanks @sw-yx, I appreciate your work!

[MichaelDeBoey]

Hi @nicknish!

I'm sorry for the late response, but apparently my notifications for this repo were disabled somehow. 😕

Thanks for taking your time to implement the SoundCloud transformer!
Really awesome work.

I've added some small improvements and better default-values (imo) before this one can be merged.

Let me know if you need some further help. 🙂

[nicknish]

@MichaelDeBoey Hi Michael. Thanks for taking a peek at my PR. 🎉

I updated it with your suggestions:

• Revert extra spacing in docs
• Use implicit returns when using arrow => functions
• Remove encoding Soundcloud iframe source url
• Update Soundcloud iframe default options:
  • show_teaser: false
  • hide_related: true

[nicknish]

@MichaelDeBoey Phew. Got rid of all those pesky trailing slashes. 😄 All ready for 👀again

[nicknish]

All resolved. Will keep an eye on notifications in case there are any other changes necessary. I'll also keep in mind the changes here when making future contributions 😄

[MichaelDeBoey]

All seems good to be merged.

You just have to add the transformer in the main file, otherwise it won't run.

[nicknish]

@MichaelDeBoey all set! Thanks for your patience with this one 😄

[MichaelDeBoey]

@nicknish No problem at all! 🙂
We're all here to help each other out 😉

Did some small nitpicks, but all good.

Thanks for the great contribution! 👊

[MichaelDeBoey]

@all-contributors Please add @nicknish for code and test

[allcontributors]

@MichaelDeBoey

I've put up a pull request to add @nicknish! 🎉

[MichaelDeBoey]

🎉 This PR is included in version 1.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀