Custom font colors about gatsby-remark-social-cards HOT 11 OPEN

Yeah this sounds like a thorny issue, if I come up with something I'll let you know

from gatsby-remark-social-cards.

This is a pretty cool project. I've done some cursory searching, and it appears using something other than jimp might do the trick. GraphicsMagick has support for adding text of any hex color, if I understand this Stackoverflow correctly: https://stackoverflow.com/questions/28701457/how-do-i-change-the-color-of-text-im-drawing-with-node-graphicsmagick

That would require adding GM and ImageMagick as a dependency, which does sound like a pain. Have you considered something like this?

from gatsby-remark-social-cards.

So the reason I went with jimp is because there are no external dependencies. ImageMagick or Cairo is for sure an ideal solution, but I don't think works in the context of gatsby. Mostly because there are a ton of people that use platforms like netlify for deployment, which AFAIK do not support installing any external non-node dependencies.

I couldn't personally find a more capable pure node solution other than jimp, but if you know of any let me know 😄

from gatsby-remark-social-cards.

Fonts are, unfortunately, a bit of a complex issue with node. There's a bit of an explanation of why that is here: jimp-dev/jimp#554 (comment)

This specific issue with font colors isn't what I'm overly concerned about, I'm mostly concerned about custom font support. People will no doubt want to add in their own fonts, and I can add support for using custom fonts, but people will be required to generate their own bitmap font files. It's fortunately not very difficult to do so, but it's just a pain point that I'd rather not have.

Not sure if there are real alternatives though.

from gatsby-remark-social-cards.

I found this repo which has a bunch of links to font processing libraries. I'm not on my dev machine now, but when I get back on it later tonight I'm going to run through the list to see if any of them could be useful in this scenario.

Worst case scenario, I'll build a tiny web app that is capable of importing ttf/otf fonts and converting them to bitmap font files for download. That way it will be as painless as possible to load your custom fonts in this plugin.

from gatsby-remark-social-cards.

Hi 👋 First off, thanks for your work @garetmckinley ! This plugin piqued my interest and I became curious about exploring other options for using a monospace font without having to be bound by bitmap fonts (indeed, I deploy on Netlify :D).

I've created a fork here which uses this small Rust library I've created under the hood, via WebAssembly. It's just a proof of concept, but the results are promising so far.

I'm working on adding controls for fonts + colors, as well as frontmatter metadata (as far as I can tell the underlying Rust lib Fonterator should allow for cusom OTF/TTF fonts out of the box). I'm new to Rust+Wasm but the possibilities are pretty interesting! Any ideas are welcome. Thanks again.

from gatsby-remark-social-cards.

@alessbell interesting! Thanks for sharing your solution 😄 are there any known issues with going that route?

I haven't done much work on this repo in a bit because I've been brainstorming other solutions before pushing this forward. I think the idea that I'm most fond of, is rendering the twitter cards on a react web page under the hood and then using node to render the html to an image. That way react markup could be used for custom styling on the card. I'm not sure whether it's entirely possible, but I'm going to dig into it at some point over the next week or two.

I'd definitely love to be updated about your solution! I don't know too much about rust aside from doing simple hello worlds, but I think it's a really strong potential solution. Especially with the performance gains from going wasm.

from gatsby-remark-social-cards.

Since neither custom font families or colors are supported yet, is it possible to allow the user to pass in their own font file? That would solve both problems in one go.

from gatsby-remark-social-cards.

Thanks for the response @garetmckinley, agree -- even something like this plugin that uses Puppeteer to render some HTML and take screenshots is a neat approach, too!

I ended up getting something basic working in my spare time (Fonterator turned out to be a bit buggy, so I'm using rusttype under the hood now), but gatsby-remark-twitter-cards now handles custom TTF fonts and text colors (cc @emgoto). You can also pass in a background image, or just a hex color for a solid background.

Edit: right after writing this I came across this blog post that describes another approach using gatsby-plugin-printer which provides an API to generate images out of React components. Very cool :)

from gatsby-remark-social-cards.

Thanks for the link to swyx blog! I see that he's using Netlify, so going forward that might be the optimal route. The biggest reason I didn't go outside Jimp was because of netlify compat with imagick. But if I can use puppeteer to render react to graphics on a netlify deploy, that's definitely where I'll push this plugin for the next release.

Your fork looks solid, very nice. Does the wasm library support netlify deploys?

from gatsby-remark-social-cards.

Thanks! Yeah, I recently realized Netlify includes graphicsmagick and imagemagick in its base image. So any Netlify user would be able to use a plugin that depends on those out of the box, though other users would have to install those dependencies wherever their site is being built. The wasm library I wrote has no native dependencies, so it works for Netlify users and non-Netlify users alike.

I just came across another blog post on the topic with yet a different solution (it links to a swyx blog post in the prior art section). This lib uses Cloudinary to insert text over a base image via query param, a clever and surprisingly flexible solution, though one that requires a Cloudinary account and is still limited to certain fonts.

from gatsby-remark-social-cards.