update page structure

src/components/LatestPost.astro

@@ -0,0 +1,49 @@
+<div
+	x-data="{
+  latestPost: null,
+  fetchPost() {
+    fetch('https://mastodon.social/@ghalldev.rss')
+      .then((response) => response.text())
+      .then((str) =>
+        new window.DOMParser().parseFromString(str, 'text/xml')
+      )
+      .then((data) => {
+        const item = data.querySelector('item');
+        this.latestPost = {
+          link: item.querySelector('link').textContent,
+          body: item.querySelector('description').textContent,
+          pubDate: item.querySelector('pubDate').textContent,
+        };
+      })
+      .catch((error) => {
+        console.error('Error fetching feed:', error);
+      });
+  },
+}"
+	x-init="fetchPost()"
+>
+	<template x-if="latestPost">
+		<div class="mastodon-post">
+			<h2>Latest Mastodon Post</h2>
+			<p x-html="latestPost.body"></p>
+			<a x-bind:href="latestPost.link" target="_blank">View Post</a>
+			<small x-text="latestPost.pubDate"></small>
+		</div>
+	</template>
+	<template x-if="!latestPost">
+		<p>Loading...</p>
+	</template>
+</div>
+
+<style>
+	.mastodon-post {
+		margin: 2rem auto;
+		padding: 1rem;
+		max-width: 600px;
+		border-radius: var(--radius);
+		border: var(--border);
+	}
+	.mastodon-post > h2 {
+		margin-top: 0;
+	}
+</style>