feat: make relative path images work

.gitignore

@@ -93,3 +93,5 @@ public/page-data
 
 # tsbuildinfo file generated by CI
 tsconfig.tsbuildinfo
+
+./public/mdx-images/*

docs/platforms/unreal/enriching-events/context/index.mdx

@@ -31,7 +31,7 @@ SentrySubsystem->SetContext("Character", ContextData);
 
 The same result can be achieved by calling corresponding function in blueprint:
 
-![Set context](/platforms/unreal/enriching-events/context/unreal_set_context.png)
+![Set context](./unreal_set_context.png)
 
 Alternatively, this configuration can be provided to the crash reporter [during initialization](/platforms/unreal/configuration/setup-crashreporter/#configure-attributes).
 

docs/product/data-management-settings/event-grouping/index.mdx

@@ -26,7 +26,7 @@ Some kinds of errors, like [chunk load errors](https://sentry.io/answers/chunk-l
 
 Issues grouped by Sentry's built-in fingerprinting rules will list "Sentry Defined Fingerprint" in the "Event Grouping Information" at the bottom of the **Issue Details** page.
 
-![event grouping information for a sentry defined fingerprint](sentry-defined-fingerprint.png)
+![event grouping information for a sentry defined fingerprint](./sentry-defined-fingerprint.png)
 
 Built-in fingerprinting rules work the same as custom fingerprinting rules and are applied by default. If an user defined custom fingerprinting rule matches an event, the custom rule will always take precedence over the built-in ones.
 

package.json

@@ -75,6 +75,7 @@
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-mdx-images": "^3.0.0",
     "remark-parse": "^11.0.0",
     "remark-prism": "^1.3.6",
     "sass": "^1.69.5",

platform-includes/getting-started-config/unity.mdx

@@ -9,6 +9,6 @@ ___PUBLIC_DSN___
 Sentry can be configured via the Sentry configuration window or [programatically](/platforms/unity/configuration/options/).
 The window can be accessed by going to Unity's top menu: `Tools` > `Sentry`.
 
-![Sentry window](/platform-includes/getting-started-config/unity-sentry-window.png)
+![Sentry window](./unity-sentry-window.png)
 
 Sentry saves your configuration to `Assets/Resources/Sentry/SentryOptions.asset` and reads from there at runtime.

platform-includes/sourcemaps/primer/javascript.mdx

@@ -1,3 +1,3 @@
 To enable readable stack traces in your Sentry errors, you need to upload your source maps to Sentry.
 
-![Readable Stack Traces](/platform-includes/sourcemaps/primer/readable-stacktraces.png)
+![Readable Stack Traces](./readable-stacktraces.png)

src/components/docImage.tsx

@@ -1,3 +1,5 @@
+import path from 'path';
+
 import imageSize from 'image-size';
 import Image from 'next/image';
 
@@ -7,11 +9,10 @@ export default function DocImage({
   src,
   ...props
 }: Omit<React.HTMLProps<HTMLImageElement>, 'ref' | 'placeholder'>) {
-  const {path} = serverContext();
-  // If the image is not an absolute URL, we assume it's a relative path
-  // and we prepend the current path to it
-  if (!src?.startsWith('/') && !src?.includes('://')) {
-    src = `/${path.join('/')}/${src}`;
+  const {path: pagePath} = serverContext();
+
+  if (!src) {
+    return null;
   }
 
   // Next.js Image component only supports images from the public folder
@@ -20,7 +21,15 @@ export default function DocImage({
     return <img src={src} {...props} />;
   }
 
-  const {width, height} = imageSize(`${process.cwd()}/public${src}`);
+  // If the image is not an absolute URL, we assume it's a relative path
+  // and we prepend the current path to it
+  if (src.startsWith('./')) {
+    src = path.join('/mdx-images', src);
+  } else if (!src?.startsWith('/') && !src?.includes('://')) {
+    src = `/${pagePath.join('/')}/${src}`;
+  }
+
+  const {width, height} = imageSize(path.join(process.cwd(), 'public', src));
 
   return (
     <div style={{textAlign: 'center'}}>

src/mdx.ts

@@ -13,6 +13,7 @@ import rehypePrismPlus from 'rehype-prism-plus';
 import rehypeSlug from 'rehype-slug';
 // Remark packages
 import remarkGfm from 'remark-gfm';
+import remarkMdxImages from 'remark-mdx-images';
 
 import getAppRegistry from './build/appRegistry';
 import getPackageRegistry from './build/packageRegistry';
@@ -263,10 +264,18 @@ export async function getFileBySlug(slug: string) {
 
   const toc = [];
 
+  // cwd is how mdx-bundler knows how to resolve relative paths
+  const cwd = path.join(
+    root,
+    slug.startsWith('platform-includes')
+      ? // take the directory name of the slug
+        path.dirname(slug)
+      : slug
+  );
+
   const result = await bundleMDX({
     source,
-    // mdx imports can be automatically source from the components directory
-    cwd: root,
+    cwd,
     mdxOptions(options) {
       // this is the recommended way to add custom remark/rehype plugins:
       // The syntax might look weird, but it protects you in case we add/remove
@@ -276,6 +285,7 @@ export async function getFileBySlug(slug: string) {
         remarkExtractFrontmatter,
         [remarkTocHeadings, {exportRef: toc}],
         remarkGfm,
+        remarkMdxImages,
         remarkCodeTitles,
         remarkCodeTabs,
         remarkComponentSpacing,
@@ -332,7 +342,20 @@ export async function getFileBySlug(slug: string) {
       options.loader = {
         ...options.loader,
         '.js': 'jsx',
+        '.png': 'file',
+        '.gif': 'file',
+        '.jpg': 'file',
+        '.jpeg': 'file',
+        // inline svgs
+        '.svg': 'dataurl',
       };
+      // Set the `outdir` to a public location for this bundle.
+      // this where this images will be copied
+      options.outdir = path.join(root, 'public', 'mdx-images');
+
+      // Set write to true so that esbuild will output the files.
+      options.write = true;
+
       return options;
     },
   });

yarn.lock

@@ -8954,6 +8954,15 @@ remark-mdx-frontmatter@^4.0.0:
     unified "^11.0.0"
     yaml "^2.0.0"
 
+remark-mdx-images@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/remark-mdx-images/-/remark-mdx-images-3.0.0.tgz#e8a2b8dfad3eab72aea345f805040297702ac446"
+  integrity sha512-EKpqw11XUprx/kFQPEkH3GdPEqI63Wcq5GT120N2hGlKCSwOM09NtL1i3G9HQ4TBIR2aF471HF5YStME5ukbJw==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    unified "^11.0.0"
+    unist-util-visit "^5.0.0"
+
 remark-mdx@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.3.0.tgz#efe678025a8c2726681bde8bf111af4a93943db4"