Skip to content

Commit 20b7067

Browse files
acagastyaMichaelDeBoey
acagastya
and
MichaelDeBoey
committed
feat(Lichess): Add support for Lichess (#60)
* Add lichess support + tests * Add documentation * Delete settings.json * Update README * Cleanup transformers * Update tests * Making use of `includesSomeOfArray` * Add /tv game test + use Array.includes for Lichess * Delete comment * Update tests Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
1 parent 63a0abb commit 20b7067

File tree

7 files changed

+226
-4
lines changed

7 files changed

+226
-4
lines changed

‎README.md‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@
1919
## The problem
2020

2121
Trying to embed well known services (like [CodePen][codepen],
22-
[CodeSandbox][codesandbox], [Slides][slides], [SoundCloud][soundcloud],
23-
[Spotify][spotify], [Streamable][streamable], [Twitter][twitter] or
24-
[YouTube][youtube]) into your [Gatsby][gatsby] website can be hard, since you
25-
have to know how this needs to be done for all of these different services.
22+
[CodeSandbox][codesandbox], [Lichess][lichess], [Slides][slides],
23+
[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
24+
[Twitter][twitter] or [YouTube][youtube]) into your [Gatsby][gatsby] website can
25+
be hard, since you have to know how this needs to be done for all of these
26+
different services.
2627

2728
## This solution
2829

@@ -41,6 +42,7 @@ and replace it with the proper embed-code.
4142
- [Supported services](#supported-services)
4243
- [CodePen](#codepen)
4344
- [CodeSandbox](#codesandbox)
45+
- [Lichess](#lichess)
4446
- [Slides](#slides)
4547
- [SoundCloud](#soundcloud)
4648
- [Spotify](#spotify)
@@ -121,6 +123,25 @@ https://codesandbox.io/s/ynn88nx9x?view=split
121123
></iframe>
122124
```
123125

126+
### Lichess
127+
128+
#### Usage
129+
130+
```md
131+
https://lichess.org/MPJcy1JW
132+
```
133+
134+
#### Result
135+
136+
```html
137+
<iframe
138+
src="https://lichess.org/embed/MPJcy1JW"
139+
width="600"
140+
height="397"
141+
frameborder="0"
142+
></iframe>
143+
```
144+
124145
### Slides
125146

126147
#### Usage
@@ -420,6 +441,7 @@ MIT
420441
[gatsby]: https://github.com/gatsbyjs/gatsby
421442
[gatsby-plugin-twitter]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-twitter
422443
[kentcdodds.com-repo]: https://github.com/kentcdodds/kentcdodds.com
444+
[lichess]: https://lichess.org
423445
[slides]: https://slides.com
424446
[soundcloud]: https://soundcloud.com
425447
[spotify]: https://spotify.com

‎src/__tests__/__fixtures__/kitchensink.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ https://codepen.io/team/codepen/pen/PNaGbb
1919

2020
https://codesandbox.io/s/ynn88nx9x?view=split
2121

22+
https://lichess.org/MPJcy1JW
23+
2224
https://slides.com/kentcdodds/oss-we-want
2325

2426
https://soundcloud.com/clemenswenners/africa

‎src/__tests__/plugin.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ describe('gatsby-remark-embedder', () => {
4343
4444
<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" allow=\\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>
4545
46+
<iframe src=\\"https://lichess.org/embed/MPJcy1JW\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
47+
4648
<iframe src=\\"https://slides.com/kentcdodds/oss-we-want/embed\\" width=\\"576\\" height=\\"420\\" scrolling=\\"no\\" frameborder=\\"0\\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
4749
4850
<iframe width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"no\\" src=https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true></iframe>

‎src/__tests__/transformers/Lichess.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import cases from 'jest-in-case';
2+
3+
import plugin from '../../';
4+
import { getHTML, shouldTransform } from '../../transformers/Lichess';
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-Lichess url': {
15+
url: 'https://not-a-lichess-url.org',
16+
valid: false,
17+
},
18+
"non-Lichess url ending with 'lichess.org'": {
19+
url: 'https://this-is-not-lichess.org',
20+
valid: false,
21+
},
22+
"non-Lichess url ending with 'lichess.org' having '/embed/' path": {
23+
url: 'https://this-is-not-lichess.org/embed/MPJcy1JW',
24+
valid: false,
25+
},
26+
'embed game url': {
27+
url: 'https://lichess.org/embed/MPJcy1JW',
28+
valid: false,
29+
},
30+
'learn url': {
31+
url: 'https://lichess.org/learn',
32+
valid: false,
33+
},
34+
'practice url': {
35+
url: 'https://lichess.org/practice',
36+
valid: false,
37+
},
38+
'study list url': {
39+
url: 'https://lichess.org/study',
40+
valid: false,
41+
},
42+
'study url': {
43+
url: 'https://lichess.org/study/XtFCFYlM',
44+
valid: false,
45+
},
46+
'training url': {
47+
url: 'https://lichess.org/training/12345',
48+
valid: false,
49+
},
50+
'tv list url': {
51+
url: 'https://lichess.org/tv',
52+
valid: false,
53+
},
54+
'tv url': {
55+
url: 'https://lichess.org/tv/best',
56+
valid: false,
57+
},
58+
'game url': {
59+
url: 'https://lichess.org/MPJcy1JW',
60+
valid: true,
61+
},
62+
"game url having 'www' subdomain": {
63+
url: 'https://www.lichess.org/MPJcy1JW',
64+
valid: true,
65+
},
66+
'game url with parameters': {
67+
url: 'https://lichess.org/MPJcy1JW?theme=auto&bg=auto',
68+
valid: true,
69+
},
70+
"game url with parameters having 'www' subdomain": {
71+
url: 'https://www.lichess.org/MPJcy1JW?theme=auto&bg=auto',
72+
valid: true,
73+
},
74+
"game url with game-ID starting with 'tv'": {
75+
url: 'https://lichess.org/tv123abc56de',
76+
valid: true,
77+
},
78+
"game url with game-ID starting with 'tv' and having 'www' subdomain": {
79+
url: 'https://www.lichess.org/tv123abc56de',
80+
valid: true,
81+
},
82+
}
83+
);
84+
85+
test('Gets the correct Lichess iframe', () => {
86+
const html = getHTML('https://lichess.org/MPJcy1JW');
87+
88+
expect(html).toMatchInlineSnapshot(
89+
`"<iframe src=\\"https://lichess.org/embed/MPJcy1JW\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>"`
90+
);
91+
});
92+
93+
test('Plugin can transform Lichess links', async () => {
94+
const markdownAST = getMarkdownASTForFile('Lichess');
95+
96+
const processedAST = await plugin({ cache, markdownAST });
97+
98+
expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
99+
"<https://not-a-lichess-url.org>
100+
101+
<https://this-is-not-lichess.org>
102+
103+
<https://this-is-not-lichess.org/embed/MPJcy1JW>
104+
105+
<https://lichess.org/embed/MPJcy1JW>
106+
107+
<https://lichess.org/learn>
108+
109+
<https://lichess.org/practice>
110+
111+
<https://lichess.org/study>
112+
113+
<https://lichess.org/study/XtFCFYlM>
114+
115+
<https://lichess.org/training/12345>
116+
117+
<https://lichess.org/tv>
118+
119+
<https://lichess.org/tv/best>
120+
121+
<iframe src=\\"https://lichess.org/embed/MPJcy1JW\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
122+
123+
<iframe src=\\"https://www.lichess.org/embed/MPJcy1JW\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
124+
125+
<iframe src=\\"https://lichess.org/embed/MPJcy1JW?theme=auto&bg=auto\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
126+
127+
<iframe src=\\"https://www.lichess.org/embed/MPJcy1JW?theme=auto&bg=auto\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
128+
129+
<iframe src=\\"https://lichess.org/embed/tv123abc56de\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
130+
131+
<iframe src=\\"https://www.lichess.org/embed/tv123abc56de\\" width=\\"600\\" height=\\"397\\" frameborder=\\"0\\"></iframe>
132+
"
133+
`);
134+
});

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
https://not-a-lichess-url.org
2+
3+
https://this-is-not-lichess.org
4+
5+
https://this-is-not-lichess.org/embed/MPJcy1JW
6+
7+
https://lichess.org/embed/MPJcy1JW
8+
9+
https://lichess.org/learn
10+
11+
https://lichess.org/practice
12+
13+
https://lichess.org/study
14+
15+
https://lichess.org/study/XtFCFYlM
16+
17+
https://lichess.org/training/12345
18+
19+
https://lichess.org/tv
20+
21+
https://lichess.org/tv/best
22+
23+
https://lichess.org/MPJcy1JW
24+
25+
https://www.lichess.org/MPJcy1JW
26+
27+
https://lichess.org/MPJcy1JW?theme=auto&bg=auto
28+
29+
https://www.lichess.org/MPJcy1JW?theme=auto&bg=auto
30+
31+
https://lichess.org/tv123abc56de
32+
33+
https://www.lichess.org/tv123abc56de

‎src/transformers/Lichess.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const { URL } = require('url');
2+
3+
const includesSomeOfArray = (string, array) =>
4+
array.some(item => string.includes(item));
5+
6+
export const shouldTransform = url => {
7+
const { host, pathname } = new URL(url);
8+
9+
return (
10+
['lichess.org', 'www.lichess.org'].includes(host) &&
11+
!includesSomeOfArray(pathname, [
12+
'/embed/',
13+
'/learn',
14+
'/practice',
15+
'/study',
16+
'/training',
17+
'/tv/',
18+
]) &&
19+
!pathname.endsWith('/tv')
20+
);
21+
};
22+
23+
export const getHTML = url => {
24+
const iframeUrl = url.replace('lichess.org', 'lichess.org/embed');
25+
26+
return `<iframe src="${iframeUrl}" width="600" height="397" frameborder="0"></iframe>`;
27+
};

‎src/transformers/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as CodePenTransformer from './CodePen';
22
import * as CodeSandboxTransformer from './CodeSandbox';
3+
import * as LichessTransformer from './Lichess';
34
import * as SlidesTransformer from './Slides';
45
import * as SoundCloudTransformer from './SoundCloud';
56
import * as SpotifyTransformer from './Spotify';
@@ -10,6 +11,7 @@ import * as YouTubeTransformer from './YouTube';
1011
export const defaultTransformers = [
1112
CodePenTransformer,
1213
CodeSandboxTransformer,
14+
LichessTransformer,
1315
SlidesTransformer,
1416
SoundCloudTransformer,
1517
SpotifyTransformer,

0 commit comments

Comments
 (0)