diff --git a/src/components/CatCard.astro b/src/components/CatCard.astro new file mode 100644 index 0000000..aaf518c --- /dev/null +++ b/src/components/CatCard.astro @@ -0,0 +1,66 @@ +--- +import { type CollectionEntry } from 'astro:content'; + +export interface Props { + cat: CollectionEntry<'cats'>; +} + +const { cat } = Astro.props; +--- + + +
+

{cat.data.name}

+

{cat.data.owner.name}

+
+ {cat.data.image.alt} +
+
+ + + diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro new file mode 100644 index 0000000..d9976ec --- /dev/null +++ b/src/pages/[...page].astro @@ -0,0 +1,80 @@ +--- +import { getCollection, type CollectionEntry } from 'astro:content'; + +import BaseLayout from '../layouts/BaseLayout.astro'; +import CatCard from '../components/CatCard.astro'; + +export interface Props { + cats: CollectionEntry<'cats'>[]; + pageNums: number[]; +} + +export async function getStaticPaths() { + const NUM_CATS_PER_PAGE = 18; + + const [firstCat] = await getCollection('cats'); + const allCats = Array(100).fill(firstCat); + + const maxPageNum = Math.ceil(allCats.length / NUM_CATS_PER_PAGE); + const pageNums = [...Array(maxPageNum).keys()].map((key) => key + 1); + + return pageNums.map((num) => ({ + params: { page: num === 1 ? undefined : num.toString() }, + props: { + cats: allCats.slice( + NUM_CATS_PER_PAGE * (num - 1), + NUM_CATS_PER_PAGE * num + ), + pageNums + } + })); +} + +const { page } = Astro.params; +const { cats, pageNums } = Astro.props; +const currentPageNum = Number(page || '1'); +--- + + +
+ { + cats.map((cat) => ( +
+ +
+ )) + } +
+ + + + diff --git a/src/pages/index.astro b/src/pages/index.astro deleted file mode 100644 index 7264ff5..0000000 --- a/src/pages/index.astro +++ /dev/null @@ -1,15 +0,0 @@ ---- ---- - - - - - - - - Astro - - -

Astro

- -