render markdown in intro on map-topic pages (#32421)

components/landing/TableOfContents.tsx

@@ -33,7 +33,7 @@ export const TableOfContents = (props: Props) => {
                 </Link>
               </h2>
               {intro && (
-                <p className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
+                <div className="f4 color-fg-muted" dangerouslySetInnerHTML={{ __html: intro }} />
               )}
             </li>
           )

middleware/contextualizers/generic-toc.js

@@ -60,7 +60,6 @@ export default async function genericToc(req, res, next) {
   if (currentTocType === 'flat' && !isOneOffProductToc) {
     isRecursive = false
     renderIntros = true
-    req.context.genericTocFlat = []
     req.context.genericTocFlat = await getTocItems(treePage, req.context, {
       recurse: isRecursive,
       renderIntros,
@@ -93,6 +92,7 @@ async function getTocItems(node, context, opts) {
   return await Promise.all(
     node.childPages.filter(filterHidden).map(async (child) => {
       const { page } = child
+      // The rawTitle never contains Markdown but it might contain Liquid
       const title = page.rawTitle.includes('{')
         ? await liquid.parseAndRender(page.rawTitle, context)
         : page.rawTitle
@@ -100,9 +100,9 @@ async function getTocItems(node, context, opts) {
       if (opts.renderIntros) {
         intro = ''
         if (page.rawIntro) {
-          intro = page.rawIntro.includes('{')
-            ? await liquid.parseAndRender(page.rawIntro, context)
-            : page.rawIntro
+          // The intro can contain Markdown even though it might not
+          // contain any Liquid.
+          intro = await page.renderProp('rawIntro', context)
         }
       }