[tbolis]

Summary

A link to https://tbolis.github.io/react-sketch/ shows a title and a description in Slack, with an empty image box. The page has no Open Graph or Twitter card tags, so there is no image to show.

• Adds og:* and twitter:* tags, with an absolute URL for og-image.png (1200 x 630, 59 KB: the brush of the logo, the title and a line of description), summary_large_image, a canonical link, and the size and alt text of the image.
• Adds favicon-32.png and apple-touch-icon.png next to favicon.ico.
• webpack.config.js copies those three files from packages/showcase/public to the build with a small plugin (no new dependency), and passes the address of the deployment (siteUrl) to the template.
• CHANGELOG entry in the 1.1.0 Added list, saying it is about the showcase.

The workflow deploys on pushes to master that change packages/** (not markdown), so merging this deploys it.

Verification

• yarn lint and the Prettier check pass. The build emits the three files and the tags, and the build served under /react-sketch/ returns 200 for each of them, with an og-image.png identical to the one in public/.
• The 62 checks of the scripted Chrome session still pass on that build, with no console errors.
• Not verified: the preview in Slack itself. The image URL is the live one, so it only resolves after this is deployed.

Notes

• Slack keeps a link preview for a while. After the deployment, post the link again with a query, for example https://tbolis.github.io/react-sketch/?v=2, or ask Slack to refresh it, to see the new one.
• The small icon next to the domain in Slack is taken from the icons of the page. The PNG icons are added for that, I cannot tell whether Slack uses them.