Docs: Auto-generated "Link preview" thumbnails for all pages

[loteoo]

As a follow up to #11137, this PR integrates auto-generated og:images with the thumbsmith service.

More precisely, it adds:

• The HTML/CSS template for the design of the thumbnails
• The glue code to "hook up" the thumbnails in the VuePress config
• The assets for the thumbnail
• A small readme file with usage instructions

Requirement before merging:

A THUMBSMITH_API_TOKEN environment variable needs to be added in the netlify build config

---

Here's some samples (with the updated design by @benhaynes 🚀 ):

Note on the breadcrumbs: I removed the "last element" in the breadcrumbs to match the new design. There was also a case where the breadcrumb was the same text as the page title which was weird (ex: Getting Started: Getting Started), in that case, the page name in the menu is used instead instead of the page title. (ex: Getting Started: Introduction)

Let me know what you think!! :)

cc @rijkvanzanten 🙏

[rijkvanzanten]

Heya! Thanks for this great improvement 🙂

Just so I don't merge this and nothing changes: What steps do we have to change to actually build the OG images in production? Looks like there's an addition CLI tool and build command? Could we update the package.json of the docs to include that CLI and build command on the main npm run build call? That way we're ensure it'll actually build it properly on Netlify as well 👍🏻

[loteoo]

Heya! Thanks for this great improvement 🙂

Just so I don't merge this and nothing changes: What steps do we have to change to actually build the OG images in production? Looks like there's an addition CLI tool and build command? Could we update the package.json of the docs to include that CLI and build command on the main npm run build call? That way we're ensure it'll actually build it properly on Netlify as well 👍🏻

Hey, my pleasure!! You don't need to build the images in the repo, they are rendered at the CDN-level when needed (when requested by a third party) and then they are cached.

The CLI command is to "upload" the template to the service. I think it would be a good idea like you mentioned to add this in the build command. I will update the PR. This way, we will just need to update the HTML/CSS template to update the design and everything else will be automated 💯

[benhaynes]

Thank you! This looks great to me. For the breadcrumb, I was using -> to separate crumbs, which uses ligatures in Inter to create an arrow. I'm fine just keeping it simple like this, but wanted to make you aware.

Otherwise, this is ready to go from my end!

[benhaynes]

@rijkvanzanten — can you confirm that the page title granularity is what we want? Just need to make sure the most relevant text (which may be an anchor) is what we surface.

[loteoo]

@rijkvanzanten I just pushed the integration with the build command :). However, someone will have to add the API key in the netlify config (THUMBSMITH_API_TOKEN environment variable on the build command).

I think @benhaynes created an account a while back, you can use that one, or create a new one. Make sure the "handle" of the account is directus. (https://github.com/directus/directus/pull/11186/files#diff-52eb86351480925d61947a58caca1ea76d10950ec26533f16f37cb12a3519dffR582)

@benhaynes Noted for the breadcrumb that's also what I used!! Nifty feature of the Inter font :)

Note for the link anchors (/path#anchor), those are not considered as a separate URL when sharing links, they are ignored so there is no way to detect them server-side unfortunately.

[benhaynes]

I reserved directus and have the API Token when ready.

[netlify]

👷 Deploy request for directus-docs accepted.

Name	Link
🔨 Latest commit	2f64b96
🔍 Latest deploy log	https://app.netlify.com/sites/directus-docs/deploys/6298813c25971e00098c3f4b