feat(CodePen): added customizable options

Author: talohana

src/__tests__/plugin.js

@@ -1,7 +1,5 @@
 import cases from 'jest-in-case';
-
 import plugin from '../';
-
 import {
   cache,
   getMarkdownASTForFile,
@@ -104,11 +102,12 @@ describe('gatsby-remark-embedder', () => {
 
   cases(
     'passes service-specific options to the transformers',
-    async ({ name, passedOptions }) => {
+    async ({ name, passedOptions, defaultOptions }) => {
       const transformer = {
         getHTML: jest.fn(),
         name,
         shouldTransform: () => true,
+        defaultOptions,
       };
 
       const markdownAST = getMarkdownASTForFile('ServiceTransformer', true);
@@ -117,13 +116,16 @@ describe('gatsby-remark-embedder', () => {
         { cache, markdownAST },
         {
           customTransformers: [transformer],
-          services: { serviceTransformer: { service: 'transformer' } },
+          services: { serviceTransformer: passedOptions },
         }
       );
 
       expect(transformer.getHTML).toHaveBeenCalledWith(
         'https://some-site.com/id/abc',
-        passedOptions
+        {
+          ...(defaultOptions || {}),
+          ...(passedOptions || {}),
+        }
       );
     },
     {
@@ -134,6 +136,15 @@ describe('gatsby-remark-embedder', () => {
       'transformer without name': {
         passedOptions: {},
       },
+      'transformer with default options': {
+        name: 'serviceTransformer',
+        defaultOptions: { width: '100%', height: '100%' },
+      },
+      'transformer with partially provided options': {
+        name: 'serviceTransformer',
+        defaultOptions: { width: '100%', height: '100%' },
+        passedOptions: { height: '50%' },
+      },
     }
   );
 });

src/__tests__/transformers/CodePen.js

@@ -1,8 +1,6 @@
 import cases from 'jest-in-case';
-
 import plugin from '../../';
 import { getHTML, shouldTransform } from '../../transformers/CodePen';
-
 import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
 
 cases(
@@ -78,14 +76,25 @@ cases(
   }
 );
 
-test('Gets the correct CodePen iframe', () => {
+test('Gets the correct CodePen iframe with default dimensions', () => {
   const html = getHTML('https://codepen.io/team/codepen/pen/PNaGbb');
 
   expect(html).toMatchInlineSnapshot(
     `"<iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:100%; height:300px;\\"></iframe>"`
   );
 });
 
+test('Gets the correct CodePen iframe with custom dimensions', () => {
+  const html = getHTML('https://codepen.io/team/codepen/pen/PNaGbb', {
+    width: '500px',
+    height: '500px',
+  });
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:500px; height:500px;\\"></iframe>"`
+  );
+});
+
 test('Plugin can transform CodePen links', async () => {
   const markdownAST = getMarkdownASTForFile('CodePen');
 

src/index.js

@@ -1,5 +1,4 @@
 import visit from 'unist-util-visit';
-
 import { defaultTransformers } from './transformers';
 
 const getUrlString = (url) => {
@@ -45,13 +44,16 @@ export default async (
 
     transformers
       .filter(({ shouldTransform }) => shouldTransform(urlString))
-      .forEach(({ getHTML, name = '' }) => {
+      .forEach(({ getHTML, name = '', defaultOptions = {} }) => {
         transformations.push(async () => {
           try {
             let html = await cache.get(urlString);
 
             if (!html) {
-              html = await getHTML(urlString, services[name] || {});
+              html = await getHTML(urlString, {
+                ...defaultOptions,
+                ...(services[name] || {}),
+              });
               await cache.set(urlString, html);
             }
 

src/transformers/CodePen.js

@@ -7,8 +7,16 @@ export const shouldTransform = (url) => {
   );
 };
 
-export const getHTML = (url) => {
+export const name = 'CodePen';
+
+export const defaultOptions = {
+  width: '100%',
+  height: '300px',
+};
+
+export const getHTML = (url, options) => {
+  const { width, height } = options || defaultOptions;
   const iframeUrl = url.replace('/pen/', '/embed/preview/');
 
-  return `<iframe src="${iframeUrl}" style="width:100%; height:300px;"></iframe>`;
+  return `<iframe src="${iframeUrl}" style="width:${width}; height:${height};"></iframe>`;
 };