Refactor cat card and cat profile components

src/components/CatCard.astro

@@ -28,10 +28,6 @@ const { cat } = Astro.props;
 </a>
 
 <style>
-  a:focus {
-    outline-width: 5px;
-  }
-
   .card-link-wrapper {
     color: var(--font-color);
   }
@@ -40,6 +36,10 @@ const { cat } = Astro.props;
     opacity: 1;
   }
 
+  .card-link-wrapper:focus {
+    outline-width: 5px;
+  }
+
   .card {
     margin: 0.5rem 0;
     padding: 0;
@@ -54,25 +54,8 @@ const { cat } = Astro.props;
 
   .image-wrapper {
     position: relative;
-    overflow: hidden;
     width: 100%;
-    padding: 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;
+    padding: 2rem 2rem 0.6rem 2rem;
   }
 
   .rip-text {
@@ -86,4 +69,19 @@ const { cat } = Astro.props;
     color: #fff;
     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>

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

@@ -14,20 +14,20 @@ export async function getStaticPaths() {
     (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 CATS_PER_PAGE = 18;
+  const maxPageNum = Math.ceil(allCats.length / CATS_PER_PAGE);
 
   // 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() },
     props: {
       cats: allCats.slice(
-        NUM_CATS_PER_PAGE * (pageNum - 1),
-        NUM_CATS_PER_PAGE * pageNum
+        CATS_PER_PAGE * (pageNum - 1),
+        CATS_PER_PAGE * pageNum
       ),
-      pageNums: allPageNums
+      pageNums
     }
   }));
 }
@@ -52,7 +52,7 @@ const currentPageNum = Number(page || '1');
       {
         pageNums.map((num) => (
           <a
-            href={`/${num === 1 ? '' : num.toString()}`}
+            href={`/${num === 1 ? '' : num}`}
             class:list={[{ active: num === currentPageNum }]}
           >
             {num}

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

@@ -3,18 +3,20 @@ import { getCollection, type CollectionEntry } from 'astro:content';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
-type Props = CollectionEntry<'cats'>;
+export interface Props {
+  cat: CollectionEntry<'cats'>;
+}
 
 export async function getStaticPaths() {
   const cats = await getCollection('cats');
 
   return cats.map((cat) => ({
     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}`;
 ---