Bugfix/codepen mdx errors

[tomrule007]

Description

When testing the self hosted lessons I was seeing internal server error when I initially loaded into js4/css lesson page and then clicked the link to the part 1 or 3 lessons and was also seeing this message in the console.log:

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

And our sentry.io log picked up some nice additional details like the route it was happening on:

navigation
{
from: /curriculum/js4/css,
to: /curriculum/js4/classes
}

The Problem

I was able to quickly guess it was connected to the embedded codepens since the only route the error was appearing on was the css page which is the only lesson with codepens.

We were using the recommended HTML embedding style that relies on a script tag to manipulate the dom. React wasn't liking some 3rd party tool stepping on its toes though and was balking about it when it tried to remove nodes that the script had already removed.

Solution

Convert from embedding the script tag to using the iframe element embed option. To make it a little more reusable I created a separate <CodePen /> component that is hardcoded to the c0d3pen user account and will allow us to make our lessons slightly more maintainable.

I was tempted to reach for an already built off the shelf component from this mdx-embedded package but in the end decided to roll my own for a little more flexibility in the future if we want to change things and not unnecessarily add an additional dependency

The working preview branch link: https://c0d3-app-mw3rh6zaq-c0d3.vercel.app/curriculum/js4/css

Side note

This should be the last roadblock to going live with the self hosted lessons which has me really excited !

[vercel]

@tomrule007 is attempting to deploy a commit to a Personal Account owned by @garageScript on Vercel.

@garageScript first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/c0d3/c0d3-app/E9ab9vfyQiAtoux3NGNoTMixgePz
✅ Preview: https://c0d3-app-git-fork-tomrule007-bugfix-codepen-mdx-errors-c0d3.vercel.app

[Deployment for cf5b4b8 failed]

[codecov]

Codecov Report

Merging #1114 (6ca67f9) into master (6105698) will not change coverage.
The diff coverage is 100.00%.

❗ Current head 6ca67f9 differs from pull request most recent head cf5b4b8. Consider uploading reports for the commit cf5b4b8 to get more accurate results

@@            Coverage Diff            @@
##            master     #1114   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          138       139    +1     
  Lines         2189      2200   +11     
  Branches       528       536    +8     
=========================================
+ Hits          2189      2200   +11     

Impacted Files	Coverage Δ
helpers/mdxComponents.tsx	100.00% <ø> (ø)
components/mdx/CodePen.tsx	100.00% <100.00%> (ø)

[tomrule007]

Well I need to look into enabling typescript on mdx files. Just force push an update because I realized I didn't update the css mdx lesson file to use my final codepen props. Originally I was planning on using an array like the mdx-embed component but when with an string instead and saw no errors during the build process.

Not a fan of seeing errors slip by like that especially when I want to be able to encourage students to use lesson content fixes as their first contributions to c0d3