Format answers as markdown

astro.config.mjs

@@ -9,5 +9,10 @@ export default defineConfig({
   build: {
     format: "file",
   },
-  integrations: [tailwind()],
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+      nesting: true,
+    }),
+  ],
 });

package.json

@@ -15,6 +15,7 @@
     "airtable": "^0.12.2",
     "astro": "^4.0.6",
     "lodash": "^4.17.21",
+    "marked": "^12.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "zod": "^3.22.4"

src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import "./base.css";
+
 interface Props {
   title?: string;
 }

src/layouts/base.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.markdown {
+  ul {
+    list-style: disc;
+    margin-top: 16px;
+    padding-left: 40px;
+  }
+}

src/pages/areas/[localAuthority]/[area].astro

@@ -1,5 +1,6 @@
 ---
 import lodash from "lodash";
+import { marked } from "marked";
 
 import {
   airtableClient,
@@ -122,7 +123,10 @@ const {
                     {answer.candidateFullName}
                   </Link>
                 </h3>
-                <p>{answer.answer}</p>
+                <div
+                  class="pb-4 markdown"
+                  set:html={marked.parse(answer.answer ?? "")}
+                />
               </>
             ))}
           </>

src/pages/candidates/[candidate].astro

@@ -1,5 +1,6 @@
 ---
 import lodash from "lodash";
+import { marked } from "marked";
 
 import {
   airtableClient,
@@ -106,7 +107,10 @@ const {
         questions.map((question) => (
           <>
             <QuestionText>{question.text}</QuestionText>
-            <p class="pb-4">{question.answer}</p>
+            <div
+              class="pb-4 markdown"
+              set:html={marked.parse(question.answer ?? "")}
+            />
           </>
         ))
       ) : (