maciejpedzich/cats-album
1
0
Fork 0
mirror of https://github.com/maciejpedzich/cats-album.git synced 2024-09-19 18:36:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor cat card and cat profile components

Browse Source
This commit is contained in:
Maciej Pędzich 2023-09-16 10:33:24 +02:00
parent be00066d52
commit d63feef43c
3 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/CatCard.astro
View File

@ -28,10 +28,6 @@ const { cat } = Astro.props;
</a> </a>
<style> <style>
a:focus {
outline-width: 5px;
}
.card-link-wrapper { .card-link-wrapper {
color: var(--font-color); color: var(--font-color);
} }
@ -40,6 +36,10 @@ const { cat } = Astro.props;
opacity: 1; opacity: 1;
} }
.card-link-wrapper:focus {
outline-width: 5px;
}
.card { .card {
margin: 0.5rem 0; margin: 0.5rem 0;
padding: 0; padding: 0;
@ -54,25 +54,8 @@ const { cat } = Astro.props;
.image-wrapper { .image-wrapper {
position: relative; position: relative;
overflow: hidden;
width: 100%; width: 100%;
padding: 2rem; padding: 2rem 2rem 0.6rem 2rem;
padding-bottom: 0.6rem;
}
.card h3 {
margin-top: 0;
margin-bottom: 0;
}
.card p {
margin-bottom: 1.25rem;
}
.card img {
display: block;
width: 100%;
object-fit: cover;
} }
.rip-text { .rip-text {
@ -86,4 +69,19 @@ const { cat } = Astro.props;
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
.card img {
display: block;
width: 100%;
object-fit: cover;
}
.card h3 {
margin-top: 0;
margin-bottom: 0;
}
.card p {
margin-bottom: 1.25rem;
}
</style> </style>

16
src/pages/[...page].astro
View File

@ -14,20 +14,20 @@ export async function getStaticPaths() {
(a, b) => b.data.dateAdded.valueOf() - a.data.dateAdded.valueOf() (a, b) => b.data.dateAdded.valueOf() - a.data.dateAdded.valueOf()
); );
const NUM_CATS_PER_PAGE = 18; const CATS_PER_PAGE = 18;
const maxPageNum = Math.ceil(allCats.length / NUM_CATS_PER_PAGE); const maxPageNum = Math.ceil(allCats.length / CATS_PER_PAGE);
// Create an array of integers in range from 1 to maxPageNum inclusive: // Create an array of integers in range from 1 to maxPageNum inclusive:
const allPageNums = [...Array(maxPageNum + 1).keys()].slice(1); const pageNums = [...Array(maxPageNum + 1).keys()].slice(1);
return allPageNums.map((pageNum) => ({ return pageNums.map((pageNum) => ({
params: { page: pageNum === 1 ? undefined : pageNum.toString() }, params: { page: pageNum === 1 ? undefined : pageNum.toString() },
props: { props: {
cats: allCats.slice( cats: allCats.slice(
NUM_CATS_PER_PAGE * (pageNum - 1), CATS_PER_PAGE * (pageNum - 1),
NUM_CATS_PER_PAGE * pageNum CATS_PER_PAGE * pageNum
), ),
pageNums: allPageNums pageNums
} }
})); }));
} }
@ -52,7 +52,7 @@ const currentPageNum = Number(page || '1');
{ {
pageNums.map((num) => ( pageNums.map((num) => (
<a <a
href={`/${num === 1 ? '' : num.toString()}`} href={`/${num === 1 ? '' : num}`}
class:list={[{ active: num === currentPageNum }]} class:list={[{ active: num === currentPageNum }]}
> >
{num} {num}

8
src/pages/cats/[...catId].astro
View File

@ -3,18 +3,20 @@ import { getCollection, type CollectionEntry } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro'; import BaseLayout from '../../layouts/BaseLayout.astro';
type Props = CollectionEntry<'cats'>; export interface Props {
cat: CollectionEntry<'cats'>;
}
export async function getStaticPaths() { export async function getStaticPaths() {
const cats = await getCollection('cats'); const cats = await getCollection('cats');
return cats.map((cat) => ({ return cats.map((cat) => ({
params: { catId: cat.id }, params: { catId: cat.id },
props: cat props: { cat }
})); }));
} }
const cat = Astro.props; const { cat } = Astro.props;
const title = `${cat.data.owner.name}'s ${cat.data.name}`; const title = `${cat.data.owner.name}'s ${cat.data.name}`;
--- ---