From b1a996072bc5a2296b99e7695505aae278b503c8 Mon Sep 17 00:00:00 2001 From: Brad Garropy Date: Fri, 5 Jun 2020 23:55:22 -0500 Subject: [PATCH 1/5] facebook video embeds. --- package.json | 1 + src/transformers/Facebook.js | 17 +++++++++++++++++ src/transformers/index.js | 2 ++ 3 files changed, 20 insertions(+) create mode 100644 src/transformers/Facebook.js diff --git a/package.json b/package.json index f7006061..1ebc3eac 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "dependencies": { "@babel/runtime": "^7.9.6", "fetch-retry": "^3.1.0", + "he": "^1.2.0", "node-fetch": "^2.6.0", "unist-util-visit": "^2.0.2" }, diff --git a/src/transformers/Facebook.js b/src/transformers/Facebook.js new file mode 100644 index 00000000..3a8c4c02 --- /dev/null +++ b/src/transformers/Facebook.js @@ -0,0 +1,17 @@ +const he = require('he'); + +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 encoded = he.encode(string); + const src = `https://www.facebook.com/plugin/video.php?href=${encoded}`; + + return ``; +}; diff --git a/src/transformers/index.js b/src/transformers/index.js index 50483ca3..256ac475 100644 --- a/src/transformers/index.js +++ b/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, From 9a27e06b311a5608366cf8a21a4d8ca1f8dedfa8 Mon Sep 17 00:00:00 2001 From: Brad Garropy Date: Sat, 6 Jun 2020 21:55:12 -0500 Subject: [PATCH 2/5] remove he dependency. --- package.json | 1 - src/transformers/Facebook.js | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index 1ebc3eac..f7006061 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "dependencies": { "@babel/runtime": "^7.9.6", "fetch-retry": "^3.1.0", - "he": "^1.2.0", "node-fetch": "^2.6.0", "unist-util-visit": "^2.0.2" }, diff --git a/src/transformers/Facebook.js b/src/transformers/Facebook.js index 3a8c4c02..adefc939 100644 --- a/src/transformers/Facebook.js +++ b/src/transformers/Facebook.js @@ -1,5 +1,3 @@ -const he = require('he'); - export const shouldTransform = (url) => { const { host, pathname } = new URL(url); @@ -10,8 +8,6 @@ export const shouldTransform = (url) => { }; export const getHTML = (string) => { - const encoded = he.encode(string); - const src = `https://www.facebook.com/plugin/video.php?href=${encoded}`; - + const src = `https://www.facebook.com/plugins/video.php?href=${string}`; return ``; }; From ec020d16b3c6692506c8e50443e6211b730a0f8f Mon Sep 17 00:00:00 2001 From: Brad Garropy Date: Sat, 6 Jun 2020 21:55:40 -0500 Subject: [PATCH 3/5] update documentation. --- README.md | 39 +++++++++++++++++++++++++++++++++------ 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c0759db5..d38373fa 100644 --- a/README.md +++ b/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 +### Facebook + +#### Usage + +```md +https://www.facebook.com/23859431504/videos/688096388646012 +``` + +
+Result + +```html + +``` + +
+ ### GIPHY #### Usage From 0dbdedb6de132366186a24c970d7b2e32b9fbe76 Mon Sep 17 00:00:00 2001 From: Brad Garropy Date: Sat, 6 Jun 2020 22:38:59 -0500 Subject: [PATCH 4/5] drop www from readme url. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d38373fa..18c18ba1 100644 --- a/README.md +++ b/README.md @@ -215,7 +215,7 @@ https://codesandbox.io/s/ynn88nx9x?view=split #### Usage ```md -https://www.facebook.com/23859431504/videos/688096388646012 +https://facebook.com/23859431504/videos/688096388646012 ```
@@ -223,7 +223,7 @@ https://www.facebook.com/23859431504/videos/688096388646012 ```html "` + ); +}); + +test('Plugin can transform Facebook links', async () => { + const markdownAST = getMarkdownASTForFile('Facebook'); + + const processedAST = await plugin({ cache, markdownAST }); + + expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(` + " + + + + + + + + + + + + + + + + + + + + + " + `); +}); diff --git a/src/__tests__/transformers/__fixtures__/Facebook.md b/src/__tests__/transformers/__fixtures__/Facebook.md new file mode 100644 index 00000000..fae48936 --- /dev/null +++ b/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 diff --git a/src/transformers/Facebook.js b/src/transformers/Facebook.js index adefc939..0d0c40a0 100644 --- a/src/transformers/Facebook.js +++ b/src/transformers/Facebook.js @@ -8,6 +8,6 @@ export const shouldTransform = (url) => { }; export const getHTML = (string) => { - const src = `https://www.facebook.com/plugins/video.php?href=${string}`; + const src = `https://facebook.com/plugins/video.php?href=${string}`; return ``; };