Created a calendar section pulling RSS

Author: hexiumz

package-lock.json

@@ -26,7 +26,8 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
-    "tailwindcss": "^4.1.17"
+    "tailwindcss": "^4.1.17",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package.json

@@ -0,0 +1,39 @@
+---
+import EventList from '../components/EventList.jsx';
+const RSS_URL = "https://www.meetup.com/Kyoto-Tech-Meetup/events/rss/";
+
+const rssResponse = await fetch(RSS_URL);
+const rssText = await rssResponse.text();
+
+// Minimal XML → JS parser
+import { xml2js } from "xml-js";
+const parsed = xml2js(rssText, { compact: true });
+let eventNames = [];
+
+if (Array.isArray(parsed.rss.channel.item)) {
+  console.log(parsed.rss.channel.item[0]);
+  const items = parsed.rss.channel.item.map(evt => ({
+    title: evt.title._cdata,
+    link: evt.link._text,
+    pubDate: evt.pubDate._text,
+    description: evt.description?._text ?? "",
+    }));
+
+    
+  eventNames = items;
+  
+} else {
+  // handle the case where it's a single item object
+  console.log(parsed.rss.channel.item.title);
+}
+
+console.log(eventNames);
+
+---
+
+<section class="p-6">
+
+  <EventList client:load events={eventNames} />
+
+</section>
+

src/components/Calendar.astro

@@ -0,0 +1,25 @@
+export default function EventList({ events }) {
+  return (
+    <ul className="space-y-6">
+      {events.map(event => (
+        <li key={event.link} className="p-4 border rounded-xl shadow-sm">
+          <a
+            href={event.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xl font-semibold text-blue-600 hover:underline"
+          >
+            {event.title}
+          </a>
+          <p className="text-sm text-gray-500 mt-1">
+            {new Date(event.pubDate).toLocaleString()}
+          </p>
+          <div
+            className="prose prose-sm mt-2"
+            dangerouslySetInnerHTML={{ __html: event.description }}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/EventList.jsx

@@ -2,6 +2,8 @@
 import Layout from "../layouts/Layout.astro";
 import WhyJoin from "../components/WhyJoin.astro";
 import WhatWeDo from "../components/WhatWeDo.astro";
+import Calendar from "../components/Calendar.astro";
+import EventList from "../components/EventList.jsx";
 import { FaGithub, FaDiscord, FaMeetup } from "react-icons/fa";
 
 type ActivityContent =
@@ -125,6 +127,19 @@ const activities: Activity[] = [
 			</div>
 		</section>
 
+		<section id="calendar" class="bg-white px-6 py-16 md:px-12">
+  			<div class="mx-auto max-w-5xl">
+   				<p class="text-sm font-semibold uppercase tracking-[0.3em] text-slate-500">
+      			Upcoming Meetups
+    			</p>
+    			<h2 class="mt-3 text-3xl font-semibold text-slate-900">
+      			Kyoto Tech Meetup Calendar
+    			</h2>
+
+    			<Calendar />
+  			</div>
+		</section>
+
 		<section id="who-comes" class="bg-white/95 px-6 py-16 md:px-12">
 			<div class="mx-auto flex max-w-5xl flex-col gap-10 lg:flex-row">
 				<div class="flex-1">