I've been working on a "passion project" for a bit now while I'm between paid work. It's not open-source just yet but soon as I polish the codebase.
I was inspired by https://carbon.now.sh/ for sharing code snippets on social media but I wanted a tight integration with Github's Gists, a focus on embedding the code in posts like Markdown with access to the code.
I thought I'd test out NuxtHub powered by Nuxt (Vue.js) and a tight integration with Cloudflare Pages/Workers and other solutions.
So I've run iteration after iteration (iteratively) as I hit walls. So firstly to highlight code you generally want a library like highlighter.js or what I went with Shiki
The first wall, you cannot upload every language and every theme on a free plan to cloudflare. So importing them will fail the deploy.
The languages are much more important, for some reason there is a hard fail in Shiki if a language is not found instead of falling back to plaintext.
I eventually hacked this and loaded the CDN version with vue's useHead feature. to on demand require the correct languages.
The next hurdle was I wanted "OG" images or images to share and embed with posts. I tried NuxtHub/CloudFlare's browser api for on demand rendering but on the free plan it's not feasible.
So I went to trusty html2canvas It works really well with some caveats; which I hit. It does not render SVG backgrounds well, or complicated CSS3 gradients. to hack this I basically append a png background if screenshot is occurring, this happens only if the og:image hasn't been created/uploaded before.
I hit some more walls that I will go into next post, I also solved the html2canvas issue.
Feel free to checkout an example here https://gist-share.nuxt.dev/gist/9bd761223a76e148af576546cd1e3e93
Top comments (0)