<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,
        };
      })
      .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>
		</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>
