diff --git a/src/views/validated-designs/guide/index.tsx b/src/views/validated-designs/guide/index.tsx index c9d5761c9e..af26a23e29 100644 --- a/src/views/validated-designs/guide/index.tsx +++ b/src/views/validated-designs/guide/index.tsx @@ -25,9 +25,11 @@ import s from './detail-view.module.css' import type { HvdPage, HvdPageMenuItem } from '../types' import type { MDXRemoteSerializeResult } from 'next-mdx-remote' import type { OutlineLinkItem } from 'components/outline-nav/types' +import { ProductSlug } from 'types/products' export interface ValidatedDesignsGuideProps { title: string + productSlug: Exclude markdown: { mdxSource: MDXRemoteSerializeResult title: string @@ -41,6 +43,7 @@ export interface ValidatedDesignsGuideProps { export default function ValidatedDesignGuideView({ title, + productSlug, markdown, headers, currentPageIndex, @@ -103,7 +106,7 @@ export default function ValidatedDesignGuideView({ showResourcesList: false, children: ( <> - + {pages.map((page: HvdPageMenuItem, index: number) => ( diff --git a/src/views/validated-designs/server.ts b/src/views/validated-designs/server.ts index 54e793090c..2a9dd7f8ee 100644 --- a/src/views/validated-designs/server.ts +++ b/src/views/validated-designs/server.ts @@ -18,6 +18,7 @@ import remarkPluginAnchorLinkData, { import { rewriteStaticHVDAssetsPlugin } from 'lib/remark-plugins/rewrite-static-hvd-assets' import grayMatter from 'gray-matter' import { ProductSlug } from 'types/products' +import { OutlineLinkItem } from 'components/outline-nav/types' const basePath = '/validated-designs' @@ -189,6 +190,7 @@ export async function getHvdGuidePropsFromSlug( const validatedDesignsGuideProps: ValidatedDesignsGuideProps = { title: '', + productSlug: 'hcp', // default to hcp markdown: { description: '', title: '', @@ -203,6 +205,8 @@ export async function getHvdGuidePropsFromSlug( for (const categoryGroup of categoryGroups) { for (const guide of categoryGroup.guides) { if (guide.slug === guideSlug) { + validatedDesignsGuideProps.productSlug = categoryGroup.product + for (let index = 0; index < guide.pages.length; index++) { const page = guide.pages[index] @@ -212,7 +216,6 @@ export async function getHvdGuidePropsFromSlug( let mdxFileString: string try { - // TODO: this should be guarded with a try catch mdxFileString = fs.readFileSync(page.filePath, 'utf8') } catch (err) { console.error(err) @@ -231,10 +234,21 @@ export async function getHvdGuidePropsFromSlug( }, }) - const headers = anchorLinks.map((anchorLink: AnchorLinkItem) => ({ - title: anchorLink.title, - url: `#${anchorLink.id}`, - })) + // only show heading level 1 & 2 + const headers = anchorLinks.reduce( + (acc: OutlineLinkItem[], anchorLink: AnchorLinkItem) => { + if (anchorLink.level < 3) { + acc.push({ + title: anchorLink.title, + url: `#${anchorLink.id}`, + }) + } + + return acc + }, + [] + ) + validatedDesignsGuideProps.headers = headers validatedDesignsGuideProps.markdown = { // this is temporary as we should always have these fields in the markdown