55 lines
1.3 KiB
Plaintext
55 lines
1.3 KiB
Plaintext
<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');
|
|
const pubDate = new Date(item.querySelector('pubDate').textContent).toLocaleString()
|
|
console.log(pubDate)
|
|
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>
|
|
<div x-html="latestPost.body"></div>
|
|
<a x-bind:href="latestPost.link" target="_blank" rel="noopener noreferrer"
|
|
>View Post</a
|
|
>
|
|
</div>
|
|
</template>
|
|
<template x-if="!latestPost">
|
|
<p>Loading...</p>
|
|
</template>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use "../styles/variables.scss" as *;
|
|
|
|
.mastodon-post {
|
|
margin: 2rem auto;
|
|
padding: 1rem;
|
|
max-width: 600px;
|
|
border-radius: $radius;
|
|
border: var(--border);
|
|
}
|
|
|
|
.mastodon-post > h2 {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|