feat(Egghead): Add support for Egghead

.travis.yml

@@ -3,8 +3,10 @@ cache: npm
 notifications:
  email: false
 node_js:
- - 10.13
+ - 10.14
+ - 10
  - 12
+ - 14
  - node
 install: npm install
 script:
@@ -18,6 +20,6 @@ branches:
 jobs:
  include:
  - stage: release
- node_js: 12
+ node_js: 14
  script: kcd-scripts travis-release
  if: fork = false

README.md

@@ -49,6 +49,7 @@ empty lines) and replace it with the proper embed-code.
 - [Supported services](#supported-services)
  - [CodePen](#codepen)
  - [CodeSandbox](#codesandbox)
+ - [Egghead](#egghead)
  - [GIPHY](#giphy)
  - [Instagram](#instagram)
  - [Lichess](#lichess)
@@ -209,6 +210,27 @@ https://codesandbox.io/s/ynn88nx9x?view=split
 
 </details>
 
+### Egghead
+
+#### Usage
+
+```md
+https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby
+```
+
+<details>
+<summary><b>Result</b></summary>
+
+```html
+<iframe
+ src="https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby/embed"
+ width="100%"
+ allowfullscreen
+></iframe>
+```
+
+</details>
+
 ### GIPHY
 
 #### Usage
@@ -571,6 +593,8 @@ have to include it yourself. The recommended way of including it is by using
 https://twitter.com/MichaelDeBoey93/status/1152991421789548546
 
 https://twitter.com/i/moments/994601867987619840
+
+https://twitter.com/wesbos/timelines/1189618481672667136
 ```
 
 <details>
@@ -605,6 +629,13 @@ https://twitter.com/i/moments/994601867987619840
 >
  🔥 Design Tips
 </a>
+
+<a
+ class="twitter-timeline"
+ href="https://twitter.com/wesbos/timelines/1189618481672667136"
+>
+ 🔥 Hot Tips from Wes Bos - Curated tweets by wesbos
+</a>
 ```
 
 </details>

other/USERS.md

@@ -3,9 +3,16 @@
 If you or your company uses this project, add your name to this list! Eventually
 we may have a website to showcase these (wanna build it!?)
 
+- [Excalidraw](https://excalidraw.com) uses it in their
+ [blog](https://github.com/excalidraw/excalidraw-blog) &
+ [guides](https://github.com/excalidraw/excalidraw-howto)
 - [Gatsby](https://gatsbyjs.org) uses it in their
  [website](https://github.com/gatsbyjs/gatsby/tree/master/www)
 - [Kent C. Dodds](https://kentcdodds.com) uses it in
  [his personal website](https://github.com/kentcdodds/kentcdodds.com)
+- [Maggie Appleton](https://maggieappleton.com) uses it in
+ [her personal website](https://github.com/MaggieAppleton/maggieappleton.com)
+- [Wes Bos](https://wesbos.com) uses it in
+ [his personal website](https://github.com/wesbos/wesbos)
 - [Anurag Hazra](https://anuraghazra.github.io) uses it in
  [his personal website](https://github.com/anuraghazra/anuraghazra.github.io)

package.json

@@ -47,14 +47,14 @@
  "validate": "kcd-scripts validate"
  },
  "dependencies": {
- "@babel/runtime": "^7.9.2",
+ "@babel/runtime": "^7.9.6",
  "fetch-retry": "^3.1.0",
  "node-fetch": "^2.6.0",
  "unist-util-visit": "^2.0.2"
  },
  "devDependencies": {
  "jest-in-case": "^1.0.2",
- "kcd-scripts": "^5.6.1",
+ "kcd-scripts": "^6.0.1",
  "pretty-quick": "^2.0.1",
  "remark": "^12.0.0"
  },

src/__tests__/__fixtures__/kitchensink.md

@@ -21,6 +21,8 @@ https://codepen.io/team/codepen/pen/PNaGbb
 
 https://codesandbox.io/s/ynn88nx9x?view=split
 
+https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby
+
 https://giphy.com/gifs/howtogiphygifs-how-to-XatG8bioEwwVO
 
 https://instagram.com/p/B60jPE6J8U-

src/__tests__/plugin.js

@@ -47,8 +47,10 @@ describe('gatsby-remark-embedder', () => {
 
  <iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:100%; height:300px;\\"></iframe>
 
- <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>
+ <iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" allow=\\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\\" sandbox=\\"allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\\"></iframe>
 
+ <iframe src=\\"https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby/embed\\" width=\\"100%\\" allowFullScreen></iframe>
+
  <div style=\\"width:100%;height:0;padding-bottom:63%;position:relative;\\"><iframe src=\\"https://giphy.com/embed/XatG8bioEwwVO\\" width=\\"100%\\" height=\\"100%\\" style=\\"position:absolute\\" frameborder=\\"0\\" class=\\"giphy-embed-from-cache\\" allowfullscreen></iframe></div>
 
  <blockquote class=\\"instagram-media-from-cache\\"><div><a href=\\"https://instagram.com/p/B60jPE6J8U-\\"><p>example</p></a><p>A post shared by <a href=\\"https://instagram.com/michaeldeboey\\">Michaël De Boey</a> (@michaeldeboey) on<timedatetime=\\"2020-01-02T14:45:30+00:00\\">Jan 2, 2020 at 6:45am PST</time></p></div></blockquote>

src/__tests__/transformers/CodeSandbox.js

@@ -46,7 +46,7 @@ test('Gets the correct CodeSandbox iframe', () => {
  const html = getHTML('https://codesandbox.io/s/ynn88nx9x');
 
  expect(html).toMatchInlineSnapshot(
- `"<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x\\" 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>"`
+ `"<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" allow=\\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\\" sandbox=\\"allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\\"></iframe>"`
  );
 });
 
@@ -64,11 +64,11 @@ test('Plugin can transform CodeSandbox links', async () => {
 
  <https://codesandbox.io/embed/ynn88nx9x>
 
- <iframe src=\\"https://codesandbox.io/embed/ynn88nx9x\\" 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>
+ <iframe src=\\"https://codesandbox.io/embed/ynn88nx9x\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" allow=\\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\\" sandbox=\\"allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\\"></iframe>
 
- <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>
+ <iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" allow=\\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\\" sandbox=\\"allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\\"></iframe>
 
- <iframe src=\\"https://www.codesandbox.io/embed/ynn88nx9x\\" 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>
+ <iframe src=\\"https://www.codesandbox.io/embed/ynn88nx9x\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" allow=\\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\\" sandbox=\\"allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\\"></iframe>
  "
  `);
 });

src/__tests__/transformers/Egghead.js

@@ -0,0 +1,83 @@
+import cases from 'jest-in-case';
+
+import plugin from '../..';
+import { getHTML, shouldTransform } from '../../transformers/Egghead';
+
+import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
+
+cases(
+ 'url validation',
+ ({ url, valid }) => {
+ expect(shouldTransform(url)).toBe(valid);
+ },
+ {
+ 'non-Egghead url': {
+ url: 'https://not-a-egghead-url.io',
+ valid: false,
+ },
+ "non-Egghead url ending with 'egghead.io'": {
+ url: 'https://this-is-not-egghead.io',
+ valid: false,
+ },
+ homepage: {
+ url: 'https://egghead.io',
+ valid: false,
+ },
+ 'browse courses page': {
+ url: 'https://egghead.io/browse/frameworks',
+ valid: false,
+ },
+ 'course page': {
+ url:
+ 'https://egghead.io/courses/build-a-video-chat-app-with-twilio-and-gatsby',
+ valid: false,
+ },
+ 'main lessons page': {
+ url: 'https://egghead.io/lessons/',
+ valid: false,
+ },
+ 'course lesson page': {
+ url: 'https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby',
+ valid: true,
+ },
+ }
+);
+
+test('Gets the correct Egghead iframe', async () => {
+ const html = await getHTML(
+ 'https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby'
+ );
+
+ expect(html).toMatchInlineSnapshot(
+ `"<iframe src=\\"https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby/embed\\" width=\\"100%\\" allowFullScreen></iframe>"`
+ );
+});
+
+test('Plugin can transform Egghead links', async () => {
+ const markdownAST = getMarkdownASTForFile('Egghead');
+
+ const processedAST = await plugin({ cache, markdownAST });
+
+ expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
+ "<https://not-a-egghead-url.io>
+
+ <https://this-is-not-egghead.io>
+
+ <https://egghead.io/browse/frameworks>
+
+ <https://egghead.io/podcasts>
+
+ <https://egghead.io>
+
+ <https://www.egghead.io>
+
+ <https://egghead.io/lessons>
+
+ <https://egghead.io/instructors/jason-lengstorf>
+
+ <https://egghead.io/courses/build-a-video-chat-app-with-twilio-and-gatsby>
+
+ <iframe src=\\"https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby/embed\\" width=\\"100%\\" allowFullScreen></iframe>
+ "
+ `);
+});

src/__tests__/transformers/Twitter.js

@@ -9,14 +9,16 @@ import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
 const { Response } = jest.requireActual('node-fetch');
 jest.mock('node-fetch', () => jest.fn());
 
-const mockFetch = (status, moment) =>
+const mockFetch = (status, moment, timeline) =>
  fetchMock
  .mockResolvedValueOnce(new Response(JSON.stringify({ html: status })))
  .mockResolvedValueOnce(new Response(JSON.stringify({ html: status })))
  .mockResolvedValueOnce(new Response(JSON.stringify({ html: moment })))
  .mockResolvedValueOnce(new Response(JSON.stringify({ html: moment })))
  .mockResolvedValueOnce(new Response(JSON.stringify({ html: moment })))
- .mockResolvedValueOnce(new Response(JSON.stringify({ html: moment })));
+ .mockResolvedValueOnce(new Response(JSON.stringify({ html: moment })))
+ .mockResolvedValueOnce(new Response(JSON.stringify({ html: timeline })))
+ .mockResolvedValueOnce(new Response(JSON.stringify({ html: timeline })));
 
 beforeEach(() => {
  fetchMock.mockReset();
@@ -36,10 +38,22 @@ cases(
  url: 'https://this-is-not-twitter.com',
  valid: false,
  },
+ "non-Twitter url ending with 'twitter.com' and having '/events/'": {
+ url: 'https://this-is-not-twitter.com/i/events/123',
+ valid: false,
+ },
+ "non-Twitter url ending with 'twitter.com' and having '/moments/'": {
+ url: 'https://this-is-not-twitter.com/i/moments/123',
+ valid: false,
+ },
  "non-Twitter url ending with 'twitter.com' and having '/status/'": {
  url: 'https://this-is-not-twitter.com/foobar/status/123',
  valid: false,
  },
+ "non-Twitter url ending with 'twitter.com' and having '/timelines/'": {
+ url: 'https://this-is-not-twitter.com/foobar/timelines/123',
+ valid: false,
+ },
  'profile url': {
  url: 'https://twitter.com/MichaelDeBoey93',
  valid: false,
@@ -72,6 +86,14 @@ cases(
  url: 'https://www.twitter.com/i/events/994601867987619840',
  valid: true,
  },
+ 'timelines url': {
+ url: 'https://twitter.com/wesbos/timelines/1189618481672667136',
+ valid: true,
+ },
+ "timelines url having 'www' subdomain": {
+ url: 'https://www.twitter.com/wesbos/timelines/1189618481672667136',
+ valid: true,
+ },
  }
 );
 
@@ -103,10 +125,25 @@ test('Gets the correct Twitter moment link', async () => {
  );
 });
 
+test('Gets the correct Twitter timeline link', async () => {
+ mockFetch(
+ `<a class="twitter-timeline-mocked-fetch-transformer" href="https://twitter.com/wesbos/timelines/1189618481672667136">🔥 Hot Tips from Wes Bos - Curated tweets by wesbos</a>`
+ );
+
+ const html = await getHTML(
+ 'https://twitter.com/wesbos/timelines/1189618481672667136'
+ );
+
+ expect(html).toMatchInlineSnapshot(
+ `"<a class=\\"twitter-timeline-mocked-fetch-transformer\\" href=\\"https://twitter.com/wesbos/timelines/1189618481672667136\\">🔥 Hot Tips from Wes Bos - Curated tweets by wesbos</a>"`
+ );
+});
+
 test('Plugin can transform Twitter links', async () => {
  mockFetch(
  `<blockquote class="twitter-tweet-mocked-fetch-plugin"><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>`,
- `<a class="twitter-moment-mocked-fetch-plugin" href="https://twitter.com/i/moments/994601867987619840">🔥 Design Tips</a>`
+ `<a class="twitter-moment-mocked-fetch-plugin" href="https://twitter.com/i/moments/994601867987619840">🔥 Design Tips</a>`,
+ `<a class="twitter-timeline-mocked-fetch-plugin" href="https://twitter.com/wesbos/timelines/1189618481672667136">🔥 Hot Tips from Wes Bos - Curated tweets by wesbos</a>`
  );
  const markdownAST = getMarkdownASTForFile('Twitter');
 
@@ -117,23 +154,33 @@ test('Plugin can transform Twitter links', async () => {
 
  <https://this-is-not-twitter.com>
 
+ <https://this-is-not-twitter.com/i/events/123>
+
+ <https://this-is-not-twitter.com/i/moments/123>
+
  <https://this-is-not-twitter.com/foobar/status/123>
 
+ <https://this-is-not-twitter.com/foobar/timelines/123>
+
  <https://twitter.com/MichaelDeBoey93>
- 
+
  <https://twitter.com/i/moments/edit/994601867987619840>
 
  <blockquote class=\\"twitter-tweet-mocked-fetch-plugin\\"><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>
 
  <blockquote class=\\"twitter-tweet-mocked-fetch-plugin\\"><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>
- 
+
  <a class=\\"twitter-moment-mocked-fetch-plugin\\" href=\\"https://twitter.com/i/moments/994601867987619840\\">🔥 Design Tips</a>
 
  <a class=\\"twitter-moment-mocked-fetch-plugin\\" href=\\"https://twitter.com/i/moments/994601867987619840\\">🔥 Design Tips</a>
- 
+
  <a class=\\"twitter-moment-mocked-fetch-plugin\\" href=\\"https://twitter.com/i/moments/994601867987619840\\">🔥 Design Tips</a>
- 
+
  <a class=\\"twitter-moment-mocked-fetch-plugin\\" href=\\"https://twitter.com/i/moments/994601867987619840\\">🔥 Design Tips</a>
+
+ <a class=\\"twitter-timeline-mocked-fetch-plugin\\" href=\\"https://twitter.com/wesbos/timelines/1189618481672667136\\">🔥 Hot Tips from Wes Bos - Curated tweets by wesbos</a>
+
+ <a class=\\"twitter-timeline-mocked-fetch-plugin\\" href=\\"https://twitter.com/wesbos/timelines/1189618481672667136\\">🔥 Hot Tips from Wes Bos - Curated tweets by wesbos</a>
  "
  `);
 });

src/__tests__/transformers/__fixtures__/Egghead.md

@@ -0,0 +1,19 @@
+https://not-a-egghead-url.io
+
+https://this-is-not-egghead.io
+
+https://egghead.io/browse/frameworks
+
+https://egghead.io/podcasts
+
+https://egghead.io
+
+https://www.egghead.io
+
+https://egghead.io/lessons
+
+https://egghead.io/instructors/jason-lengstorf
+
+https://egghead.io/courses/build-a-video-chat-app-with-twilio-and-gatsby
+
+https://egghead.io/lessons/gatsby-build-a-page-layout-in-gatsby