From 12c3fb74643794e6b26a02e4af88dfc383dfacce Mon Sep 17 00:00:00 2001 From: Zach Shilton <4624598+zchsh@users.noreply.github.com> Date: Wed, 24 Jul 2024 13:29:58 -0400 Subject: [PATCH] rewrite image paths with version string --- src/views/docs-view/loaders/remote-content.ts | 2 +- src/views/docs-view/server.ts | 38 ++++++++++++++++- ...get-root-docs-path-generation-functions.ts | 42 ++++--------------- ...image-urls-for-experimental-content-api.ts | 6 ++- 4 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/views/docs-view/loaders/remote-content.ts b/src/views/docs-view/loaders/remote-content.ts index 36b55e43e2..24e1b51a42 100644 --- a/src/views/docs-view/loaders/remote-content.ts +++ b/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 ) diff --git a/src/views/docs-view/server.ts b/src/views/docs-view/server.ts index 84424c41ed..9c2a230657 100644 --- a/src/views/docs-view/server.ts +++ b/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 diff --git a/src/views/docs-view/utils/get-root-docs-path-generation-functions.ts b/src/views/docs-view/utils/get-root-docs-path-generation-functions.ts index 5c1a350f84..eeadb97fae 100644 --- a/src/views/docs-view/utils/get-root-docs-path-generation-functions.ts +++ b/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> => { // 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 } diff --git a/src/views/docs-view/utils/rewrite-image-urls-for-experimental-content-api.ts b/src/views/docs-view/utils/rewrite-image-urls-for-experimental-content-api.ts index ac59bf8b8c..0915c86691 100644 --- a/src/views/docs-view/utils/rewrite-image-urls-for-experimental-content-api.ts +++ b/src/views/docs-view/utils/rewrite-image-urls-for-experimental-content-api.ts @@ -23,11 +23,13 @@ const REPO_CONFIG_CONTENT_DIR: Record = { 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, @@ -35,9 +37,11 @@ export function rewriteImageUrlsForExperimentalContentApi( */ 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