From 0ff2bae53a6af5748e3cce4dc7f9fff4077be278 Mon Sep 17 00:00:00 2001 From: Devon Rueckner Date: Wed, 10 Apr 2024 08:58:50 -0400 Subject: [PATCH 1/4] update readme commands --- website/README.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/website/README.md b/website/README.md index 3cedd54248..d35f51a260 100644 --- a/website/README.md +++ b/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 From 496d33c3daf30742c27bb541cf5ee3185544c2bb Mon Sep 17 00:00:00 2001 From: Devon Rueckner Date: Wed, 10 Apr 2024 12:01:44 -0400 Subject: [PATCH 2/4] modify webpack config to address SVG issue --- website/docusaurus.config.js | 55 ++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index d5459f9b65..53fb8fc5bd 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -9,6 +9,57 @@ 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 + * + * 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; + } + } + } + } + } + } + } + } + } +} + /** @type {import('@docusaurus/types').Config} */ const config = { title: "MCAP", @@ -34,6 +85,10 @@ 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); + return { mergeStrategy: { "resolve.extensions": "replace", From 245bf48b4d0a2020dd3847f2643471fe3e11b419 Mon Sep 17 00:00:00 2001 From: Devon Rueckner Date: Thu, 11 Apr 2024 16:28:12 -0400 Subject: [PATCH 3/4] elaborate comment --- website/docusaurus.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 53fb8fc5bd..4e3b3e4ac3 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -10,7 +10,9 @@ 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 + * 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 From 13e4d7daaa3f44b78f8ea7fdc25a94456f48b236 Mon Sep 17 00:00:00 2001 From: Devon Rueckner Date: Thu, 11 Apr 2024 16:46:15 -0400 Subject: [PATCH 4/4] refactor --- website/docusaurus.config.js | 58 ++---------------------------- website/modifySvgoConfigInPlace.js | 53 +++++++++++++++++++++++++++ 2 files changed, 55 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..70f7c1fb1a --- /dev/null +++ b/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"); + } +};