add place info at events

package-lock.json

@@ -13,6 +13,7 @@
         "astro": "^3.4.3",
         "cfonts": "^3.2.0",
         "date-fns": "^2.30.0",
+        "marked": "^11.1.1",
         "tailwindcss": "^3.3.5"
       }
     },
@@ -2922,6 +2923,17 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-11.1.1.tgz",
+      "integrity": "sha512-EgxRjgK9axsQuUa/oKMx5DEY8oXpKJfk61rT5iY3aRlgU6QJtUcxU5OAymdhCvWvhYcd9FKmO5eQoX8m9VGJXg==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mdast-util-definitions": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "astro": "^3.4.3",
     "cfonts": "^3.2.0",
     "date-fns": "^2.30.0",
+    "marked": "^11.1.1",
     "tailwindcss": "^3.3.5"
   }
 }

src/components/EventItem.astro

@@ -1,6 +1,7 @@
 ---
 const { item } = Astro.props;
-import { format, compareAsc, addDays } from 'date-fns'
+import { format, compareAsc, addDays } from 'date-fns';
+import { marked } from 'marked';
 
 function dateFormat (str) {
     if (str.match(/^\d{4}-\d{2}-\d{2}$/)) {
@@ -98,6 +99,7 @@ const status = item.confirmed ? statuses.confirmed : (item.links?.rsvp ? statuse
         <div class="w-0 sm:w-28"></div>
         <div>
             <div>Date: <span class="text-white">{dateFormat(item.date)} {item.days ? ' - ' + dateFormat(dateEnd(item.date, item.days)) + ` (${item.days} days)` : ''}</span></div>
+            <div>Place: {item.place && <span set:html={marked.parseInline(item.place)} class="text-white"></span> || "TBD"}</div>
             <div>Status: <span class:list={[status.color]} class="mr-1.5 text-xs">●</span> {status.title}</div>
             <div>Lead: <span class="text-white">{item.lead || 'n/a'}</span></div>