feat(Pinterest): Add support for Pinterest (#73)

* Support Pinterest * Update tests Co-authored-by: Michaël De Boey <[email protected]>
MichaelDeBoey · Mar 2, 2020 · dad289c · dad289c
1 parent ed6f881
commit dad289c
Show file tree

Hide file tree

Showing 7 changed files with 195 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -20,10 +20,11 @@
 
 Trying to embed well known services (like [CodePen][codepen],
 [CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
-[Lichess][lichess], [Slides][slides], [SoundCloud][soundcloud],
-[Spotify][spotify], [Streamable][streamable], [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.
+[Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
+[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
+[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
 
@@ -45,6 +46,7 @@ and replace it with the proper embed-code.
  - [GIPHY](#giphy)
  - [Instagram](#instagram)
  - [Lichess](#lichess)
+ - [Pinterest](#pinterest)
  - [Slides](#slides)
  - [SoundCloud](#soundcloud)
  - [Spotify](#spotify)
@@ -304,6 +306,34 @@ https://instagram.com/p/B60jPE6J8U-
 
 </details>
 
+### Pinterest
+
+The returned HTML snippet from the Pinterest transformer will only be
+automatically recognized as an embedded pin when Pinterest's embed JavaScript is
+included on the page. 
+Since the Pinterest 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-pinterest`][gatsby-plugin-pinterest].
+
+#### Usage
+
+```md
+https://pinterest.com/pin/99360735500167749
+```
+
+<details>
+<summary><b>Result</b></summary>
+
+```html
+<a
+ data-pin-do="embedPin"
+ href="https://pinterest.com/pin/99360735500167749"
+></a>
+```
+
+</details>
+
 ### Lichess
 
 #### Usage
@@ -661,11 +691,13 @@ MIT
 [embedded-tweet-docs]: https://developer.twitter.com/web/embedded-tweets
 [gatsby]: https://github.com/gatsbyjs/gatsby
 [gatsby-plugin-instagram-embed]: https://github.com/jlengstorf/gatsby-plugin-instagram-embed
+[gatsby-plugin-pinterest]: https://github.com/robinmetral/gatsby-plugin-pinterest
 [gatsby-plugin-twitter]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-twitter
 [giphy]: https://giphy.com
 [instagram]: https://instagram.com
 [kentcdodds.com-repo]: https://github.com/kentcdodds/kentcdodds.com
 [lichess]: https://lichess.org
+[pinterest]: https://pinterest.com
 [slides]: https://slides.com
 [soundcloud]: https://soundcloud.com
 [spotify]: https://spotify.com

diff --git a/src/__tests__/__fixtures__/kitchensink.md b/src/__tests__/__fixtures__/kitchensink.md
@@ -27,6 +27,8 @@ https://instagram.com/p/B60jPE6J8U-
 
 https://lichess.org/MPJcy1JW
 
+https://pinterest.com/pin/99360735500167749
+
 https://slides.com/kentcdodds/oss-we-want
 
 https://soundcloud.com/clemenswenners/africa

diff --git a/src/__tests__/plugin.js b/src/__tests__/plugin.js
@@ -53,6 +53,8 @@ describe('gatsby-remark-embedder', () => {
 
  <iframe src=\\"https://lichess.org/embed/MPJcy1JW\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
 
+ <a data-pin-do=\\"embedPin\\" href=\\"https://pinterest.com/pin/99360735500167749\\"></a>
+
  <iframe src=\\"https://slides.com/kentcdodds/oss-we-want/embed\\" width=\\"576\\" height=\\"420\\" scrolling=\\"no\\" frameborder=\\"0\\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 
  <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>

diff --git a/src/__tests__/transformers/Pinterest.js b/src/__tests__/transformers/Pinterest.js
@@ -0,0 +1,102 @@
+import cases from 'jest-in-case';
+
+import plugin from '../..';
+import { getHTML, shouldTransform } from '../../transformers/Pinterest';
+
+import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
+
+cases(
+ 'url validation',
+ ({ url, valid }) => {
+ expect(shouldTransform(url)).toBe(valid);
+ },
+ {
+ 'non-Pinterest url': {
+ url: 'https://not-a-pinterest-url.com',
+ valid: false,
+ },
+ "non-Pinterest url ending with 'pinterest.com'": {
+ url: 'https://this-is-not-pinterest.com',
+ valid: false,
+ },
+ "non-Pinterest url ending with 'pinterest.com' and having '/pin/' in the url": {
+ url: 'https://this-is-not-pinterest.com/pin/99360735500167749',
+ valid: false,
+ },
+ 'board url': {
+ url: 'https://pinterest.com/pinterest/official-news',
+ valid: true,
+ },
+ "board url having 'www' subdomain": {
+ url: 'https://www.pinterest.com/pinterest/official-news',
+ valid: true,
+ },
+ 'pin url': {
+ url: 'https://pinterest.com/pin/99360735500167749',
+ valid: true,
+ },
+ "pin url having 'www' subdomain": {
+ url: 'https://www.pinterest.com/pin/99360735500167749',
+ valid: true,
+ },
+ 'profile url': {
+ url: 'https://pinterest.com/pinterest',
+ valid: true,
+ },
+ "profile url having 'www' subdomain": {
+ url: 'https://www.pinterest.com/pinterest',
+ valid: true,
+ },
+ }
+);
+
+test('Gets the correct Pinterest board link', () => {
+ const html = getHTML('https://pinterest.com/pinterest/official-news');
+
+ expect(html).toMatchInlineSnapshot(
+ `"<a data-pin-do=\\"embedBoard\\" data-pin-board-width=\\"400\\" data-pin-scale-height=\\"240\\" data-pin-scale-width=\\"80\\" href=\\"https://pinterest.com/pinterest/official-news\\"></a>"`
+ );
+});
+
+test('Gets the correct Pinterest pin link', () => {
+ const html = getHTML('https://pinterest.com/pin/99360735500167749');
+
+ expect(html).toMatchInlineSnapshot(
+ `"<a data-pin-do=\\"embedPin\\" href=\\"https://pinterest.com/pin/99360735500167749\\"></a>"`
+ );
+});
+
+test('Gets the correct Pinterest profile link', () => {
+ const html = getHTML('https://pinterest.com/pinterest');
+
+ expect(html).toMatchInlineSnapshot(
+ `"<a data-pin-do=\\"embedUser\\" data-pin-board-width=\\"400\\" data-pin-scale-height=\\"240\\" data-pin-scale-width=\\"80\\" href=\\"https://pinterest.com/pinterest\\"></a>"`
+ );
+});
+
+test('Plugin can transform Pinterest links', async () => {
+ const markdownAST = getMarkdownASTForFile('Pinterest');
+
+ const processedAST = await plugin({ cache, markdownAST });
+
+ expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
+ "<https://not-a-pinterest-url.com>
+
+ <https://this-is-not-pinterest.com>
+
+ <https://this-is-not-pinterest.com/pin/99360735500167749>
+
+ <a data-pin-do=\\"embedBoard\\" data-pin-board-width=\\"400\\" data-pin-scale-height=\\"240\\" data-pin-scale-width=\\"80\\" href=\\"https://pinterest.com/pinterest/official-news\\"></a>
+
+ <a data-pin-do=\\"embedBoard\\" data-pin-board-width=\\"400\\" data-pin-scale-height=\\"240\\" data-pin-scale-width=\\"80\\" href=\\"https://www.pinterest.com/pinterest/official-news\\"></a>
+
+ <a data-pin-do=\\"embedPin\\" href=\\"https://pinterest.com/pin/99360735500167749\\"></a>
+
+ <a data-pin-do=\\"embedPin\\" href=\\"https://www.pinterest.com/pin/99360735500167749\\"></a>
+
+ <a data-pin-do=\\"embedUser\\" data-pin-board-width=\\"400\\" data-pin-scale-height=\\"240\\" data-pin-scale-width=\\"80\\" href=\\"https://pinterest.com/pinterest\\"></a>
+
+ <a data-pin-do=\\"embedUser\\" data-pin-board-width=\\"400\\" data-pin-scale-height=\\"240\\" data-pin-scale-width=\\"80\\" href=\\"https://www.pinterest.com/pinterest\\"></a>
+ "
+ `);
+});
diff --git a/src/__tests__/transformers/__fixtures__/Pinterest.md b/src/__tests__/transformers/__fixtures__/Pinterest.md
@@ -0,0 +1,17 @@
+https://not-a-pinterest-url.com
+
+https://this-is-not-pinterest.com
+
+https://this-is-not-pinterest.com/pin/99360735500167749
+
+https://pinterest.com/pinterest/official-news
+
+https://www.pinterest.com/pinterest/official-news
+
+https://pinterest.com/pin/99360735500167749
+
+https://www.pinterest.com/pin/99360735500167749
+
+https://pinterest.com/pinterest
+
+https://www.pinterest.com/pinterest
diff --git a/src/transformers/Pinterest.js b/src/transformers/Pinterest.js
@@ -0,0 +1,34 @@
+import { URL } from 'url';
+
+import { getTrimmedPathName } from './utils';
+
+const isPin = pathname => pathname.includes('pin/');
+const isProfile = pathname => pathname.split('/').length === 1;
+const isBoard = pathname => pathname.split('/').length === 2;
+
+export const shouldTransform = url => {
+ const { host, pathname } = new URL(url);
+ const trimmedPathName = getTrimmedPathName(pathname);
+
+ return (
+ ['pinterest.com', 'www.pinterest.com'].includes(host) &&
+ (isPin(trimmedPathName) ||
+ isProfile(trimmedPathName) ||
+ isBoard(trimmedPathName))
+ );
+};
+
+export const getHTML = url => {
+ const { pathname } = new URL(url);
+ const trimmedPathName = getTrimmedPathName(pathname);
+
+ if (isPin(trimmedPathName)) {
+ return `<a data-pin-do="embedPin" href="${url}"></a>`;
+ }
+
+ if (isBoard(trimmedPathName)) {
+ return `<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="${url}"></a>`;
+ }
+
+ return `<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="${url}"></a>`;
+};
diff --git a/src/transformers/index.js b/src/transformers/index.js
@@ -3,6 +3,7 @@ import * as CodeSandboxTransformer from './CodeSandbox';
 import * as GIPHYTransformer from './GIPHY';
 import * as InstagramTransformer from './Instagram';
 import * as LichessTransformer from './Lichess';
+import * as PinterestTransformer from './Pinterest';
 import * as SlidesTransformer from './Slides';
 import * as SoundCloudTransformer from './SoundCloud';
 import * as SpotifyTransformer from './Spotify';
@@ -16,6 +17,7 @@ export const defaultTransformers = [
  GIPHYTransformer,
  InstagramTransformer,
  LichessTransformer,
+ PinterestTransformer,
  SlidesTransformer,
  SoundCloudTransformer,
  SpotifyTransformer,