Merge pull request #5787 from EnterpriseDB/bugfix/josh/DOCS-779-image…

…-missing-on-https-www-enterprisedb-com-docs

Ensure path prefix is used for SVG links

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}