Cover Image Generator

[neilherbertuk]

I've created a blog post cover generator using node-html-to-image and tinycolor2 and based loosely on https://terabytetiger.com/lessons/generated-blog-post-cover-images-with-gridsome/. I've tested this with netlify and it does generate covers as expected. However, if you leave this to be run by a pipeline, your cover images will change unpredictably each time you deploy. It would be best to generate them locally and commit the generated covers to your git repo.

Each time you run yarn develop it checks to see if a cover image needs to be generated. It checks all Posts for a thumbnail frontmatter entry, if one does not exist the post filename is used postfixed with .png. If the cover image file does not exist it proceeds to generate a cover image based on the design already used for the cover images provided with geek-blog. If you wish to use something shorter/different from the post title add a cover_title frontmatter entry. If a cover_title entry exists it will use that, otherwise it will use the title entry.

If you wish to regenerate a cover, simply delete the existing one and re-run yarn develop.

This works by adding an entry in the gridsome.server.js file and a function within src/functions/generate-cover.js. Out of the box the cover generator will create a completely random colour each time it runs. If you want to define a selection of colours to pick from, update the colours array within generate-cover.js and switch over the comments at the bottom of the following section:

// Set Colours
  const colours = [
    "#559BFF",
    "#FFD948",
    "#CD1FFF",
    "#41FFA7",
    "#FF6336",
    "#FF4576"
  ]
  console.log("Picking a main colour")
  // Use a colour from the array above
  //const mainColour = colours.random()
  // or select a random colour
  const mainColour = randomColour()

This may need some tweaking and thoughts to whether this should be a feature that can be turned off using an environment variable? Also whether to include the generated covers in the released version or stick with the existing?

[netlify]

✅ Deploy Preview for gridsome-geek-blog ready!

Name	Link
🔨 Latest commit	847ec17
🔍 Latest deploy log	https://app.netlify.com/sites/gridsome-geek-blog/deploys/624d519292d3e00008ce6d11
😎 Deploy Preview	https://deploy-preview-8--gridsome-geek-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[xqsit94]

Hi @neilherbertuk I appreciate your work, this is cool feature. I have few suggestions

1. Generate png file name using path.
2. Generated png should appended with few random string, for example introduction-141g.png (like slug generated in dev.to)
3. And yes, this feature should have toggle in .env by default set to AUTO_GENERATE_COVER=false
4. And finally instead of math.random use cryptographically secure random number generator to avoid sonarqube checks failure.

Great work 🙌 ! Thanks for PR

[neilherbertuk]

Thanks for the comments @xqsit94. Happy to make changes as needed just need some clarity.

1. Generate png from `path` not from `title` or `cover_title`

Could you expand on this a little? Do you mean take the file name, parse and use that as the text in the image? That might not be that desired and very hard to parse. If your filename is 2022-04-04-some-title-here it would be difficult to know exactly what to use from that? Would you want the date within the text used for the image? I can imagine adding parsing to do date checking and such would make it a little complex, especially taking into account any date format could prefix the file, if any? I felt letting the user override this in their frontmatter would the least complex way to do that!

2. Generated png should appended with few random string, for example `introduction-141g` (like slug generated in [dev.to](https://dev.to))

I get where you are coming from with this, there could easily be a file clash between posts. However, this would require updating the post md file from the function generating the cover image to add the exact thumbnail filename thats been generated. I'm not comfortable making changes to the user's content. Perhaps it would be better to just match the name of the post so in my example above 2022-04-04-some-title-here.pngwhich it already does if the thumbnail frontmatter has not been supplied. Though I have not connected that up in your version yet.

3. And yes, this feature should have toggle in .env by default set to `AUTO_GENERATE_COVER=false`

Absolutely! Will look at adding that and

4. And finally instead of `math.random` use cryptographically secure random number generator to avoid sonarqube checks failure.

I understand the desire to surpress the error mentioned with sonarqube however, I'm not sure how valid this is. In the context of what it's being used for, it poses no security risks. It's being used to pick a random colour, the functionality of which doesn't matter if it's predictable due to it not being cryptography secure.

[neilherbertuk]

@xqsit94

I've added the feature flag as suggested.

I've also added some docs to cover use of that feature.

I've changed the code so it does not generate a cover image if a thumbnail front matter entry does not exist. In my first draft it generated a cover image based on the node.fileinfo.name parameter. I did try to figure out how to get it to use the generated image if thumbnail isn't present but it doesn't look possible. As VueJS is client-side (I know in this case its doing server-side rendering) you cannot include fs to check whether a file exists or not. So it is hard to get it to load the image based on node.fileinfo.name inside vuejs.

Could do with some guidance from my last reply.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

No Coverage information
0.0% Duplication

[neilherbertuk]

@xqsit94 I've cleared all but 1 "code smell" from sonar. Not willing to clear the security hotspots as these are non-issues, these can be marked as safe on sonarcloud by yourself or I can add //nosonar at the end of each line that uses math.random(). As I previously said, the use of these is purely to randomise some presentation choices and has no security implications.

[xqsit94]

Yes @neilherbertuk I have marked it as safe.
Thanks for your wonderful work and time. 🍻

[neilherbertuk]

@xqsit94, I really like geek-blog. Glad I can contribute!