Files
campus-web/src/pages/blog/[...page].astro
2022-08-17 22:37:11 -04:00

62 lines
1.6 KiB
Plaintext

---
import Layout from "~/layouts/PageLayout.astro";
import { SITE } from "~/config.mjs";
import { getAllPosts } from "~/utils/getAllPosts";
import BlogPostCard from "~/components/widgets/BlogPostCard.astro";
import Pagination from "~/components/widgets/Pagination.astro";
export async function getStaticPaths({ paginate }) {
const posts = await getAllPosts();
return paginate(posts, {
pageSize: SITE.postsPerPage,
});
}
const { page } = Astro.props;
const currentPage = page.currentPage ?? 1;
const title = `Blog ${currentPage > 1 ? `— Page ${currentPage} ` : ""}— ${
SITE.name
}`;
const description = "News and step-by-step guides about AstroWind";
const canonical = new URL(page.url.current, Astro.site);
---
<Layout meta={{ title, description, canonical }}>
<main class="mt-20">
<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
<header>
<h1
class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
style="
"
>
News and step-by-step guides about
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
>AstroWind
</span>
</h1>
</header>
<ul>
{
page.data.map((post) => (
<li class="mb-10 md:mb-16">
<BlogPostCard post={post} />
</li>
))
}
</ul>
{
(page.url.prev || page.url.next) && (
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
)
}
</section>
</main>
</Layout>