Open corywatilo opened 2 years ago
@corywatilo Love this!!
What do you think about also adding the categories to the lower right if the background doesn't exist? Basically using the idea from this design, except replacing "Next.js, Supabase, PostHog" with the categories if no background image exists.
Actually I think it makes sense as a concept to show them all the time. I don't love how this looks (need to put some more time into it) but let's definitely factor in that data showing up on all of these!
Flyby comment: This is so cool.
Problem
Our recent redesign of the Tutorials section requires artwork for each post, as we don't display the title in the feed view:
The problem is that we can't publish new tutorials without having a dependency on graphic design.
The Blog has a fallback solution: when a post doesn't have custom artwork, we have a library of stock images that can be reused.
This could work for tutorials, but in this section, the current poster images work in both light and dark mode by using art with a transparent background where the page background color can bleed through.
So how can we have both: a) custom artwork that doesn't become a blocker, b) images that work in light and dark mode?
Solution
Since we now have headless Chrome running and generating open graph images on-the-fly, we could leverage this to automatically generate tutorial posters that include custom artwork only if it exists.
The following screenshot shows all current tutorial posters using this proposed format:
How it works
96px
unless the length exceed ~60(ish) characters, at which point it drops to72px
Examples