Graham Hall
44 lines
1.1 KiB
Plaintext
44 lines
1.1 KiB
Plaintext
---
|
|
import { format } from "date-fns";
|
|
import { Markup } from "astro-remote";
|
|
|
|
import Layout from "../layouts/Layout.astro";
|
|
|
|
const response = await fetch(
|
|
`https://api.cosmicjs.com/v2/buckets/${
|
|
import.meta.env.BUCKET_SLUG
|
|
}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${
|
|
import.meta.env.BUCKET_READ_KEY
|
|
}&limit=10`
|
|
);
|
|
|
|
const posts = await response.json();
|
|
---
|
|
|
|
<Layout title="Blog">
|
|
<div>
|
|
{
|
|
posts.objects.map((post) => (
|
|
<article>
|
|
{post.thumbnail ? (
|
|
<div style={{ marginBottom: "25px" }}>
|
|
<img src={post.thumbnail} alt={`Thumbnail for ${post.title}`} />
|
|
</div>
|
|
) : null}
|
|
<div>
|
|
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
|
<h4>{post.title}</h4>
|
|
<h5>{`🗓️ ${format(
|
|
new Date(post.published_at),
|
|
"MMM do, y"
|
|
)}`}</h5>
|
|
</div>
|
|
<Markup content={`<p>${post.content.split("</p>")[0]}`} />
|
|
<a href={`/posts/${post.slug}`}>Read More</a>
|
|
</div>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</Layout>
|