feat(Google Slides): Add support for Google Slides

README.md

@@ -60,6 +60,7 @@ empty lines) and replace it with the proper embed-code.
   - [Twitch](#twitch)
   - [Twitter](#twitter)
   - [YouTube](#youtube)
+  - [GoogleSlides](#google-slides)
 - [Options](#options)
   - [customTransformers](#customtransformers)
     - [Properties](#properties)
@@ -639,6 +640,32 @@ https://youtu.be/dQw4w9WgXcQ
 
 </details>
 
+### Google slides
+
+#### Usage
+
+```md
+https://docs.google.com/presentation/d/e/2PACX-1vQfksLBuIJX8qNyFEQh54SgB2_9x4xulcUaHtnXoTpP55NAMFIOqnK-5lFhbhQJPrnIZfgqeSg3ssNu/pub?start=false&loop=false&delayms=3000
+```
+
+<details>
+<summary><b>Result</b></summary>
+
+```html
+<iframe
+  src="https://docs.google.com/presentation/d/e/2PACX-1vQfksLBuIJX8qNyFEQh54SgB2_9x4xulcUaHtnXoTpP55NAMFIOqnK-5lFhbhQJPrnIZfgqeSg3ssNu/embed?start=false&loop=false&delayms=3000"
+  frameborder="0"
+  width="960"
+  height="569"
+  allowfullscreen="true"
+  mozallowfullscreen="true"
+  webkitallowfullscreen="true"
+>
+</iframe>
+```
+
+</details>
+
 ## Options
 
 ### customTransformers

package.json

@@ -22,7 +22,8 @@
     "streamable",
     "twitch",
     "twitter",
-    "youtube"
+    "youtube",
+    "google-slides"
   ],
   "author": "Michaël De Boey <[email protected]> (https://michaeldeboey.be)",
   "license": "MIT",

src/__tests__/__fixtures__/kitchensink.md

@@ -42,3 +42,5 @@ https://twitch.tv/videos/546761743
 https://twitter.com/kentcdodds/status/1078755736455278592
 
 https://youtu.be/dQw4w9WgXcQ
+
+https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000

src/__tests__/plugin.js

@@ -20,6 +20,7 @@ describe('gatsby-remark-embedder', () => {
       'https://instagram.com/p/B60jPE6J8U-': `<blockquote class="instagram-media-from-cache"><div><a href="https://instagram.com/p/B60jPE6J8U-"><p>example</p></a><p>A post shared by <a href="https://instagram.com/michaeldeboey">Michaël De Boey</a> (@michaeldeboey) on<timedatetime="2020-01-02T14:45:30+00:00">Jan 2, 2020 at 6:45am PST</time></p></div></blockquote>`,
       'https://streamable.com/moo': `<iframe class="streamable-embed-from-cache" src="https://streamable.com/o/moo" frameborder="0" scrolling="no" width="1920" height="1080" allowfullscreen></iframe>`,
       'https://twitter.com/kentcdodds/status/1078755736455278592': `<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>`,
+      'https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000': `<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>`,
     });
     const markdownAST = getMarkdownASTForFile('kitchensink', true);
 
@@ -70,6 +71,8 @@ describe('gatsby-remark-embedder', () => {
       <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>
 
       <iframe width=\\"100%\\" height=\\"315\\" src=\\"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0\\" frameBorder=\\"0\\" allow=\\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\\" allowFullScreen></iframe>
+
+      <iframe src=\\"https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/embed?start=false&loop=false&delayms=3000\\" frameborder=\\"0\\" width=\\"960\\" height=\\"569\\" allowfullscreen=\\"true\\" mozallowfullscreen=\\"true\\" webkitallowfullscreen=\\"true\\"></iframe>
       "
     `);
   });
@@ -87,10 +90,10 @@ describe('gatsby-remark-embedder', () => {
     await expect(
       plugin({ cache, markdownAST }, { customTransformers: [errorTransformer] })
     ).rejects.toMatchInlineSnapshot(`
-[Error: The following error appeared while processing 'https://error-site.com/':
+            [Error: The following error appeared while processing 'https://error-site.com/':
 
-An error occurred in ErrorTransformer]
-`);
+            An error occurred in ErrorTransformer]
+          `);
   });
 
   cases(

src/__tests__/transformers/GoogleSlides.js

@@ -0,0 +1,80 @@
+import cases from 'jest-in-case';
+
+import plugin from '../../';
+import {
+  getHTML,
+  getGoogleSlidesFrameSrc,
+  shouldTransform,
+} from '../../transformers/GoogleSlides';
+
+import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
+
+cases(
+  'url validation',
+  ({ url, valid }) => {
+    expect(shouldTransform(url)).toBe(valid);
+  },
+  {
+    'non-GoogleSlides url': {
+      url: 'https://not-a-google-slides-url.com',
+      valid: false,
+    },
+    'non-GoogleDocs url with wrong host': {
+      url: 'https://google.docs.com',
+      valid: false,
+    },
+    'incorrect url with no id': {
+      url:
+        'https://google.docs.com/presentation/d/e/pub?start=false&loop=false&delayms=3000',
+      valid: false,
+    },
+    'incorrect host': {
+      url:
+        'https://google.docs.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000',
+      valid: false,
+    },
+    'full url': {
+      url:
+        'https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000',
+      valid: true,
+    },
+  }
+);
+
+cases(
+  'getYouTubeIFrameSrc',
+  ({ url, iframe }) => {
+    expect(getGoogleSlidesFrameSrc(url)).toBe(iframe);
+  },
+  {
+    'full url': {
+      url:
+        'https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000',
+      iframe:
+        'https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/embed?start=false&loop=false&delayms=3000',
+    },
+  }
+);
+
+test('Gets the correct GoogleSlides iframe', async () => {
+  const html = await getHTML(
+    'https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000'
+  );
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe src=\\"https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/embed?start=false&loop=false&delayms=3000\\" frameborder=\\"0\\" width=\\"960\\" height=\\"569\\" allowfullscreen=\\"true\\" mozallowfullscreen=\\"true\\" webkitallowfullscreen=\\"true\\"></iframe>"`
+  );
+});
+
+test('Plugin can transform Google Slides links', async () => {
+  const markdownAST = getMarkdownASTForFile('GoogleSlides');
+
+  const processedAST = await plugin({ cache, markdownAST });
+
+  expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
+    "<iframe src=\\"https://docs.google.com/presentation/d/e/e/embed?start=false&loop=false&delayms=3000\\" frameborder=\\"0\\" width=\\"960\\" height=\\"569\\" allowfullscreen=\\"true\\" mozallowfullscreen=\\"true\\" webkitallowfullscreen=\\"true\\"></iframe>
+
+    <iframe src=\\"https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/embed?start=false&loop=false&delayms=3000\\" frameborder=\\"0\\" width=\\"960\\" height=\\"569\\" allowfullscreen=\\"true\\" mozallowfullscreen=\\"true\\" webkitallowfullscreen=\\"true\\"></iframe>
+    "
+  `);
+});

src/__tests__/transformers/__fixtures__/GoogleSlides.md

@@ -0,0 +1,3 @@
+https://docs.google.com/presentation/d/e/pub?start=false&loop=false&delayms=3000
+
+https://docs.google.com/presentation/d/e/2PACX-1vR8apkUGyfetdVcF226v6fLMrPspWUlrOYFBFRceHjD_pVgXFFp1Ee1lfsOlUYeMnvMh5DrRT-InOE5/pub?start=false&loop=false&delayms=3000

src/transformers/GoogleSlides.js

@@ -0,0 +1,27 @@
+export const shouldTransform = (url) => {
+  const { host, pathname } = new URL(url);
+
+  return (
+    host === 'docs.google.com' ||
+    (['www.docs.google.com', 'docs.google.com'].includes(host) &&
+      pathname.split('/').length === 6)
+  );
+};
+
+export const getGoogleSlidesFrameSrc = (urlString) => {
+  const { pathname } = new URL(urlString);
+  const splitedPathName = pathname.split('/');
+  const id = splitedPathName[splitedPathName.length - 2];
+
+  const embedUrl = new URL(
+    `https://docs.google.com/presentation/d/e/${id}/embed?start=false&loop=false&delayms=3000`
+  );
+
+  return embedUrl.toString();
+};
+
+export const getHTML = (url) => {
+  const iframeUrl = getGoogleSlidesFrameSrc(url);
+
+  return `<iframe src="${iframeUrl}" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>`;
+};

src/transformers/index.js

@@ -11,6 +11,7 @@ import * as StreamableTransformer from './Streamable';
 import * as TwitchTransformer from './Twitch';
 import * as TwitterTransformer from './Twitter';
 import * as YouTubeTransformer from './YouTube';
+import * as GoogleSlideTransformer from './GoogleSlides';
 
 export const defaultTransformers = [
   CodePenTransformer,
@@ -26,4 +27,5 @@ export const defaultTransformers = [
   TwitchTransformer,
   TwitterTransformer,
   YouTubeTransformer,
+  GoogleSlideTransformer,
 ];