diff --git a/src/__tests__/transformers/StackBlitz.js b/src/__tests__/transformers/StackBlitz.js new file mode 100644 index 00000000..bfcc66c8 --- /dev/null +++ b/src/__tests__/transformers/StackBlitz.js @@ -0,0 +1,58 @@ +import cases from 'jest-in-case'; + +import plugin from '../../'; +import { getHTML, shouldTransform } from '../../transformers/StackBlitz'; + +import { cache, getMarkdownASTForFile, mdastToHtml } from '../helpers'; + +cases( + 'url validation', + ({ url, valid }) => { + expect(shouldTransform(url)).toBe(valid); + }, + { + 'non-StackBlitz url': { + url: 'https://not-a-stackblitz-url.com', + valid: false, + }, + "non-StackBlitz url ending with 'stackblitz.com'": { + url: 'https://this-is-not-stackblitz.com', + valid: false, + }, + "non-CodeSandbox url ending with 'stackblitz.com' having '/edit/'": { + url: 'https://this-is-not-stackblitz.com/edit/start-to-source-1-ng-template', + valid: false, + }, + 'embed url': { + url: 'https://stackblitz.com/edit/start-to-source-1-ng-template', + valid: true, + }, + 'embed url with parameters': { + url: 'https://stackblitz.com/edit/start-to-source-1-ng-template?file=src/app/app.component.ts', + valid: true, + }, + } +); + +test('Gets the correct StackBlitz iframe', () => { + const html = getHTML('https://stackblitz.com/edit/start-to-source-1-ng-template'); + + expect(html).toMatchInlineSnapshot( + `` + ); +}); + +test('Plugin can transform StackBlitz links', async () => { + const markdownAST = getMarkdownASTForFile('StackBlitz'); + + const processedAST = await plugin({ cache, markdownAST }); + + expect(mdastToHtml(processedAST)).toMatchInlineSnapshot(` +

https://not-a-stackblitz-url.com

+

https://this-is-not-stackblitz.com

+

https://this-is-not-stackblitz.com/edit/start-to-source-1-ng-template

+ + + + `); +}); diff --git a/src/__tests__/transformers/__fixtures__/StackBlitz.md b/src/__tests__/transformers/__fixtures__/StackBlitz.md new file mode 100644 index 00000000..e3429f98 --- /dev/null +++ b/src/__tests__/transformers/__fixtures__/StackBlitz.md @@ -0,0 +1,9 @@ +https://not-a-stackblitz-url.com + +https://this-is-not-stackblitz.com + +https://this-is-not-stackblitz.com/edit/start-to-source-1-ng-template + +https://stackblitz.com/edit/start-to-source-1-ng-template + +https://stackblitz.com/edit/start-to-source-1-ng-template?file=src/app/app.component.ts diff --git a/src/transformers/StackBlitz.js b/src/transformers/StackBlitz.js new file mode 100644 index 00000000..42cd3e67 --- /dev/null +++ b/src/transformers/StackBlitz.js @@ -0,0 +1,28 @@ +export const shouldTransform = (url) => { + const { host, pathname } = new URL(url); + + return ( + ['stackblitz.com'].includes(host) && + pathname.includes('/edit/') + ); +}; + +export const getStackBlitzEmbedIframe = (url) => { + const editRegex = /(.*\/edit\/.*?)((?:\?.*$)|$)/; + const regexResults = editRegex.exec(url); + const base = regexResults[1]; + let queryStr = regexResults[2]; + if (queryStr) { + queryStr = queryStr.replace('?', '?embed=1&'); + } else { + queryStr = '?embed=1'; + } + + return `${base}${queryStr}`; +} + +export const getHTML = (url) => { + const iframeUrl = getStackBlitzEmbedIframe(url); + + return ``; +}; diff --git a/src/transformers/index.js b/src/transformers/index.js index b4562156..7eade251 100644 --- a/src/transformers/index.js +++ b/src/transformers/index.js @@ -7,6 +7,7 @@ import * as PinterestTransformer from './Pinterest'; import * as SlidesTransformer from './Slides'; import * as SoundCloudTransformer from './SoundCloud'; import * as SpotifyTransformer from './Spotify'; +import * as StackBlitzTransformer from './StackBlitz'; import * as StreamableTransformer from './Streamable'; import * as TestingPlaygroundTransformer from './TestingPlayground'; import * as TwitchTransformer from './Twitch'; @@ -23,6 +24,7 @@ export const defaultTransformers = [ SlidesTransformer, SoundCloudTransformer, SpotifyTransformer, + StackBlitzTransformer, StreamableTransformer, TestingPlaygroundTransformer, TwitchTransformer,