Gatsby: [www/showcase] Screenshots are not rendering non-roman characters

[shannonbux]

Looks like screenshots in site showcase aren't rendering non-roman characters, like this one in Japanese: https://5b1ac9153672df15a1c3b201--gatsbyjs.netlify.com/showcase/www-yuuniworks-com/

[KyleAMathews]

@ThatOtherPerson looks like we need to install some extra packages https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-in-docker Not sure if those packages are available in Lambda.

[cassiebeckley]

@KyleAMathews Lambda doesn't let you write to anything other than the /var/task and /tmp directories, so you can't install font packages in the normal locations. I'm hoping there's an environment variable or a Chrome setting where you can add to the font search path. If nothing else works we can probably make a change in the Chromium source code.

[ooloth]

Emojis are also not rendered in showcase screenshots:

https://next.gatsbyjs.org/showcase/www.michaeluloth.com

If there's a way I can manually submit a more accurate screenshot, please let me know!

[shannonbux]

oh good catch @ooloth ~

The screenshots are rendered by the plugin gatsby-transformer-screenshot and not sure if it's possible to replace the automatic screenshot with a manually chosen one @ThatOtherPerson in the meantime, until someone has time to update the plugin?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[missmatsuko]

This appears to still be an issue.

[lannonbr]

I'll reopen this

[missmatsuko]

There's a Chromium binary for Lambda. It includes a function to download fonts. There's a link to it from the puppeteer troubleshooting docs and is kept up to date within 2 days.

Maybe this should be used in gatsby-transformer-screenshot instead of puppeteer.

I'm not sure which fonts should be downloaded, though. The puppeteer docs mention these fonts for Docker:

// fonts to support major charsets 
// (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst ttf-freefont

Maybe we should use all the Google Noto (No Tofu) fonts? Would that be too much?

[sever1an]

It might be possible to put the fonts in ~/.fonts, maybe even setting $HOME to something helpful if it is poorly defined in Lambda.

[LekoArts]

The screenshots are now sourced from WordPress and not by creating screenshots anymore with gatsby-transformer-screenshot. We've taken the screenshots it created though so entries with problems will still have issues. We can manually change the screenshots now though so will need to ask what to do about it now.

[gillkyle]

I just made an update to our screenshot on WordPress to fix the site for calpa.me, feel free to let me know if you encounter other sites with this issue. If it's a bigger problem across many sites we can investigate a better automated audit of these kinds of issues, but for now I'm going to close this issue since we no longer use the plugin to take screenshots through a Lambda function anyway 🙂