Added Codepen Support

[anuraghazra]

What:
Added Codepen support
closes #16

How:
created a new /src/codepen.js file which utilizes shouldTransform getHTML to detect codepen links and embed them into markdown.

Checklist:

• Documentation
• Tests
• Ready to be merged
  

here's how it looks: (feel free to change the codepen link in the docs because i used one of my own pen)

[MichaelDeBoey]

Hi @anuraghazra!

Thanks for taking your time to implement the CodePen transformer! 🙂
Really awesome work.

I've added some small improvements and better default-values (imo) before this one can be merged.

Could you please add some tests too?

Let me know if you need some further help. 🙂

[anuraghazra]

I hope i'm doing everything correctly, it's my 1st time someone requested a change in my PR. ❤️

[anuraghazra]

And for the tests, i really don't know how to write tests effectively i thought i will find the tests for CodeSandBox and get some understanding how it works and write it similarly for CodePen.js but couldn't find it.

[anuraghazra]

@MichaelDeBoey, added tests. please check if everything is ok. 😃

[MichaelDeBoey]

Hi @anuraghazra!

I've rebased your branch onto upstream (my repo) and updated the tests.

If the tests are passing, I think this one can be merged 🙂

[anuraghazra]

Okay something is wrong here, i will try to fix the tests and let you know.

[anuraghazra]

@MichaelDeBoey hopefully everything is all right now? ❤️

[MichaelDeBoey]

I think something went wrong when merging on your end.

I’ll rebase again and ping you afterwards 😉

[MichaelDeBoey]

@anuraghazra I've rebased your master onto upstream (my repo) and added some extra tests for you to take into account.

If you need some help, I can give you a clue on how shouldTransform should change, but don't want to ruin the learning-experience for you. 🙂

[anuraghazra]

Opps, yes i see what happed there, i'm learning a lot from this one PR. yes if you can give some clues that would be great! Thank you very much for this.

[MichaelDeBoey]

There should be 2 things (3 actually 😛) you need to adjust and then all tests will pass.

• shouldTransform should check if the host is a valid CodePen host and if the pathName includes '/pen/'
• getHTML should replace '/pen/' by '/embed/preview/' instead of with '/embed/' so the Pen isn't run directly on the page.
  • Also change the style attribute on the iframe.

If you need any further help, I'm glad to help you get through this one. 🙂

[MichaelDeBoey]

@anuraghazra Added some tiny nitpicks that I would like to have changed before merging this one.

[MichaelDeBoey]

No problem, just some miscommunication I get it 🙂

[anuraghazra]

well i'm really confused with the snapshot stuff.

test:

  expect(html).toMatchInlineSnapshot(
    `"<iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\"></iframe>"`
  );

codepen.js

return `<iframe src="${iframeUrl}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"></iframe>`;

this this ok?

[MichaelDeBoey]

@anuraghazra Like I already said: you don't have to update the snapshot. You have to update the code so the snapshot is correct even tho you're not changing it.

[MichaelDeBoey]

I also added extra tests for shouldTransform, so if you could fix shouldTransform so the tests pass, this PR is ready to merge 🙂

[anuraghazra]

okay i think i got the snapshot stuff. okay working on the new tests.

[MichaelDeBoey]

Just 2 small things and this one's good to be merged 🙂

[anuraghazra]

my bad! fixing

(haha silly me, just commited your suggetion directly)

[MichaelDeBoey]

This looks good to me now 🙂

Thanks for all your hard work @anuraghazra! 👊

[anuraghazra]

Yey! THANK YOU VERY MUCH for your patience with this. ❤️

Learned soo much stuff.

[MichaelDeBoey]

@all-contributors Please add @anuraghazra for code and tests

[allcontributors]

@MichaelDeBoey

I've put up a pull request to add @anuraghazra! 🎉

[MichaelDeBoey]

@anuraghazra It was a pleasure to help you get through this one!

Glad you learned some things when doing so. 🙂

[MichaelDeBoey]

🎉 This PR is included in version 1.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀