Add a link preview image to the showcase

CHANGELOG.md

@@ -67,6 +67,9 @@ The eraser, laser pointer and polygon tools, pinch zoom, and features that forks
 - The showcase has keyboard shortcuts for the tools, undo, redo, copy, paste, delete, save and zoom, listed by `?`.
 - The showcase is deployed to <https://tbolis.github.io/react-sketch/> by `.github/workflows/pages.yml`, when the
   library, the showcase or their dependencies change on `master`, and on demand from the Actions tab.
+- The page of the showcase has a link preview (Open Graph and Twitter card tags, with a 1200 x 630 image), so a
+  link to it shows a title, a description and an image in chats and on social networks. It also has PNG icons
+  (32 pixel and Apple touch) next to the icon file.
 
 ### Changed
 

packages/showcase/public/base.html

@@ -10,6 +10,34 @@
     <meta
       name="description"
       content="<%= htmlWebpackPlugin.options.description %>" />
+    <link rel="canonical" href="<%= htmlWebpackPlugin.options.siteUrl %>" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
+    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <!-- The preview of a link to the page, in chats and on social networks -->
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="react-sketch" />
+    <meta property="og:title" content="<%= htmlWebpackPlugin.options.title %>" />
+    <meta
+      property="og:description"
+      content="<%= htmlWebpackPlugin.options.description %>" />
+    <meta property="og:url" content="<%= htmlWebpackPlugin.options.siteUrl %>" />
+    <meta
+      property="og:image"
+      content="<%= htmlWebpackPlugin.options.siteUrl %>og-image.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta
+      property="og:image:alt"
+      content="The brush of the react-sketch logo, and the title react-sketch Showcase" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="<%= htmlWebpackPlugin.options.title %>" />
+    <meta
+      name="twitter:description"
+      content="<%= htmlWebpackPlugin.options.description %>" />
+    <meta
+      name="twitter:image"
+      content="<%= htmlWebpackPlugin.options.siteUrl %>og-image.png" />
   </head>
   <body>
     <div id="container"></div>

packages/showcase/webpack.config.js

@@ -1,8 +1,42 @@
+const fs = require("fs");
 const path = require("path");
+const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const port = 23000;
 
+/**
+ * Where the showcase is deployed (GitHub Pages). The link preview of the page (Open Graph
+ * and Twitter card) needs absolute URLs, a relative one shows no image.
+ */
+const siteUrl = "https://tbolis.github.io/react-sketch/";
+
+/** The files of public/ which the build copies as they are, the page links them by name */
+const staticFiles = ["og-image.png", "apple-touch-icon.png", "favicon-32.png"];
+
+class CopyStaticFiles {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap("CopyStaticFiles", (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: "CopyStaticFiles",
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        () => {
+          for (const name of staticFiles) {
+            const file = path.join(__dirname, "public", name);
+            compilation.fileDependencies.add(file);
+            compilation.emitAsset(
+              name,
+              new webpack.sources.RawSource(fs.readFileSync(file))
+            );
+          }
+        }
+      );
+    });
+  }
+}
+
 module.exports = {
   target: "web",
   entry: "./src/index.tsx",
@@ -59,6 +93,8 @@ module.exports = {
       filename: "index.html",
       template: "./public/base.html",
       favicon: "./public/favicon.ico",
+      siteUrl,
     }),
+    new CopyStaticFiles(),
   ],
 };