Skip to content

Commit 51713fa

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

8 files changed

Lines changed: 145 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,33 @@ https://streamable.com/moo
563564

564565
</details>
565566

567+
### Testing Playground
568+
569+
#### Usage
570+
571+
```md
572+
https://testing-playground.com/?markup=DwGwhgRgpiAEBmB7ATgXgEQFcDOVkDswBbKdAPgFVcDipgB6caEMgKGAEt8AHTAF1YcAJhhx5CJdKwlRR1GVO7gAxlAAWiEELwYNAd1jYNmLbACSsZWBBwAnokwB%2BKULB8wAWj5RsfYaIVWPz4QWXQofG9kWHtMaLEaSVZrPgwIqJiHePlaKQA3a0wwgCtENXwPIURSINtuMO8ADz4pejZgCH4%2BRHxYGQxsDgBzfExudFg%2BOrDsTAgiDhayQZGxhk6%2BbvwyIA&query=PTAEEUFcFMCcE9TwPaVqaAbaBbaA7AFwGdQALOaAGlAAdZoAzOAQwCNNEB3AS0LIBQIUAANiAYwYEAdAHNohAELxAZAQAKFQEoR00AElGSVKHEt8AckKhIxaELASp%2Ba7dHjkRFj3xxpARxgEAGUsaHFCZFgNbWkBexMPQi8fWH9A%2BBDscMi1c29aSEJzTQFHaBl5JXgAJWRsXLZCiItNIA
573+
```
574+
575+
<details>
576+
<summary><b>Result</b></summary>
577+
578+
```html
579+
<iframe
580+
src="https://testing-playground.com/?markup=DwGwhgRgpiAEBmB7ATgXgEQFcDOVkDswBbKdAPgFVcDipgB6caEMgKGAEt8AHTAF1YcAJhhx5CJdKwlRR1GVO7gAxlAAWiEELwYNAd1jYNmLbACSsZWBBwAnokwB%2BKULB8wAWj5RsfYaIVWPz4QWXQofG9kWHtMaLEaSVZrPgwIqJiHePlaKQA3a0wwgCtENXwPIURSINtuMO8ADz4pejZgCH4%2BRHxYGQxsDgBzfExudFg%2BOrDsTAgiDhayQZGxhk6%2BbvwyIA&query=PTAEEUFcFMCcE9TwPaVqaAbaBbaA7AFwGdQALOaAGlAAdZoAzOAQwCNNEB3AS0LIBQIUAANiAYwYEAdAHNohAELxAZAQAKFQEoR00AElGSVKHEt8AckKhIxaELASp%2Ba7dHjkRFj3xxpARxgEAGUsaHFCZFgNbWkBexMPQi8fWH9A%2BBDscMi1c29aSEJzTQFHaBl5JXgAJWRsXLZCiItNIA"
581+
width="100%"
582+
height="300"
583+
scrolling="no"
584+
frameborder="0"
585+
allowtransparency="true"
586+
allowfullscreen="true"
587+
style="overflow: hidden; display: block;"
588+
loading="lazy"
589+
></iframe>
590+
```
591+
592+
</details>
593+
566594
### Twitch
567595

568596
Twitch embeds can only be embedded on HTTPS websites. Check out [the Gatsby
@@ -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?markup=foobar
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/?markup=foobar\\" width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allowfullscreen=\\"true\\" style=\\"overflow: hidden; display: block;\\" loading=\\"lazy\\"></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: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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 'markup' searchParam": {
23+
url: 'https://this-is-not-testing-playground.com?markup=foobar',
24+
valid: false,
25+
},
26+
"non-Testing Playground url ending with 'testing-playground.com' and having '/embed/'": {
27+
url: 'https://this-is-not-testing-playground.com/embed?markup=foobar',
28+
valid: false,
29+
},
30+
'dnt policy page': {
31+
url: 'https://testing-playground.com/.well-known/dnt-policy.txt',
32+
valid: false,
33+
},
34+
'Playground url': {
35+
url: 'https://testing-playground.com?markup=foobar',
36+
valid: true,
37+
},
38+
"Playground url having 'www' subdomain": {
39+
url: 'https://www.testing-playground.com?markup=foobar',
40+
valid: true,
41+
},
42+
}
43+
);
44+
45+
test('Gets the correct Testing Playground iframe', () => {
46+
const html = getHTML('https://testing-playground.com/?markup=foobar');
47+
48+
expect(html).toMatchInlineSnapshot(
49+
`"<iframe src=\\"https://testing-playground.com/?markup=foobar\\" width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allowfullscreen=\\"true\\" style=\\"overflow: hidden; display: block;\\" loading=\\"lazy\\"></iframe>"`
50+
);
51+
});
52+
53+
test('Plugin can transform Testing Playground links', async () => {
54+
const markdownAST = getMarkdownASTForFile('TestingPlayground');
55+
56+
const processedAST = await plugin({ cache, markdownAST });
57+
58+
expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
59+
"<https://not-a-testing-playground-url.com>
60+
61+
<https://this-is-not-testing-playground.com>
62+
63+
<https://this-is-not-testing-playground.com?markup=foobar>
64+
65+
<https://this-is-not-testing-playground.com/embed?markup=foobar>
66+
67+
<https://testing-playground.com/.well-known/dnt-policy.txt>
68+
69+
<iframe src=\\"https://testing-playground.com/?markup=foobar\\" width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allowfullscreen=\\"true\\" style=\\"overflow: hidden; display: block;\\" loading=\\"lazy\\"></iframe>
70+
71+
<iframe src=\\"https://www.testing-playground.com/?markup=foobar\\" width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allowfullscreen=\\"true\\" style=\\"overflow: hidden; display: block;\\" loading=\\"lazy\\"></iframe>
72+
"
73+
`);
74+
});

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

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

‎src/transformers/TestingPlayground.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { getTrimmedPathName } from './utils';
2+
3+
export const shouldTransform = (url) => {
4+
const { host, pathname, searchParams } = new URL(url);
5+
6+
return (
7+
['testing-playground.com', 'www.testing-playground.com'].includes(host) &&
8+
getTrimmedPathName(pathname).length === 0 &&
9+
Boolean(searchParams.get('markup'))
10+
);
11+
};
12+
13+
export const getHTML = (url) => {
14+
return `<iframe src="${url}" width="100%" height="300" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="overflow: hidden; display: block;" loading="lazy"></iframe>`;
15+
};

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