feat(app): #4 Implement Recommendation & Reading Status tags for books

Closes: #4
djsiddz · Dec 30, 2023 · 13045bd · 13045bd
1 parent 7a3789a
commit 13045bd
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 4 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -5,13 +5,35 @@ interface Props {
   body: string;
   href: string;
   image: string;
+  readingStatus: string;
+  recommended: boolean;
 }
 
-const { href, title, subtitle, body, image } = Astro.props;
+let tagBasedCSS = "";
+
+const { href, title, subtitle, body, image, readingStatus, recommended } = Astro.props;
+
+switch (readingStatus) {
+  case "Read ✅":
+    tagBasedCSS = "greenTag";
+    break;
+  case "Currently Reading 👓":
+    tagBasedCSS = "blueTag";
+    break;
+  case "Next Up ⏭️":
+    tagBasedCSS = "blueTag";
+    break;
+  case "Wishlisted ⭐":
+    tagBasedCSS = "orangeTag";
+    break;
+  default:
+    break;
+}
 ---
 
 <li class="link-card">
   <div class="bookDetails">
+    {recommended ? <div class="tag yellowTag">Recommended 👍</div> : <div class={"tag " + tagBasedCSS}>{readingStatus}</div>}
     <img src={image} alt={title + " Cover"} />
     <h3>{title}<br/><span>{subtitle}</span></h3>
     <!-- <p class="bookDescription">{body}</p> -->
@@ -88,4 +110,36 @@ const { href, title, subtitle, body, image } = Astro.props;
   .link-card:is(:hover, :focus-within) h2 {
     color: var(--text);
   }
+  .tag {
+    background-color: var(--bg);
+    border-radius: 0.75rem;
+    border: 1px solid var(--buttonText);
+    color: var(--buttonText);
+    font-size: 0.625rem;
+    padding: 0.25rem 0.625rem;
+    position: absolute;
+    right: -0.5rem;
+    top: 1rem;
+    width: max-content;
+  }
+  .primaryTag {
+    border-color: var(--primary);
+    color: var(--primary);
+  }
+  .blueTag {
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+  .greenTag {
+    border-color: var(--green);
+    color: var(--green);
+  }
+  .yellowTag {
+    border-color: var(--yellow);
+    color: var(--text);
+  }
+  .orangeTag {
+    border-color: #e9892d;
+    color: #e9892d;
+  }
 </style>
diff --git a/src/content/books/book-1.mdx b/src/content/books/book-1.mdx
@@ -8,5 +8,6 @@ printLength: 448
 coverImage: "https://ws-in.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0134757599&Format=_SL160_&ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=supersiddy-21&language=en_IN"
 amazonINLink: "https://www.amazon.in/Refactoring-Improving-Existing-Addison-wesley-Signature/dp/0134757599?pd_rd_w=luoZ6&content-id=amzn1.sym.fa697102-547e-425b-bc67-26478c036f29&pf_rd_p=fa697102-547e-425b-bc67-26478c036f29&pf_rd_r=V6E3H98SRB9AFG5KVQ9Q&pd_rd_wg=YzShR&pd_rd_r=dc09bacd-33b8-468c-bbc5-878de6937380&pd_rd_i=0134757599&psc=1&linkCode=li2&tag=supersiddy-21&linkId=27516fb0a464b93ab985001528ca43fc&language=en_IN&ref_=as_li_ss_il"
 description: "Unlock the secrets of code craftsmanship, your guide to transforming messy code into elegant software artistry."
+readingStatus: "Next Up ⏭️"
 slug: "refactoring"
 ---
diff --git a/src/content/books/book-2.mdx b/src/content/books/book-2.mdx
@@ -7,6 +7,7 @@ publicationDate: "2017-09-25"
 printLength: 464
 coverImage: "https://ws-in.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0132350882&Format=_SL160_&ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=supersiddy-21&language=en_IN"
 amazonINLink: "https://www.amazon.in/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=supersiddy-21&linkId=fc4554150f70b00b27d3cb626dcd290a&language=en_IN&ref_=as_li_ss_il"
-description: "Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees."
+description: "Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. But it doesn’t have to be that way."
+readingStatus: "Wishlisted ⭐"
 slug: "clean-code"
 ---
diff --git a/src/content/books/book-3.mdx b/src/content/books/book-3.mdx
@@ -8,5 +8,7 @@ printLength: 368
 coverImage: "https://ws-in.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=0007547994&Format=_SL160_&ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=supersiddy-21&language=en_IN"
 amazonINLink: "https://amzn.to/48pn174"
 description: "A fascinating exploration of how computer algorithms can be applied to our everyday lives.What should we do, or leave undone, in a day or a lifetime?"
+readingStatus: "Wishlisted ⭐"
+recommended: true
 slug: "algorithms-to-live-by"
 ---
diff --git a/src/content/books/book-4.mdx b/src/content/books/book-4.mdx
@@ -8,5 +8,6 @@ printLength: 321
 coverImage: "https://ws-in.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=9353949432&Format=_SL160_&ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=supersiddy-21&language=en_IN"
 amazonINLink: "https://www.amazon.in/Pragmatic-Programmer-Anniversary-journey-mastery/dp/9353949432?psc=1&linkCode=li3&tag=supersiddy-21&linkId=5076f0da0479d446270fa2edc1c50cae&language=en_IN&ref_=as_li_ss_il"
 description: "Supercharge your project with new frameworks and libraries."
+readingStatus: "Wishlisted ⭐"
 slug: "pragmatic-programmer"
 ---
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,5 +1,6 @@
 // 1. Import utilities from `astro:content`
 import { defineCollection, z } from 'astro:content';
+
 // 2. Define your collection(s)
 const booksCollection = defineCollection({
   type: "content",
@@ -12,7 +13,9 @@ const booksCollection = defineCollection({
     printLength: z.number(),
     amazonINLink: z.string(),
     coverImage: z.string(),
-    description: z.string()
+    description: z.string(),
+    readingStatus: z.enum(["Currently Reading 👓", "Read ✅", "Wishlisted ⭐", "Next Up ⏭️"]).optional(),
+    recommended: z.boolean().optional()
   })
 });
 // 3. Export a single `collections` object to register your collection(s)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -47,6 +47,10 @@ const { title } = Astro.props;
 			--header-gradient:linear-gradient(45deg, var(--white) 0%, var(--primary) 30%);
 			--book-card-gradient: linear-gradient(45deg, var(--accentDark), var(--primary) 60%);
 			--boxShadow: 0px -3px 3px 0px rgba(255,255,255,0.25);
+			/* other colors */
+			--yellow: #e9a92d;
+			--blue: #2de9e7;
+			--green: #8de92d;
 		}
 		img {
 			filter: brightness(.8) contrast(1.2);
@@ -67,6 +71,10 @@ const { title } = Astro.props;
 			--header-gradient: linear-gradient(45deg, var(--black) 0%, var(--primary) 30%);
 			--book-card-gradient: linear-gradient(45deg, var(--white), var(--accentLight) 60%);
 			--boxShadow: 0px -4px 12px 0px rgba(0,0,0,0.5);
+			/* other colors */
+			--yellow: #e9c82d;
+			--blue: #2d8de9;
+			--green: #42880f;
 		}
 	}
 	html {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -38,7 +38,7 @@ const booksCollection = await getCollection('books');
 			<p>Kindle editions too are available for most of these.</p>
 			<ul role="list" class="booksGrid">
 				{booksCollection.map(book => (
-					<Card href={book.data.amazonINLink} title={book.data.title} subtitle={book.data.subtitle} body={book.data.description} image={book.data.coverImage} />
+					<Card href={book.data.amazonINLink} title={book.data.title} subtitle={book.data.subtitle} body={book.data.description} image={book.data.coverImage} readingStatus={book.data.readingStatus || ""} recommended={book.data.recommended || false} />
 					))}
 			</ul>
 			<p class="affiliateDisclaimer">This collection contains affiliate links. This means I may earn a commission should you make a purchase using my links.<br/>Thank you for supporting me & my work! 😊</p>