address SVG logo issue (#1157)

### Changelog

none

### Description

As described in facebook/docusaurus#8297, the
default webpack config for docusaurus has svgo configured to replace
`id` attributes with simple incrementing characters like `"a"`, `"b"`,
etc. This leads to ID conflicts between logos and incorrect clipping
behavior.

This PR modifies the underlying webpack config to disable changes to ID
attributes.

Note that on mac, I was only able reproduce the visual clipping issue in
Safari; FF and Chrome seemed to ignore the incorrectly duplicated IDs .

<table><tr><th>Before</th><th>After</th></tr><tr><td>

<img width="1193" alt="image"
src="https://github.com/foxglove/mcap/assets/2367265/cd7eb926-6b21-43b6-8ffa-e8b8126612fd">

</td><td>

<img width="1161" alt="image"
src="https://github.com/foxglove/mcap/assets/2367265/1d3d3a07-beff-4d32-9fba-76cb21aad4e6">


</td></tr></table>

website/README.md

@@ -4,26 +4,30 @@ MCAP documentation is built using [Docusaurus](https://docusaurus.io/).
 
 ### Installation
 
-```
-$ corepack enable
-$ yarn install
+```sh
+corepack enable
+yarn install
 ```
 
 ### Local Development
 
-```
-$ yarn start
+```sh
+yarn start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Production Build
 
-```
-$ yarn build
+```sh
+yarn build
 ```
 
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
+This command generates static content into the `build` directory and can be served using:
+
+```sh
+yarn serve
+```
 
 ### Deployment
 

website/docusaurus.config.js

@@ -9,6 +9,8 @@ const util = require("util");
 const webpack = require("webpack");
 const execAsync = util.promisify(require("child_process").exec);
 
+const modifySvgoConfigInPlace = require("./modifySvgoConfigInPlace");
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "MCAP",
@@ -34,6 +36,7 @@ const config = {
     (_context, _options) => ({
       name: "MCAP website custom webpack config",
       configureWebpack(config, _isServer, _utils, _content) {
+        modifySvgoConfigInPlace(config);
         return {
           mergeStrategy: {
             "resolve.extensions": "replace",

website/modifySvgoConfigInPlace.js

@@ -0,0 +1,53 @@
+/* eslint-env node */
+/* cspell:disable */
+// @ts-nocheck
+
+/**
+ * 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 (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");
+  }
+};