fix(Twitch): Fix Twitch embed (#131)

BREAKING CHANGE: You'll now need to pass a required `parent` option whenever you're using the Twitch service BREAKING CHANGE: Twitch embeds can only be embedded on HTTPS websites. Check out the Gatsby docs for setting this up when developing locally.
MichaelDeBoey · Jul 23, 2020 · 314de7e · 314de7e
1 parent 77658d0
commit 314de7e
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -532,6 +532,9 @@ https://streamable.com/moo
 
 ### Twitch
 
+Twitch embeds can only be embedded on HTTPS websites. Check out [the Gatsby
+docs][gatsby-https-docs] for setting this up when developing locally.
+
 #### Usage
 
 ```md
@@ -554,6 +557,70 @@ https://twitch.tv/videos/546761743
 
 </details>
 
+#### Options
+
+All options should go under the `Twitch` namespace.
+
+| name   | Type                  | Required | Default | Description                                                                                           |
+| ------ | --------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| parent | `string` / `string[]` | ✅       |         | Domain(s) that will be embedding Twitch. You must have one parent key for each domain your site uses. |
+
+##### parent
+
+You could either put in (a) hardcoded value(s) _or_ you could use environment
+variables that are available during the build process.
+
+###### Netlify
+
+Netlify has the `URL`, `DEPLOY_URL` and `DEPLOY_PRIME_URL` environment
+variables. Take a look at [the Netlify docs][netlify-environment-variables-docs]
+for more info.
+
+<details>
+<summary><b>Example</b></summary>
+
+```js
+const GatsbyRemarkEmbedderOptions = {
+  services: {
+    Twitch: {
+      parent: [
+        env.process.URL,
+        env.process.DEPLOY_URL,
+        env.process.DEPLOY_PRIME_URL,
+
+        // Other domains here...
+      ],
+    },
+  },
+};
+```
+
+</details>
+
+###### Vercel
+
+Vercel has the `VERCEL_URL` environment variable. Take a look at [the Vercel
+docs][vercel-environment-variables-docs] for more info.
+
+<details>
+<summary><b>Example</b></summary>
+
+```js
+const GatsbyRemarkEmbedderOptions = {
+  services: {
+    Twitch: {
+      parent: [
+        env.process.VERCEL_URL,
+
+        // Other domains here...
+      ],
+    },
+  },
+};
+```
+
+</details>
+
 ### Twitter
 
 The returned HTML snippet from the Twitter transformer will only be
@@ -796,6 +863,7 @@ MIT
 [codesandbox]: https://codesandbox.io
 [embedded-tweet-docs]: https://developer.twitter.com/web/embedded-tweets
 [gatsby]: https://github.com/gatsbyjs/gatsby
+[gatsby-https-docs]: https://gatsbyjs.org/docs/local-https
 [gatsby-plugin-instagram-embed]: https://github.com/MichaelDeBoey/gatsby-plugin-instagram-embed
 [gatsby-plugin-mdx]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx
 [gatsby-plugin-pinterest]: https://github.com/robinmetral/gatsby-plugin-pinterest
@@ -805,6 +873,7 @@ MIT
 [instagram]: https://instagram.com
 [kentcdodds.com-repo]: https://github.com/kentcdodds/kentcdodds.com
 [lichess]: https://lichess.org
+[netlify-environment-variable-docs]: https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata
 [pinterest]: https://pinterest.com
 [slides]: https://slides.com
 [soundcloud]: https://soundcloud.com
@@ -813,5 +882,6 @@ MIT
 [twitch]: https://twitch.tv
 [twitter]: https://twitter.com
 [twitter-widget-javascript-docs]: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview
+[vercel-environment-variable-docs]: https://vercel.com/docs/v2/build-step?query=Build#system-environment-variables
 [youtube]: https://youtube.com
 <!-- prettier-ignore-end -->
diff --git a/src/__tests__/plugin.js b/src/__tests__/plugin.js
@@ -23,7 +23,16 @@ describe('gatsby-remark-embedder', () => {
     });
     const markdownAST = getMarkdownASTForFile('kitchensink', true);
 
-    const processedAST = await plugin({ cache, markdownAST });
+    const processedAST = await plugin(
+      { cache, markdownAST },
+      {
+        services: {
+          Twitch: {
+            parent: 'embed.example.com',
+          },
+        },
+      }
+    );
 
     expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
       "# Heading 1
@@ -65,7 +74,7 @@ describe('gatsby-remark-embedder', () => {
 
       <iframe class=\\"streamable-embed-from-cache\\" src=\\"https://streamable.com/o/moo\\" frameborder=\\"0\\" scrolling=\\"no\\" width=\\"1920\\" height=\\"1080\\" allowfullscreen></iframe>
 
-      <iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+      <iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
       <blockquote class=\\"twitter-tweet-from-cache\\"><p lang=\\"en\\" dir=\\"ltr\\">example</p>&mdash; Kent C. Dodds (@kentcdodds) <a href=\\"https://twitter.com/kentcdodds/status/1078755736455278592\\">December 28, 2018</a></blockquote>
 

diff --git a/src/__tests__/transformers/Twitch.js b/src/__tests__/transformers/Twitch.js
@@ -4,6 +4,7 @@ import plugin from '../..';
 import {
   getHTML,
   getTwitchIFrameSrc,
+  normalizeParent,
   shouldTransform,
 } from '../../transformers/Twitch';
 
@@ -179,18 +180,44 @@ cases(
   }
 );
 
+cases(
+  'normalizeParent',
+  ({ normalizedParent, parent }) => {
+    expect(normalizeParent(parent)).toBe(normalizedParent);
+  },
+  [
+    { parent: 'embed.example.com', normalizedParent: 'embed.example.com' },
+    { parent: ['embed.example.com'], normalizedParent: 'embed.example.com' },
+    {
+      parent: ['embed.example.com', 'streamernews.example.com'],
+      normalizedParent: 'embed.example.com&parent=streamernews.example.com',
+    },
+  ]
+);
+
 test('Gets the correct Twitch iframe', () => {
-  const html = getHTML('https://twitch.tv/videos/546761743');
+  const html = getHTML('https://twitch.tv/videos/546761743', {
+    parent: 'embed.example.com',
+  });
 
   expect(html).toMatchInlineSnapshot(
-    `"<iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>"`
+    `"<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>"`
   );
 });
 
 test('Plugin can transform Twitch links', async () => {
   const markdownAST = getMarkdownASTForFile('Twitch');
 
-  const processedAST = await plugin({ cache, markdownAST });
+  const processedAST = await plugin(
+    { cache, markdownAST },
+    {
+      services: {
+        Twitch: {
+          parent: 'embed.example.com',
+        },
+      },
+    }
+  );
 
   expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
     "<https://not-a-twitch-url.tv>
@@ -209,33 +236,33 @@ test('Plugin can transform Twitch links', async () => {
 
     <https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame>
 
-    <iframe src=\\"https://player.twitch.tv?channel=jlengstorf\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?channel=jlengstorf&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?channel=jlengstorf\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?channel=jlengstorf&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?channel=jlengstorf\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?channel=jlengstorf&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
-    <iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
+    <iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
     "
   `);
 });
diff --git a/src/transformers/Twitch.js b/src/transformers/Twitch.js
@@ -83,8 +83,20 @@ export const getTwitchIFrameSrc = (urlString) => {
   )}`;
 };
 
-export const getHTML = (url) => {
-  const iframeUrl = getTwitchIFrameSrc(url);
+export const normalizeParent = (parent) => {
+  if (Array.isArray(parent)) {
+    return parent.join('&parent=');
+  }
+
+  return parent;
+};
+
+export const getHTML = (url, { parent }) => {
+  const iframeUrl = `${getTwitchIFrameSrc(url)}&parent=${normalizeParent(
+    parent
+  )}`;
 
   return `<iframe src="${iframeUrl}" height="300" width="100%" frameborder="0" scrolling="no" allowfullscreen></iframe>`;
 };
+
+export const name = 'Twitch';