docusaurus 2.2: using the headTags API

[johnnyreilly]

This PR migrates the blog to use the new headTags API that shipped with Docusaurus 2.2. There's two types of usage; the Web Monetization API and font preloading.

This PR also updates blog posts to detail how to use the new API.

Web Monetization tags

We no longer need a plugin to add our head tags - we can pull that out in favour of an entry in the headTags entry:

/** @type {import('@docusaurus/types').Config} */
const config = {
  // ...
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'monetization',
+        href: 'https://ilp.uphold.com/LwQQhXdpwxeJ',
+      },
+    },
+  ],

  // ...
  plugins: [
-    function extraHeadTagsPlugin(context, options) {
-      return {
-        name: 'extra-head-tags-plugin',
-        injectHtmlTags({ content }) {
-          return {
-            headTags: [
-              {
-                tagName: 'link',
-                attributes: {
-                  rel: 'monetization',
-                  href: 'https://ilp.uphold.com/LwQQhXdpwxeJ',
-                },
-              },
-            ],
-          };
-        },
-      };
-    },
     // ...
  ],
  // ...
}

With this change in place we have the exact same outcome, but have to write less code.

See implementing commit here.

Font preloading tags

When it comes to font preloading, the difference is not so much less code (in fact we write slightly more code) but less dependencies. We get to say goodbye to the webpack-font-preload-plugin dependency in favour of two headTags entries referencing our custom font:

- const FontPreloadPlugin = require('webpack-font-preload-plugin');

/** @type {import('@docusaurus/types').Config} */
const config = {
  // ...
+  headTags: [
+    // <link rel="preload" href="/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preload',
+        href: '/fonts/Poppins-Regular.ttf',
+        as: 'font',
+        type: 'font/ttf',
+        crossorigin: 'anonymous',
+      },
+    },
+    // <link rel="preload" href="/fonts/Poppins-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'preload',
+        href: '/fonts/Poppins-Bold.ttf',
+        as: 'font',
+        type: 'font/ttf',
+        crossorigin: 'anonymous',
+      },
+    },
+  ],

  // ...
  plugins: [
-    function preloadFontPlugin(_context, _options) {
-      return {
-        name: 'preload-font-plugin',
-        configureWebpack(_config, _isServer) {
-          return {
-            plugins: [new FontPreloadPlugin()],
-          };
-        },
-      };
-    },
     // ...
  ],
  // ...
}

See implementing commit here.

You'll also note we move the fonts into the static directory so they can be easily referenced. They probably should have been there in the first place.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-sky-0bfc7e803-318.westeurope.1.azurestaticapps.net

[github-actions]

⚡️🏠 Lighthouse report

We ran Lighthouse against the changes and produced this report. Here's the summary:

Category	Score
🔴 Performance	36
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	98
🟢 PWA	100

Lighthouse ran against https://thankful-sky-0bfc7e803-318.westeurope.1.azurestaticapps.net/

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-sky-0bfc7e803-318.westeurope.1.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-sky-0bfc7e803-318.westeurope.1.azurestaticapps.net