feat(Facebook): Add support for Facebook

README.md

@@ -25,12 +25,12 @@
 ## The problem
 
 Trying to embed well known services (like [CodePen][codepen],
-[CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
-[Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
-[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
-[Twitch][twitch], [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.
+[CodeSandbox][codesandbox], [Facebook][facebook], [GIPHY][giphy],
+[Instagram][instagram], [Lichess][lichess], [Pinterest][pinterest],
+[Slides][slides], [SoundCloud][soundcloud], [Spotify][spotify],
+[Streamable][streamable], [Twitch][twitch], [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
 
@@ -49,6 +49,7 @@ empty lines) and replace it with the proper embed-code.
 - [Supported services](#supported-services)
   - [CodePen](#codepen)
   - [CodeSandbox](#codesandbox)
+  - [Facebook](#facebook)
   - [GIPHY](#giphy)
   - [Instagram](#instagram)
   - [Lichess](#lichess)
@@ -209,6 +210,32 @@ https://codesandbox.io/s/ynn88nx9x?view=split
 
 </details>
 
+### Facebook
+
+#### Usage
+
+```md
+https://facebook.com/23859431504/videos/688096388646012
+```
+
+<details>
+<summary><b>Result</b></summary>
+
+```html
+<iframe
+  src="https://facebook.com/plugins/video.php?href=https://facebook.com/23859431504/videos/688096388646012"
+  width="560"
+  height="315"
+  style="border:none;overflow:hidden"
+  scrolling="no"
+  frameborder="0"
+  allowtransparency="true"
+  allowfullscreen="true"
+></iframe>
+```
+
+</details>
+
 ### GIPHY
 
 #### Usage

src/__tests__/transformers/Facebook.js

@@ -0,0 +1,100 @@
+import cases from 'jest-in-case';
+
+import plugin from '../../';
+import { getHTML, shouldTransform } from '../../transformers/Facebook';
+
+import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
+
+cases(
+  'url validation',
+  ({ url, valid }) => {
+    expect(shouldTransform(url)).toBe(valid);
+  },
+  {
+    'non-Facebook url': {
+      url: 'https://not-the-facebook-website.com',
+      valid: false,
+    },
+    "non-Facebook url ending with 'facebook.com'": {
+      url: 'https://not-facebook.com',
+      valid: false,
+    },
+    "non-Facebook url ending with 'facebook.com' having '/videos/'": {
+      url: 'https://not-facebook.com/videos',
+      valid: false,
+    },
+    "non-Facebook url ending with 'facebook.com' having proper path": {
+      url: 'https://not-facebook.com/23859431504/videos/688096388646012',
+      valid: false,
+    },
+    'Facebook home page': {
+      url: 'https://facebook.com',
+      valid: false,
+    },
+    'Facebook user page': {
+      url: 'https://www.facebook.com/profile.php?id=7933107',
+      valid: false,
+    },
+    'Facebook photo post': {
+      url: 'https://www.facebook.com/photo?fbid=10115396272683000',
+      valid: false,
+    },
+    'Facebook video post': {
+      url: 'https://facebook.com/23859431504/videos/688096388646012',
+      valid: true,
+    },
+    "Facebook video post having 'www' subdomain": {
+      url: 'https://www.facebook.com/23859431504/videos/688096388646012',
+      valid: true,
+    },
+    'Facebook named video post': {
+      url: 'https://facebook.com/RandyRogersBand/videos/688096388646012',
+      valid: true,
+    },
+    "Facebook named video post having 'www' subdomain": {
+      url: 'https://www.facebook.com/RandyRogersBand/videos/688096388646012',
+      valid: true,
+    },
+  }
+);
+
+test('Gets the correct Facebook iframe', () => {
+  const html = getHTML(
+    'https://facebook.com/23859431504/videos/688096388646012'
+  );
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe src=\\"https://facebook.com/plugins/video.php?href=https://facebook.com/23859431504/videos/688096388646012\\" width=\\"560\\" height=\\"315\\" style=\\"border:none;overflow:hidden\\" scrolling=\\"no\\" frameborder=\\"0\\" allowTransparency=\\"true\\" allowFullScreen=\\"true\\"></iframe>"`
+  );
+});
+
+test('Plugin can transform Facebook links', async () => {
+  const markdownAST = getMarkdownASTForFile('Facebook');
+
+  const processedAST = await plugin({ cache, markdownAST });
+
+  expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
+      "<https://not-the-facebook-website.com>
+
+      <https://not-facebook.com>
+
+      <https://not-facebook.com/videos>
+
+      <https://not-facebook.com/23859431504/videos/688096388646012>
+
+      <https://facebook.com>
+
+      <https://www.facebook.com/profile.php?id=7933107>
+
+      <https://www.facebook.com/photo?fbid=10115396272683000>
+
+      <iframe src=\\"https://facebook.com/plugins/video.php?href=https://facebook.com/23859431504/videos/688096388646012\\" width=\\"560\\" height=\\"315\\" style=\\"border:none;overflow:hidden\\" scrolling=\\"no\\" frameborder=\\"0\\" allowTransparency=\\"true\\" allowFullScreen=\\"true\\"></iframe>
+
+      <iframe src=\\"https://facebook.com/plugins/video.php?href=https://www.facebook.com/23859431504/videos/688096388646012\\" width=\\"560\\" height=\\"315\\" style=\\"border:none;overflow:hidden\\" scrolling=\\"no\\" frameborder=\\"0\\" allowTransparency=\\"true\\" allowFullScreen=\\"true\\"></iframe>
+
+      <iframe src=\\"https://facebook.com/plugins/video.php?href=https://facebook.com/RandyRogersBand/videos/688096388646012\\" width=\\"560\\" height=\\"315\\" style=\\"border:none;overflow:hidden\\" scrolling=\\"no\\" frameborder=\\"0\\" allowTransparency=\\"true\\" allowFullScreen=\\"true\\"></iframe>
+
+      <iframe src=\\"https://facebook.com/plugins/video.php?href=https://www.facebook.com/RandyRogersBand/videos/688096388646012\\" width=\\"560\\" height=\\"315\\" style=\\"border:none;overflow:hidden\\" scrolling=\\"no\\" frameborder=\\"0\\" allowTransparency=\\"true\\" allowFullScreen=\\"true\\"></iframe>
+      "
+    `);
+});

src/__tests__/transformers/__fixtures__/Facebook.md

@@ -0,0 +1,21 @@
+https://not-the-facebook-website.com
+
+https://not-facebook.com
+
+https://not-facebook.com/videos
+
+https://not-facebook.com/23859431504/videos/688096388646012
+
+https://facebook.com
+
+https://www.facebook.com/profile.php?id=7933107
+
+https://www.facebook.com/photo?fbid=10115396272683000
+
+https://facebook.com/23859431504/videos/688096388646012
+
+https://www.facebook.com/23859431504/videos/688096388646012
+
+https://facebook.com/RandyRogersBand/videos/688096388646012
+
+https://www.facebook.com/RandyRogersBand/videos/688096388646012

src/transformers/Facebook.js

@@ -0,0 +1,13 @@
+export const shouldTransform = (url) => {
+  const { host, pathname } = new URL(url);
+
+  return (
+    ['facebook.com', 'www.facebook.com'].includes(host) &&
+    pathname.includes('/videos/')
+  );
+};
+
+export const getHTML = (string) => {
+  const src = `https://facebook.com/plugins/video.php?href=${string}`;
+  return `<iframe src="${src}" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>`;
+};

src/transformers/index.js

@@ -1,5 +1,6 @@
 import * as CodePenTransformer from './CodePen';
 import * as CodeSandboxTransformer from './CodeSandbox';
+import * as FacebookTransformer from './Facebook';
 import * as GIPHYTransformer from './GIPHY';
 import * as InstagramTransformer from './Instagram';
 import * as LichessTransformer from './Lichess';
@@ -15,6 +16,7 @@ import * as YouTubeTransformer from './YouTube';
 export const defaultTransformers = [
   CodePenTransformer,
   CodeSandboxTransformer,
+  FacebookTransformer,
   GIPHYTransformer,
   InstagramTransformer,
   LichessTransformer,