Add Soundcloud embeds for songs and playlists

README.md

@@ -17,9 +17,9 @@
 ## The problem
 
 Trying to embed well known services (like [CodeSandbox][codesandbox],
-[Twitter][twitter] or [YouTube][youtube]) into your [Gatsby][gatsby] website can
-be hard, since you have to know how this needs to be done for all of these
-different services.
+[SoundCloud][soundcloud], [Twitter][twitter] or [YouTube][youtube]) into your
+[Gatsby][gatsby] website can be hard, since you have to know how this needs to
+be done for all of these different services.
 
 ## This solution
 
@@ -36,6 +36,7 @@ line and replace it with the proper embed-code.
 - [Usage](#usage)
 - [Supported services](#supported-services)
   - [CodeSandbox](#codesandbox)
+  - [SoundCloud](#soundcloud)
   - [Twitter](#twitter)
   - [YouTube](#youtube)
 - [Inspiration](#inspiration)
@@ -92,6 +93,26 @@ https://codesandbox.io/s/ynn88nx9x?view=split
 ></iframe>
 ```
 
+### SoundCloud
+
+#### Usage
+
+```md
+https://soundcloud.com/clemenswenners/africa
+```
+
+#### Result
+
+```md
+<iframe
+  width="100%"
+  height="300"
+  scrolling="no"
+  frameborder="no"
+  src=https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true
+></iframe>
+```
+
 ### Twitter
 
 The returned HTML snippet from the Twitter transformer will only be
@@ -236,6 +257,7 @@ MIT
 [gatsby]: https://github.com/gatsbyjs/gatsby
 [gatsby-plugin-twitter]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-twitter
 [kentcdodds.com-repo]: https://github.com/kentcdodds/kentcdodds.com
+[soundcloud]: https://soundcloud.com
 [twitter]: https://twitter.com
 [twitter-widget-javascript-docs]: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview
 [youtube]: https://youtube.com

src/__tests__/soundcloud.js

@@ -0,0 +1,45 @@
+import cases from 'jest-in-case';
+
+import { getHTML, shouldTransform } from '../soundcloud';
+
+cases(
+  'url validation',
+  ({ url, valid }) => {
+    expect(shouldTransform(url)).toBe(valid);
+  },
+  {
+    'non-soundcloud url': {
+      url: 'https://not-a-soundcloud-url.com',
+      valid: false,
+    },
+    'url with soundcloud track id': {
+      url: 'https://api.soundcloud.com/tracks/151129490',
+      valid: false,
+    },
+    'url with soundcloud playlist id': {
+      url: 'https://api.soundcloud.com/playlists/703823211',
+      valid: false,
+    },
+    'url with widget soundcloud subdomain': {
+      url:
+        'https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa',
+      valid: false,
+    },
+    'valid soundcloud url with https protocol': {
+      url: 'https://soundcloud.com/clemenswenners/africa',
+      valid: true,
+    },
+    'valid soundcloud url with http protocol': {
+      url: 'http://soundcloud.com/clemenswenners/africa',
+      valid: true,
+    },
+  }
+);
+
+test('Gets the correct Soundcloud iframe', async () => {
+  const html = await getHTML('https://soundcloud.com/clemenswenners/africa');
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"no\\" src=https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true></iframe>"`
+  );
+});

src/index.js

@@ -3,11 +3,13 @@ import visit from 'unist-util-visit';
 import * as CodeSandboxTransformer from './codesandbox';
 import * as TwitterTransformer from './twitter';
 import * as YouTubeTransformer from './youtube';
+import * as SoundcloudTransformer from './soundcloud';
 
 const transformers = [
   YouTubeTransformer,
   TwitterTransformer,
   CodeSandboxTransformer,
+  SoundcloudTransformer,
 ];
 
 const getUrlString = string => {

src/soundcloud.js

@@ -0,0 +1,13 @@
+import { URL } from 'url';
+
+export const shouldTransform = string =>
+  new URL(string).host === 'soundcloud.com';
+
+const getSoundcloudIFrameSrc = string =>
+  `https://w.soundcloud.com/player?url=${string}&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true`;
+
+export const getHTML = string => {
+  const iframeUrl = getSoundcloudIFrameSrc(string);
+
+  return `<iframe width="100%" height="300" scrolling="no" frameborder="no" src=${iframeUrl}></iframe>`;
+};