feat: use pre-generated tutorials map (#2401)

package.json

@@ -6,6 +6,7 @@
 		"build:webpack-only": "npm run prebuild && hc-tools next-build-webpack-only",
 		"build": "next build",
 		"clean": "rimraf .next node_modules",
+		"generate:tutorial-map": "hc-tools ./scripts/generate-tutorial-map.ts",
 		"lint": "next-hashicorp lint",
 		"lint:stylelint": "npx stylelint '**/*.css'",
 		"prebuild": "hc-tools ./scripts/generate-tutorial-variant-map.ts && hc-tools ./scripts/extract-hvd-content.ts",

scripts/docs-content-link-rewrites/helpers/get-mdx-links-to-rewrite.ts

@@ -13,11 +13,13 @@ const getMdxLinksToRewrite = async ({
 	filePaths,
 	urlAdjustFn,
 	repo,
+	tutorialMap,
 }: {
 	filePathPrefix: string
 	filePaths: string[]
 	urlAdjustFn: (url: string) => string
 	repo: string
+	tutorialMap: Record<string, string>
 }): Promise<{
 	mdxLinksToRewrite: Record<string, Record<string, string>>
 	mdxUnrewriteableLinks: Record<string, Record<string, string>>
@@ -73,6 +75,7 @@ const getMdxLinksToRewrite = async ({
 				currentPath,
 				statistics: data,
 				urlAdjustFn,
+				tutorialMap,
 			})
 			.process(fileContent)
 

scripts/docs-content-link-rewrites/rewrite-links-plugin.ts

@@ -8,26 +8,22 @@ import { Plugin } from 'unified'
 import visit from 'unist-util-visit'
 import { processDocsLinkNode } from 'lib/remark-plugins/remark-plugin-adjust-link-urls/helpers'
 import { rewriteTutorialsLink } from 'lib/remark-plugins/rewrite-tutorial-links/utils/rewrite-tutorials-link'
-import { getTutorialMap } from 'lib/remark-plugins/rewrite-tutorial-links/utils'
-
-let TUTORIAL_MAP
 
 const rewriteLinksPlugin: Plugin = ({
 	urlAdjustFn,
 	currentPath,
 	statistics = { linksToRewrite: {}, unrewriteableLinks: [] },
+	tutorialMap,
 }: {
 	currentPath: string
 	statistics?: {
 		linksToRewrite: Record<string, string>
 		unrewriteableLinks: string[]
 	}
 	urlAdjustFn: (url: string) => string
+	tutorialMap: Record<string, string>
 }) => {
 	return async function transformer(tree) {
-		if (!TUTORIAL_MAP) {
-			TUTORIAL_MAP = await getTutorialMap()
-		}
 		return visit(tree, ['link', 'definition'], (node: Link | Definition) => {
 			const originalUrl = `${node.url}`
 
@@ -43,7 +39,7 @@ const rewriteLinksPlugin: Plugin = ({
 				// Then apply changes on top of that with the tutorials link rewriter
 				node.url = rewriteTutorialsLink(
 					processedAdDocsLink,
-					TUTORIAL_MAP,
+					tutorialMap,
 					'docs'
 				)
 			}

scripts/docs-content-link-rewrites/rewrite-links.ts

@@ -5,6 +5,7 @@
 
 import fs from 'fs'
 import path from 'path'
+import tutorialMap from 'data/_tutorial-map.generated.json'
 import { normalizeRemoteLoaderSlug } from 'lib/docs-content-link-rewrites/normalize-remote-loader-slug'
 import { cachedGetProductData } from 'lib/get-product-data'
 import { getProductUrlAdjuster } from 'views/docs-view/utils/product-url-adjusters'
@@ -52,6 +53,7 @@ const main = async () => {
 			filePaths: changedMdxFiles,
 			urlAdjustFn,
 			repo,
+			tutorialMap,
 		})
 
 	// Handle files that contain links that need to be rewritten.

scripts/generate-tutorial-map.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import { getTutorialSlug } from '../src/views/collection-view/helpers'
+import { getAllTutorials } from '../src/lib/learn-client/api/tutorial'
+
+// We specifically want to generate the tutorial map from the production
+// API, so we set the API URL explicitly since local development will typically
+// be using the staging API.
+process.env.NEXT_PUBLIC_LEARN_API_BASE_URL =
+	'https://2mz7e9hai3.us-east-1.awsapprunner.com'
+
+/**
+ * This function creates a map of 'database-slug': 'dev-dot/path'
+ */
+async function generateTutorialMap(): Promise<Record<string, string>> {
+	const allTutorials = await getAllTutorials({
+		fullContent: false,
+		slugsOnly: true,
+	})
+
+	const mapItems = allTutorials.map((t) => {
+		const oldPath = t.slug
+		const newPath = getTutorialSlug(t.slug, t.collection_slug)
+		return [oldPath, newPath]
+	})
+
+	return Object.fromEntries(mapItems)
+}
+
+;(async () => {
+	const tutorialMap = await generateTutorialMap()
+	await writeFile(
+		path.join('src', 'data', '_tutorial-map.generated.json'),
+		JSON.stringify(tutorialMap, null, 2),
+		'utf-8'
+	)
+})()

src/layouts/sidebar-sidecar/utils/prepare-nav-data-for-client.ts

@@ -10,7 +10,6 @@ import path from 'path'
 import {
 	getIsExternalLearnLink,
 	getIsRewriteableDocsLink,
-	getTutorialMap,
 	rewriteExternalDocsLink,
 	rewriteExternalLearnLink,
 } from 'lib/remark-plugins/rewrite-tutorial-links/utils'
@@ -59,8 +58,6 @@ function isNavDirectLink(value: NavNode): value is NavDirectLink {
 	return value.hasOwnProperty('href')
 }
 
-let TUTORIAL_MAP
-
 /**
  * Prepares all sidebar nav items for client-side rendering. Keeps track of the
  * index of each node using `startingIndex` and the `traversedNodes` property
@@ -70,22 +67,23 @@ let TUTORIAL_MAP
 async function prepareNavDataForClient({
 	basePaths,
 	nodes,
+	tutorialMap,
 	startingIndex = 0,
 }: {
 	basePaths: string[]
 	nodes: NavNode[]
+	tutorialMap: Record<string, string>
 	startingIndex?: number
 }): Promise<{ preparedItems: MenuItem[]; traversedNodes: number }> {
 	const preparedNodes = []
 
-	TUTORIAL_MAP = TUTORIAL_MAP ?? (await getTutorialMap())
-
 	let count = 0
 	for (let i = 0; i < nodes.length; i++) {
 		const node = nodes[i]
 		const result = await prepareNavNodeForClient({
 			basePaths,
 			node,
+			tutorialMap,
 			nodeIndex: startingIndex + count,
 		})
 		if (result) {
@@ -118,10 +116,12 @@ async function prepareNavDataForClient({
 async function prepareNavNodeForClient({
 	basePaths,
 	node,
+	tutorialMap,
 	nodeIndex,
 }: {
 	node: NavNode
 	basePaths: string[]
+	tutorialMap: Record<string, string>
 	nodeIndex: number
 }): Promise<{ preparedItem: MenuItem; traversedNodes: number }> {
 	/**
@@ -142,6 +142,7 @@ async function prepareNavNodeForClient({
 		const { preparedItems, traversedNodes } = await prepareNavDataForClient({
 			basePaths,
 			nodes: node.routes,
+			tutorialMap,
 			startingIndex: nodeIndex + 1,
 		})
 		const preparedItem = {
@@ -210,7 +211,7 @@ async function prepareNavNodeForClient({
 				let newHref
 				const urlObject = new URL(node.href)
 				if (getIsExternalLearnLink(node.href)) {
-					newHref = rewriteExternalLearnLink(urlObject, TUTORIAL_MAP)
+					newHref = rewriteExternalLearnLink(urlObject, tutorialMap)
 				} else if (getIsRewriteableDocsLink(node.href)) {
 					newHref = rewriteExternalDocsLink(urlObject)
 				}

src/lib/learn-client/index.ts

@@ -2,19 +2,6 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-function getFetch() {
-	// Note: purposely doing a conditional require here so that `@vercel/fetch` is not included in the client bundle
-	if (typeof window === 'undefined') {
-		// eslint-disable-next-line @typescript-eslint/no-var-requires
-		const createFetch = require('@vercel/fetch')
-		return createFetch()
-	}
-	return window.fetch
-}
-
-// some of our reqs occur in a node env where fetch
-// isn't defined e.g. algolia search script
-const fetch = getFetch()
 
 export function get(path: string, token?: string) {
 	const options: RequestInit = {