website: fix issue with bloated static props (#10860)
* website: fix issue with bloated static props * website: remove script to check static props size
This commit is contained in:
parent
fb04fa7a25
commit
58fb58c2ea
|
@ -28,11 +28,16 @@ async function generateStaticProps({
|
|||
product,
|
||||
remotePluginsFile,
|
||||
}) {
|
||||
// Build the currentPath from page parameters
|
||||
const currentPath = params.page ? params.page.join('/') : ''
|
||||
// Resolve navData, including the possibility that this
|
||||
// page is a remote plugin docs, in which case we'll provide
|
||||
// the MDX fileString in the resolved navData
|
||||
const navData = await resolveNavData(navDataFile, localContentDir, {
|
||||
remotePluginsFile,
|
||||
currentPath,
|
||||
})
|
||||
const pathToMatch = params.page ? params.page.join('/') : ''
|
||||
const navNode = getNodeFromPath(pathToMatch, navData, localContentDir)
|
||||
const navNode = getNodeFromPath(currentPath, navData, localContentDir)
|
||||
const { filePath, remoteFile, pluginTier } = navNode
|
||||
// Fetch the MDX file content
|
||||
const mdxString = remoteFile
|
||||
|
@ -59,8 +64,6 @@ async function generateStaticProps({
|
|||
productName: product.name,
|
||||
mdxContentHook,
|
||||
})
|
||||
// Build the currentPath from page parameters
|
||||
const currentPath = !params.page ? '' : params.page.join('/')
|
||||
|
||||
return {
|
||||
currentPath,
|
||||
|
|
|
@ -16,7 +16,7 @@ const validateRouteStructure = require('@hashicorp/react-docs-sidenav/utils/vali
|
|||
* @returns {array} the resolved navData. This includes NavBranch nodes pulled from remote plugin repositories, as well as filePath properties on all local NavLeaf nodes, and remoteFile properties on all NavLeafRemote nodes.
|
||||
*/
|
||||
async function resolveNavData(navDataFile, localContentDir, options = {}) {
|
||||
const { remotePluginsFile } = options
|
||||
const { remotePluginsFile, currentPath } = options
|
||||
// Read in files
|
||||
const navDataPath = path.join(process.cwd(), navDataFile)
|
||||
const navData = JSON.parse(fs.readFileSync(navDataPath, 'utf8'))
|
||||
|
@ -24,7 +24,11 @@ async function resolveNavData(navDataFile, localContentDir, options = {}) {
|
|||
let withPlugins = navData
|
||||
if (remotePluginsFile) {
|
||||
// Resolve plugins, this yields branches with NavLeafRemote nodes
|
||||
withPlugins = await mergeRemotePlugins(remotePluginsFile, navData)
|
||||
withPlugins = await mergeRemotePlugins(
|
||||
remotePluginsFile,
|
||||
navData,
|
||||
currentPath
|
||||
)
|
||||
}
|
||||
// Resolve local filePaths for NavLeaf nodes
|
||||
const withFilePaths = await validateFilePaths(withPlugins, localContentDir)
|
||||
|
@ -40,14 +44,16 @@ async function resolveNavData(navDataFile, localContentDir, options = {}) {
|
|||
// fetch and parse all remote plugin docs, merge them into the
|
||||
// broader tree of docs navData, and return the docs navData
|
||||
// with the merged plugin docs
|
||||
async function mergeRemotePlugins(remotePluginsFile, navData) {
|
||||
async function mergeRemotePlugins(remotePluginsFile, navData, currentPath) {
|
||||
// Read in and parse the plugin configuration JSON
|
||||
const remotePluginsPath = path.join(process.cwd(), remotePluginsFile)
|
||||
const pluginEntries = JSON.parse(fs.readFileSync(remotePluginsPath, 'utf-8'))
|
||||
// Add navData for each plugin's component.
|
||||
// Note that leaf nodes include a remoteFile property object with the full MDX fileString
|
||||
const pluginEntriesWithDocs = await Promise.all(
|
||||
pluginEntries.map(resolvePluginEntryDocs)
|
||||
pluginEntries.map(
|
||||
async (entry) => await resolvePluginEntryDocs(entry, currentPath)
|
||||
)
|
||||
)
|
||||
// group navData by component type, to prepare to merge plugin docs
|
||||
// into the broader tree of navData.
|
||||
|
@ -113,7 +119,7 @@ async function mergeRemotePlugins(remotePluginsFile, navData) {
|
|||
return { ...n, routes: routesWithPlugins }
|
||||
})
|
||||
// return the merged navData, which now includes special NavLeaf nodes
|
||||
// for plugin docs with { filePath, fileString } remoteFile properties
|
||||
// for plugin docs with remoteFile properties
|
||||
return navDataWithPlugins
|
||||
}
|
||||
|
||||
|
@ -125,7 +131,7 @@ async function mergeRemotePlugins(remotePluginsFile, navData) {
|
|||
// Note that navData leaf nodes have a special remoteFile property,
|
||||
// which contains { filePath, fileString } data for the remote
|
||||
// plugin doc .mdx file
|
||||
async function resolvePluginEntryDocs(pluginConfigEntry) {
|
||||
async function resolvePluginEntryDocs(pluginConfigEntry, currentPath) {
|
||||
const { title, path: slug, repo, version } = pluginConfigEntry
|
||||
const docsMdxFiles = await fetchPluginDocs({ repo, tag: version })
|
||||
// We construct a special kind of "NavLeaf" node, with a remoteFile property,
|
||||
|
@ -192,8 +198,21 @@ async function resolvePluginEntryDocs(pluginConfigEntry) {
|
|||
const prefixedPath = path.join(pathPrefix, n.path)
|
||||
return { ...n, path: prefixedPath }
|
||||
})
|
||||
//
|
||||
return { type, navData: withPrefixedPaths }
|
||||
// If currentPath is provided, then remove the remoteFile
|
||||
// from all nodes except the currentPath. This ensures we deliver
|
||||
// only a single fileString in our getStaticProps JSON.
|
||||
// Without this optimization, we would send all fileStrings
|
||||
// for all NavLeafRemote nodes
|
||||
const withOptimizedFileStrings = visitNavLeaves(withPrefixedPaths, (n) => {
|
||||
if (!n.remoteFile) return n
|
||||
const noCurrentPath = typeof currentPath === 'undefined'
|
||||
const isPathMatch = currentPath === n.path
|
||||
if (noCurrentPath || isPathMatch) return n
|
||||
const { filePath } = n.remoteFile
|
||||
return { ...n, remoteFile: { filePath } }
|
||||
})
|
||||
// Return the component, with processed navData
|
||||
return { type, navData: withOptimizedFileStrings }
|
||||
})
|
||||
const componentsObj = components.reduce((acc, component) => {
|
||||
if (!component) return acc
|
||||
|
|
Loading…
Reference in New Issue