toots.astro

---
import MastodonCard from "./MastodonCard.astro"

const acct =
  "https://mastodon.cloud/api/v1/accounts/109461933672061521/statuses"
const fetchPosts = await fetch(acct)

const allPosts = await fetchPosts.json()
---

<div class="toots container">
  <h2><a href="https://mastodon.cloud/@blackspike">Latest Toots</a></h2>
</div>
<div class="card-slider">
  {
    allPosts.map((toot) => (
      <div class="card-slider__item">
        <MastodonCard
          image={toot.media_attachments[0]?.url}
          alt={toot.media_attachments[0]?.description}
          imageHeight="300px"
          title={new Date(toot.created_at).toLocaleDateString("en-GB", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
          path={toot.url}
        >
          <Fragment slot="description" set:html={toot.content} />
        </MastodonCard>
      </div>
    ))
  }
</div>