Codepen is a delightful app that I used over the years to practice my frontend skill. One thing that has annoyed me was that over time they have limited features more and more behind a pay wall for a pro account.
Now I get it they need to make money. One of the things I liked was the debug view which was just a full screen page. This let me share my little projects as if they were self hosted apps. This was dope. Sadly it seems to require a pro account...
or does it...
Ok, nothing special here. Just iframe the url for the debug mode of a pen and bam a nice full page view of the pen.
Something like,
<iframe
style={{ width: "100%", height: "100%" }}
title={title}
src="https://codepen.io/name/blahblahblah"
loading="lazy"
allowtransparency="true"
/>
Now the key here is that the url you have normally is like
https://cdpn.io/yourname/debug/BQwdLy/LDAmdEvnmNWr
We want it to be
https://cdpn.io/yourname/debug/BQwdLy
With that last bit trimmed off. This is because that is the id of a temporary debug session that will expire. By having it trimmed it will regenerate a new session on each visit.
But sadly this will still not work unless you have a pro account.
Just use the full page url instead like so https://codepen.io/name/full/BQwdLy.
Now this will give us a header at the top since codepen actually just iframes our app in. Yes it is an iframe in an iframe. Not ideal...but free!
We could embed it but I wanted something that felt like an app and not a code example. Also, a live edit view for embedding is now also behind a paywall which makes embeds kinda less interesting or just downright lame. :sob_face:
Why?!?!? Well like I said, so I can share all sorts of old projects.
Also, it lets me keep prototypes using old or new libraries, frameworks, and the like without adding bloat to my website. Now, I could use monorepos or something too but that is a bit too much for now.
Ok so turns out that embedding is the only way without running into issues. While there are many options I found, many ran into issues here and there with edge cases too. So just doing an iframe embed is the easiest.
Now I love codesandbox. I actually don't use codepen much anymore in favor of codesandbox. But I still have a bunch of cool toys I want easier access to.
Ok, I created a component I can pass a url and title to like so.
import React from "react";
import Head from "next/head";
export default ({ title, url }) => (
<div>
<Head>
<title>{title}</title>
</Head>
<iframe
style={{ width: "100%", height: "100%" }}
title={title}
src={url}
loading="lazy"
allowtransparency="true"
/>
<style jsx>{`
div {
height: 100vh;
}
iframe {
border: none;
}
`}</style>
</div>
);
Than for say this little doodle here.
import React from "react";
import { CodepenContainer } from "components/projects/codepen/CodepenContainer";
export default () => (
<CodepenContainer
title="Better Tech"
url="https://codepen.io/name/embed/pbgoje"
/>
);
We would get this.
Neeto!
We can add more configurable meta data to the container. Lets try adding a theme meta tag to style our little apps along with a description meta tag.
import React from "react";
import Head from "next/head";
export default ({ title, url, desc, theme }) => (
<div>
<Head>
<title>{title}</title>
<meta name="description" content={desc || ""}></meta>
<meta name="theme-color" content={theme || "#ffffff"}></meta>
</Head>
<iframe
style={{ width: "100%", height: "100%" }}
title={title}
src={url}
loading="lazy"
allowtransparency="true"
/>
<style jsx>{`
div {
height: 100vh;
}
iframe {
border: none;
}
`}</style>
</div>
);
Nice.
Now if they block us from iframing this would break. We also could have them simply change the url or id etc which would break this flow as well. Iframes in iframes are also ugly. Ideally, we'd just pay for pro.
Still, at the end of the day. This is exactly what I wanted. Only better part would be to use their api to dynamically generate pages based on the pen!
After checking they don't seem to have an api like that. I also looked into hacking around and generating a gist and loading from that as a cdn using the raw urls but...that is just too much. This works for now since these are just old projects.
Venting here but it just kinda kills me that Netlify and Vercel can both provide free cdn like hosting of static files but codepen asks $10 a month for the same thing... I know I know they need to pay bills but it does mean that they have lost me to codesandbox.