From fcf2a9addc96dc548713ef63a4d7f9c48746fe3e Mon Sep 17 00:00:00 2001 From: nicknish Date: Wed, 4 Sep 2019 03:46:28 -0700 Subject: [PATCH 01/13] Add soundcloud embeds --- src/__tests__/soundcloud.js | 41 +++++++++++++++++++++++++++++++++++++ src/soundcloud.js | 35 +++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 src/__tests__/soundcloud.js create mode 100644 src/soundcloud.js diff --git a/src/__tests__/soundcloud.js b/src/__tests__/soundcloud.js new file mode 100644 index 00000000..4e102939 --- /dev/null +++ b/src/__tests__/soundcloud.js @@ -0,0 +1,41 @@ +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, + }, + 'soundcloud full-name url': { + url: 'https://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( + `""` + ); +}); diff --git a/src/soundcloud.js b/src/soundcloud.js new file mode 100644 index 00000000..455ed7b0 --- /dev/null +++ b/src/soundcloud.js @@ -0,0 +1,35 @@ +import { URL } from 'url'; + +export const shouldTransform = string => { + return new URL(string).host === 'soundcloud.com'; +}; + +const getSoundcloudIFrameSrc = string => { + return ( + `https://w.soundcloud.com/player/` + + `?url=${encodeURIComponent(string)}` + + `&color=%23ff5500` + + `&auto_play=false` + + `&hide_related=false` + + `&show_comments=true` + + `&show_user=true` + + `&show_reposts=false` + + `&show_teaser=true` + + `&visual=true` + ); +}; + +export const getHTML = string => { + const iframeUrl = getSoundcloudIFrameSrc(string); + + return ( + `` + ); +}; From 148ceff6f2729578d0e50dded5093b0e9b0f02cc Mon Sep 17 00:00:00 2001 From: nicknish Date: Wed, 4 Sep 2019 03:50:31 -0700 Subject: [PATCH 02/13] Update docs with soundcloud embed --- README.md | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1170e47f..7fd1cad2 100644 --- a/README.md +++ b/README.md @@ -97,10 +97,9 @@ https://codesandbox.io/s/ynn88nx9x?view=split The returned HTML snippet from the Twitter transformer will only be automatically recognized as an [Embedded Tweet][embedded-tweet-docs] when [Twitter's widget JavaScript][twitter-widget-javascript-docs] is included on the -page. -Since the Twitter transformer doesn't include this JavaScript (because we don't -want to include it multiple times on a page when having multiple embeds), you -have to include it yourself. The recommended way of including it is by using +page. Since the Twitter transformer doesn't include this JavaScript (because we +don't want to include it multiple times on a page when having multiple embeds), +you have to include it yourself. The recommended way of including it is by using [`gatsby-plugin-twitter`][gatsby-plugin-twitter]. #### Usage @@ -160,6 +159,27 @@ https://youtu.be/dQw4w9WgXcQ > ``` +### Soundcloud + +#### Usage + +```md +https://soundcloud.com/clemenswenners/africa +``` + +#### Result + +```md + +``` + ## Inspiration This whole library was extracted out of Kent C. Dodds' [personal From 556622732f4d53875f5e6887cc88a93a4ae85366 Mon Sep 17 00:00:00 2001 From: nicknish Date: Wed, 4 Sep 2019 04:09:21 -0700 Subject: [PATCH 03/13] Add line-break to Twitter docs --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7fd1cad2..f2611309 100644 --- a/README.md +++ b/README.md @@ -97,9 +97,11 @@ https://codesandbox.io/s/ynn88nx9x?view=split The returned HTML snippet from the Twitter transformer will only be automatically recognized as an [Embedded Tweet][embedded-tweet-docs] when [Twitter's widget JavaScript][twitter-widget-javascript-docs] is included on the -page. Since the Twitter transformer doesn't include this JavaScript (because we -don't want to include it multiple times on a page when having multiple embeds), -you have to include it yourself. The recommended way of including it is by using +page. + +Since the Twitter transformer doesn't include this JavaScript (because we don't +want to include it multiple times on a page when having multiple embeds), you +have to include it yourself. The recommended way of including it is by using [`gatsby-plugin-twitter`][gatsby-plugin-twitter]. #### Usage From 35460662a914bdca588b06a3f9514e46b157a7f4 Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 12:06:24 -0700 Subject: [PATCH 04/13] Revert docs line-break in Twitter docs --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index f2611309..84b6321b 100644 --- a/README.md +++ b/README.md @@ -97,8 +97,7 @@ https://codesandbox.io/s/ynn88nx9x?view=split The returned HTML snippet from the Twitter transformer will only be automatically recognized as an [Embedded Tweet][embedded-tweet-docs] when [Twitter's widget JavaScript][twitter-widget-javascript-docs] is included on the -page. - +page. Since the Twitter transformer doesn't include this JavaScript (because we don't want to include it multiple times on a page when having multiple embeds), you have to include it yourself. The recommended way of including it is by using From 0a2dff564648234cd5e3ec5605a37ac4061b3bcb Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 12:15:05 -0700 Subject: [PATCH 05/13] PR suggestion: Use implicit function returns --- src/soundcloud.js | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/soundcloud.js b/src/soundcloud.js index 455ed7b0..7a5d5480 100644 --- a/src/soundcloud.js +++ b/src/soundcloud.js @@ -1,23 +1,19 @@ import { URL } from 'url'; -export const shouldTransform = string => { - return new URL(string).host === 'soundcloud.com'; -}; +export const shouldTransform = string => + new URL(string).host === 'soundcloud.com'; -const getSoundcloudIFrameSrc = string => { - return ( - `https://w.soundcloud.com/player/` + - `?url=${encodeURIComponent(string)}` + - `&color=%23ff5500` + - `&auto_play=false` + - `&hide_related=false` + - `&show_comments=true` + - `&show_user=true` + - `&show_reposts=false` + - `&show_teaser=true` + - `&visual=true` - ); -}; +const getSoundcloudIFrameSrc = string => + `https://w.soundcloud.com/player/` + + `?url=${encodeURIComponent(string)}` + + `&color=%23ff5500` + + `&auto_play=false` + + `&hide_related=false` + + `&show_comments=true` + + `&show_user=true` + + `&show_reposts=false` + + `&show_teaser=true` + + `&visual=true`; export const getHTML = string => { const iframeUrl = getSoundcloudIFrameSrc(string); From 22f4d54e56fd503029433a7ebab19e06a1a3ad91 Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 12:17:59 -0700 Subject: [PATCH 06/13] PR suggestions: Remove encoding of iframe soundcloud url and update embed defaults --- src/__tests__/soundcloud.js | 2 +- src/soundcloud.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/__tests__/soundcloud.js b/src/__tests__/soundcloud.js index 4e102939..287d6127 100644 --- a/src/__tests__/soundcloud.js +++ b/src/__tests__/soundcloud.js @@ -36,6 +36,6 @@ test('Gets the correct Soundcloud iframe', async () => { const html = await getHTML('https://soundcloud.com/clemenswenners/africa'); expect(html).toMatchInlineSnapshot( - `""` + `""` ); }); diff --git a/src/soundcloud.js b/src/soundcloud.js index 7a5d5480..2ea37c8c 100644 --- a/src/soundcloud.js +++ b/src/soundcloud.js @@ -4,15 +4,15 @@ export const shouldTransform = string => new URL(string).host === 'soundcloud.com'; const getSoundcloudIFrameSrc = string => - `https://w.soundcloud.com/player/` + - `?url=${encodeURIComponent(string)}` + - `&color=%23ff5500` + + `https://w.soundcloud.com/player` + + `?url=${string}` + + `&color=ff5500` + `&auto_play=false` + - `&hide_related=false` + + `&hide_related=true` + `&show_comments=true` + `&show_user=true` + `&show_reposts=false` + - `&show_teaser=true` + + `&show_teaser=false` + `&visual=true`; export const getHTML = string => { From fbdbd99b9186d64fd96d903a9ae842aa3d4a2d9b Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 12:27:43 -0700 Subject: [PATCH 07/13] PR suggestions: Update docs to reflect Soundcloud iframe src url changes --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 84b6321b..657b947a 100644 --- a/README.md +++ b/README.md @@ -177,7 +177,7 @@ https://soundcloud.com/clemenswenners/africa scrolling="no" frameborder="no" allow="autoplay" - src=https://w.soundcloud.com/player/?url=https%3A%2F%2Fsoundcloud.com%2Fclemenswenners%2Fafrica&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true + 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 > ``` From 0fd582fdf38ee74de5cf7a7af72e6ced66bdb2fe Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 12:40:42 -0700 Subject: [PATCH 08/13] PR Suggestions: Remove trailing slash in soundcloud URL before params --- src/__tests__/soundcloud.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/soundcloud.js b/src/__tests__/soundcloud.js index 287d6127..f0f70385 100644 --- a/src/__tests__/soundcloud.js +++ b/src/__tests__/soundcloud.js @@ -22,7 +22,7 @@ cases( }, 'url with widget soundcloud subdomain': { url: - 'https://w.soundcloud.com/player/?url=https://soundcloud.com/clemenswenners/africa', + 'https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa', valid: false, }, 'soundcloud full-name url': { From 220e58358a474c44042f532fee1b4f6159fadd5d Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 12:41:24 -0700 Subject: [PATCH 09/13] Update soundcloud embed tests to explicitly show http soundcloud urls are valid --- src/__tests__/soundcloud.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/__tests__/soundcloud.js b/src/__tests__/soundcloud.js index f0f70385..d3f28e7e 100644 --- a/src/__tests__/soundcloud.js +++ b/src/__tests__/soundcloud.js @@ -25,10 +25,14 @@ cases( 'https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa', valid: false, }, - 'soundcloud full-name url': { + '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, + }, } ); From 88dbf59d927fa99e5564ed03b92e2a3b39499466 Mon Sep 17 00:00:00 2001 From: nicknish Date: Sun, 15 Sep 2019 13:13:56 -0700 Subject: [PATCH 10/13] PR Suggestions: Update code style of Soundcloud html and url generation to 1-line template literal --- src/soundcloud.js | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/soundcloud.js b/src/soundcloud.js index 2ea37c8c..bf9e61f4 100644 --- a/src/soundcloud.js +++ b/src/soundcloud.js @@ -4,28 +4,10 @@ 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`; + `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 ( - `` - ); + return ``; }; From c9964d5ccb72d45d2330ad28a2a1cf546473a58b Mon Sep 17 00:00:00 2001 From: nicknish Date: Tue, 17 Sep 2019 19:40:34 -0700 Subject: [PATCH 11/13] Add Soundcloud transformer to transform list --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index 0fee17b6..47a86b2b 100644 --- a/src/index.js +++ b/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 => { From 2d2b37aaea2c39f8172d1415c85c6c4c083d8185 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 18 Sep 2019 13:39:40 +0200 Subject: [PATCH 12/13] Cleanup README --- README.md | 50 ++++++++++++++++++++++++++------------------------ 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 657b947a..35e5703b 100644 --- a/README.md +++ b/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,27 @@ https://codesandbox.io/s/ynn88nx9x?view=split > ``` +### SoundCloud + +#### Usage + +```md +https://soundcloud.com/clemenswenners/africa +``` + +#### Result + +```md + +``` + ### Twitter The returned HTML snippet from the Twitter transformer will only be @@ -160,27 +182,6 @@ https://youtu.be/dQw4w9WgXcQ > ``` -### Soundcloud - -#### Usage - -```md -https://soundcloud.com/clemenswenners/africa -``` - -#### Result - -```md - -``` - ## Inspiration This whole library was extracted out of Kent C. Dodds' [personal @@ -257,6 +258,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 From b2acd997a0ec7242147d8f57d6f4e86010237337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 18 Sep 2019 13:40:21 +0200 Subject: [PATCH 13/13] Don't allow autoplay --- README.md | 1 - src/__tests__/soundcloud.js | 2 +- src/soundcloud.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 35e5703b..f4635c48 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,6 @@ https://soundcloud.com/clemenswenners/africa height="300" scrolling="no" frameborder="no" - allow="autoplay" 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 > ``` diff --git a/src/__tests__/soundcloud.js b/src/__tests__/soundcloud.js index d3f28e7e..a0cbc3fa 100644 --- a/src/__tests__/soundcloud.js +++ b/src/__tests__/soundcloud.js @@ -40,6 +40,6 @@ test('Gets the correct Soundcloud iframe', async () => { const html = await getHTML('https://soundcloud.com/clemenswenners/africa'); expect(html).toMatchInlineSnapshot( - `""` + `""` ); }); diff --git a/src/soundcloud.js b/src/soundcloud.js index bf9e61f4..49b76d5e 100644 --- a/src/soundcloud.js +++ b/src/soundcloud.js @@ -9,5 +9,5 @@ const getSoundcloudIFrameSrc = string => export const getHTML = string => { const iframeUrl = getSoundcloudIFrameSrc(string); - return ``; + return ``; };