Improve generated social images

[rhoerr]

The social images are configured at https://github.com/mage-os/mage-os-website/blob/master/src/layouts/default.astro#L13

They generate for each page by means of a background color, text, and a transparent image overlay (the Mage-OS logo).

Improvements needed:

• Need to change or remove the default title
• Need to fix long titles getting cut off (wrap if possible)
• Should add description if possible
• Could use with a prettier final social embed image; they're very plain currently

Example:

[rhoerr]

Investigated, not great news on the text wrapping/getting cut off.

The social image generation library docs are at https://github.com/Princesseuh/astro-social-images/blob/main/Docs.md.

This uses an SVG process to turn the config and page info into the social image. Trouble is SVG doesn't inherently support text wrapping. There's an issue on astro-social-images with some discussion of possible solutions, but until somebody contributes a fix, this is what we've got.

That said, I've adjusted the font size and positioning a bit to help. We should try to keep page and post titles down to minimize the overflow. With the serif font my local images generated with, we get about 45 characters on the title. Should be ~2x that for the description.

I fixed the default title in the process.

I'm not a designer, so making it prettier in general will need someone else's help. Maybe I'll revisit in the future. Could add a white bar at the bottom for the logo maybe. It's a little tricky and limited because another limitation of the library is the image is applied as an overlay on top of the text--not a background. That means anywhere there's image, there can't be title or description.

[rhoerr]

Outstanding:

• Could use with a prettier final social embed image; they're very plain currently

[rhoerr]

This may not be worth further action at the moment. We're planning to merge this into the informational site for Mage-OS that's underway, at which point this may not be relevant anymore.