Ensure path prefix is used for SVG links

Abandon use of "static" tree for SVGs in favor of an approach that allows them to be used more or less the same as any other image.

advocacy_docs/edb-postgres-ai/analytics/concepts.mdx

@@ -14,7 +14,7 @@ operational data on the EDB Postgres® AI platform.
 
 Here's how it fits together:
 
-[![Level 50 basic architecture](/svg/edb-postgres-ai/analytics/level-50.svg)](/svg/edb-postgres-ai/analytics/level-50.svg)
+[![Level 50 basic architecture](images/level-50.svg)](images/level-50.svg)
 
 ### Lakehouse node
 
@@ -103,7 +103,7 @@ its attached hard drives. Instead, you can keep data in object storage (and also
 in highly compressible formats), and only provision the compute needed to query
 it when necessary.
 
-[![Level 100 Architecture](/svg/edb-postgres-ai/analytics/level-100.svg)](/svg/edb-postgres-ai/analytics/level-100.svg)
+[![Level 100 Architecture](images/level-100.svg)](images/level-100.svg)
 
 On the compute side, a Vectorized Query Engine is optimized to query Lakehouse
 Tables, but still fall back to Postgres for full compatibility.
@@ -115,10 +115,10 @@ columnar storage formats optimzied for Analytics.
 
 Here's a slightly more comprehensive diagram of how these services fit together:
 
-[![Level 200 Architecture](/svg/edb-postgres-ai/analytics/level-200.svg)](/svg/edb-postgres-ai/analytics/level-200.svg)
+[![Level 200 Architecture](images/level-200.svg)](images/level-200.svg)
 
 ### Level 300
 
 Here's the more detailed, zoomed-in view of "what's in the box":
 
-[![Level 200 Architecture](/svg/edb-postgres-ai/analytics/level-300.svg)](/svg/edb-postgres-ai/analytics/level-300.svg)
+[![Level 200 Architecture](images/level-300.svg)](images/level-300.svg)

gatsby-node.js

@@ -76,6 +76,13 @@ exports.onCreateNode = async ({
         mimeType: "text/plain; charset=utf-8",
       });
     }
+
+    // For "natural" linking to work, this also depends on support from the link-rewriter in src/components/layout.js
+    if (node.extension === "svg") {
+      await makeFileNodePublic(node, createNodeId, actions, {
+        mimeType: "image/svg+xml",
+      });
+    }
   }
 
   if (node.internal.type !== "Mdx") return;

src/components/layout.js

@@ -1,5 +1,6 @@
 import React, { useState, useLayoutEffect, useMemo } from "react";
 import { Helmet } from "react-helmet";
+import { withPrefix } from "gatsby";
 import useSiteMetadata from "../hooks/use-sitemetadata";
 import {
   Archive,
@@ -18,6 +19,42 @@ import Icon from "../components/icon/";
 
 import "../styles/index.scss";
 
+const mapRelativeResourcePath = (
+  url,
+  containingPageUrl,
+  containingPageIsIndex,
+) => {
+  // add file extensions here to enable "filesystem-like" references from .mdx pages
+  // Note: you'll probably also need to enable importing them via a call to makeFileNodePublic() in gatsby-node.js
+  const resourceTypes = [".svg"];
+
+  // test for absolute URLs; when we pass Node 19.9, switch to use canParse
+  try {
+    new URL(url);
+    // if we get this far, URL is absolute and we don't want to touch it
+    return url;
+  } catch {}
+
+  try {
+    // consistent behavior while authoring: base path for relative links
+    // should always be the directory containing the file holding the link
+    // Trigger this behavior by judicious use of an ending slash
+    // See: RFC 3986 section 5.2.3
+    let modifiedPageUrl = containingPageUrl.replace(/\/$/, "");
+    if (containingPageIsIndex) {
+      modifiedPageUrl = modifiedPageUrl + "/";
+    }
+
+    const base = new URL(modifiedPageUrl, "loc:/");
+    const result = new URL(url, base);
+
+    if (resourceTypes.some((t) => result.pathname.endsWith(t)))
+      return withPrefix(result.href.replace(/^loc:/, ""));
+  } catch {}
+
+  return url;
+};
+
 const Layout = ({
   children,
   pageMeta,
@@ -51,7 +88,7 @@ const Layout = ({
     () => ({
       a: ({ href, ...rest }) => (
         <Link
-          to={href}
+          to={mapRelativeResourcePath(href, meta.path, meta.isIndexPage)}
           pageUrl={meta.path}
           pageIsIndex={meta.isIndexPage}
           productVersions={meta.productVersions}
@@ -77,7 +114,13 @@ const Layout = ({
       ) => <h3 {...props} className={(props.className || "") + " mt-4-5"} />,
       img: (
         props, // eslint-disable-next-line jsx-a11y/alt-text
-      ) => <img {...props} className={(props.className || "") + " mw-100"} />,
+      ) => (
+        <img
+          {...props}
+          src={mapRelativeResourcePath(props.src, meta.path, meta.isIndexPage)}
+          className={(props.className || "") + " mw-100"}
+        />
+      ),
       blockquote: (props) => (
         <blockquote
           {...props}