More work

Signed-off-by: Julius Volz <julius.volz@gmail.com>

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

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

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));
 }