From cbfbca58a87de35e76b92d9cc53060202b1e64d2 Mon Sep 17 00:00:00 2001 From: Josh Heyer Date: Wed, 19 Jun 2024 20:47:06 +0000 Subject: [PATCH] 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. --- .../edb-postgres-ai/analytics/concepts.mdx | 8 ++-- .../analytics/images}/level-100.svg | 0 .../analytics/images}/level-200.svg | 0 .../analytics/images}/level-300.svg | 0 .../analytics/images}/level-50.svg | 0 gatsby-node.js | 7 +++ src/components/layout.js | 47 ++++++++++++++++++- 7 files changed, 56 insertions(+), 6 deletions(-) rename {static/svg/edb-postgres-ai/analytics => advocacy_docs/edb-postgres-ai/analytics/images}/level-100.svg (100%) rename {static/svg/edb-postgres-ai/analytics => advocacy_docs/edb-postgres-ai/analytics/images}/level-200.svg (100%) rename {static/svg/edb-postgres-ai/analytics => advocacy_docs/edb-postgres-ai/analytics/images}/level-300.svg (100%) rename {static/svg/edb-postgres-ai/analytics => advocacy_docs/edb-postgres-ai/analytics/images}/level-50.svg (100%) diff --git a/advocacy_docs/edb-postgres-ai/analytics/concepts.mdx b/advocacy_docs/edb-postgres-ai/analytics/concepts.mdx index 77350b07f27..0a606979e87 100644 --- a/advocacy_docs/edb-postgres-ai/analytics/concepts.mdx +++ b/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) diff --git a/static/svg/edb-postgres-ai/analytics/level-100.svg b/advocacy_docs/edb-postgres-ai/analytics/images/level-100.svg similarity index 100% rename from static/svg/edb-postgres-ai/analytics/level-100.svg rename to advocacy_docs/edb-postgres-ai/analytics/images/level-100.svg diff --git a/static/svg/edb-postgres-ai/analytics/level-200.svg b/advocacy_docs/edb-postgres-ai/analytics/images/level-200.svg similarity index 100% rename from static/svg/edb-postgres-ai/analytics/level-200.svg rename to advocacy_docs/edb-postgres-ai/analytics/images/level-200.svg diff --git a/static/svg/edb-postgres-ai/analytics/level-300.svg b/advocacy_docs/edb-postgres-ai/analytics/images/level-300.svg similarity index 100% rename from static/svg/edb-postgres-ai/analytics/level-300.svg rename to advocacy_docs/edb-postgres-ai/analytics/images/level-300.svg diff --git a/static/svg/edb-postgres-ai/analytics/level-50.svg b/advocacy_docs/edb-postgres-ai/analytics/images/level-50.svg similarity index 100% rename from static/svg/edb-postgres-ai/analytics/level-50.svg rename to advocacy_docs/edb-postgres-ai/analytics/images/level-50.svg diff --git a/gatsby-node.js b/gatsby-node.js index 1a9faf9d880..70ec9db8cf9 100644 --- a/gatsby-node.js +++ b/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; diff --git a/src/components/layout.js b/src/components/layout.js index cc4966f8e69..19b642f6f0a 100644 --- a/src/components/layout.js +++ b/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 }) => (

, img: ( props, // eslint-disable-next-line jsx-a11y/alt-text - ) => , + ) => ( + + ), blockquote: (props) => (