rewrite image paths with version string

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

@@ -83,7 +83,7 @@ interface LoadStaticPropsReturn {
 
 const moizeOpts: Options = { isPromise: true, maxSize: Infinity }
 const cachedFetchNavData = moize(fetchNavData, moizeOpts)
-const cachedFetchVersionMetadataList = moize(
+export const cachedFetchVersionMetadataList = moize(
 	fetchVersionMetadataList,
 	moizeOpts
 )

src/views/docs-view/server.ts

@@ -10,7 +10,9 @@ import { Pluggable } from 'unified'
 import slugify from 'slugify'
 
 // HashiCorp Imports
-import RemoteContentLoader from './loaders/remote-content'
+import RemoteContentLoader, {
+	cachedFetchVersionMetadataList,
+} from './loaders/remote-content'
 import { anchorLinks } from '@hashicorp/remark-plugins'
 
 // Global imports
@@ -44,6 +46,9 @@ import { getCustomLayout } from './utils/get-custom-layout'
 import type { DocsViewPropOptions } from './utils/get-root-docs-path-generation-functions'
 import { DocsViewProps } from './types'
 import { isReleaseNotesPage } from 'lib/docs/is-release-notes-page'
+import { stripVersionFromPathParams } from './loaders/utils'
+import { rewriteImageUrlsForExperimentalContentApi } from './utils/rewrite-image-urls-for-experimental-content-api'
+import { remarkRewriteImageUrls } from 'lib/remark-plugins/remark-rewrite-image-urls'
 
 /**
  * Returns static generation functions which can be exported from a page to fetch docs data
@@ -172,10 +177,41 @@ export function getStaticGenerationFunctions<
 			)}`
 			const headings: AnchorLinksPluginHeading[] = [] // populated by anchorLinks plugin below
 
+			const [versionFromPath, paramsNoVersion] =
+				stripVersionFromPathParams(pathParts)
+
+			let versionForAssetLoader = versionFromPath
+			if (versionForAssetLoader === 'latest') {
+				const versionMetadata = await cachedFetchVersionMetadataList(
+					productSlugForLoader
+				)
+				versionForAssetLoader = versionMetadata.find((e) => e.isLatest)?.version
+			}
+
 			const loader = getLoader({
 				mainBranch,
 				remarkPlugins: [
 					...additionalRemarkPlugins,
+					/**
+					 * TODO: should only add asset rewriting for new content monorepo API
+					 * if the product has opted-in... so need a feature flag or something here...
+					 * but for prototyping purposes, trying this out for all products.
+					 *
+					 * TODO: maybe this URL rewriting should be done during content
+					 * migration? This would remove the need for changes to the dev-dot
+					 * front-end. It seems somewhat reasonable to have the content API
+					 * return an MDX document with image URLs that are already correct.
+					 */
+					remarkRewriteImageUrls({
+						urlRewriteFn: (url) =>
+							rewriteImageUrlsForExperimentalContentApi(
+								url,
+								paramsNoVersion.join('/'),
+								versionForAssetLoader,
+								productSlugForLoader,
+								basePathForLoader
+							),
+					}),
 					/**
 					 * Note on remark plugins for local vs remote loading:
 					 * includeMarkdown and paragraphCustomAlerts are already

src/views/docs-view/utils/get-root-docs-path-generation-functions.ts

@@ -14,8 +14,6 @@ import { Pluggable } from 'unified'
 import remarkSentinel from 'lib/remark-sentinel'
 import { getLatestVagrantVmwareVersion } from './get-latest-vagrant-vmware-version'
 import { DocsViewProps } from '../types'
-import { remarkRewriteImageUrls } from 'lib/remark-plugins/remark-rewrite-image-urls'
-import { rewriteImageUrlsForExperimentalContentApi } from './rewrite-image-urls-for-experimental-content-api'
 
 export interface DocsViewPropOptions {
 	hideVersionSelector?: boolean
@@ -48,6 +46,10 @@ export function getRootDocsPathGenerationFunctions(
 		product: productData,
 		productSlugForLoader: rootDocsPath.productSlugForLoader,
 		basePathForLoader: rootDocsPath.basePathForLoader,
+		additionalRemarkPlugins: getAdditionalRemarkPlugins(
+			productData,
+			rootDocsPath
+		),
 		mainBranch: rootDocsPath.mainBranch,
 		getScope: generateGetScope(productData, rootDocsPath),
 		options,
@@ -74,15 +76,8 @@ export function getRootDocsPathGenerationFunctions(
 			context
 		): Promise<GetStaticPropsResult<DocsViewProps>> => {
 			// Generate getStaticPaths for this rootDocsPath
-			const pathParts = (context.params.page || []) as string[]
-			const { getStaticProps } = getStaticGenerationFunctions({
-				...staticFunctionConfig,
-				additionalRemarkPlugins: getAdditionalRemarkPlugins(
-					productData,
-					rootDocsPath,
-					pathParts.join('/')
-				),
-			})
+			const { getStaticProps } =
+				getStaticGenerationFunctions(staticFunctionConfig)
 			return await getStaticProps(context)
 		},
 	}
@@ -93,34 +88,15 @@ export function getRootDocsPathGenerationFunctions(
  */
 function getAdditionalRemarkPlugins(
 	productData: ProductData,
-	rootDocsPath: RootDocsPath,
-	currentPath: string
+	rootDocsPath: RootDocsPath
 ): Pluggable[] {
 	//
-	const productSlugForLoader =
-		rootDocsPath.productSlugForLoader || productData.slug
-	//
 	let additionalRemarkPlugins = []
+	//
 	if (productData.slug == 'sentinel' && rootDocsPath.path == 'docs') {
 		additionalRemarkPlugins.push(remarkSentinel)
 	}
-	/**
-	 * TODO: should only add asset rewriting for new content monorepo API
-	 * if the product has opted-in... so need a feature flag or something here...
-	 * but for prototyping purposes, trying this out for all products.
-	 */
-	additionalRemarkPlugins.push(
-		remarkRewriteImageUrls({
-			urlRewriteFn: (url) =>
-				rewriteImageUrlsForExperimentalContentApi(
-					url,
-					currentPath,
-					productSlugForLoader,
-					rootDocsPath.path
-				),
-		})
-	)
-
+	//
 	return additionalRemarkPlugins
 }
 

src/views/docs-view/utils/rewrite-image-urls-for-experimental-content-api.ts

@@ -23,21 +23,25 @@ const REPO_CONFIG_CONTENT_DIR: Record<string, string> = {
 export function rewriteImageUrlsForExperimentalContentApi(
 	url,
 	currentPath,
+	currentVersion,
 	productSlugForLoader,
 	docsBasePath
 ) {
 	// Rewrite all URLs to use the content API for assets
-	let assetPrefix = `${process.env.MKTG_CONTENT_API}/assets/${productSlugForLoader}`
+	let assetPrefix = `${process.env.MKTG_CONTENT_API}/assets/${productSlugForLoader}/${currentVersion}`
+	console.log({ assetPrefix })
 	/**
 	 * TODO: we have some messy shims to handle asset organization.
 	 * Probably ideal to standardize this in the content monorepo instead,
 	 * maybe as part of a migration script in the content monorepo?
 	 */
 	if (url.startsWith('/')) {
 		// Rewrite absolute URLs
+		// TODO: maybe this should be done during content migration?
 		return `${assetPrefix}${url}`
 	} else if (url.startsWith('./')) {
 		// Rewrite relative URLs
+		// TODO: maybe this should be done during content migration?
 		const currentPathRelative = currentPath.split('/').slice(0, -1).join('/')
 		const contentDir = REPO_CONFIG_CONTENT_DIR[productSlugForLoader]
 		const contentDirPrefix = `/img/${contentDir}/${docsBasePath}` // rootDocsPath.path