From 431d41ea47bff6acb638219c7eab0a1483457616 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 12 May 2025 15:06:36 +0200
Subject: [PATCH] More work

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 docs/introduction/overview.md   |  2 +-
 src/app/docs/[...slug]/page.tsx |  7 ++++++-
 src/app/globals.css             | 11 ++++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/introduction/overview.md b/docs/introduction/overview.md
index 8699a1f5..4870fb54 100644
--- a/docs/introduction/overview.md
+++ b/docs/introduction/overview.md
@@ -61,7 +61,7 @@ them easy to build and deploy as static binaries.
 This diagram illustrates the architecture of Prometheus and some of
 its ecosystem components:
 
-![Prometheus architecture](/assets/architecture.png)
+![Prometheus architecture](/assets/architecture.svg)
 
 Prometheus scrapes metrics from instrumented jobs, either directly or via an
 intermediary push gateway for short-lived jobs. It stores all scraped samples
diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
index 6ed5d11d..6a27b3c1 100644
--- a/src/app/docs/[...slug]/page.tsx
+++ b/src/app/docs/[...slug]/page.tsx
@@ -138,8 +138,13 @@ export default async function DocsPage({
             isAbsoluteUrl(src) ||
             docMeta.type === "local-doc"
           ) {
+            let srcUrl = src;
+            if (typeof srcUrl === "string") {
+              // Remove the "https://prometheus.io" from links that start with it.
+              srcUrl = srcUrl.replace(/^\/assets\//, "/assets/docs/");
+            }
             // eslint-disable-next-line jsx-a11y/alt-text
-            return <img {...rest} src={src} />;
+            return <img {...rest} src={srcUrl} />;
           }
 
           // eslint-disable-next-line jsx-a11y/alt-text
diff --git a/src/app/globals.css b/src/app/globals.css
index 39fd9744..c2067fc1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -36,6 +36,12 @@ h6 {
   }
 }
 
+.docs-content img {
+  max-width: 100%;
+  height: auto;
+  margin: 1em 0;
+}
+
 a.header-auto-link {
   position: absolute;
   transform: translate(-140%, 5%);
@@ -62,8 +68,11 @@ pre > code a {
   }
 }
 
+/* Important: only target "pre > code > span" and not "pre > code" so we
+   don't invert non-highlighted code boxes. */
 .invertInDarkMode,
-pre > code {
+.docs-content img[src$=".svg"],
+pre > code > span {
   filter: light-dark("", invert(1));
 }