blog card section in cheerp and cheerpx, correctedncolours and filter

leaningtech · Dec 17, 2024 · c1760e3 · c1760e3
1 parent 12a4f4f
commit c1760e3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
diff --git a/packages/astro-theme/components/BlogPostCard.astro b/packages/astro-theme/components/BlogPostCard.astro
@@ -3,6 +3,9 @@ import { getEntry, type CollectionEntry } from "astro:content";
 import FormattedDate from "./FormattedDate.astro";
 import { resolveAuthors } from "../lib/blog";
 import { Image } from "astro:assets";
+import { productFromUrl } from "../lib/products";
+
+const product = productFromUrl(Astro.url);
 
 interface Props {
 	post: CollectionEntry<"blog"> | CollectionEntry<"blog">["slug"];
@@ -16,6 +19,10 @@ const post =
 		? await getEntry("blog", postOrSlug)
 		: postOrSlug;
 const authors = await resolveAuthors(post.data.authors);
+
+//choose hover link color based on product
+const productName = typeof product === "undefined"? "Labs": product.name;
+
 ---
 
 <a
@@ -35,7 +42,10 @@ const authors = await resolveAuthors(post.data.authors);
 	}
 	<h3
 		class:list={{
-			"font-bold text-balance text-white group-hover:text-primary-400 grow": true,
+			"font-bold text-balance text-white grow": true,
+			"group-hover:text-cheerp grow": productName === "Cheerp",
+			"group-hover:text-[#6386a5] grow": productName === "CheerpX",
+			"group-hover:text-primary-400 grow": productName === "Labs",
 			"text-2xl leading-7": size === "wide",
 			"text-xl leading-6": size === "narrow",
 		}}

diff --git a/packages/astro-theme/components/BlogPostCardSet.astro b/packages/astro-theme/components/BlogPostCardSet.astro
@@ -15,6 +15,7 @@ interface Props {
 
 const { tags, exclude } = Astro.props;
 const product = productFromUrl(Astro.url);
+const productName = typeof product === "undefined"? "Labs": product.name;
 
 
 function sortCalc(post: CollectionEntry<"blog">): number {
@@ -30,10 +31,13 @@ function sortCalc(post: CollectionEntry<"blog">): number {
 
 const posts = (
 	await getCollection("blog", (post) => {
-		if (post.data.draft || exclude?.includes(post.id) || !post.data?.tags?.includes(product.name)) {
+		if (post.data.draft || exclude?.includes(post.id) || !(post.data?.tags?.includes(productName) || productName === "Labs")) {
 			return false;
+			
+		} else {
+			return true;
 		}
-		return true;
+		
 	})
 )
 	.sort((a, b) => sortCalc(b) - sortCalc(a))

diff --git a/sites/cheerp/src/pages/index.astro b/sites/cheerp/src/pages/index.astro
@@ -182,20 +182,23 @@ import BlogPostCardSet from "@leaningtech/astro-theme/components/BlogPostCardSet
 			</div>
 		</div>
 	</section>
-	<section class="w-full max-w-screen-2xl mx-auto px-6 py-10">
-		<div class="mb-8">
-			<p class="text-lg text-stone-400">CheerpX blog</p>
-			<h2 class="text-4xl font-bold text-white">Latest news</h2>
-		</div>
-		<BlogPostCardSet/>
-		<div class="mt-8">
-			<LinkButton
-				type="cheerpx-secondary"
-				href="/blog"
-				label="View all blog posts"
-				iconRight="mi:arrow-right"
-			/>
+	<section class="bg-stone-900 py-16">
+		<div class="px-4 sm:p-8 md:px-16 lg:px-32 xl:px-56 2xl:px-60">
+			<div class="mb-8">
+				<p class="text-lg text-stone-400">Cheerp blog</p>
+				<h2 class="text-4xl font-bold text-white">Latest news</h2>
+			</div>
+			<BlogPostCardSet/>
+			<div class="mt-8">
+				<LinkButton
+					type="secondary-cheerp"
+					href="/blog"
+					label="View all blog posts"
+					iconRight="mi:arrow-right"
+				/>
+			</div>
 		</div>
+
 	</section>
 	<section
 		class="bg-gradient-to-b from-stone-900 to-[#474484] pb-48 text-center pb-28 md:px-8 md:pt-16 lg:px-32 lg:pt-32 xl:pt-42 xl:px-28 2xl:px-60 2xl:pt-60"

diff --git a/sites/cheerpx/src/pages/index.astro b/sites/cheerpx/src/pages/index.astro
@@ -214,20 +214,23 @@ import BlogPostCardSet from "@leaningtech/astro-theme/components/BlogPostCardSet
 			</div>
 		</div>
 	</section>
-	<section class="w-full max-w-screen-2xl mx-auto px-6 py-10">
-		<div class="mb-8">
-			<p class="text-lg text-stone-400">CheerpX blog</p>
-			<h2 class="text-4xl font-bold text-white">Latest news</h2>
-		</div>
-		<BlogPostCardSet tags = "CheerpX"/>
-		<div class="mt-8">
-			<LinkButton
-				type="cheerpx-secondary"
-				href="/blog"
-				label="View all blog posts"
-				iconRight="mi:arrow-right"
-			/>
+	<section class="bg-black py-16">
+		<div class="px-4 sm:p-8 md:px-16 lg:px-32 xl:px-56 2xl:px-60">
+			<div class="mb-8">
+				<p class="text-lg text-stone-400">CheerpX blog</p>
+				<h2 class="text-4xl font-bold text-white">Latest news</h2>
+			</div>
+			<BlogPostCardSet/>
+			<div class="mt-8">
+				<LinkButton
+					type="secondary-cheerpx"
+					href="/blog"
+					label="View all blog posts"
+					iconRight="mi:arrow-right"
+				/>
+			</div>
 		</div>
+
 	</section>
 	<section
 		class="bg-gradient-to-b from-black to-[#00254d] pb-48 text-center pb-28 md:px-8 md:pt-16 lg:px-32 pt-12 lg:pt-32 xl:pt-42 xl:px-28 2xl:px-60 2xl:pt-60"