From ee14143dca7a8b7a5ea482ae6daf8385ca82e586 Mon Sep 17 00:00:00 2001
From: Devon Rueckner <devon@foxglove.dev>
Date: Thu, 11 Apr 2024 16:46:15 -0400
Subject: [PATCH] refactor

---
 website/docusaurus.config.js       | 58 ++----------------------------
 website/modifySvgoConfigInPlace.js | 55 ++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 56 deletions(-)
 create mode 100644 website/modifySvgoConfigInPlace.js

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 4e3b3e4ac3..afd8b2ac37 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -9,58 +9,7 @@ const util = require("util");
 const webpack = require("webpack");
 const execAsync = util.promisify(require("child_process").exec);
 
-/**
- * Modify the svgo configuration (in place) to prevent it from minifying IDs in SVGs.
- * This is necessary because it doesn't account for the global ID namespace, and causes
- * ID collisions between the SVGs loaded into the same page.
- *
- * Refs:
- * - https://github.com/facebook/docusaurus/issues/8297
- * - https://github.com/svg/svgo/issues/1714
- * - https://linear.app/foxglove/issue/FG-7251/logos-are-cut-off-on-mcapdev
- *
- * @param {webpack.Configuration} config
- */
-function modifySvgoConfig(config) {
-  const NEW_SVGO_CONFIG = {
-    plugins: [
-      {
-        name: "preset-default",
-        params: {
-          overrides: {
-            removeTitle: false,
-            removeViewBox: false,
-            cleanupIDs: false, // do not change IDs
-          },
-        },
-      },
-    ],
-  };
-  // find the svgo config rule and replace it
-  if (config.module?.rules instanceof Array) {
-    for (const rule of config.module.rules) {
-      if (typeof rule === "object" && rule.test?.toString() === "/\\.svg$/i") {
-        if (rule.oneOf instanceof Array) {
-          for (const nestedRule of rule.oneOf) {
-            if (nestedRule.use instanceof Array) {
-              for (const loader of nestedRule.use) {
-                if (
-                  typeof loader === "object" &&
-                  /* cspell:disable */
-                  loader.loader === require.resolve("@svgr/webpack")
-                ) {
-                  if (typeof loader.options === "object") {
-                    loader.options.svgoConfig = NEW_SVGO_CONFIG;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+const modifySvgoConfigInPlace = require("./modifySvgoConfigInPlace");
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -87,10 +36,7 @@ const config = {
     (_context, _options) => ({
       name: "MCAP website custom webpack config",
       configureWebpack(config, _isServer, _utils, _content) {
-        // Update config.module.rules directly.
-        // (Unclear if this is possible with a mergeStrategy below.)
-        modifySvgoConfig(config);
-
+        modifySvgoConfigInPlace(config);
         return {
           mergeStrategy: {
             "resolve.extensions": "replace",
diff --git a/website/modifySvgoConfigInPlace.js b/website/modifySvgoConfigInPlace.js
new file mode 100644
index 0000000000..df366de3be
--- /dev/null
+++ b/website/modifySvgoConfigInPlace.js
@@ -0,0 +1,55 @@
+// @ts-nocheck
+/* eslint-env node */
+
+/**
+ * Modify the svgo configuration (in place) to prevent it from minifying IDs in SVGs.
+ * This is necessary because it doesn't account for the global ID namespace, and causes
+ * ID collisions between the SVGs loaded into the same page.
+ *
+ * Refs:
+ * - https://github.com/facebook/docusaurus/issues/8297
+ * - https://github.com/svg/svgo/issues/1714
+ * - https://linear.app/foxglove/issue/FG-7251/logos-are-cut-off-on-mcapdev
+ *
+ * @param {webpack.Configuration} config
+ */
+module.exports = function modifySvgoConfigInPlace(config) {
+  const NEW_SVGO_CONFIG = {
+    plugins: [
+      {
+        name: "preset-default",
+        params: {
+          overrides: {
+            removeTitle: false,
+            removeViewBox: false,
+            cleanupIDs: false, // do not change IDs
+          },
+        },
+      },
+    ],
+  };
+  // try to find the svgo config rule and replace it
+  let updated = false;
+  try {
+    for (const rule of config.module.rules) {
+      if (rule.test?.toString() === "/\\.svg$/i") {
+        for (const nestedRule of rule.oneOf) {
+          for (const loader of nestedRule.use) {
+            if (
+              /* cspell:disable */
+              loader.loader === require.resolve("@svgr/webpack")
+            ) {
+              loader.options.svgoConfig = NEW_SVGO_CONFIG;
+              updated = true;
+            }
+          }
+        }
+      }
+    }
+  } catch (e) {
+    console.error("Error while attempting to modify svgo config: " + e);
+  }
+  if (!updated) {
+    throw new Error("Failed to update svgo config");
+  }
+};