From 15671be4e9e485353f06cb8bd12c856ac60f5909 Mon Sep 17 00:00:00 2001
From: Eric Dattore <eric.dattore@circleci.com>
Date: Wed, 6 Sep 2023 10:42:38 -0600
Subject: [PATCH] Add custom list rendering for `body` frontmatter

- Set the list style type based on whether the list is ordered or
  unordered
- Set list-style-position to inside to avoid weird layouts when text is
  centered
---
 src/pages/c/[configKind]/[tip].astro |  1 +
 src/pages/c/[configKind]/index.astro | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/c/[configKind]/[tip].astro b/src/pages/c/[configKind]/[tip].astro
index f589379..7c779ee 100644
--- a/src/pages/c/[configKind]/[tip].astro
+++ b/src/pages/c/[configKind]/[tip].astro
@@ -51,6 +51,7 @@ export async function getStaticPaths() {
       });
       return `<div class="rounded-md px-2 bg-gray-800 w-full overflow-x-auto"><pre><code class="language-${lang}">${html}</code></pre></div>`;
     };
+
     return marked(markdown, { renderer });
   }
 
diff --git a/src/pages/c/[configKind]/index.astro b/src/pages/c/[configKind]/index.astro
index 3fb9d3e..df02dbb 100644
--- a/src/pages/c/[configKind]/index.astro
+++ b/src/pages/c/[configKind]/index.astro
@@ -12,11 +12,20 @@ import type { BreadCrumbList } from '../../../components/Navigation/BreadCrumb.a
 
 export async function getStaticPaths() {
     const configKinds = await getCollection("configKinds");
+    const renderer = new marked.Renderer();
+
+    // Custom render lists in the body
+    renderer.list = (body, ordered) => {
+      const type = ordered ? 'ol' : 'ul';
+      const className = ordered ? 'list-decimal' : 'list-disc';
+
+      return `<${type} class="${className} list-inside">${body}</${type}>`
+    };
 
     const paths = await Promise.all(configKinds.map(async (configKind) => {
         const allTips = await getCollection("tips");
         const tips = allTips.filter(tip => tip.data.kind.id === configKind.id);
-        const htmlBody = marked(configKind.data.body);
+        const htmlBody = marked(configKind.data.body, { renderer });
         return {
             params: { configKind: configKind.id },
             props: { configKind, tips, htmlBody },
@@ -67,4 +76,4 @@ const breadCrumbList: BreadCrumbList = [
         ))}
       </div>
     </div>
-</Layout>
\ No newline at end of file
+</Layout>