Skip to content

Commit a866a6a

Browse files
MichaelDeBoeyMichaelDeBoey
committed
feat(Testing Playground): Add support for Testing Playground
1 parent 2880ab1 commit a866a6a

8 files changed

Lines changed: 159 additions & 7 deletions

File tree

‎README.md‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,18 @@
2727
Trying to embed well known services (like [CodePen][codepen],
2828
[CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
2929
[Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
30-
[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
31-
[Twitch][twitch], [Twitter][twitter] or [YouTube][youtube]) into your
32-
[Gatsby][gatsby] website can be hard, since you have to know how this needs to
33-
be done for all of these different services.
30+
[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable], [Testing
31+
Playground][testing-playground], [Twitch][twitch], [Twitter][twitter] or
32+
[YouTube][youtube]) into your [Gatsby][gatsby] website can be hard, since you
33+
have to know how this needs to be done for all of these different services.
3434

3535
## This solution
3636

3737
`gatsby-remark-embedder` tries to solve this problem for you by letting you just
38-
copy-paste the link to the gif/pen/pin/player/post/sandbox/tweet/video you want
39-
to embed right from within your browser onto a separate line (surrounded by
40-
empty lines) and replace it with the proper embed-code.
38+
copy-paste the link to the
39+
gif/pen/pin/player/playground/post/sandbox/tweet/video you want to embed right
40+
from within your browser onto a separate line (surrounded by empty lines) and
41+
replace it with the proper embed-code.
4142

4243
## Table of Contents
4344

@@ -563,6 +564,32 @@ https://streamable.com/moo
563564

564565
</details>
565566

567+
### Testing Playground
568+
569+
#### Usage
570+
571+
```md
572+
https://testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414
573+
```
574+
575+
<details>
576+
<summary><b>Result</b></summary>
577+
578+
```html
579+
<iframe
580+
src="https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414?panes=preview,result"
581+
height="300"
582+
width="100%"
583+
scrolling="no"
584+
frameborder="0"
585+
allowTransparency="true"
586+
title="Testing Playground"
587+
style="overflow: hidden; display: block; width: 100%"
588+
></iframe>
589+
```
590+
591+
</details>
592+
566593
### Twitch
567594

568595
Twitch embeds can only be embedded on HTTPS websites. Check out [the Gatsby
@@ -860,6 +887,7 @@ Thanks goes to these people ([emoji key][emojis]):
860887

861888
<!-- markdownlint-enable -->
862889
<!-- prettier-ignore-end -->
890+
863891
<!-- ALL-CONTRIBUTORS-LIST:END -->
864892

865893
This project follows the [all-contributors][all-contributors] specification.
@@ -915,6 +943,7 @@ MIT
915943
[soundcloud]: https://soundcloud.com
916944
[spotify]: https://spotify.com
917945
[streamable]: https://streamable.com
946+
[testing-playground]: https://testing-playground.com
918947
[twitch]: https://twitch.tv
919948
[twitter]: https://twitter.com
920949
[twitter-widget-javascript-docs]: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"soundcloud",
2121
"spotify",
2222
"streamable",
23+
"testing playground",
2324
"twitch",
2425
"twitter",
2526
"youtube"

‎src/__tests__/__fixtures__/kitchensink.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L
3737

3838
https://streamable.com/moo
3939

40+
https://testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414
41+
4042
https://twitch.tv/videos/546761743
4143

4244
https://twitter.com/kentcdodds/status/1078755736455278592

‎src/__tests__/plugin.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ describe('gatsby-remark-embedder', () => {
7777
7878
<iframe class=\\"streamable-embed-from-cache\\" src=\\"https://streamable.com/o/moo\\" frameborder=\\"0\\" scrolling=\\"no\\" width=\\"1920\\" height=\\"1080\\" allowfullscreen></iframe>
7979
80+
<iframe src=\\"https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414?panes=preview,result\\" height=\\"300\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" title=\\"Testing Playground\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
81+
8082
<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
8183
8284
<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>

‎src/__tests__/transformers/TestingPlayground.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import cases from 'jest-in-case';
2+
3+
import plugin from '../../';
4+
import { getHTML, shouldTransform } from '../../transformers/TestingPlayground';
5+
6+
import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
7+
8+
cases(
9+
'url validation',
10+
({ url, valid }) => {
11+
expect(shouldTransform(url)).toBe(valid);
12+
},
13+
{
14+
'non-Testing Playground url': {
15+
url: 'https://not-a-testing-playground-url.com',
16+
valid: false,
17+
},
18+
"non-Testing Playground url ending with 'testing-playground.com'": {
19+
url: 'https://this-is-not-testing-playground.com',
20+
valid: false,
21+
},
22+
"non-Testing Playground url ending with 'testing-playground.com' having '/gist/' path": {
23+
url:
24+
'https://this-is-not-testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414',
25+
valid: false,
26+
},
27+
"non-Testing Playground url ending with 'testing-playground.com' and having '/embed/' path": {
28+
url:
29+
'https://this-is-not-testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414',
30+
valid: false,
31+
},
32+
'dnt policy page': {
33+
url: 'https://testing-playground.com/.well-known/dnt-policy.txt',
34+
valid: false,
35+
},
36+
'Playground embed url': {
37+
url:
38+
'https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414',
39+
valid: false,
40+
},
41+
'Playground url': {
42+
url:
43+
'https://testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414',
44+
valid: true,
45+
},
46+
"Playground url having 'www' subdomain": {
47+
url:
48+
'https://www.testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414',
49+
valid: true,
50+
},
51+
}
52+
);
53+
54+
test('Gets the correct Testing Playground iframe', () => {
55+
const html = getHTML(
56+
'https://testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414'
57+
);
58+
59+
expect(html).toMatchInlineSnapshot(
60+
`"<iframe src=\\"https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414?panes=preview,result\\" height=\\"300\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" title=\\"Testing Playground\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>"`
61+
);
62+
});
63+
64+
test('Plugin can transform Testing Playground links', async () => {
65+
const markdownAST = getMarkdownASTForFile('TestingPlayground');
66+
67+
const processedAST = await plugin({ cache, markdownAST });
68+
69+
expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
70+
"<https://not-a-testing-playground-url.com>
71+
72+
<https://this-is-not-testing-playground.com>
73+
74+
<https://this-is-not-testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414>
75+
76+
<https://this-is-not-testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414>
77+
78+
<https://testing-playground.com/.well-known/dnt-policy.txt>
79+
80+
<https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414>
81+
82+
<iframe src=\\"https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414?panes=preview,result\\" height=\\"300\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" title=\\"Testing Playground\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
83+
84+
<iframe src=\\"https://www.testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414?panes=preview,result\\" height=\\"300\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" title=\\"Testing Playground\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
85+
"
86+
`);
87+
});

‎src/__tests__/transformers/__fixtures__/TestingPlayground.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
https://not-a-testing-playground-url.com
2+
3+
https://this-is-not-testing-playground.com
4+
5+
https://this-is-not-testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414
6+
7+
https://this-is-not-testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414
8+
9+
https://testing-playground.com/.well-known/dnt-policy.txt
10+
11+
https://testing-playground.com/embed/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414
12+
13+
https://testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414
14+
15+
https://www.testing-playground.com/gist/1750787c77ae724da475efd788230104/6d090f5501deedc70a97ff52260ccc22a6248414

‎src/transformers/TestingPlayground.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const shouldTransform = (url) => {
2+
const { host, pathname } = new URL(url);
3+
4+
return (
5+
['testing-playground.com', 'www.testing-playground.com'].includes(host) &&
6+
pathname.includes('/gist/')
7+
);
8+
};
9+
10+
export const getHTML = (url) => {
11+
const iframeUrl = url.replace('/gist/', '/embed/');
12+
13+
return `<iframe src="${iframeUrl}?panes=preview,result" height="300" width="100%" scrolling="no" frameBorder="0" allowTransparency="true" title="Testing Playground" style="overflow: hidden; display: block; width: 100%"></iframe>`;
14+
};

‎src/transformers/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import * as SlidesTransformer from './Slides';
88
import * as SoundCloudTransformer from './SoundCloud';
99
import * as SpotifyTransformer from './Spotify';
1010
import * as StreamableTransformer from './Streamable';
11+
import * as TestingPlaygroundTransformer from './TestingPlayground';
1112
import * as TwitchTransformer from './Twitch';
1213
import * as TwitterTransformer from './Twitter';
1314
import * as YouTubeTransformer from './YouTube';
@@ -23,6 +24,7 @@ export const defaultTransformers = [
2324
SoundCloudTransformer,
2425
SpotifyTransformer,
2526
StreamableTransformer,
27+
TestingPlaygroundTransformer,
2628
TwitchTransformer,
2729
TwitterTransformer,
2830
YouTubeTransformer,

0 commit comments

Comments
 (0)