diff options
| -rw-r--r-- | astro.config.mjs | 6 | ||||
| -rw-r--r-- | src/components/Pagination.astro | 46 | ||||
| -rw-r--r-- | src/components/PostSummary.astro (renamed from src/components/PostElement.astro) | 0 | ||||
| -rw-r--r-- | src/pages/[...page].astro | 30 | ||||
| -rw-r--r-- | src/pages/index.astro | 14 |
5 files changed, 82 insertions, 14 deletions
diff --git a/astro.config.mjs b/astro.config.mjs index 8f03e22..1b1e5bf 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -8,4 +8,10 @@ export default defineConfig({ markdown: { remarkPlugins: [remarkReadingTime], }, + redirects: { + "/blog": { + destination: "/", + status: 301, + }, + }, }); diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro new file mode 100644 index 0000000..e9fbc69 --- /dev/null +++ b/src/components/Pagination.astro @@ -0,0 +1,46 @@ +--- +type Props = { + readonly prevUrl?: string; + readonly nextUrl?: string; +}; + +const { prevUrl, nextUrl } = Astro.props; +--- + +<style lang="scss"> + .pagination { + overflow: hidden; + padding: 3rem 0; + width: 100%; + } + + .prev, + .next { + max-width: 40%; + } + + .prev { + float: left; + } + + .next { + float: right; + } +</style> + +<div class="pagination"> + { + prevUrl && ( + <span class="prev"> + <a href={prevUrl}>< Prev</a> + </span> + ) + } + { + nextUrl && ( + <span class="next"> + <a href={nextUrl}>Next ></a> + </span> + ) + } +</div> diff --git a/src/components/PostElement.astro b/src/components/PostSummary.astro index 2f98130..2f98130 100644 --- a/src/components/PostElement.astro +++ b/src/components/PostSummary.astro diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro new file mode 100644 index 0000000..23a5d51 --- /dev/null +++ b/src/pages/[...page].astro @@ -0,0 +1,30 @@ +--- +import type { GetStaticPaths, InferGetStaticPropsType } from "astro"; +import { getCollection } from "astro:content"; +import Layout from "../layouts/BaseLayout.astro"; +import Pagination from "../components/Pagination.astro"; +import PostSummary from "../components/PostSummary.astro"; + +export const getStaticPaths = (async ({ paginate }) => { + const posts = await getCollection("blog"); + posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()); + + return paginate(posts, { + pageSize: 5, + }); +}) satisfies GetStaticPaths; + +type Props = InferGetStaticPropsType<typeof getStaticPaths>; + +const { page } = Astro.props; +--- + +<Layout> + <section> + {page.data.map((post) => <PostSummary post={post} />)} + </section> + + <section> + <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> + </section> +</Layout> diff --git a/src/pages/index.astro b/src/pages/index.astro deleted file mode 100644 index 6575ca6..0000000 --- a/src/pages/index.astro +++ /dev/null @@ -1,14 +0,0 @@ ---- -import { getCollection } from "astro:content"; -import Element from "../components/PostElement.astro"; -import Layout from "../layouts/BaseLayout.astro"; - -const posts = await getCollection("blog"); -posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()); ---- - -<Layout> - <section> - {posts.map((post) => <Element post={post} />)} - </section> -</Layout> |