Load mdx images from UDR

src/lib/remark-plugins/remark-rewrite-assets.ts

@@ -17,20 +17,34 @@ export function remarkRewriteAssets(args: {
 	product: string
 	version: string
 	getAssetPathParts?: (nodeUrl: string) => string[]
+	isInUDR?: boolean
 }): Plugin {
-	const { product, version, getAssetPathParts = (nodeUrl) => [nodeUrl] } = args
+	const {
+		product,
+		version,
+		getAssetPathParts = (nodeUrl) => [nodeUrl],
+		isInUDR = false,
+	} = args
 
 	return function plugin() {
 		return function transform(tree) {
 			// @ts-expect-error Types Should be correct here
 			visit<Image>(tree, 'image', (node) => {
+				let url
 				const originalUrl = node.url
-				const asset = path.posix.join(...getAssetPathParts(originalUrl))
 
-				const url = new URL(`${process.env.MKTG_CONTENT_DOCS_API}/api/assets`)
-				url.searchParams.append('asset', asset)
-				url.searchParams.append('version', version)
-				url.searchParams.append('product', product)
+				if (isInUDR) {
+					url = new URL(
+						`${process.env.UNIFIED_DOCS_API}/api/assets/${product}/${version}${node.url}`
+					)
+				} else {
+					const asset = path.posix.join(...getAssetPathParts(originalUrl))
+
+					const url = new URL(`${process.env.MKTG_CONTENT_DOCS_API}/api/assets`)
+					url.searchParams.append('asset', asset)
+					url.searchParams.append('version', version)
+					url.searchParams.append('product', product)
+				}
 
 				node.url = url.toString()
 				logOnce(

src/views/docs-view/loaders/file-system.ts

@@ -94,7 +94,11 @@ export default class FileSystemLoader implements DataLoader {
 				mdxContentHook: this.opts.mdxContentHook,
 				remarkPlugins,
 				rehypePlugins: this.opts.rehypePlugins,
-				scope: { version: versionFromPath, ...this.opts.scope },
+				scope: {
+					product: this.opts.product,
+					version: versionFromPath,
+					...this.opts.scope,
+				},
 			})
 		// Build the currentPath from page parameters
 		const currentPath =

src/views/docs-view/loaders/remote-content.ts

@@ -190,7 +190,11 @@ export default class RemoteContentLoader implements DataLoader {
 				mdxContentHook: this.opts.mdxContentHook,
 				remarkPlugins,
 				rehypePlugins: this.opts.rehypePlugins,
-				scope: { version: versionFromPath, ...this.opts.scope },
+				scope: {
+					product: this.opts.product,
+					version: versionFromPath,
+					...this.opts.scope,
+				},
 			})
 
 		const versionMetadataList: VersionMetadataItem[] =

src/views/docs-view/render-page-mdx.ts

@@ -8,6 +8,9 @@ import type { MDXRemoteSerializeResult } from 'lib/next-mdx-remote'
 import { serialize } from 'lib/next-mdx-remote/serialize'
 import { Pluggable } from 'unified'
 import grayMatter from 'gray-matter'
+
+import { remarkRewriteAssets } from 'lib/remark-plugins/remark-rewrite-assets'
+
 interface Options {
 	mdxContentHook?: (content: string, scope: Options['scope']) => string
 	remarkPlugins?: Pluggable[]
@@ -36,7 +39,21 @@ async function renderPageMdx(
 				const content = mdxContentHook(rawContent, scope)
 				const mdxSource = await serialize(content, {
 					mdxOptions: {
-						remarkPlugins,
+						remarkPlugins:
+							process.env.HASHI_ENV === 'unified-docs-sandbox' &&
+							__config.flags?.unified_docs_migrated_repos?.find(
+								(product) => product === scope.product
+							)
+								? [
+										...remarkPlugins,
+										remarkRewriteAssets({
+											product: scope.product as string,
+											version: scope.version as string,
+											getAssetPathParts: (nodeUrl) => [nodeUrl],
+											isInUDR: true,
+										}),
+								  ]
+								: [...remarkPlugins],
 						rehypePlugins,
 					},
 					scope,