From 12e7bf692084e14563ea53b34d3135d2fd1cc11b Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 11 Apr 2024 20:45:18 +0200
Subject: feat(web): embed SVG into HTML directly

* Makes sure element IDs and CSS do not interfere with other diagrams in the
  same HTML document.
* Disables SVGO to allow embedding in Docusaurus with CSS intact.
* Replaces PNG figures with SVG in documentation.
---
 subprojects/docs/src/plugins/loadersPlugin.ts | 72 +++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 subprojects/docs/src/plugins/loadersPlugin.ts

(limited to 'subprojects/docs/src/plugins/loadersPlugin.ts')

diff --git a/subprojects/docs/src/plugins/loadersPlugin.ts b/subprojects/docs/src/plugins/loadersPlugin.ts
new file mode 100644
index 00000000..28474511
--- /dev/null
+++ b/subprojects/docs/src/plugins/loadersPlugin.ts
@@ -0,0 +1,72 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import type { Plugin } from '@docusaurus/types';
+
+export default function loadersPlugin(): Plugin {
+  return {
+    name: 'refinery-loaders-plugin',
+    configureWebpack(config) {
+      let svgoDisabled = false;
+      const rules = [...(config.module?.rules ?? [])];
+      rules.forEach((rule) => {
+        // Compare with
+        // https://github.com/facebook/docusaurus/blob/73016d4936164ba38d4b86ec2aa8c168b5904a21/packages/docusaurus-utils/src/webpackUtils.ts#L128-L166
+        if (
+          typeof rule !== 'object' ||
+          rule === null ||
+          !('test' in rule) ||
+          !(rule.test instanceof RegExp) ||
+          !rule.test.test('.svg') ||
+          !('oneOf' in rule)
+        ) {
+          return;
+        }
+        const {
+          oneOf: [svgLoader],
+        } = rule;
+        if (
+          typeof svgLoader !== 'object' ||
+          svgLoader === null ||
+          !('use' in svgLoader) ||
+          typeof svgLoader.use !== 'object' ||
+          svgLoader.use === null ||
+          !(0 in svgLoader.use)
+        ) {
+          return;
+        }
+        const {
+          use: [loader],
+        } = svgLoader;
+        if (
+          typeof loader !== 'object' ||
+          loader === null ||
+          !('options' in loader)
+        ) {
+          return;
+        }
+        loader.options = {
+          ...(typeof loader.options === 'object' ? loader.options : {}),
+          // Disable SVGO, because it interferes styling figures exported from Refinery with CSS.
+          svgo: false,
+          svgoConfig: undefined,
+        };
+        svgoDisabled = true;
+      });
+      if (!svgoDisabled) {
+        throw new Error('Failed to disable SVGO.');
+      }
+      return {
+        mergeStrategy: {
+          'module.rules': 'replace',
+        },
+        module: {
+          rules,
+        },
+      };
+    },
+  };
+}
-- 
cgit v1.2.3-54-g00ecf