Change passed-away class to rip-image

src/components/CatCard.astro

@@ -10,9 +10,9 @@ const { cat } = Astro.props;
 
 <a class="card-link-wrapper" href={`/cats/${cat.id}`}>
   <div class="card is-center">
-    <div class="img-wrapper">
+    <div class="image-wrapper">
       <img
-        class:list={[{ 'passed-away': cat.data.passedAway }]}
+        class:list={[{ 'rip-image': cat.data.passedAway }]}
         src={cat.data.image.src}
         alt={cat.data.image.alt}
         loading="lazy"
@@ -20,7 +20,7 @@ const { cat } = Astro.props;
         width="350"
         height="250"
       />
-      {cat.data.passedAway && <span class="rip">Rest In Peace</span>}
+      {cat.data.passedAway && <div class="rip-text">Rest In Peace</div>}
     </div>
     <h3>{cat.data.name}</h3>
     <p>{cat.data.owner.name}</p>
@@ -28,6 +28,10 @@ const { cat } = Astro.props;
 </a>
 
 <style>
+  a:focus {
+    outline-width: 5px;
+  }
+
   .card-link-wrapper {
     color: var(--font-color);
   }
@@ -36,10 +40,6 @@ const { cat } = Astro.props;
     opacity: 1;
   }
 
-  a:focus {
-    outline-width: 5px;
-  }
-
   .card {
     margin: 0.5rem 0;
     padding: 0;
@@ -52,6 +52,14 @@ const { cat } = Astro.props;
     box-shadow: 0 0 10px var(--color-grey);
   }
 
+  .image-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding: 2rem;
+    padding-bottom: 0.6rem;
+  }
+
   .card h3 {
     margin-top: 0;
     margin-bottom: 0;
@@ -61,22 +69,13 @@ const { cat } = Astro.props;
     margin-bottom: 1.25rem;
   }
 
-  .img-wrapper {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    padding: 2rem;
-    padding-bottom: 0.6rem;
-  }
-
   .card img {
     display: block;
     width: 100%;
     object-fit: cover;
   }
 
-  .card span.rip {
+  .rip-text {
-    display: block;
     position: absolute;
     bottom: 0;
     left: 0;

src/pages/[...page].astro

@@ -10,22 +10,24 @@ export interface Props {
 }
 
 export async function getStaticPaths() {
-  const NUM_CATS_PER_PAGE = 18;
   const allCats = (await getCollection('cats')).sort(
     (a, b) => b.data.dateAdded.valueOf() - a.data.dateAdded.valueOf()
   );
 
+  const NUM_CATS_PER_PAGE = 18;
   const maxPageNum = Math.ceil(allCats.length / NUM_CATS_PER_PAGE);
-  const pageNums = [...Array(maxPageNum).keys()].map((key) => key + 1);
 
-  return pageNums.map((num) => ({
+  // Create an array of integers in range from 1 to maxPageNum inclusive:
-    params: { page: num === 1 ? undefined : num.toString() },
+  const allPageNums = [...Array(maxPageNum + 1).keys()].slice(1);
+
+  return allPageNums.map((pageNum) => ({
+    params: { page: pageNum === 1 ? undefined : pageNum.toString() },
     props: {
       cats: allCats.slice(
-        NUM_CATS_PER_PAGE * (num - 1),
+        NUM_CATS_PER_PAGE * (pageNum - 1),
-        NUM_CATS_PER_PAGE * num
+        NUM_CATS_PER_PAGE * pageNum
       ),
-      pageNums
+      pageNums: allPageNums
     }
   }));
 }

src/pages/cats/[...catId].astro

@@ -32,7 +32,7 @@ const title = `${cat.data.owner.name}'s ${cat.data.name}`;
   <div class="row">
     <div class="col-12 col-6-md">
       <img
-        class:list={[{ 'passed-away': cat.data.passedAway }]}
+        class:list={[{ 'rip-image': cat.data.passedAway }]}
         src={cat.data.image.src}
         alt={cat.data.image.alt}
       />

src/styles/global.css

@@ -22,7 +22,7 @@ button:focus {
   outline: var(--color-primary) solid 3px;
 }
 
-img.passed-away {
+img.rip-image {
   filter: grayscale(100%);
 }