Component generate script not properly copying placeholder thumbnail

[davidmenendez]

This was noticed when looking at the example gallery and noticing that a lot of newer components & patterns are missing thumbnails for the gallery.

After some investigation I tracked it down to the generate script used to create new component folders. i tracked down the specific code to this particular line. currently readFileSync is using a utf8 encoding and when yarn generate is used the thumbnail it creates looks like this in vscode

You can actually see the corrupted thumbnail files in our repo. Here's one such example for BigNumbers.

What I found was that when I omitted the utf8 encoding that the image was created successfully.

The Node documentation for readFileSync says the following:

If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.

I'm not well versed in how the node filesystem reads various file types and how different encodings impact them. My guess at this point is that at some point a newer Node version changed how readFileSync works and that caused the file corruptions. The code was originally introduced three years ago, so it was definitely using an older version of Node.

I don't know if there's a better solution to this than just checking for thumbnail.png and omitting the encoding. I think it would be helpful to pull someone in with more experience and knowledge on this topic to help direct us towards a working solution.

[elycheea]

@davidmenendez thanks for the investigation and popping this into the dev channel. Don’t forget to self-triage this one. :)