docusaurus 2.2: using the headTags API

blog-website/blog/2021-12-29-preload-fonts-with-docusaurus/index.md

@@ -1,12 +1,16 @@
 ---
-title: 'Preload fonts with Docusaurus'
+title: 'Preload fonts with Docusaurus (updated 30/10/2022)'
 authors: johnnyreilly
-tags: [Docusaurus, preload, webpack, fonts, plugin, configureWebpack]
+tags: [Docusaurus, preload, webpack, fonts, plugin, configureWebpack, headTags]
 image: ./title-image.png
 hide_table_of_contents: false
 ---
 
-When we're using custom fonts in our websites, it's good practice to preload the fonts to minimise the [flash of unstyled text](https://css-tricks.com/fout-foit-foft/). This post shows how to achieve this with Docusaurus. It does so by building a Docusaurus plugin which makes use of [Satyendra Singh](https://github.com/sn-satyendra)'s excellent [`webpack-font-preload-plugin`](https://github.com/sn-satyendra/webpack-font-preload-plugin)
+When we're using custom fonts in our websites, it's good practice to preload the fonts to minimise the [flash of unstyled text](https://css-tricks.com/fout-foit-foft/). This post shows how to achieve this with Docusaurus.
+
+It does so by building a Docusaurus plugin which makes use of [Satyendra Singh](https://github.com/sn-satyendra)'s excellent [`webpack-font-preload-plugin`](https://github.com/sn-satyendra/webpack-font-preload-plugin).
+
+**Updated 30/10/2022:** Subsequently this post demonstrates how to achieve font preloading directly, by using the the `headTags` API.
 
 ![title image reading "Preload fonts with Docusaurus" in a ridiculous font with the Docusaurus logo and a screenshot of a preload link HTML element](title-image.png)
 
@@ -81,3 +85,40 @@ With this in place we're now seeing the `<link rel="preload" ... />` elements be
 ![screenshot of the Chrome devtools featuring link rel="preload" elements](screenshot-preload-devtools.png)
 
 Huzzah!
+
+## Using the `headTags` API
+
+If you're using [Docusaurus 2.2 or greater](https://docusaurus.io/blog/releases/2.2#config-headtags) you can use the new [`headTags` API](https://docusaurus.io/docs/api/docusaurus-config#headTags) and bypass using an extra dependency entirely. Usage looks like this:
+
+```js
+module.exports = {
+  // ...
+  headTags: [
+    // the entry below will make this tag: <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',
+      },
+    },
+    // the entry below will make this tag: <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',
+      },
+    },
+  ],
+  // ...
+};
+```
+
+This blog post was migrated to the `headTags` API approach with the release of Docusaurus 2.2.0. [You can see the PR here](https://github.com/johnnyreilly/blog.johnnyreilly.com/pull/318).

blog-website/blog/2022-10-20-web-monetization-api/index.md

@@ -63,11 +63,30 @@ The next thing to do is to make a `link` tag using the payment pointer. This is
 
 As you can see, the `href` attribute is the payment pointer we just acquired; in its "https" form.
 
-## Docusaurus link tag
+## Docusaurus link tag: updated 30/10/2022
 
 The final step here would be adding this `link` tag to the pages served up by our site. In my case, I use Docusaurus to power my blog. To add an extra `link` tag with Docusaurus we need to add it to the [`docusaurus.config.js`](https://docusaurus.io/docs/next/seo#global-metadata) file.
 
-The syntax for adding an extra `link` tag in the head comes in the form of a mini plugin:
+If you're using [Docusaurus 2.2 or greater](https://docusaurus.io/blog/releases/2.2#config-headtags) you can use the new [`headTags` API](https://docusaurus.io/docs/api/docusaurus-config#headTags). Usage looks like this:
+
+```js
+module.exports = {
+  // ...
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'monetization',
+        href: 'https://ilp.uphold.com/LwQQhXdpwxeJ',
+      },
+    },
+    // This will become <link rel="monetization" href="https://ilp.uphold.com/LwQQhXdpwxeJ" /> in the generated HTML
+  ],
+  // ...
+};
+```
+
+If you're using an older version of Docusaurus, you can the syntax for adding an extra `link` tag in the head comes in the form of a mini plugin:
 
 ```js
 module.exports = {
@@ -98,8 +117,6 @@ module.exports = {
 };
 ```
 
-The code required to add a `link` tag will become simpler [once the changes in this pull request are released](https://github.com/facebook/docusaurus/pull/8151). Until then, we will need to use a plugin.
-
 It's also worth knowing that historically the Web Monetization API used a `meta` tag instead of a `link` tag - and that tag used the `$` prefix instead of `https://`. That tag looked like this:
 
 ```html

blog-website/docusaurus.config.js

@@ -2,7 +2,6 @@
 const urlRegex = /^\/\d{4}\/\d{2}\/\d{2}\//;
 
 const fontaine = require('fontaine');
-const FontPreloadPlugin = require('webpack-font-preload-plugin');
 const lightCodeTheme = require('prism-react-renderer/themes/nightOwl'); //github
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
@@ -78,18 +77,39 @@ const config = {
     ],
   ],
 
-  plugins: [
-    function preloadFontPlugin(_context, _options) {
-      return {
-        name: 'preload-font-plugin',
-        configureWebpack(_config, _isServer) {
-          return {
-            plugins: [new FontPreloadPlugin()],
-          };
-        },
-      };
+  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',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'monetization',
+        href: 'https://ilp.uphold.com/LwQQhXdpwxeJ',
+      },
     },
+  ],
 
+  plugins: [
     function fontainePlugin(_context, _options) {
       return {
         name: 'fontaine-plugin',
@@ -119,36 +139,6 @@ const config = {
       };
     },
 
-    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',
-                },
-              },
-            ],
-          };
-        },
-      };
-    },
-    // [
-    //   'ideal-image',
-    //   /** @type {import('@docusaurus/plugin-ideal-image').PluginOptions} */
-    //   ({
-    //     quality: 70,
-    //     max: 1030,
-    //     min: 640,
-    //     steps: 2,
-    //     // Use false to debug, but it incurs huge perf costs
-    //     disableInDev: true,
-    //   }),
-    // ],
     [
       'client-redirects',
       /** @type {import('@docusaurus/plugin-client-redirects').Options} */
@@ -169,6 +159,7 @@ const config = {
         },
       }),
     ],
+
     [
       'pwa',
       {

blog-website/package.json

@@ -14,26 +14,25 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.1.0",
-    "@docusaurus/plugin-client-redirects": "2.1.0",
-    "@docusaurus/plugin-ideal-image": "2.1.0",
-    "@docusaurus/plugin-pwa": "2.1.0",
-    "@docusaurus/preset-classic": "2.1.0",
+    "@docusaurus/core": "2.2.0",
+    "@docusaurus/plugin-client-redirects": "2.2.0",
+    "@docusaurus/plugin-ideal-image": "2.2.0",
+    "@docusaurus/plugin-pwa": "2.2.0",
+    "@docusaurus/preset-classic": "2.2.0",
     "@mdx-js/react": "1.6.22",
-    "@svgr/webpack": "6.5.0",
-    "@swc/core": "1.3.10",
+    "@svgr/webpack": "6.5.1",
+    "@swc/core": "1.3.11",
     "clsx": "1.2.1",
     "file-loader": "6.2.0",
     "prism-react-renderer": "1.3.5",
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "swc-loader": "0.2.3",
-    "url-loader": "4.1.1",
-    "webpack-font-preload-plugin": "1.5.0"
+    "url-loader": "4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.1.0",
+    "@docusaurus/module-type-aliases": "2.2.0",
     "@tsconfig/docusaurus": "1.0.6",
     "fontaine": "0.2.1",
     "typescript": "4.8.4"

blog-website/src/css/custom.css

@@ -23,15 +23,15 @@
 
 @font-face {
   font-family: 'Poppins';
-  src: url('../fonts/Poppins-Regular.ttf');
+  src: url('/fonts/Poppins-Regular.ttf');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Poppins';
-  src: url('../fonts/Poppins-Bold.ttf');
+  src: url('/fonts/Poppins-Bold.ttf');
   font-weight: 700;
   font-style: normal;
   font-display: swap;