search

quarkusio / quarkusio.github.io

Website for Quarkus project
https://quarkus.io
156 stars 364 forks source link

Customize the preview image for guides #1723

Open gastaldi opened 1 year ago

gastaldi commented 1 year ago

When pasting a guide URL in any social media (including chat apps, like Telegram), the preview image displayed is a static image (eg. https://quarkus.io/guides/rest-client-reactive):

It would be nice if the guide title were printed in that preview image (it could be generated during the build) so we could customize it in the <meta property="og:image" content="https://quarkus.io/assets/images/quarkus_card.png"> entry on each guide page

gastaldi commented 1 year ago

@insectengine can I have a PNG or SVG without the Supersonic Subatomic Java heading? Also what is the font used?

insectengine commented 1 year ago

The fonts for Quarkus is "Open Sans".

https://fonts.google.com/specimen/Open+Sans

insectengine commented 1 year ago

@gastaldi - Check your gchat.

quarkus-bot[bot] commented 1 year ago

/cc @MichalMaler (documentation), @ebullient (documentation), @hmanwani-rh (documentation), @inoxx03 (documentation), @michelle-purcell (documentation), @sheilamjones (documentation), @sunayna15 (documentation)

gastaldi commented 1 year ago

Based on https://www.digitalocean.com/community/tutorials/how-to-process-images-in-node-js-with-sharp#step-7-adding-text-on-an-image, I created a small NodeJS application that creates these images given a text: https://github.com/gastaldi/social-image-text/blob/main/addTextOnImage.js

Here is an example of a generated image:

quarkus-output