HVD: Add product logo, and make TOC h2+ only (#2305)

Add product logo, and make TOC h2+ only

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<ProductSlug, 'sentinel'>
 	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: (
 						<>
-							<SidebarSectionBrandedHeading text={title} theme={'hcp'} />
+							<SidebarSectionBrandedHeading text={title} theme={productSlug} />
 							<SidebarHorizontalRule />
 							<SidebarNavList>
 								{pages.map((page: HvdPageMenuItem, index: number) => (

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