Skip to content

Commit 334933f

Browse files
MichaelDeBoeyMichaelDeBoey
authored
feat(Testing Playground): Add support for Testing Playground (#124)
1 parent 3c307f0 commit 334933f

File tree

8 files changed

+205
-8
lines changed

8 files changed

+205
-8
lines changed

‎README.md

Lines changed: 36 additions & 8 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

@@ -176,7 +177,7 @@ https://codepen.io/team/codepen/pen/PNaGbb
176177
```
177178

178179
<details>
179-
<summary><b>Result</b></summary>
180+
<summary><b>Result</b></summary>
180181

181182
```html
182183
<iframe
@@ -563,6 +564,31 @@ https://streamable.com/moo
563564

564565
</details>
565566

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

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

861887
<!-- markdownlint-enable -->
862888
<!-- prettier-ignore-end -->
889+
863890
<!-- ALL-CONTRIBUTORS-LIST:END -->
864891

865892
This project follows the [all-contributors][all-contributors] specification.
@@ -915,6 +942,7 @@ MIT
915942
[soundcloud]: https://soundcloud.com
916943
[spotify]: https://spotify.com
917944
[streamable]: https://streamable.com
945+
[testing-playground]: https://testing-playground.com
918946
[twitch]: https://twitch.tv
919947
[twitter]: https://twitter.com
920948
[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/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
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/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" 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: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import cases from 'jest-in-case';
2+
3+
import plugin from '../../';
4+
import {
5+
getHTML,
6+
getTestingPlaygroundIFrameSrc,
7+
shouldTransform,
8+
} from '../../transformers/TestingPlayground';
9+
10+
import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
11+
12+
cases(
13+
'url validation',
14+
({ url, valid }) => {
15+
expect(shouldTransform(url)).toBe(valid);
16+
},
17+
{
18+
'non-Testing Playground url': {
19+
url: 'https://not-a-testing-playground-url.com',
20+
valid: false,
21+
},
22+
"non-Testing Playground url ending with 'testing-playground.com'": {
23+
url: 'https://this-is-not-testing-playground.com',
24+
valid: false,
25+
},
26+
"non-Testing Playground url ending with 'testing-playground.com' having '/gist/' path": {
27+
url:
28+
'https://this-is-not-testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
29+
valid: false,
30+
},
31+
"non-Testing Playground url ending with 'testing-playground.com' and having '/embed/' path": {
32+
url:
33+
'https://this-is-not-testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
34+
valid: false,
35+
},
36+
'dnt policy page': {
37+
url: 'https://testing-playground.com/.well-known/dnt-policy.txt',
38+
valid: false,
39+
},
40+
'Playground embed url': {
41+
url:
42+
'https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
43+
valid: false,
44+
},
45+
'Testing Playground homepage': {
46+
url: 'https://testing-playground.com',
47+
valid: true,
48+
},
49+
'Playground url': {
50+
url:
51+
'https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
52+
valid: true,
53+
},
54+
"Playground url having 'www' subdomain": {
55+
url:
56+
'https://www.testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
57+
valid: true,
58+
},
59+
}
60+
);
61+
62+
cases(
63+
'getTestingPlaygroundIFrameSrc',
64+
({ url, iframe }) => {
65+
expect(getTestingPlaygroundIFrameSrc(url)).toBe(iframe);
66+
},
67+
{
68+
'Testing Playground homepage': {
69+
url: 'https://testing-playground.com',
70+
iframe: `https://testing-playground.com/embed?panes=query,preview`,
71+
},
72+
'Playground url': {
73+
url:
74+
'https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
75+
iframe: `https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview`,
76+
},
77+
"Playground url having 'www' subdomain": {
78+
url:
79+
'https://www.testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
80+
iframe: `https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview`,
81+
},
82+
}
83+
);
84+
85+
test('Gets the correct Testing Playground iframe', () => {
86+
const html = getHTML(
87+
'https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a'
88+
);
89+
90+
expect(html).toMatchInlineSnapshot(
91+
`"<iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>"`
92+
);
93+
});
94+
95+
test('Plugin can transform Testing Playground links', async () => {
96+
const markdownAST = getMarkdownASTForFile('TestingPlayground');
97+
98+
const processedAST = await plugin({ cache, markdownAST });
99+
100+
expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
101+
"<https://not-a-testing-playground-url.com>
102+
103+
<https://this-is-not-testing-playground.com>
104+
105+
<https://this-is-not-testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a>
106+
107+
<https://this-is-not-testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a>
108+
109+
<https://testing-playground.com/.well-known/dnt-policy.txt>
110+
111+
<https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a>
112+
113+
<iframe src=\\"https://testing-playground.com/embed?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
114+
115+
<iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
116+
117+
<iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
118+
"
119+
`);
120+
});

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
6+
7+
https://this-is-not-testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
8+
9+
https://testing-playground.com/.well-known/dnt-policy.txt
10+
11+
https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
12+
13+
https://testing-playground.com
14+
15+
https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
16+
17+
https://www.testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a

‎src/transformers/TestingPlayground.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { getTrimmedPathName } from './utils';
2+
3+
export const shouldTransform = (url) => {
4+
const { host, pathname } = new URL(url);
5+
const trimmedPathName = getTrimmedPathName(pathname);
6+
7+
return (
8+
['testing-playground.com', 'www.testing-playground.com'].includes(host) &&
9+
(trimmedPathName.length === 0 || trimmedPathName.startsWith('gist/'))
10+
);
11+
};
12+
13+
export const getTestingPlaygroundIFrameSrc = (urlString) => {
14+
const { pathname } = new URL(urlString);
15+
const path =
16+
pathname === '/' ? '/embed' : pathname.replace('/gist/', '/embed/');
17+
18+
return `https://testing-playground.com${path}?panes=query,preview`;
19+
};
20+
21+
export const getHTML = (url) => {
22+
const iframeSrc = getTestingPlaygroundIFrameSrc(url);
23+
24+
return `<iframe src="${iframeSrc}" height="450" width="100%" scrolling="no" frameBorder="0" allowTransparency="true" style="overflow: hidden; display: block; width: 100%"></iframe>`;
25+
};

‎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)